fix(codemirror): shift approach to remove placeholder (#310)

codesandbox · Jan 20, 2022 · 4021b16 · 4021b16
1 parent 18db086
commit 4021b16
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -228,6 +228,12 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         });
 
         const parentDiv = wrapper.current;
+        const existingPlaceholder = parentDiv.querySelector(
+          ".sp-pre-placeholder"
+        );
+        if (existingPlaceholder) {
+          parentDiv.removeChild(existingPlaceholder);
+        }
 
         const view = new EditorView({
           state: startState,
@@ -350,9 +356,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
     if (readOnly) {
       return (
         <pre ref={combinedRef} className={c("cm", editorState)} translate="no">
-          {!shouldInitEditor && (
-            <code className={c("pre-placeholder")}>{code}</code>
-          )}
+          <code className={c("pre-placeholder")}>{code}</code>
 
           {readOnly && showReadOnly && (
             <span className={c("read-only")}>Read-only</span>
@@ -376,16 +380,14 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         tabIndex={0}
         translate="no"
       >
-        {!shouldInitEditor && (
-          <pre
-            className={c("pre-placeholder")}
-            style={{
-              marginLeft: showLineNumbers ? 28 : 0, // gutter line offset
-            }}
-          >
-            {code}
-          </pre>
-        )}
+        <pre
+          className={c("pre-placeholder")}
+          style={{
+            marginLeft: showLineNumbers ? 28 : 0, // gutter line offset
+          }}
+        >
+          {code}
+        </pre>
 
         <>
           <p