feat(richtext-lexical): allow disabling indentation for specific nodes (#11631)

allow disabling indentation for specific nodes via IndentFeature

Usage: 

```ts
editor: lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    IndentFeature({
      // the array must contain the "type" property of registered indentable nodes
      disabledNodes: ['paragraph', 'listitem'],
    }),
  ],
}),
```

The nodes "paragraph", "heading", "listitem", "quote" remain indentable
by default, even without `IndentFeature` registered.

In a future PR we will probably add the option to disable TabNode.

Author: GermanJablo

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

@@ -0,0 +1,73 @@
+import type { ElementNode } from 'lexical'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
+import { $findMatchingParent, mergeRegister } from '@lexical/utils'
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  INDENT_CONTENT_COMMAND,
+} 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) => {
+  const [editor] = useLexicalComposerContext()
+  const { disabledNodes } = props.clientProps
+
+  useEffect(() => {
+    if (!editor || !disabledNodes?.length) {
+      return
+    }
+    return mergeRegister(
+      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])
+
+  return <TabIndentationPlugin />
+}
+
+function $handleIndentAndOutdent(indentOrOutdent: (block: ElementNode) => void): boolean {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection)) {
+    return false
+  }
+  const alreadyHandled = new Set()
+  const nodes = selection.getNodes()
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]!
+    const key = node.getKey()
+    if (alreadyHandled.has(key)) {
+      continue
+    }
+    const parentBlock = $findMatchingParent(
+      node,
+      (parentNode): parentNode is ElementNode =>
+        $isElementNode(parentNode) && !parentNode.isInline(),
+    )
+    if (parentBlock === null) {
+      continue
+    }
+    const parentKey = parentBlock.getKey()
+    if (parentBlock.canIndent() && !alreadyHandled.has(parentKey)) {
+      alreadyHandled.add(parentKey)
+      indentOrOutdent(parentBlock)
+    }
+  }
+  return alreadyHandled.size > 0
+}

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

@@ -2,7 +2,6 @@
 
 import type { ElementNode, LexicalNode } from 'lexical'
 
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
 import { $findMatchingParent } from '@lexical/utils'
 import {
   $isElementNode,
@@ -12,11 +11,11 @@ import {
 } from 'lexical'
 
 import type { ToolbarGroup } from '../../toolbars/types.js'
-import type { PluginComponent } from '../../typesClient.js'
 
 import { IndentDecreaseIcon } from '../../../lexical/ui/icons/IndentDecrease/index.js'
 import { IndentIncreaseIcon } from '../../../lexical/ui/icons/IndentIncrease/index.js'
 import { createClientFeature } from '../../../utilities/createClientFeature.js'
+import { IndentPlugin } from './IndentPlugin.js'
 import { toolbarIndentGroupWithItems } from './toolbarIndentGroup.js'
 
 const toolbarGroups: ToolbarGroup[] = [
@@ -84,7 +83,7 @@ const toolbarGroups: ToolbarGroup[] = [
 export const IndentFeatureClient = createClientFeature({
   plugins: [
     {
-      Component: TabIndentationPlugin as PluginComponent,
+      Component: IndentPlugin,
       position: 'normal',
     },
   ],

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

@@ -1,10 +1,25 @@
 import { createServerFeature } from '../../../utilities/createServerFeature.js'
 import { i18n } from './i18n.js'
 
-export const IndentFeature = createServerFeature({
-  feature: {
-    ClientFeature: '@payloadcms/richtext-lexical/client#IndentFeatureClient',
-    i18n,
+export type IndentFeatureProps = {
+  /**
+   * The nodes that should not be indented. "type" property of the nodes you don't want to be indented.
+   * These can be: "paragraph", "heading", "listitem", "quote" or other indentable nodes if they exist.
+   */
+  disabledNodes?: string[]
+}
+
+export const IndentFeature = createServerFeature<
+  IndentFeatureProps,
+  IndentFeatureProps,
+  IndentFeatureProps
+>({
+  feature: ({ props }) => {
+    return {
+      ClientFeature: '@payloadcms/richtext-lexical/client#IndentFeatureClient',
+      clientFeatureProps: props,
+      i18n,
+    }
   },
   key: 'indent',
 })