From 12583bad320ac241a8e55cb2575d7c28536f5e76 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 20 Jan 2022 10:32:39 +0000
Subject: [PATCH] fix(codemirror): shift approach to remove placeholder

---
 .../src/components/CodeEditor/CodeMirror.tsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 480ef4073..643c05b3e 100644
--- 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