diff --git a/packages/extension-placeholder/src/placeholder.ts b/packages/extension-placeholder/src/placeholder.ts index b00b6b86..df52cf1a 100644 --- a/packages/extension-placeholder/src/placeholder.ts +++ b/packages/extension-placeholder/src/placeholder.ts @@ -32,6 +32,8 @@ export const Placeholder = Extension.create({ }, addProseMirrorPlugins() { + let cachedEmptyTopNode: ProsemirrorNode + return [ new Plugin({ props: { @@ -44,6 +46,9 @@ export const Placeholder = Extension.create({ return null } + cachedEmptyTopNode = cachedEmptyTopNode || doc.type.createAndFill() + const isEditorEmpty = cachedEmptyTopNode.sameMarkup(doc) && cachedEmptyTopNode.content.findDiffStart(doc.content) === null + doc.descendants((node, pos) => { const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize) const isEmpty = !node.isLeaf && !node.childCount @@ -51,7 +56,7 @@ export const Placeholder = Extension.create({ if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) { const classes = [this.options.emptyNodeClass] - if (this.editor.isEmpty) { + if (isEditorEmpty) { classes.push(this.options.emptyEditorClass) } @@ -75,8 +80,29 @@ export const Placeholder = Extension.create({ return DecorationSet.create(doc, decorations) }, + + attributes: ({ doc }) => { + cachedEmptyTopNode = cachedEmptyTopNode || doc.type.createAndFill() + const isEditorEmpty = cachedEmptyTopNode.sameMarkup(doc) && cachedEmptyTopNode.content.findDiffStart(doc.content) === null + + if (isEditorEmpty) { + return { + class: this.options.emptyEditorClass, + 'data-placeholder': typeof this.options.placeholder === 'function' + ? this.options.placeholder({ + editor: this.editor, + node: doc, + pos: 0, + hasAnchor: true, + }) + : this.options.placeholder, + } + } + }, }, }), ] }, }) + +export default Placeholder