Prosemirror placeholder plugin approach

placeholder.css

.ProseMirror[data-placeholder]::before {
  color: global.$placeholder-colour;
  position: absolute;
  content: attr(data-placeholder);
  pointer-events: none;
}

placeholder.js

import { Plugin } from 'prosemirror-state';

export default function placeholder(text) {
  const update = (view) => {
    if (view.state.doc.textContent) {
      view.dom.removeAttribute('data-placeholder');
    } else {
      view.dom.setAttribute('data-placeholder', text);
    }
  };

  return new Plugin({
    view(view) {
      update(view);

      return { update };
    }
  });
}

Thank you, found it very helpful ♥

👍

Wow! Really elegant. Thanks a lot!

Just a heads up that this working, depends on your schema.

You might also need this, if you have block nodes:

if (view.state.doc.textContent || view.state.doc.firstChild?.content.size > 0)

You mean a situation where you have no text at all, but other content rendered as block nodes? Yeah, then view.state.doc.textContent will not pick it up. So adding the second check makes it robust for that case as well. 👍

Oh and for centered text the placeholder gets aligned strangely. Maybe you have an idea how to deal with that situation?

Nothing springs to mind for center. But perhaps right: 0 would work for rtl.
Sorry I can't be more help. I kinda wish PM solved this for us

Yeah, and the placeholder ideally works without knowing about layout details. But yeah this seems to be a hard nut to crack. I tried once, and ended up with a workaround too. If I find a way to do it, I will let you know here! :)

For now I have this hack in place:

/* HACK to fix centered placeholders in bio */
.__centered .ProseMirror[data-placeholder]::before {
  position: static;
}

Will not work for multi-line inputs, and cursor will be at the end of the word, but better than an offset placeholder.