fix(codemirror): watch extensions changes from props (#469)

codesandbox · May 25, 2022 · 10ac96a · 10ac96a
1 parent eca9f5b
commit 10ac96a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx
@@ -59,17 +59,25 @@ export const ClosableTabs: React.FC = () => (
   </SandpackProvider>
 );
 
-export const ExtensionAutocomplete: React.FC = () => (
-  <SandpackProvider template="react">
-    <SandpackThemeProvider>
-      <SandpackCodeEditor
-        extensions={[autocompletion()]}
-        extensionsKeymap={[completionKeymap]}
-        id="extensions"
-      />
-    </SandpackThemeProvider>
-  </SandpackProvider>
-);
+export const ExtensionAutocomplete: React.FC = () => {
+  const [active, setActive] = React.useState(false);
+  return (
+    <>
+      <button onClick={(): void => setActive((prev): boolean => !prev)}>
+        Toggle
+      </button>
+      <SandpackProvider template="react">
+        <SandpackThemeProvider>
+          <SandpackCodeEditor
+            extensions={active ? [autocompletion()] : []}
+            extensionsKeymap={active ? [completionKeymap] : []}
+            id="extensions"
+          />
+        </SandpackThemeProvider>
+      </SandpackProvider>
+    </>
+  );
+};
 
 export const ReadOnly: React.FC = () => {
   return (

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -11,7 +11,7 @@ import { lineNumbers } from "@codemirror/gutter";
 import { defaultHighlightStyle } from "@codemirror/highlight";
 import { history, historyKeymap } from "@codemirror/history";
 import { bracketMatching } from "@codemirror/matchbrackets";
-import { EditorState, EditorSelection } from "@codemirror/state";
+import { EditorState, EditorSelection, StateEffect } from "@codemirror/state";
 import type { Annotation, Extension } from "@codemirror/state";
 import {
   highlightSpecialChars,
@@ -295,6 +295,25 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       readOnly,
     ]);
 
+    React.useEffect(
+      function applyExtensions() {
+        const view = cmView.current;
+
+        if (view) {
+          view.dispatch({
+            effects: StateEffect.appendConfig.of(extensions),
+          });
+
+          view.dispatch({
+            effects: StateEffect.appendConfig.of(
+              keymap.of([...extensionsKeymap] as unknown as KeyBinding[])
+            ),
+          });
+        }
+      },
+      [extensions, extensionsKeymap]
+    );
+
     React.useEffect(() => {
       // When the user clicks on a tab button on a larger screen
       // Avoid autofocus on mobile as it leads to a bad experience and an unexpected layout shift

diff --git a/sandpack-react/src/contexts/sandpackContext.test.tsx b/sandpack-react/src/contexts/sandpackContext.test.tsx
@@ -1,7 +1,8 @@
 import React from "react";
+import { create } from "react-test-renderer";
+
 import { SandpackProvider } from "./sandpackContext";
 
-import { create } from "react-test-renderer";
 describe(SandpackProvider, () => {
   it("updates a file", () => {
     const root = create(<SandpackProvider template="react" />);

diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -14,8 +14,8 @@ import {
 } from "@codesandbox/sandpack-client";
 import isEqual from "lodash.isequal";
 import * as React from "react";
-import { SandpackFiles } from "..";
 
+import type { SandpackFiles } from "..";
 import type {
   SandpackContext,
   SandboxEnvironment,