fix(docs): update sandpack version (#1162)

* fix(docs): update sandpack version * wip * update PR template
codesandbox · Jul 11, 2024 · 55cb609 · 55cb609
1 parent fdd833a
commit 55cb609
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 25 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,21 +1,5 @@
 ## What kind of change does this pull request introduce?
 
-<!-- Is it a Bug fix, feature, documentation update... -->
-
-## What is the current behavior?
-
-<!-- You can also link to an open issue here -->
-
-## What is the new behavior?
-
-<!-- if this is a feature change -->
-
-## What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.
-
-1. Step A
-2. Step B
-3. Step C
-
 ## Checklist
 
 <!-- Have you done all of these things?  -->
@@ -27,6 +11,5 @@
 - [ ] Tests;
 - [ ] Ready to be merged;
 
-
 <!-- feel free to add additional comments -->
 <!-- Thank you for contributing! -->
diff --git a/website/docs/package.json b/website/docs/package.json
@@ -12,7 +12,7 @@
     "test-docs": "alex pages/**/"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.0.1",
+    "@codesandbox/sandpack-react": "^2.18.0",
     "@codesandbox/sandpack-themes": "^2.0.1",
     "@radix-ui/react-tabs": "^1.0.1",
     "amplitude-js": "^8.13.0",

diff --git a/website/docs/src/components/CodeBlock.tsx b/website/docs/src/components/CodeBlock.tsx
@@ -7,6 +7,7 @@ import {
   SandpackProvider,
   useSandpack,
 } from "@codesandbox/sandpack-react";
+import type { SandpackOptions } from "@codesandbox/sandpack-react";
 import { sandpackDark } from "@codesandbox/sandpack-themes";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -31,11 +32,11 @@ const ListenerResize: React.FC<{ onResize: (height: number) => void }> = ({
   return null;
 };
 
-export const CodeBlock: React.FC<{ children: string; stack: boolean }> = ({
-  children,
-  stack,
-  ...props
-}) => {
+export const CodeBlock: React.FC<{
+  children: string;
+  stack: boolean;
+  options?: SandpackOptions;
+}> = ({ children, stack, ...props }) => {
   const { theme } = useTheme();
   const [height, setHeight] = useState(150);
 
@@ -54,7 +55,7 @@ export const CodeBlock: React.FC<{ children: string; stack: boolean }> = ({
   const sandpackProps = {
     customSetup: {
       dependencies: {
-        "@codesandbox/sandpack-react": "latest",
+        "@codesandbox/sandpack-react": "2.18.0",
         "@codesandbox/sandpack-themes": "latest",
       },
     },
@@ -63,7 +64,7 @@ export const CodeBlock: React.FC<{ children: string; stack: boolean }> = ({
     },
     template: "react" as const,
     theme: getTheme(),
-    options: { showLineNumbers: true, initMode: "immediate" },
+    options: { showLineNumbers: true, initMode: "immediate", ...props.options },
     key: children,
     ...props,
   } as any;