how to display tiptap placeholder in typescript-react project?

[ashrithapb]

Hi,

In my typescript-react project, I am following https://www.tiptap.dev/api/extensions/placeholder to display the placeholder.

On inspecting the webpage, I see the following html elements:

<div contenteditable="true" class="ProseMirror" tabindex="0">
  <p data-placeholder="Description" class="is-empty is-editor-empty"><br>
  </p>
</div>

But the following css styles are not reflecting on the webpage and hence I am not able to see the placeholder value on the screen:

.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #ced4da;
    pointer-events: none;
    height: 0;
  }

Any solution/suggestions would be appreciated.

[dstoyanoff]

Think I had a similar issue. What I did eventually was to remove the is-editor-empty class selector. Anyways, when you start adding content, the placeholder paragraph disappears, so this class selector doesn't seem to be having any effect