diff --git a/.changeset/ten-cars-sparkle.md b/.changeset/ten-cars-sparkle.md new file mode 100644 index 000000000..580836441 --- /dev/null +++ b/.changeset/ten-cars-sparkle.md @@ -0,0 +1,5 @@ +--- +"@tiptap/extension-placeholder": patch +--- + +feat(placeholder): do not show placeholder on atom nodes by default diff --git a/packages/extension-placeholder/src/placeholder.ts b/packages/extension-placeholder/src/placeholder.ts index 08427a257..9d184a5e3 100644 --- a/packages/extension-placeholder/src/placeholder.ts +++ b/packages/extension-placeholder/src/placeholder.ts @@ -63,6 +63,15 @@ export interface PlaceholderOptions { * @default false */ includeChildren: boolean + + /** + * **Controls if the placeholder should be shown for atom nodes.** + * + * If true, the placeholder will be shown for atom nodes. + * If false, the placeholder will not be shown for atom nodes. + * @default false + */ + showWhenAtom: boolean; } /** @@ -81,6 +90,7 @@ export const Placeholder = Extension.create({ showOnlyWhenEditable: true, showOnlyCurrent: true, includeChildren: false, + showWhenAtom: false, } }, @@ -103,8 +113,9 @@ export const Placeholder = Extension.create({ doc.descendants((node, pos) => { const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize const isEmpty = !node.isLeaf && isNodeEmpty(node) + const isContentEditable = this.options.showWhenAtom ? !node.type.isAtom : true; - if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) { + if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty && isContentEditable) { const classes = [this.options.emptyNodeClass] if (isEmptyDoc) {