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 };
    }
  });
}

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.