mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-16 03:39:00 +08:00
2.0 KiB
2.0 KiB
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
# with npm
npm install @tiptap/extension-placeholder
# with Yarn
yarn add @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
})
Source code
packages/extension-placeholder/