Bug: Indenting a DecoratorNode (ie TweetNode) causes exception and makes editor unresponsive.

[tvongaza]

Lexical version: Latest on playground as of Feb 22, 2024.

Steps To Reproduce

1. Visit the lexical playground https://playground.lexical.dev/
2. Select all text in the playground and remove it.
3. Add a type of decorator node such as a tweet.
4. Command+A to select all text in the editor (or whatever way you want to select the node), including the decorator node.
5. Hit "Tab".
6. The editor becomes unresponsive after this error, with no input working.
7. View console log, you will see an error pointing to https://lexical.dev/docs/error?code=4&v=53.
8. On my local development the error looks like:

editor-component.tsx:104 Uncaught Error: Expected node 10 to have closest block element node.
    at Object.$getNearestBlockElementAncestorOrThrow (chunk-WDPDQGT4.js?v=441f9f23:363:17)
    at handleIndentAndOutdent (chunk-NTIMGF3I.js?v=441f9f23:880:35)
    at Array.<anonymous> (chunk-NTIMGF3I.js?v=441f9f23:993:16)
    at triggerCommandListeners (chunk-37CEAJO2.js?v=441f9f23:7170:33)
    at dispatchCommand (chunk-37CEAJO2.js?v=441f9f23:1091:14)
    at LexicalEditor.dispatchCommand (chunk-37CEAJO2.js?v=441f9f23:8532:16)
    at Array.<anonymous> (custom-tab-identation-plugin.tsx:87:23)
    at triggerCommandListeners (chunk-37CEAJO2.js?v=441f9f23:7170:33)
    at chunk-37CEAJO2.js?v=441f9f23:7154:23
    at beginUpdate (chunk-37CEAJO2.js?v=441f9f23:7276:9)

Link to code example:

This exists in the lexical playground. I believe the issue is that LexicalRichText calls $getNearestBlockElementAncestorOrThrow on the DecoratorNode. $getNearestBlockElementAncestorOrThrow has an exception raising check if (!$isElementNode(blockNode)) { but a DecoratorNode is not an ElementNode, thus raises an exception.

https://github.com/facebook/lexical/blob/main/packages/lexical-rich-text/src/index.ts#L508
https://github.com/facebook/lexical/blob/main/packages/lexical-utils/src/index.ts#L239

Note similar code is in the LexicalTabIndentationPlugin which may also cause issues:

• https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalTabIndentationPlugin.tsx#L45
• Have not done an audit of the code, maybe more places.

The current behavior

• Exception thrown when a decorator node is selected and tab is pressed, this exception then makes the editor unresponsive.

The expected behavior

• No exception thrown. Unsure if the decorator node should allow indentation or not, regardless it shouldn't make the editor unresponsive.