Move max indent logic to plugin

facebook · Jan 6, 2025 · 54ba15d · 54ba15d
1 parent c67352f
commit 54ba15d
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 26 deletions.
diff --git a/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx b/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx
@@ -19,7 +19,6 @@ import {
 } from 'lexical';
 import {Dispatch, useEffect} from 'react';
 
-import {MAX_INDENT} from '../../appSettings';
 import {useToolbarState} from '../../context/ToolbarContext';
 import {sanitizeUrl} from '../../utils/url';
 import {
@@ -99,7 +98,7 @@ export default function ShortcutsPlugin({
         editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
       } else if (isIndent(event)) {
         event.preventDefault();
-        editor.dispatchCommand(INDENT_CONTENT_COMMAND, MAX_INDENT);
+        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
       } else if (isOutdent(event)) {
         event.preventDefault();
         editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);

diff --git a/packages/lexical-react/src/LexicalTabIndentationPlugin.tsx b/packages/lexical-react/src/LexicalTabIndentationPlugin.tsx
@@ -9,13 +9,19 @@
 import type {LexicalEditor, RangeSelection} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$filter, $getNearestBlockElementAncestorOrThrow} from '@lexical/utils';
+import {
+  $filter,
+  $getNearestBlockElementAncestorOrThrow,
+  mergeRegister,
+} from '@lexical/utils';
 import {
   $createRangeSelection,
   $getSelection,
   $isBlockElementNode,
+  $isElementNode,
   $isRangeSelection,
   $normalizeSelection__EXPERIMENTAL,
+  COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_EDITOR,
   INDENT_CONTENT_COMMAND,
   INSERT_TAB_COMMAND,
@@ -61,22 +67,50 @@ export function registerTabIndentation(
   editor: LexicalEditor,
   maxIndent?: number,
 ) {
-  return editor.registerCommand<KeyboardEvent>(
-    KEY_TAB_COMMAND,
-    (event) => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) {
-        return false;
-      }
+  return mergeRegister(
+    editor.registerCommand<KeyboardEvent>(
+      KEY_TAB_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        event.preventDefault();
+        return $indentOverTab(selection)
+          ? event.shiftKey
+            ? editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+            : editor.dispatchCommand(INDENT_CONTENT_COMMAND, maxIndent)
+          : editor.dispatchCommand(INSERT_TAB_COMMAND, undefined);
+      },
+      COMMAND_PRIORITY_EDITOR,
+    ),
+
+    editor.registerCommand(
+      INDENT_CONTENT_COMMAND,
+      () => {
+        if (maxIndent == null) {
+          return false;
+        }
+
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const indents = selection
+          .getNodes()
+          .map((node) =>
+            ($isElementNode(node) && !node.isInline()
+              ? node
+              : node.getParentOrThrow()
+            ).getIndent(),
+          );
 
-      event.preventDefault();
-      return $indentOverTab(selection)
-        ? event.shiftKey
-          ? editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
-          : editor.dispatchCommand(INDENT_CONTENT_COMMAND, maxIndent)
-        : editor.dispatchCommand(INSERT_TAB_COMMAND, undefined);
-    },
-    COMMAND_PRIORITY_EDITOR,
+        return Math.max(...indents) + 1 >= maxIndent;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    ),
   );
 }
 

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -708,12 +708,10 @@ export function registerRichText(editor: LexicalEditor): () => void {
     ),
     editor.registerCommand(
       INDENT_CONTENT_COMMAND,
-      (maxIndent) => {
+      () => {
         return $handleIndentAndOutdent((block) => {
-          const indent = block.getIndent() + 1;
-          block.setIndent(
-            maxIndent == null ? indent : Math.min(indent, maxIndent as number),
-          );
+          const indent = block.getIndent();
+          block.setIndent(indent + 1);
         });
       },
       COMMAND_PRIORITY_EDITOR,

diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow
@@ -39,7 +39,7 @@ declare export var KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent>;
 declare export var KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent>;
 declare export var INSERT_TAB_COMMAND: LexicalCommand<void>;
 declare export var KEY_MODIFIER_COMMAND: LexicalCommand<KeyboardEvent>;
-declare export var INDENT_CONTENT_COMMAND: LexicalCommand<number | void>;
+declare export var INDENT_CONTENT_COMMAND: LexicalCommand<void>;
 declare export var OUTDENT_CONTENT_COMMAND: LexicalCommand<void>;
 declare export var DROP_COMMAND: LexicalCommand<DragEvent>;
 declare export var FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType>;

diff --git a/packages/lexical/src/LexicalCommands.ts b/packages/lexical/src/LexicalCommands.ts
@@ -83,8 +83,9 @@ export const KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent> =
   createCommand('KEY_TAB_COMMAND');
 export const INSERT_TAB_COMMAND: LexicalCommand<void> =
   createCommand('INSERT_TAB_COMMAND');
-export const INDENT_CONTENT_COMMAND: LexicalCommand<number | void> =
-  createCommand('INDENT_CONTENT_COMMAND');
+export const INDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
+  'INDENT_CONTENT_COMMAND',
+);
 export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
   'OUTDENT_CONTENT_COMMAND',
 );