fix(richtext-lexical): allow to indent and outdent if at least one selected node allows it (#12182)

### What?
Enables the indent/outdent button if at least one selected node can be
indented/outdented.

### Why?
Before, the buttons were disabled e.g. if multiple nodes were selected
of which one was not indentable/outdentable or if a child node was not
indentable but the parent was, leading to inconsistent behavior.

### How?
Checks if the node itself or any parent fulfills the criteria. The
change affects only the buttons active state, not the actual indentation
logic.

Fixes #12042

Author: tak-amboss

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

@@ -1,14 +1,9 @@
 'use client'
 
-import type { BaseSelection, ElementNode, LexicalNode } from 'lexical'
+import type { ElementNode, LexicalNode } from 'lexical'
 
 import { $findMatchingParent } from '@lexical/utils'
-import {
-  $isElementNode,
-  $isRangeSelection,
-  INDENT_CONTENT_COMMAND,
-  OUTDENT_CONTENT_COMMAND,
-} from 'lexical'
+import { $isElementNode, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
 
 import type { ToolbarGroup } from '../../toolbars/types.js'
 
@@ -25,31 +20,15 @@ const toolbarGroups = ({ disabledNodes }: IndentFeatureProps): ToolbarGroup[] =>
       ChildComponent: IndentDecreaseIcon,
       isActive: () => false,
       isEnabled: ({ selection }) => {
-        const nodes = selection?.getNodes()
-        if (!nodes?.length) {
-          return false
-        }
-        let atLeastOneNodeCanOutdent = false
-        const isIndentable = (node: LexicalNode): node is ElementNode =>
-          $isElementNode(node) && node.canIndent()
-        for (const node of nodes) {
-          if (isIndentable(node)) {
-            if (node.getIndent() <= 0) {
-              return false
-            } else {
-              atLeastOneNodeCanOutdent = true
-            }
-          }
-        }
+        const nodes = selection?.getNodes() ?? []
 
-        if (!atLeastOneNodeCanOutdent) {
-          if (
-            $pointsAncestorMatch(selection, (node) => isIndentable(node) && node.getIndent() > 0)
-          ) {
-            return true
-          }
+        const isOutdentable = (node: LexicalNode) => {
+          return isIndentable(node) && node.getIndent() > 0
         }
-        return atLeastOneNodeCanOutdent
+
+        return nodes.some((node) => {
+          return isOutdentable(node) || Boolean($findMatchingParent(node, isOutdentable))
+        })
       },
       key: 'indentDecrease',
       label: ({ i18n }) => {
@@ -64,11 +43,18 @@ const toolbarGroups = ({ disabledNodes }: IndentFeatureProps): ToolbarGroup[] =>
       ChildComponent: IndentIncreaseIcon,
       isActive: () => false,
       isEnabled: ({ selection }) => {
-        const nodes = selection?.getNodes()
-        if (!nodes?.length) {
-          return false
+        const nodes = selection?.getNodes() ?? []
+
+        const isIndentableAndNotDisabled = (node: LexicalNode) => {
+          return isIndentable(node) && !(disabledNodes ?? []).includes(node.getType())
         }
-        return !nodes.some((node) => disabledNodes?.includes(node.getType()))
+
+        return nodes.some((node) => {
+          return (
+            isIndentableAndNotDisabled(node) ||
+            Boolean($findMatchingParent(node, isIndentableAndNotDisabled))
+          )
+        })
       },
       key: 'indentIncrease',
       label: ({ i18n }) => {
@@ -101,13 +87,5 @@ export const IndentFeatureClient = createClientFeature<IndentFeatureProps>(({ pr
   }
 })
 
-function $pointsAncestorMatch(
-  selection: BaseSelection,
-  fn: (node: LexicalNode) => boolean,
-): boolean {
-  return (
-    $isRangeSelection(selection) &&
-    (!!$findMatchingParent(selection.anchor.getNode(), fn) ||
-      !!$findMatchingParent(selection.focus.getNode(), fn))
-  )
-}
+const isIndentable = (node: LexicalNode): node is ElementNode =>
+  $isElementNode(node) && node.canIndent()