feat(placeholder): allow editor-is-empty class on any node

demos/src/Extensions/Placeholder/React/styles.scss

@@ -6,7 +6,7 @@
 }
 
 /* Placeholder (at the top) */
-.tiptap p.is-editor-empty:first-child::before {
+.tiptap .is-editor-empty:first-child::before {
   color: #adb5bd;
   content: attr(data-placeholder);
   float: left;

docs/api/extensions/placeholder.md

@@ -88,6 +88,17 @@ Placeholder.configure({
 })
 ```
 
+### considerAnyAsEmpty
+Consider any node that is not a leaf or atom as empty for the editor empty check.
+
+Default: `false`
+
+```js
+Placeholder.configure({
+  considerAnyAsEmpty: true,
+})
+```
+
 ### showOnlyWhenEditable
 Show decorations only when editor is editable.
 

packages/extension-placeholder/src/placeholder.ts

@@ -4,8 +4,24 @@ import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 export interface PlaceholderOptions {
+  /**
+   * **The class name for the empty editor**
+   * @default 'is-editor-empty'
+   */
   emptyEditorClass: string
+
+  /**
+   * **The class name for empty nodes**
+   * @default 'is-empty'
+   */
   emptyNodeClass: string
+
+  /**
+   * **The placeholder content**
+   *
+   * You can use a function to return a dynamic placeholder or a string.
+   * @default 'Write something …'
+   */
   placeholder:
     | ((PlaceholderProps: {
         editor: Editor
@@ -14,8 +30,41 @@ export interface PlaceholderOptions {
         hasAnchor: boolean
       }) => string)
     | string
+
+  /**
+   * **Used for empty check on the document.**
+   *
+   * If true, any node that is not a leaf or atom will be considered for empty check.
+   * If false, only default nodes (paragraphs) will be considered for empty check.
+   * @default false
+   */
+  considerAnyAsEmpty: boolean
+
+  /**
+   * **Checks if the placeholder should be only shown when the editor is editable.**
+   *
+   * If true, the placeholder will only be shown when the editor is editable.
+   * If false, the placeholder will always be shown.
+   * @default true
+   */
   showOnlyWhenEditable: boolean
+
+  /**
+   * **Checks if the placeholder should be only shown when the current node is empty.**
+   *
+   * If true, the placeholder will only be shown when the current node is empty.
+   * If false, the placeholder will be shown when any node is empty.
+   * @default true
+   */
   showOnlyCurrent: boolean
+
+  /**
+   * **Controls if the placeholder should be shown for all descendents.**
+   *
+   * If true, the placeholder will be shown for all descendents.
+   * If false, the placeholder will only be shown for the current node.
+   * @default false
+   */
   includeChildren: boolean
 }
 
@@ -28,6 +77,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
       emptyNodeClass: 'is-empty',
       placeholder: 'Write something …',
       showOnlyWhenEditable: true,
+      considerAnyAsEmpty: false,
       showOnlyCurrent: true,
       includeChildren: false,
     }
@@ -48,9 +98,16 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
             }
 
             // only calculate isEmpty once due to its performance impacts (see issue #3360)
-            const emptyDocInstance = doc.type.createAndFill()
-            const isEditorEmpty = emptyDocInstance?.sameMarkup(doc)
-              && emptyDocInstance.content.findDiffStart(doc.content) === null
+            const { firstChild } = doc.content
+            const isLeaf = firstChild && firstChild.type.isLeaf
+            const isAtom = firstChild && firstChild.isAtom
+            const isValidNode = this.options.considerAnyAsEmpty
+              ? true
+              : firstChild && firstChild.type.name === doc.type.contentMatch.defaultType?.name
+            const isEmptyDoc = doc.content.childCount <= 1
+              && firstChild
+              && isValidNode
+              && (firstChild.nodeSize <= 2 && (!isLeaf || !isAtom))
 
             doc.descendants((node, pos) => {
               const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize
@@ -59,7 +116,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass]
 
-                if (isEditorEmpty) {
+                if (isEmptyDoc) {
                   classes.push(this.options.emptyEditorClass)
                 }