fix(readonly): toggle remounting (#456)

cypress/integration/Issues.spec.js

@@ -0,0 +1,20 @@
+describe("Issue", () => {
+  it("toggles read-only mode (#454)", () => {
+    cy.viewport(600, 1000).visit(
+      `/iframe.html?id=bug-reports-issues--issue-454`
+    );
+
+    // 1. it's editable
+    cy.get(".cm-content").should("have.attr", "contenteditable", "true");
+
+    // 2. click on button and set read-only as true
+    cy.get(".trigger").click();
+
+    // 3. it's not editable
+    cy.get(".cm-content").should("have.attr", "contenteditable", "false");
+
+    // 4. make sure the editor is mount
+    cy.get(".cm-editor").should("exist");
+    cy.get(".pre-placeholder").should("not.exist");
+  });
+});

sandpack-react/src/Issues.stories.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+
+import { Sandpack } from "./";
+
+export default {
+  title: "Bug reports/Issues",
+};
+
+export const Issue454 = (): JSX.Element => {
+  const [readOnly, setReadOnly] = useState(false);
+
+  return (
+    <>
+      <button
+        className="trigger"
+        onClick={(): any => setReadOnly((prev) => !prev)}
+      >
+        click
+      </button>
+      <Sandpack options={{ readOnly }} />
+    </>
+  );
+};

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

@@ -292,6 +292,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       wrapContent,
       themeId,
       sortedDecorators,
+      readOnly,
     ]);
 
     React.useEffect(() => {