Text input goes backwards after adding a soft break in Chrome

[raimohanska]

Description

When using Chrome, soft breaks (line feed characters) and formatting such as bold, the editor goes to a mode where the characters you type actually appear in reverse order.

Recording

Here you can see what happens when I press Shift+Enter in a certain position and start typing. All backwards!

slate-bug.mov

Sandbox

https://codesandbox.io/p/sandbox/slate-chrome-bug-d4nzx4

Steps

To reproduce the behavior:

1. Using Chrome browser, go to the sandbox.
2. Place caret at the end of the line with a bold text
3. Press Shift+Enter to add a soft break
4. Type something. You should see the text you typed appearing backwards.

Expectation

Text should appear as you type it.

Environment

• Slate Version: 0.102.0
• Slate-react: 0.102.0
• Operating System: MacOS
• Browser: Chrome (Version 122.0.6261.69)

Context

The setup required for reproduction is pretty simple as you can see in the sandbox. If seems to require that you have line breaks (\n) characters in use and that you have some formatting at the end of a line.

[raimohanska]

I may possibly help with the fix or at least the verification of it, but at the moment am not familiar with any Slate implementation details so I don't even know where to start looking.

[mainhanu]

I think this has something todo with the code

editor.insertSoftBreak = () => {
      editor.insertText("\n");
};

if you try to insert \n at the end of an node in a ContentEditable, the browser may behavior wired, add an extra zero width string can fix it。editor.insertText("\n\uFEFF").

you can reference the code at https://github.com/ianstormtaylor/slate/blob/main/packages/slate-react/src/components/string.tsx, I don't quite understand this either.

in your case I think you should use editor.insertBreak() or editor.splitNodes({ always: true })

[raimohanska]

Adding the zero-width space seems to help indeed. Thanks @mainhanu!

Still this seems like bug to me, even tho the worksround is available.