fix(code editor): remount when readOnly change (#1179)

* fix(code editor): remount when readOnly change

* fix: remove console

Author: danilowoz

sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx

@@ -8,7 +8,8 @@ import { SandpackProvider } from "../../contexts/sandpackContext";
 
 import * as mocks from "./languages-mocks";
 
-import { CodeEditor } from "./index";
+import { CodeEditor, SandpackCodeEditor } from "./index";
+import { useSandpack } from "../../hooks";
 const stories = storiesOf("components/CodeMirror", module);
 
 Object.entries(mocks).forEach(([languageName, mockFile]) =>
@@ -24,6 +25,37 @@ Object.entries(mocks).forEach(([languageName, mockFile]) =>
   ))
 );
 
+stories.add("Ready only", () => {
+  return (
+    <>
+      <SandpackProvider
+        files={{
+          "/index.js": {
+            code: 'const title = "This is a simple code editor"',
+          },
+        }}
+      >
+        <ReadOnlyEditor />
+      </SandpackProvider>
+    </>
+  );
+});
+
+const ReadOnlyEditor = () => {
+  const [isReadOnly, setIsReadOnly] = React.useState(false);
+  const { sandpack } = useSandpack();
+
+  return (
+    <>
+      <button onClick={() => setIsReadOnly(!isReadOnly)} type="button">
+        Toggle read only ({isReadOnly ? "true" : "false"})
+      </button>
+      <SandpackCodeEditor readOnly={isReadOnly} />
+      <pre>{JSON.stringify(sandpack.files, null, 2)}</pre>
+    </>
+  );
+};
+
 stories.add("CustomLanguageShell", () => (
   <SandpackProvider>
     <CodeEditor

sandpack-react/src/components/CodeEditor/CodeMirror.tsx

@@ -184,7 +184,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
     );
 
     React.useEffect(() => {
-      if (!wrapper.current || !shouldInitEditor) return;
+      if (!wrapper.current || !shouldInitEditor || readOnly) return;
 
       const parentDiv = wrapper.current;
       const existingPlaceholder = parentDiv.querySelector(
@@ -198,16 +198,6 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         doc: code,
         extensions: [],
         parent: parentDiv,
-        dispatch: (tr): void => {
-          view.update([tr]);
-
-          if (tr.docChanged) {
-            const newCode = tr.newDoc.sliceString(0, tr.newDoc.length);
-
-            setInternalCode(newCode);
-            onCodeUpdate?.(newCode);
-          }
-        },
       });
 
       view.contentDOM.setAttribute("data-gramm", "false");
@@ -216,23 +206,18 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         "aria-label",
         filePath ? `Code Editor for ${getFileName(filePath)}` : `Code Editor`
       );
-
-      if (readOnly) {
-        view.contentDOM.classList.add("cm-readonly");
-      } else {
-        view.contentDOM.setAttribute("tabIndex", "-1");
-      }
+      view.contentDOM.setAttribute("tabIndex", "-1");
 
       cmView.current = view;
 
       return (): void => {
         cmView.current?.destroy();
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shouldInitEditor]);
+    }, [shouldInitEditor, readOnly]);
 
     React.useEffect(() => {
-      if (cmView.current) {
+      if (cmView.current && !readOnly) {
         const customCommandsKeymap: KeyBinding[] = [
           {
             key: "Tab",
@@ -294,6 +279,15 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
 
           getEditorTheme(),
           syntaxHighlighting(highlightTheme),
+
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              const newCode = update.state.doc.toString();
+
+              setInternalCode(newCode);
+              onCodeUpdate?.(newCode);
+            }
+          }),
         ];
 
         if (readOnly) {