diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
index 8ec15047..bdf8814d 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -5,11 +5,12 @@ import { storiesOf } from "@storybook/react";
import * as React from "react";
import { SandpackProvider } from "../../contexts/sandpackContext";
+import { useSandpack } from "../../hooks";
import * as mocks from "./languages-mocks";
import { CodeEditor, SandpackCodeEditor } from "./index";
-import { useSandpack } from "../../hooks";
+
const stories = storiesOf("components/CodeMirror", module);
Object.entries(mocks).forEach(([languageName, mockFile]) =>
@@ -147,6 +148,7 @@ export default function List() {
);
return
;
}`}
+ readOnly
decorators={[
{ className: "highlight", line: 1 },
{ className: "highlight", line: 9 },
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 0992e5d2..8fae6640 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -183,8 +183,12 @@ export const CodeMirror = React.forwardRef(
[decorators]
);
+ const useStaticReadOnly = readOnly && decorators?.length === 0;
+
React.useEffect(() => {
- if (!wrapper.current || !shouldInitEditor || readOnly) return;
+ if (!wrapper.current || !shouldInitEditor || useStaticReadOnly) {
+ return;
+ }
const parentDiv = wrapper.current;
const existingPlaceholder = parentDiv.querySelector(
@@ -214,10 +218,14 @@ export const CodeMirror = React.forwardRef(
cmView.current?.destroy();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [shouldInitEditor, readOnly]);
+ }, [shouldInitEditor, readOnly, useStaticReadOnly]);
React.useEffect(() => {
- if (cmView.current && !readOnly) {
+ if (useStaticReadOnly) {
+ return;
+ }
+
+ if (cmView.current) {
const customCommandsKeymap: KeyBinding[] = [
{
key: "Tab",
@@ -327,6 +335,7 @@ export const CodeMirror = React.forwardRef(
wrapContent,
themeId,
readOnly,
+ useStaticReadOnly,
autoReload,
]);
@@ -441,7 +450,7 @@ export const CodeMirror = React.forwardRef(
return `var(--${THEME_PREFIX}-space-${offset})`;
};
- if (readOnly) {
+ if (useStaticReadOnly) {
return (
<>