How to: input-like placeholder behavior

Using the techniques described in this thread, there can be a flicker as the cursor lands in the contenteditable area, as Prosemirror determines which side to put the decoration.

Watch closely (you might have to step through frame by frame) and you can see the cursor move from the end of the placeholder to the beginning.

…has anybody else noticed this, and is there anything we can do about it?

Might be fixable with css? I’m using this and don’t encounter the cursor issue when using a psuedo element:

  content: "paragraph";
  float: left;
  pointer-events: none;
  height: 0;

@bhl, is that using a Decoration, or literally just a pseudo element?

That’s css for a pseudo-element. Node decoration adds a class to a block element like paragraph, then use paragraph:empty-node::before for placeholder.

Because our doc schema is inline*, we had to add this logic to the placeholder plugin:

const pos = doc.inlineContent ? 0 : 1;
return DecorationSet.create(doc, [Decoration.widget(pos, placeholderNode)]);

In case that helps anyone googling.

Here’s the full gist: Prosemirror placeholder plugin · GitHub