fix: placeholder caret in firefox

sibiraj-s · Mar 6, 2021 · 451f275 · 451f275
1 parent 4ae87b9
commit 451f275
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/lib/editor.component.scss b/src/lib/editor.component.scss
@@ -36,11 +36,14 @@ $menubar-text-padding: 0 $menu-item-spacing;
 }
 
 .NgxEditor__Placeholder {
-  color: #6c757d;
-  opacity: 1;
-  user-select: none;
-  position: absolute;
-  cursor: text;
+  &::before {
+    color: #6c757d;
+    opacity: 1;
+    user-select: none;
+    position: absolute;
+    cursor: text;
+    content: attr(data-placeholder);
+  }
 }
 
 .NgxEditor__Content {

diff --git a/src/lib/plugins/placeholder.ts b/src/lib/plugins/placeholder.ts
@@ -1,5 +1,6 @@
 import { Plugin, EditorState, PluginKey, Transaction } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
+import { Node as ProseMirrorNode } from 'prosemirror-model';
 
 const PLACEHOLDER_CLASSNAME = 'NgxEditor__Placeholder';
 
@@ -17,22 +18,35 @@ const placeholderPlugin = (text?: string): Plugin => {
     },
     props: {
       decorations(state: EditorState): DecorationSet {
-        const doc = state.doc;
+        const { doc } = state;
 
         const placeholder = this.getState(state);
 
         if (!placeholder) {
           return DecorationSet.empty;
         }
 
+        const decorations: Decoration[] = [];
+
+        const decorate = (node: ProseMirrorNode, pos: number) => {
         if (doc.childCount === 1 && doc?.firstChild?.isTextblock && doc.firstChild.content.size === 0) {
           const placeHolderEl = document.createElement('span');
           placeHolderEl.classList.add(PLACEHOLDER_CLASSNAME);
           placeHolderEl.textContent = placeholder;
           return DecorationSet.create(doc, [Decoration.widget(1, placeHolderEl)]);
         }
 
-        return DecorationSet.empty;
+            const placeholderNode = Decoration.node(pos, (pos + node.nodeSize), {
+              class: PLACEHOLDER_CLASSNAME,
+              'data-placeholder': placeholder
+            });
+
+            decorations.push(placeholderNode);
+          }
+        };
+
+        doc.descendants(decorate);
+        return DecorationSet.create(doc, decorations);
       }
     }
   });