From b64eca7ab535d4918707f08029bd9febbeaf0503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 21 Jun 2019 22:26:12 +0200
Subject: [PATCH] improve placeholder extension

---
 .../src/extensions/Placeholder.js             | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js
index 2d96ae13f..575fbd064 100644
--- a/packages/tiptap-extensions/src/extensions/Placeholder.js
+++ b/packages/tiptap-extensions/src/extensions/Placeholder.js
@@ -10,8 +10,9 @@ export default class Placeholder extends Extension {
   get defaultOptions() {
     return {
       emptyNodeClass: 'is-empty',
-      emptyNodeText: 'Write something...',
+      emptyNodeText: 'Write something …',
       showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
     }
   }
 
@@ -25,28 +26,30 @@ export default class Placeholder extends Extension {
     return [
       new Plugin({
         props: {
-          decorations: ({ doc, plugins }) => {
+          decorations: ({ doc, plugins, selection }) => {
             const editablePlugin = plugins.find(plugin => plugin.key.startsWith('editable$'))
             const editable = editablePlugin.props.editable()
             const active = editable || !this.options.showOnlyWhenEditable
+            const { anchor } = selection
+            const decorations = []
 
             if (!active) {
               return false
             }
 
-            const decorations = []
-            const completelyEmpty = doc.textContent === '' && doc.childCount <= 1 && doc.content.size <= 2
-
             doc.descendants((node, pos) => {
-              if (!completelyEmpty) {
-                return
+              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
+              const isEmpty = node.content.size === 0
+
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                  class: this.options.emptyNodeClass,
+                  'data-empty-text': this.options.emptyNodeText,
+                })
+                decorations.push(decoration)
               }
 
-              const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                class: this.options.emptyNodeClass,
-                'data-empty-text': this.options.emptyNodeText,
-              })
-              decorations.push(decoration)
+              return false
             })
 
             return DecorationSet.create(doc, decorations)