feat: Migrate input bar to Lexical

[przemvs]

Description

This is a major refactor of the InputBar to now use https://lexical.dev/
This will fix issues like dealing with international keyboard better and also improve the overall architecture of the input bar

Note for the reviewers

This is a huge PR, no doubt about this. Note that:

• most of the logic is hidden inside of the RichTextEditor folder, there lives the core of the input bar logic.

E2E test to run:

• mentioning someone (with the @ symbol)
• deleting a mention
• reply to a message
• switching conversation and check that text is still there (with mentions)
• add emojis using the : symbol
• inline replacement of emojis (eg. ;) should be converted to 😉 )
• typing indicator (start typing, stop typing, delete entire message, send message, switch conversation)
• markdown editing

To Fix:

• searching for a user in the current conversation switches focus back to the inputbar
• pressing arrow up when in mention mode will load the last sent message in edit mode

[codecov]

Codecov Report

Merging #15507 (f04b2f7) into dev (cbe34d9) will decrease coverage by 0.39%.
The diff coverage is 31.25%.

@@            Coverage Diff             @@
##              dev   #15507      +/-   ##
==========================================
- Coverage   44.67%   44.28%   -0.39%     
==========================================
  Files         668      683      +15     
  Lines       22671    22920     +249     
  Branches     5169     5214      +45     
==========================================
+ Hits        10128    10150      +22     
- Misses      11245    11469     +224     
- Partials     1298     1301       +3     

[arjita-mitra]

why are you using only if blocks? using else if will make it more readable. Alternatively you can use separate helper functions for each type of node selection to make the code more self-explanatory.

 const selectEnd = ($isElementNode(node: Node)): void => {
    node.selectEnd();
    handled = true;
  };

  const selectText = ($isTextNode(node: Node)): void => {
    node.select();
    handled = true;
  };
  
   if ($isElementNode(nodeToSelect)) {
    selectEnd(nodeToSelect);
  } else if ($isTextNode(nodeToSelect)) {
    selectText(nodeToSelect);
  } 
  // rest of the code

[przemvs]

It comes from Mention plugin from Lexical, and this if's is more readable ;)

[arjita-mitra]

I don't think so, it was a large block of if's without any description. its definitely not more readable.

[przemvs]

It's change to one function named onArrowPress. So now we can reuse it for keys: ArrowLeft and ArrowRight and other keys if we want. So I'll add for You comment for what element we handling.

[arjita-mitra]

same feedback goes here too

[arjita-mitra]

if this is an existing file then copyright should't change

[przemvs]

It's not used, I remove hook.

[arjita-mitra]

this is an existing file, for existing file we shouldn't change the copyright year.

[atomrc]

Reviewers: please bear in mind that this plugin was copy/pasted from the lexical repo (and modified to work in reverse order)

[atomrc]

Since I needed the same logic for the "replaceEmoji" user preference, I extracted that logic to a more generic hook

[przemvs]

Please move 300 to const, now we don't know what it mean :(

[PatrykBuniX]

Don't we want to use exact versions here as well?

[atomrc]

good call 👌