search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.54k stars 1.66k forks source link

Bug: Text is not inserted correctly when using Google Input Tools #5785

Open amanharwara opened 6 months ago

amanharwara commented 6 months ago

Lexical version: 0.14.1

Steps To Reproduce

  1. Install Google Input Tools extension
  2. Select a language and make sure it is enabled
  3. Type a word and press Enter

Link to code example: https://playground.lexical.dev

The current behavior

Text is not added in the editor

https://github.com/facebook/lexical/assets/8348101/3e8990db-c3b2-423d-bb18-04dd2197335f

The expected behavior

Text is added in the editor

amanharwara commented 6 months ago

There are actually two different problems here:

  1. If there is no existing TextNode, typing a word and then pressing Enter will add a new TextNode and then immediately delete it (somewhat visible in the video attached to the issue)
  2. When typing in an existing TextNode, the text is also inserted then deleted almost immediately.

The first seems to be mainly caused by this: https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts#L625-L627 I was able to fix this by adding these lines inside that if-statement to make sure that the node doesn't get deleted if there is new text content in the node by the time that function runs:

const latestTextContent = node.getTextContent();
if (latestTextContent.length > 0) {
  return;
}

Google Input Tools seems to also fire a deleteContentBackward input event when you press Enter to add a new word. This seems to be causing the issue for the second case, typing in an already existing TextNode. From what I can tell from my debugging, the deleteContentBackward event seems to delete the inserted text before its "committed"