Slate: Error inserting text with hanging selection (slatejs.org)

[echenley]

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

Bug.

What's the current behavior?

1. Triple click to select entire block
2. Type or paste some text.

It seems to have something to do with the selection wrapping to the beginning of the next block.

[echenley]

Did a little bit of digging today. It seems to have to do with the isHanging special case in deleteAtRange. The target block for the paste is being deleted because of this.

Worth noting that pasting is not necessary to reproduce this error. It will occur any time you enter text with a hanging selection. I updated the repro steps to reflect that.

Just spitballing, I can think of two non-ideal options to fix it:

1. Use the same behavior regardless of isHanging, i.e. merging the next block into the first so that the new text has somewhere to go. This is not ideal because if the second block has a different type, it will be converted to the first type, even though the selection doesn't appear to cover the second block. However, this may be technically "correct". (I also wonder how this would behave with nested blocks.)

2. Pretend that the selection is not hanging in these cases, i.e. change endKey and endOffset to cover the previous block so it is replaced instead of deleted.

I have a feeling this is problematic for many rich text editors. Here is similar buggy behavior in Apple Mail:

DraftJS seems to take option 1, but I know they don't have a concept of nested blocks, which may make this behavior more complicated:

[echenley]

A hacky but effective fix in the meantime (option 2 above):

function handleKeyDown(e, data, change) {
  // ...
  if (
    state.isExpanded &&
    state.startKey !== state.endKey &&
    state.endOffset === 0
  ) {
    if (state.isBackward) {
      change.flip()
    }

    const endNode = state.document.getClosestBlock(state.endKey)
    const prevNode = state.document.getPreviousSibling(endNode.key)

    change.extendToEndOf(prevNode)
  }
  // ...
}

Result:

[ianstormtaylor]

I think this is due to these lines of code where the start block will actually be removed in the hanging case, so when it goes to insert text into it it's no longer there.

[czechdave]

Managed to figure out a possible fix to this issue. Let me know if it's a reasonable PR or if it needs any additional work or different approach @ianstormtaylor

https://github.com/ianstormtaylor/slate/pull/1432

[rubyonrailsStar]

Hello @czechdave

I have some questions.
Using SlateJS, if one character is deleted, can I delete all the character in the content ?

I don't know it is possible.