diff --git a/docs/api/extensions/placeholder.md b/docs/api/extensions/placeholder.md index 720efc5a5..ba505ee25 100644 --- a/docs/api/extensions/placeholder.md +++ b/docs/api/extensions/placeholder.md @@ -14,6 +14,31 @@ This extension provides placeholder support. Give your users an idea what they s 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.** +``` +.ProseMirror 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.** +``` +.ProseMirror p.is-empty::before { + color: #adb5bd; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} +``` + + ## Settings ### emptyEditorClass