feat(richtext-lexical): allow disabling TabNode (#11656)

Similar to #11631.

IndentFeature causes pressing Tab in the middle of a block such as a
paragraph or heading to insert a TabNode. This property allows you to
disable this behavior, and indentation will occur instead if the block
allows it.

Usage: 
```ts
editor: lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    IndentFeature({
      disableTabNode: true,
    }),
  ],
}),
```

Author: GermanJablo

packages/richtext-lexical/src/features/indent/client/IndentPlugin.tsx

@@ -9,35 +9,62 @@ import {
   $isRangeSelection,
   COMMAND_PRIORITY_LOW,
   INDENT_CONTENT_COMMAND,
+  KEY_TAB_COMMAND,
+  OUTDENT_CONTENT_COMMAND,
+  TabNode,
 } from 'lexical'
 import { useEffect } from 'react'
 
 import type { PluginComponent } from '../../typesClient.js'
 import type { IndentFeatureProps } from '../server/index.js'
 
-export const IndentPlugin: PluginComponent<IndentFeatureProps> = (props) => {
+export const IndentPlugin: PluginComponent<IndentFeatureProps> = ({ clientProps }) => {
   const [editor] = useLexicalComposerContext()
-  const { disabledNodes } = props.clientProps
+  const { disabledNodes, disableTabNode } = clientProps
 
   useEffect(() => {
     if (!editor || !disabledNodes?.length) {
       return
     }
+    return editor.registerCommand(
+      INDENT_CONTENT_COMMAND,
+      () => {
+        return $handleIndentAndOutdent((block) => {
+          if (!disabledNodes.includes(block.getType())) {
+            const indent = block.getIndent()
+            block.setIndent(indent + 1)
+          }
+        })
+      },
+      COMMAND_PRIORITY_LOW,
+    )
+  }, [editor, disabledNodes])
+
+  useEffect(() => {
+    if (!editor || !disableTabNode) {
+      return
+    }
     return mergeRegister(
-      editor.registerCommand(
-        INDENT_CONTENT_COMMAND,
-        () => {
-          return $handleIndentAndOutdent((block) => {
-            if (!disabledNodes.includes(block.getType())) {
-              const indent = block.getIndent()
-              block.setIndent(indent + 1)
-            }
-          })
+      // This is so that when you press Tab in the middle of a paragraph,
+      // it indents the paragraph, instead of inserting a TabNode.
+      editor.registerCommand<KeyboardEvent>(
+        KEY_TAB_COMMAND,
+        (event) => {
+          event.preventDefault()
+          return editor.dispatchCommand(
+            event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND,
+            undefined,
+          )
         },
         COMMAND_PRIORITY_LOW,
       ),
+      // Tab isn't the only way to insert a TabNode. We have to make sure
+      // it doesn't happen, for example, when pasting from the clipboard.
+      editor.registerNodeTransform(TabNode, (node) => {
+        node.remove()
+      }),
     )
-  }, [editor, disabledNodes])
+  }, [editor, disableTabNode])
 
   return <TabIndentationPlugin />
 }

packages/richtext-lexical/src/features/indent/server/index.ts

@@ -7,6 +7,13 @@ export type IndentFeatureProps = {
    * These can be: "paragraph", "heading", "listitem", "quote" or other indentable nodes if they exist.
    */
   disabledNodes?: string[]
+  /**
+   * If true, pressing Tab in the middle of a block such as a paragraph or heading will not insert a tabNode.
+   * Instead, Tab will only be used for block-level indentation.
+   *
+   * @default false
+   */
+  disableTabNode?: boolean
 }
 
 export const IndentFeature = createServerFeature<