Bug: Can't move cursor to the end of the line that ends with an inline element followed by a single character

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

Bug

What’s the current behavior?

When there is an inline element followed by a single text character at the end of a line, it’s impossible to move the cursor past the last character using the arrow keys. This can be seen on the rich text example by deleting everything except the first line and trying to go past the exclamation point: https://www.slatejs.org/examples/richtext In the GIF, I’m only able to move past the exclamation point by using end or by leaving an extra character (at the end I left a space)

Slate: 0.59.0 Browser: all OS: Mac

What’s the expected behavior?

Cursor should be able to go past the last character

[BrentFarese]

@BrentFarese thanks a lot for your reply! That helped a lot, I could work around by manually calling

Editor.normalize(editor, { force: true })

I am wondering if this is intended?

Just make your intialValue the below (empty text node between mentions) and your issue should go away.

const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [
      { text: 'Try mentioning characters, like ' },
      {
        type: 'mention',
        character: 'R2-D2',
        children: [{ text: '' }],
      },
      { text: '' },
      {
        type: 'mention',
        character: 'Mace Windu',
        children: [{ text: '' }],
      },
    ],
  },
]

[dan-lee]

I don’t know if that’s the same issue, but please have a look at the following video:

https://user-images.githubusercontent.com/571589/114441984-55336f80-9bcc-11eb-97d7-7a6ba27e09e9.mov

When I refresh the page with some initial content I try to navigate the cursor with my arrow keys between and after the adjacent void elements and it doesn’t work. (as shown in the video)

After interacting with the editor, however, it works

I am not sure if this issue is related or not but I seemed familiar. Please tell me if I should create a new one or not.

initialValue

const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [
      { text: 'Try mentioning characters, like ' },
      {
        type: 'mention',
        character: 'R2-D2',
        children: [{ text: '' }],
      },
      {
        type: 'mention',
        character: 'Mace Windu',
        children: [{ text: '' }],
      },
    ],
  },
]