From 1472254913c984fadba33c08db2366d4f65de711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 2 Dec 2019 23:05:03 +0100
Subject: [PATCH] improve placeholder

---
 examples/Components/Routes/Placeholder/index.vue   |  4 +++-
 .../src/extensions/Placeholder.js                  | 14 +++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/examples/Components/Routes/Placeholder/index.vue b/examples/Components/Routes/Placeholder/index.vue
index 7f2eb46d1..2e706097b 100644
--- a/examples/Components/Routes/Placeholder/index.vue
+++ b/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;
diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js
index 73982fc56..5214695ba 100644
--- a/packages/tiptap-extensions/src/extensions/Placeholder.js
+++ b/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,