[Slate-React] Inline placeholder is treated as part of editor content

When rendering an inline placeholder, it’s treated as part of the document and the cursor always appears after the placeholder (which doesn’t feel natural). My thought was maybe this has something to do with rendering and Slate.js measurements including the placeholder for cursor positioning.

    function renderPlaceholder(props) {
      const { document } = props.editor.value

      if (document.text !== '' || document.nodes.size !== 1) return false

      return (
        <span
          contentEditable={false}
          styles={{ pointerEvents: 'none', userSelect: 'none' }}
        >
          {editor.props.placeholder}
        </span>
      )
    }

[zhujinxuan]

I think perhaps we can do tricks in onSelect to move cursor back if there is placeholder but no content exists?

I will have a look at draft-js to see how they work: Update: draft-js let the editor as “position:relative”, then placeholder as “position:absolute”

But I think, if value is empty, then we can render an empty div with “position:relative”, then wrap the placeholder in that div

[blakeembrey]

Ok, so did a bunch of digging. The cursor jump is caused by https://stackoverflow.com/questions/27786048/why-is-my-contenteditable-cursor-jumping-to-the-end-in-chrome - when placed next to the contentEditable=false and having no space, it’ll continue encountering the jump.

One workaround would be to move the placeholder out of the Content - is there a reason it’s inside a Node today?

Edit: I see the jumping is probably why you put the placeholder before the node children instead of after too.