fix: Update CodeMirror View when autoReload changed (#1059)

codesandbox · Jan 17, 2024 · 782c0c7 · 782c0c7 · vercel · Jan 17, 2024
1 parent 082b622
commit 782c0c7
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -131,7 +131,10 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
     );
 
     const classNames = useClassNames();
-    const { listen } = useSandpack();
+    const {
+      listen,
+      sandpack: { autoReload },
+    } = useSandpack();
 
     const prevExtension = React.useRef<Extension[]>([]);
     const prevExtensionKeymap = React.useRef<KeyBinding[]>([]);
@@ -319,6 +322,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       themeId,
       sortedDecorators,
       readOnly,
+      autoReload,
     ]);
 
     React.useEffect(

diff --git a/sandpack-react/src/presets/CustomSandpack.stories.tsx b/sandpack-react/src/presets/CustomSandpack.stories.tsx
@@ -20,6 +20,9 @@ import {
   SandpackStack,
   UnstyledOpenInCodeSandboxButton,
   SandpackFileExplorer,
+  SandpackConsumer,
+  CodeEditor,
+  type SandpackContext,
 } from "../";
 import { useSandpack } from "../hooks/useSandpack";
 
@@ -39,6 +42,69 @@ export const UsingSandpackLayout: React.FC = () => (
   </SandpackProvider>
 );
 
+export const UsingMultipleEditor: React.FC = (props) => {
+  const [isAutoReload, setAutoReload] = React.useState(true);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "500px",
+      }}
+    >
+      <SandpackProvider
+        {...props}
+        options={{ initMode: "immediate", autoReload: isAutoReload }}
+        template="static"
+      >
+        <SandpackConsumer>
+          {(context: SandpackContext | null) => {
+            if (!context) return <></>;
+
+            const { files, updateFile, autoReload } = context;
+            const fileListValues = Object.values(files);
+            const fileListKeys = Object.keys(files);
+
+            return (
+              <SandpackLayout>
+                <SandpackStack style={{ padding: "10px 0" }}>
+                  <CodeEditor
+                    code={fileListValues[0].code}
+                    filePath={fileListKeys[0]}
+                    initMode="immediate"
+                    onCodeUpdate={(newCode) => {
+                      updateFile(fileListKeys[0], newCode, autoReload);
+                    }}
+                  />
+                </SandpackStack>
+
+                <SandpackStack style={{ padding: "10px 0" }}>
+                  <CodeEditor
+                    code={fileListValues[1].code}
+                    filePath={fileListKeys[1]}
+                    initMode="immediate"
+                    onCodeUpdate={(newCode) => {
+                      updateFile(fileListKeys[1], newCode, autoReload);
+                    }}
+                  />
+                </SandpackStack>
+
+                <SandpackPreview
+                  actionsChildren={
+                    <button onClick={() => setAutoReload((prev) => !prev)}>
+                      Toggle autoReload to {JSON.stringify(!autoReload)}
+                    </button>
+                  }
+                />
+              </SandpackLayout>
+            );
+          }}
+        </SandpackConsumer>
+      </SandpackProvider>
+    </div>
+  );
+};
+
 export const UsingVisualElements: React.FC = () => (
   <SandpackProvider options={{ activeFile: "/App.js" }} template="react">
     <SandpackThemeProvider>