improve placeholder

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)
               }
 

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,
       ],
     })