tiptap/docs/api/extensions/placeholder.md

description	icon
Configure a helpful placeholder to fill the emptyness.	ghost-line

Placeholder

This extension provides placeholder support. Give your users an idea what they should write with a tiny hint. There is a handful of things to customize, if you feel like it.

Installation

npm install @tiptap/extension-placeholder

Settings

emptyEditorClass

The added CSS class if the editor is empty.

Default: 'is-editor-empty'

Placeholder.configure({
  emptyEditorClass: 'is-editor-empty',
})

emptyNodeClass

The added CSS class if the node is empty.

Default: 'is-empty'

Placeholder.configure({
  emptyNodeClass: 'my-custom-is-empty-class',
})

placeholder

The placeholder text added as data-placeholder attribute.

Default: 'Write something …'

Placeholder.configure({
  placeholder: 'My Custom Placeholder',
})

You can even use a function to add placeholder depending on the node:

Placeholder.configure({
  placeholder: ({ node }) => {
    if (node.type.name === 'heading') {
      return 'What’s the title?'
    }

    return 'Can you add some further context?'
  },
})

showOnlyWhenEditable

Show decorations only when editor is editable.

Default: true

Placeholder.configure({
  showOnlyWhenEditable: false,
})

showOnlyCurrent

Show decorations only in currently selected node.

Default: true

Placeholder.configure({
  showOnlyCurrent: false
})

includeChildren

Show decorations also for nested nodes.

Default: false

Placeholder.configure({
  includeChildren: true
})

Source code

packages/extension-placeholder/

Usage

https://embed.tiptap.dev/preview/Extensions/Placeholder