Playground: Allow hide input and output (#10184)

Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>

website/playground/EditorState.js

@@ -12,11 +12,15 @@ export default class extends React.Component {
       showDoc: false,
       showComments: false,
       showSecondFormat: false,
+      showInput: true,
+      showOutput: true,
       toggleSidebar: () => this.setState(stateToggler("showSidebar")),
       toggleAst: () => this.setState(stateToggler("showAst")),
       toggleDoc: () => this.setState(stateToggler("showDoc")),
       toggleComments: () => this.setState(stateToggler("showComments")),
       toggleSecondFormat: () => this.setState(stateToggler("showSecondFormat")),
+      toggleInput: () => this.setState(stateToggler("showInput")),
+      toggleOutput: () => this.setState(stateToggler("showOutput")),
       ...storage.get("editor_state"),
     };
   }

website/playground/Playground.js

@@ -220,6 +220,11 @@ class Playground extends React.Component {
                         </Button>
                       </SidebarCategory>
                       <SidebarCategory title="Debug">
+                        <Checkbox
+                          label="show input"
+                          checked={editorState.showInput}
+                          onChange={editorState.toggleInput}
+                        />
                         <Checkbox
                           label="show AST"
                           checked={editorState.showAst}
@@ -237,6 +242,11 @@ class Playground extends React.Component {
                             onChange={editorState.toggleComments}
                           />
                         )}
+                        <Checkbox
+                          label="show output"
+                          checked={editorState.showOutput}
+                          onChange={editorState.toggleOutput}
+                        />
                         <Checkbox
                           label="show second format"
                           checked={editorState.showSecondFormat}
@@ -257,16 +267,18 @@ class Playground extends React.Component {
                       </div>
                     </Sidebar>
                     <div className="editors">
-                      <InputPanel
-                        mode={util.getCodemirrorMode(options.parser)}
-                        ruler={options.printWidth}
-                        value={content}
-                        codeSample={getCodeSample(options.parser)}
-                        overlayStart={options.rangeStart}
-                        overlayEnd={options.rangeEnd}
-                        onChange={this.setContent}
-                        onSelectionChange={this.setSelection}
-                      />
+                      {editorState.showInput ? (
+                        <InputPanel
+                          mode={util.getCodemirrorMode(options.parser)}
+                          ruler={options.printWidth}
+                          value={content}
+                          codeSample={getCodeSample(options.parser)}
+                          overlayStart={options.rangeStart}
+                          overlayEnd={options.rangeEnd}
+                          onChange={this.setContent}
+                          onSelectionChange={this.setSelection}
+                        />
+                      ) : null}
                       {editorState.showAst ? (
                         <DebugPanel
                           value={debug.ast || ""}
@@ -282,11 +294,13 @@ class Playground extends React.Component {
                           autoFold={util.getAstAutoFold(options.parser)}
                         />
                       ) : null}
-                      <OutputPanel
-                        mode={util.getCodemirrorMode(options.parser)}
-                        value={formatted}
-                        ruler={options.printWidth}
-                      />
+                      {editorState.showOutput ? (
+                        <OutputPanel
+                          mode={util.getCodemirrorMode(options.parser)}
+                          value={formatted}
+                          ruler={options.printWidth}
+                        />
+                      ) : null}
                       {editorState.showSecondFormat ? (
                         <OutputPanel
                           mode={util.getCodemirrorMode(options.parser)}