Placeholder extension
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.
Install
npm install @tiptap/extension-placeholder
Additional Setup
Placeholders are displayed with the help of CSS.
Display a Placeholder only for the first line in an empty editor.
.tiptap p.is-editor-empty:first-child::before {
color: #adb5bd;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
Display Placeholders on every new line.
.tiptap p.is-empty::before {
color: #adb5bd;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
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,
})