fix(Placeholder): fixed issue with displaying a fake cursor in Safari (…

…#212)
gravity-ui · Apr 4, 2024 · c9c6fb5 · c9c6fb5
1 parent 978a828
commit c9c6fb5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss
@@ -11,9 +11,6 @@
 }
 
 @keyframes placeholder_blink {
-    1% {
-        border-color: unset;
-    }
     49% {
         border-color: unset;
     }
@@ -28,22 +25,18 @@
 .ye-placeholder {
     caret-color: transparent;
 
-    &::before {
-        position: relative;
-        z-index: 1;
-
-        display: inline-block;
+    .ProseMirror-focused &_focus {
+        .ye-placeholder__cursor {
+            position: relative;
+            z-index: 1;
 
-        margin-right: -1px;
+            margin-right: -1px;
 
-        content: ' ';
-        caret-color: transparent;
-
-        border-right: 1px solid transparent;
-    }
+            border-left-width: 1px;
+            border-left-style: solid;
 
-    .ProseMirror-focused &_focus::before {
-        animation: placeholder_blink 1s;
-        animation-iteration-count: infinite;
+            animation: placeholder_blink 1s;
+            animation-iteration-count: infinite;
+        }
     }
 }
diff --git a/src/extensions/behavior/Placeholder/index.ts b/src/extensions/behavior/Placeholder/index.ts
@@ -33,8 +33,17 @@ export const createPlaceholder = (node: Node, parent: Node | null, focus?: boole
     if (!content) return null;
 
     const placeholder = document.createElement('div');
-    placeholder.classList.add(...b({focus}).split(' '));
-    placeholder.textContent = content;
+    placeholder.className = b({focus});
+
+    const placeholderCursor = document.createElement('span');
+    placeholderCursor.className = b('cursor');
+
+    const placeholderText = document.createElement('span');
+    placeholderText.className = b('text');
+    placeholderText.textContent = content;
+
+    placeholder.append(placeholderCursor, placeholderText);
+
     return placeholder;
 };