From 99d1bd207679cb9fc38c9a7642bef84d22e6f9d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 24 Mar 2021 22:23:21 +0100
Subject: [PATCH] improve placeholder

---
 .../Experiments/Placeholder/extension/placeholder.ts  | 11 +++++------
 docs/src/demos/Experiments/Placeholder/index.vue      |  8 ++------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/docs/src/demos/Experiments/Placeholder/extension/placeholder.ts b/docs/src/demos/Experiments/Placeholder/extension/placeholder.ts
index 8e011abc..095f4a7d 100644
--- a/docs/src/demos/Experiments/Placeholder/extension/placeholder.ts
+++ b/docs/src/demos/Experiments/Placeholder/extension/placeholder.ts
@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/core'
+import { Extension, isNodeEmpty } from '@tiptap/core'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Plugin } from 'prosemirror-state'
 
@@ -29,7 +29,6 @@ export default Extension.create({
             const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
             const { anchor } = selection
             const decorations: Decoration[] = []
-            const isEditorEmpty = doc.textContent.length === 0
 
             if (!active) {
               return
@@ -37,13 +36,12 @@ export default Extension.create({
 
             doc.descendants((node, pos) => {
               const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
-              // TODO: should be false for image nodes (without text content), is true though
-              const isNodeEmpty = node.content.size === 0
+              const isEmpty = !node.isLeaf && isNodeEmpty(node)
 
-              if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) {
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass]
 
-                if (isEditorEmpty) {
+                if (this.editor.isEmpty) {
                   classes.push(this.options.emptyEditorClass)
                 }
 
@@ -53,6 +51,7 @@ export default Extension.create({
                     ? this.options.placeholder(node)
                     : this.options.placeholder,
                 })
+
                 decorations.push(decoration)
               }
 
diff --git a/docs/src/demos/Experiments/Placeholder/index.vue b/docs/src/demos/Experiments/Placeholder/index.vue
index c87895e1..55337c02 100644
--- a/docs/src/demos/Experiments/Placeholder/index.vue
+++ b/docs/src/demos/Experiments/Placeholder/index.vue
@@ -4,9 +4,7 @@
 
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
+import { defaultExtensions } from '@tiptap/starter-kit'
 import Placeholder from './extension/placeholder'
 
 export default {
@@ -23,9 +21,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        Document,
-        Paragraph,
-        Text,
+        ...defaultExtensions(),
         Placeholder,
       ],
     })