From ad556d09e746cb10b4a2db2185f9896be047a171 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Tue, 5 Nov 2024 10:27:23 +0100
Subject: [PATCH] feat(sandpack): codeViewer

---
 docs/getting-started/authoring.mdx       | 25 ++++++++++++++++++++++++
 src/components/mdx/Sandpack/Sandpack.tsx | 10 +++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index 3e112c34..407305a7 100644
--- 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
index 0c177bb4..739f4e69 100644
--- 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>