From 54ba15d0973913f2c0971e50b82e39b7d7b5f434 Mon Sep 17 00:00:00 2001 From: fantactuka Date: Mon, 6 Jan 2025 10:45:14 -0500 Subject: [PATCH] Move max indent logic to plugin --- .../src/plugins/ShortcutsPlugin/index.tsx | 3 +- .../src/LexicalTabIndentationPlugin.tsx | 66 ++++++++++++++----- packages/lexical-rich-text/src/index.ts | 8 +-- packages/lexical/flow/Lexical.js.flow | 2 +- packages/lexical/src/LexicalCommands.ts | 5 +- 5 files changed, 58 insertions(+), 26 deletions(-) diff --git a/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx b/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx index c3f26be196d..4549d8a10e8 100644 --- 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 index 63bf165f1a1..7a21a5b3279 100644 --- 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( - KEY_TAB_COMMAND, - (event) => { - const selection = $getSelection(); - if (!$isRangeSelection(selection)) { - return false; - } + return mergeRegister( + editor.registerCommand( + 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 index eb859c582a2..cec5da17fa7 100644 --- 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 index 99f087e9cce..dccc5987079 100644 --- 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; declare export var KEY_TAB_COMMAND: LexicalCommand; declare export var INSERT_TAB_COMMAND: LexicalCommand; declare export var KEY_MODIFIER_COMMAND: LexicalCommand; -declare export var INDENT_CONTENT_COMMAND: LexicalCommand; +declare export var INDENT_CONTENT_COMMAND: LexicalCommand; declare export var OUTDENT_CONTENT_COMMAND: LexicalCommand; declare export var DROP_COMMAND: LexicalCommand; declare export var FORMAT_ELEMENT_COMMAND: LexicalCommand; diff --git a/packages/lexical/src/LexicalCommands.ts b/packages/lexical/src/LexicalCommands.ts index 0e0d5f57808..0f1c0a5d31e 100644 --- a/packages/lexical/src/LexicalCommands.ts +++ b/packages/lexical/src/LexicalCommands.ts @@ -83,8 +83,9 @@ export const KEY_TAB_COMMAND: LexicalCommand = createCommand('KEY_TAB_COMMAND'); export const INSERT_TAB_COMMAND: LexicalCommand = createCommand('INSERT_TAB_COMMAND'); -export const INDENT_CONTENT_COMMAND: LexicalCommand = - createCommand('INDENT_CONTENT_COMMAND'); +export const INDENT_CONTENT_COMMAND: LexicalCommand = createCommand( + 'INDENT_CONTENT_COMMAND', +); export const OUTDENT_CONTENT_COMMAND: LexicalCommand = createCommand( 'OUTDENT_CONTENT_COMMAND', );