Bug: Lexical adds word-break and white-space properties which cause different rendering

[nextend]

By default lexical adds white-space: pre-wrap and word-break: break-word to the editor element to function properly. We are planning to use Lexical in a visual editor, where you can inline edit texts with Lexical. After the editing done, we destroy Lexical. The problem is when we init or destroy the Lexical editor, there is a moment of change in the text as the default white-space and word-break value is different. You can see on the following video when entering/leaving Lexical, there is a small horizontal jump in the first line of text.

Screen recording: https://youtu.be/AjeoYTn5Tgg

        requestAnimationFrame(() => {
            blockElement.style.removeProperty('white-space'); // We must remove Lexical white-space:pre-wrap to give identical result during editing.
            blockElement.style.removeProperty('word-break'); // We must remove Lexical word-break: break-word to give identical result during editing.
        });

If we remove those two properties the editor fails to create space-s after specific blocks. For example if your cursor is after an <a> tag, then you can not create space after that, but you can type.

Related to: https://github.com/facebook/lexical/issues/71

[fantactuka]

Can you replace spaces with   on lexical destruction and roll it back when user tries to focus back? I don't think there any plans to change use of white-space

UPD: nbsp won't allow words to break for a newline, so maybe ​ ​ will be a better alternative

[khanakia]

@nextend I am unable to reproduce the issue. Do you have any demo or code-sandbox link ?

[hernang87]

https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalEditor.ts#L976 has a default value for word break. The best way I found to overwrite was to write a plugin and do:

editor.registerRootListener(root => {
  if (!root) return;
  const style = root.style;
  style.wordBreak = 'break-all';
});