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

#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?'
  },
})

#considerAnyAsEmpty

Consider any node that is not a leaf or atom as empty for the editor empty check.

Default: false

Placeholder.configure({
  considerAnyAsEmpty: true,
})

#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