fix(richtext-lexical): make the toolbar indent button consider the disabledNodes property on IndentFeature (#11739)

Fixes #11677

Author: GermanJablo

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ElementNode, LexicalNode } from 'lexical'
+import type { BaseSelection, ElementNode, LexicalNode } from 'lexical'
 
 import { $findMatchingParent } from '@lexical/utils'
 import {
@@ -15,10 +15,11 @@ import type { ToolbarGroup } from '../../toolbars/types.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 { type IndentFeatureProps } from '../server/index.js'
 import { IndentPlugin } from './IndentPlugin.js'
 import { toolbarIndentGroupWithItems } from './toolbarIndentGroup.js'
 
-const toolbarGroups: ToolbarGroup[] = [
+const toolbarGroups = ({ disabledNodes }: IndentFeatureProps): ToolbarGroup[] => [
   toolbarIndentGroupWithItems([
     {
       ChildComponent: IndentDecreaseIcon,
@@ -40,16 +41,10 @@ const toolbarGroups: ToolbarGroup[] = [
             }
           }
         }
-        if (!atLeastOneNodeCanOutdent && $isRangeSelection(selection)) {
-          const anchorNode = selection.anchor.getNode()
-          if (
-            $findMatchingParent(anchorNode, (node) => isIndentable(node) && node.getIndent() > 0)
-          ) {
-            return true
-          }
-          const focusNode = selection.focus.getNode()
+
+        if (!atLeastOneNodeCanOutdent) {
           if (
-            $findMatchingParent(focusNode, (node) => isIndentable(node) && node.getIndent() > 0)
+            $pointsAncestorMatch(selection, (node) => isIndentable(node) && node.getIndent() > 0)
           ) {
             return true
           }
@@ -68,6 +63,18 @@ const toolbarGroups: ToolbarGroup[] = [
     {
       ChildComponent: IndentIncreaseIcon,
       isActive: () => false,
+      isEnabled: ({ selection }) => {
+        const nodes = selection?.getNodes()
+        if (!nodes?.length) {
+          return false
+        }
+        if (nodes.some((node) => disabledNodes?.includes(node.getType()))) {
+          return false
+        }
+        return !$pointsAncestorMatch(selection, (node) =>
+          (disabledNodes ?? []).includes(node.getType()),
+        )
+      },
       key: 'indentIncrease',
       label: ({ i18n }) => {
         return i18n.t('lexical:indent:increaseLabel')
@@ -80,17 +87,32 @@ const toolbarGroups: ToolbarGroup[] = [
   ]),
 ]
 
-export const IndentFeatureClient = createClientFeature({
-  plugins: [
-    {
-      Component: IndentPlugin,
-      position: 'normal',
+export const IndentFeatureClient = createClientFeature<IndentFeatureProps>(({ props }) => {
+  const disabledNodes = props.disabledNodes ?? []
+  return {
+    plugins: [
+      {
+        Component: IndentPlugin,
+        position: 'normal',
+      },
+    ],
+    sanitizedClientFeatureProps: props,
+    toolbarFixed: {
+      groups: toolbarGroups({ disabledNodes }),
     },
-  ],
-  toolbarFixed: {
-    groups: toolbarGroups,
-  },
-  toolbarInline: {
-    groups: toolbarGroups,
-  },
+    toolbarInline: {
+      groups: toolbarGroups({ disabledNodes }),
+    },
+  }
 })
+
+function $pointsAncestorMatch(
+  selection: BaseSelection,
+  fn: (node: LexicalNode) => boolean,
+): boolean {
+  return (
+    $isRangeSelection(selection) &&
+    (!!$findMatchingParent(selection.anchor.getNode(), fn) ||
+      !!$findMatchingParent(selection.focus.getNode(), fn))
+  )
+}