feat: support Sandpack pane configuration

Fixes #25 Squashed commit of the following: commit 59ea6a7d78718a02b10e536b72cf4ef81bbcca39 Author: Petyo Ivanov <[email protected]> Date: Sun Jul 23 08:11:07 2023 +0300 fix: hide console by default commit a203c13 Author: David Peter <[email protected]> Date: Sat Jul 22 20:15:34 2023 +0200 fix: remove unecessary `readonly` option commit e00f62a Author: David Peter <[email protected]> Date: Sat Jul 22 19:44:30 2023 +0200 draft: make panes configurable in SandpackEditor
mdx-editor · Jul 23, 2023 · a93d5d3 · a93d5d3
1 parent 24bb110
commit a93d5d3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/system/Sandpack.ts b/src/system/Sandpack.ts
@@ -68,6 +68,18 @@ export interface SandpackConfig {
    * The list of sandpack presets that can be used.
    */
   presets: Array<SandpackPreset>
+
+  /**
+   * The list of sandpack panes to be displayed.
+   */
+  panes?: {
+    /** the console pane, off by defult */
+    console?: boolean
+    /** the preview pane, on by defult */
+    preview?: boolean
+    /** the tests pane, on by defult */
+    tests?: boolean
+  }
 }
 
 const defaultSnippetContent = `

diff --git a/src/ui/NodeDecorators/SandpackEditor.tsx b/src/ui/NodeDecorators/SandpackEditor.tsx
@@ -1,4 +1,12 @@
-import { SandpackCodeEditor, SandpackLayout, SandpackPreview, SandpackProvider, useSandpack } from '@codesandbox/sandpack-react'
+import {
+  SandpackCodeEditor,
+  SandpackConsole,
+  SandpackLayout,
+  SandpackPreview,
+  SandpackProvider,
+  SandpackTests,
+  useSandpack
+} from '@codesandbox/sandpack-react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import React from 'react'
 import { useEmitterValues, usePublisher } from '../../system/EditorSystemComponent'
@@ -65,7 +73,13 @@ export const SandpackEditor = ({ nodeKey, code, meta, onChange, focusEmitter }:
     >
       <SandpackLayout>
         <SandpackCodeEditor showLineNumbers showInlineErrors ref={codeMirrorRef} />
-        <SandpackPreview />
+
+        {/*show console and tests if explicitly set */}
+        {config.panes?.console ? <SandpackConsole /> : null}
+        {config.panes?.tests ? <SandpackTests /> : null}
+
+        {/*show preview by default */}
+        {config.panes?.preview === false ? null : <SandpackPreview />}
       </SandpackLayout>
       <CodeUpdateEmitter onChange={wrappedOnChange} snippetFileName={preset.snippetFileName} />
     </SandpackProvider>