JSoon · February 14, 2025 06:34 · Sep 16, 2021 · Sep 16, 2021 · Sep 16, 2021 · Apr 19, 2021
diff --git a/placeholder-1.css → placeholder.css b/placeholder-1.css → placeholder.css
diff --git a/placeholder-1.js → placeholder.js b/placeholder-1.js → placeholder.js
diff --git a/placeholder-1.css b/placeholder-1.css
@@ -1,6 +1,6 @@
-.ProseMirror__placeholder::after {
-  color: grey;
+.ProseMirror[data-placeholder]::before {
+  color: global.$placeholder-colour;
   position: absolute;
   content: attr(data-placeholder);
-  pointer-events: none
-}
+  pointer-events: none;
+}
diff --git a/placeholder-1.js b/placeholder-1.js
@@ -1,24 +1,19 @@
 import { Plugin } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
 
-export default function placeholderPlugin(text) {
-  return new Plugin({
-    props: {
-      decorations(state) {
-        const doc = state.doc;
-        const hasNoChildren = doc.childCount === 0;
-        const isEmptyTextBlock =
-          doc.childCount === 1 && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
+export default function placeholder(text) {
+  const update = (view) => {
+    if (view.state.doc.textContent) {
+      view.dom.removeAttribute('data-placeholder');
+    } else {
+      view.dom.setAttribute('data-placeholder', text);
+    }
+  };
 
-        if (hasNoChildren || isEmptyTextBlock) {
-          const position = doc.inlineContent ? 0 : 1;
-          const placeholder = document.createElement('span');
-          placeholder.classList.add('ProseMirror__placeholder');
-          placeholder.setAttribute('data-placeholder', text);
+  return new Plugin({
+    view(view) {
+      update(view);
 
-          return DecorationSet.create(doc, [Decoration.widget(position, placeholder)]);
-        }
-      }
+      return { update };
     }
   });
 }
diff --git a/placeholder-2.css b/placeholder-2.css
@@ -1,6 +0,0 @@
-.ProseMirror[data-placeholder]::before {
-  color: grey;
-  position: absolute;
-  content: attr(data-placeholder);
-  pointer-events: none;
-}

diff --git a/placeholder-2.js b/placeholder-2.js
@@ -1,34 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-
-class PlaceholderPluginView {
-  constructor(editor, text) {
-    this.editor = editor;
-    this.text = text;
-    this._updatePlaceholder();
-  }
-
-  update() {
-    this._updatePlaceholder();
-  }
-
-  _updatePlaceholder() {
-    const doc = this.editor.state.doc;
-    const hasNoChildren = doc.childCount === 0;
-    const isEmptyTextBlock =
-      doc.childCount === 1 && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
-
-    if (hasNoChildren || isEmptyTextBlock) {
-      this.editor.dom.setAttribute('data-placeholder', this.text);
-    } else {
-      this.editor.dom.removeAttribute('data-placeholder');
-    }
-  }
-}
-
-export default function placeholder(text) {
-  return new Plugin({
-    view(editor) {
-      return new PlaceholderPluginView(editor, text);
-    }
-  });
-}

diff --git a/placeholder-1.css b/placeholder-1.css
@@ -1,8 +1,5 @@
-.ProseMirror__placeholder {
-  color: grey;
-}
-
 .ProseMirror__placeholder::after {
+  color: grey;
   position: absolute;
   content: attr(data-placeholder);
   pointer-events: none

diff --git a/placeholder-2.css b/placeholder-2.css
@@ -1,5 +1,5 @@
 .ProseMirror[data-placeholder]::before {
-  color: global.$placeholder-colour;
+  color: grey;
   position: absolute;
   content: attr(data-placeholder);
   pointer-events: none;

diff --git a/gistfile1.txt → placeholder-2.js b/gistfile1.txt → placeholder-2.js
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,34 @@
+import { Plugin } from 'prosemirror-state';
+
+class PlaceholderPluginView {
+  constructor(editor, text) {
+    this.editor = editor;
+    this.text = text;
+    this._updatePlaceholder();
+  }
+
+  update() {
+    this._updatePlaceholder();
+  }
+
+  _updatePlaceholder() {
+    const doc = this.editor.state.doc;
+    const hasNoChildren = doc.childCount === 0;
+    const isEmptyTextBlock =
+      doc.childCount === 1 && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
+
+    if (hasNoChildren || isEmptyTextBlock) {
+      this.editor.dom.setAttribute('data-placeholder', this.text);
+    } else {
+      this.editor.dom.removeAttribute('data-placeholder');
+    }
+  }
+}
+
+export default function placeholder(text) {
+  return new Plugin({
+    view(editor) {
+      return new PlaceholderPluginView(editor, text);
+    }
+  });
+}
diff --git a/placeholder-1.css b/placeholder-1.css
@@ -0,0 +1,9 @@
+.ProseMirror__placeholder {
+  color: grey;
+}
+
+.ProseMirror__placeholder::after {
+  position: absolute;
+  content: attr(data-placeholder);
+  pointer-events: none
+}
diff --git a/placeholder.js → placeholder-1.js b/placeholder.js → placeholder-1.js
@@ -1,10 +1,6 @@
 import { Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 
-/**
- * Placeholder plugin for prosemirror that supports documents with an inline, or a block schema.
- */
-
 export default function placeholderPlugin(text) {
   return new Plugin({
     props: {

diff --git a/placeholder-2.css b/placeholder-2.css
@@ -0,0 +1,6 @@
+.ProseMirror[data-placeholder]::before {
+  color: global.$placeholder-colour;
+  position: absolute;
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
diff --git a/placeholder.css b/placeholder.css
@@ -1,15 +0,0 @@
-/**
- * Pseudo content is used, positioned absolutely. Because otherwise, when clicking into the editor,
- * the cursor would be placed at the _end_ of the placeholder text, and then flicker to the beginning
- * as prosemirror moves the decoration to the correct side.
- */
-
-.ProseMirror__placeholder {
-  color: grey;
-}
-
-.ProseMirror__placeholder::after {
-  position: absolute;
-  content: attr(data-placeholder);
-  pointer-events: none
-}

diff --git a/placeholder.css b/placeholder.css
@@ -11,4 +11,5 @@
 .ProseMirror__placeholder::after {
   position: absolute;
   content: attr(data-placeholder);
- }
+  pointer-events: none
+}
diff --git a/placeholder.js b/placeholder.js
@@ -2,7 +2,7 @@ import { Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 
 /**
- * Placeholder plugin for prosemirror that supports documents with an inline only schema, or a block schema.
+ * Placeholder plugin for prosemirror that supports documents with an inline, or a block schema.
  */
 
 export default function placeholderPlugin(text) {

diff --git a/placeholder.css b/placeholder.css
@@ -1,5 +1,5 @@
 /**
- * Pseudo content is used, positioned absolutely. Because otherwise, when clicking in to the editor,
+ * Pseudo content is used, positioned absolutely. Because otherwise, when clicking into the editor,
  * the cursor would be placed at the _end_ of the placeholder text, and then flicker to the beginning
  * as prosemirror moves the decoration to the correct side.
  */

diff --git a/placeholder.css b/placeholder.css
@@ -0,0 +1,14 @@
+/**
+ * Pseudo content is used, positioned absolutely. Because otherwise, when clicking in to the editor,
+ * the cursor would be placed at the _end_ of the placeholder text, and then flicker to the beginning
+ * as prosemirror moves the decoration to the correct side.
+ */
+
+.ProseMirror__placeholder {
+  color: grey;
+}
+
+.ProseMirror__placeholder::after {
+  position: absolute;
+  content: attr(data-placeholder);
+ }
diff --git a/placeholder.js b/placeholder.js
@@ -0,0 +1,28 @@
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+
+/**
+ * Placeholder plugin for prosemirror that supports documents with an inline only schema, or a block schema.
+ */
+
+export default function placeholderPlugin(text) {
+  return new Plugin({
+    props: {
+      decorations(state) {
+        const doc = state.doc;
+        const hasNoChildren = doc.childCount === 0;
+        const isEmptyTextBlock =
+          doc.childCount === 1 && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
+
+        if (hasNoChildren || isEmptyTextBlock) {
+          const position = doc.inlineContent ? 0 : 1;
+          const placeholder = document.createElement('span');
+          placeholder.classList.add('ProseMirror__placeholder');
+          placeholder.setAttribute('data-placeholder', text);
+
+          return DecorationSet.create(doc, [Decoration.widget(position, placeholder)]);
+        }
+      }
+    }
+  });
+}