Placeholder not rendering

What’s the bug you are facing?

When the editor is empty, either initially, or after deletion, no placeholder is displayed to the user.

A paragraph node is added with the appropriate classes, and a data-placeholder as set by my configuration, however, there is no displayed placeholder for the user. The Paragraph tag just contains an empty <br/>

How can we reproduce the bug on our side?

Set up basic editor, use @tiptap/extension-placeholder as per docs

Can you provide a CodeSandbox?

No response

What did you expect to happen?

The placeholder text gets displayed when there is no content.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[KarolMilewski]

add some CSS to your component

/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}

/* Placeholder (on every new line) */
/*.ProseMirror p.is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}*/

[larsdjursner]

Any guidance on how to style the placeholder with Tailwind?

I’m using this:

Placeholder.configure({
  placeholder,
  emptyNodeClass:
    'first:before:text-gray-400 first:before:float-left first:before:content-[attr(data-placeholder)] first:before:pointer-events-none',
}),

The placeholder works but the cursor isn’t placed at the beginning of the placeholder text:

Did you manage to find a solution? Adding “first:before:h-0” to emptyNodeClass worked for me.