improve placeholder

examples/Components/Routes/Placeholder/index.vue

@@ -24,9 +24,11 @@ export default {
           new BulletList(),
           new ListItem(),
           new Placeholder({
+            emptyEditorClass: 'is-editor-empty',
             emptyNodeClass: 'is-empty',
             emptyNodeText: 'Write something …',
             showOnlyWhenEditable: true,
+            showOnlyCurrent: true,
           }),
         ],
       }),
@@ -39,7 +41,7 @@ export default {
 </script>
 
 <style lang="scss">
-.editor p.is-empty:first-child::before {
+.editor p.is-editor-empty:first-child::before {
   content: attr(data-empty-text);
   float: left;
   color: #aaa;

packages/tiptap-extensions/src/extensions/Placeholder.js

@@ -9,6 +9,7 @@ export default class Placeholder extends Extension {
 
   get defaultOptions() {
     return {
+      emptyEditorClass: 'is-editor-empty',
       emptyNodeClass: 'is-empty',
       emptyNodeText: 'Write something …',
       showOnlyWhenEditable: true,
@@ -32,6 +33,7 @@ export default class Placeholder extends Extension {
             const active = editable || !this.options.showOnlyWhenEditable
             const { anchor } = selection
             const decorations = []
+            const isEditorEmpty = doc.textContent.length === 0
 
             if (!active) {
               return false
@@ -39,11 +41,17 @@ export default class Placeholder extends Extension {
 
             doc.descendants((node, pos) => {
               const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
-              const isEmpty = node.content.size === 0
+              const isNodeEmpty = node.content.size === 0
+
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) {
+                const classes = [this.options.emptyNodeClass]
+
+                if (isEditorEmpty) {
+                  classes.push(this.options.emptyEditorClass)
+                }
 
-              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: this.options.emptyNodeClass,
+                  class: classes.join(' '),
                   'data-empty-text': typeof this.options.emptyNodeText === 'function'
                     ? this.options.emptyNodeText(node)
                     : this.options.emptyNodeText,