Slate: Bug: Cursor jumps when line-height is applied to editor

[mattmazzola]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

If there is custom line-height applied to the editor the cursor jumps positions when there is no text.

See recording:
I start with line-height using default, but half way through apply line-height of 2em and notice when there is no text the cursor jumps up

http://recordit.co/EoWVXHfDBB

What's the expected behavior?

I think the cursor should stay on the same line.

[Slapbox]

This is likely due to empty spans used as placeholders like this:

<span data-slate-zero-width="true">&#8203;</span>

In the cases where this causes issues for me, I apply custom CSS like this:

span[data-slate-zero-width='true'] {
    position: relative;
    top: -3px;
}

My situation isn't exactly the same, but I hope this helps!

[sebas5384]

Can confirm this is happening.

[isubasti]

I have the same thing happening but solved it by using custom renderPlaceholder so that the placeholder has float: left

[mattmazzola]

Any update on this bug?

In some cases it's just slightly off, but in this case it's really off:

@isubasti Can you share example of your renderPlaceholder function?

I tried using something like https://github.com/ianstormtaylor/slate/commit/a09c3c2fdfe87605988a13e968643f81b4936978#diff-c9782a4dca34d1f2858bab56d1202753L110

But it seems the node schema has changed and it errors. If I always returns the <span> is stays even after the user enters text which it should remove the placeholder.

With default placeholder (not implementing renderPlaceholder) I see this markup:

<div data-slate-editor="true" data-key="4" contenteditable="true" class="editor  editor--active" autocorrect="on"
    spellcheck="true" role="textbox" data-gramm="false"
    style="outline: none; white-space: pre-wrap; overflow-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;">
    <div data-key="5" style="position: relative;">
        <span contenteditable="false"
            style="pointer-events: none; display: inline-block; width: 0px; max-width: 100%; white-space: nowrap; opacity: 0.333;">
        </span>
        <span data-key="6">
            <span data-offset-key="6:0">
                <span data-slate-zero-width="true">&#8203;</span>
            </span>
        </span>
    </div>
</div>

[comerc]

@mattmazzola - thanks! your solution work fine for me:

  [data-slate-editor='true'] span[contenteditable='false'] {
    float: left;
  }

[isubasti]

using contenteditable=false selector is probably not a good idea as void elements will have that as well. ideally you want to style the placeholder itself which you can do by creating your own placeholder plugin or wait till https://github.com/ianstormtaylor/slate/pull/2667 to add style to the placeholder or create a PR to add float:left to default placeholder's style.

[comerc]

@isubasti, thanks!

create a PR to add float:left to default placeholder's style.

@ianstormtaylor, do you want this PR?

[namnm]

Any news?