feat(sandpack): codeViewer

pmndrs · Nov 5, 2024 · ad556d0 · ad556d0
1 parent 65ab7f4
commit ad556d0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
@@ -444,6 +444,31 @@ You can also pass [any `fileExplorer={options: ComponentProps<SandpackFileExplor
 
 You can pass [any `codeEditor={options: ComponentProps<SandpackCodeEditor>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-editor:~:text=Preview-,Options,-Extensions).
 
+#### `Sandpack[codeViewer]`
+
+It will render the [`SandpackCodeViewer`](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-viewer) instead of the default [`SandpackCodeEditor`](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-editor).
+
+```tsx
+<Sandpack
+  template="react-ts"
+  folder="authoring-sandpack-cloud"
+  codeViewer
+/>
+```
+
+<details>
+  <summary>Result</summary>
+
+<Sandpack
+  template="react-ts"
+  folder="authoring-sandpack-cloud"
+  codeViewer
+/>
+
+</details>
+
+You can also pass [any `codeViewer={options: ComponentProps<SandpackCodeViewer>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-viewer:~:text=Preview-,Options,-CodeMirror%20decorations).
+
 #### `Sandpack[preview]`
 
 You can pass [any `preview={options: ComponentProps<SandpackPreview>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#preview:~:text=Preview-,Options,-Additional%20buttons).

diff --git a/src/components/mdx/Sandpack/Sandpack.tsx b/src/components/mdx/Sandpack/Sandpack.tsx
@@ -2,6 +2,7 @@ import cn from '@/lib/cn'
 import { crawl } from '@/utils/docs'
 import {
   SandpackCodeEditor,
+  SandpackCodeViewer,
   SandpackFileExplorer,
   SandpackLayout,
   SandpackPreview,
@@ -63,12 +64,14 @@ export const Sandpack = async ({
   folder,
   fileExplorer,
   codeEditor,
+  codeViewer,
   preview,
   ...props
 }: SandpackProviderProps & {
   className?: string
   folder?: string
   codeEditor?: ComponentProps<typeof SandpackCodeEditor>
+  codeViewer?: boolean | ComponentProps<typeof SandpackCodeViewer>
   preview?: ComponentProps<typeof SandpackPreview>
   fileExplorer?: boolean | ComponentProps<typeof SandpackFileExplorer>
 }) => {
@@ -115,7 +118,12 @@ export const Sandpack = async ({
               {...(typeof fileExplorer !== 'boolean' ? fileExplorer : undefined)}
             />
           )}
-          <SandpackCodeEditor showTabs={fileExplorer ? false : undefined} {...codeEditor} />
+          {codeViewer ? (
+            <SandpackCodeViewer {...(typeof codeViewer !== 'boolean' ? codeViewer : undefined)} />
+          ) : (
+            <SandpackCodeEditor showTabs={fileExplorer ? false : undefined} {...codeEditor} />
+          )}
+
           <SandpackPreview {...preview} />
         </SandpackLayout>
       </SandpackProvider>