Add max-indent for INDENT_CONTENT_COMMAND and corresponding plugins

packages/lexical-playground/src/Editor.tsx

@@ -28,6 +28,7 @@ import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {CAN_USE_DOM} from 'shared/canUseDOM';
 
+import {MAX_INDENT} from './appSettings';
 import {createWebsocketProvider} from './collaboration';
 import {useSettings} from './context/SettingsContext';
 import {useSharedHistoryContext} from './context/SharedHistoryContext';
@@ -55,7 +56,6 @@ import InlineImagePlugin from './plugins/InlineImagePlugin';
 import KeywordsPlugin from './plugins/KeywordsPlugin';
 import {LayoutPlugin} from './plugins/LayoutPlugin/LayoutPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
-import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
 import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
 import {MaxLengthPlugin} from './plugins/MaxLengthPlugin';
 import MentionsPlugin from './plugins/MentionsPlugin';
@@ -200,7 +200,6 @@ export default function Editor(): JSX.Element {
             <CodeHighlightPlugin />
             <ListPlugin />
             <CheckListPlugin />
-            <ListMaxIndentLevelPlugin maxDepth={7} />
             <TablePlugin
               hasCellMerge={tableCellMerge}
               hasCellBackgroundColor={tableCellBackgroundColor}
@@ -219,7 +218,7 @@ export default function Editor(): JSX.Element {
             <EquationsPlugin />
             <ExcalidrawPlugin />
             <TabFocusPlugin />
-            <TabIndentationPlugin />
+            <TabIndentationPlugin maxIndent={MAX_INDENT} />
             <CollapsiblePlugin />
             <PageBreakPlugin />
             <LayoutPlugin />

packages/lexical-playground/src/appSettings.ts

@@ -42,3 +42,5 @@ export const INITIAL_SETTINGS: Record<SettingName, boolean> = {
 export type SettingName = keyof typeof DEFAULT_SETTINGS;
 
 export type Settings = typeof INITIAL_SETTINGS;
+
+export const MAX_INDENT = 7;

packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx

@@ -19,6 +19,7 @@ import {
 } from 'lexical';
 import {Dispatch, useEffect} from 'react';
 
+import {MAX_INDENT} from '../../appSettings';
 import {useToolbarState} from '../../context/ToolbarContext';
 import {sanitizeUrl} from '../../utils/url';
 import {
@@ -98,7 +99,7 @@ export default function ShortcutsPlugin({
         editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
       } else if (isIndent(event)) {
         event.preventDefault();
-        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+        editor.dispatchCommand(INDENT_CONTENT_COMMAND, MAX_INDENT);
       } else if (isOutdent(event)) {
         event.preventDefault();
         editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);

packages/lexical-react/flow/LexicalTabIndentationPlugin.js.flow

@@ -11,6 +11,11 @@ import type {LexicalEditor} from 'lexical';
 
 declare export function registerTabIndentation(
   editor: LexicalEditor,
+  maxIndent?: number,
 ): () => void;
 
-declare export function TabIndentationPlugin(): null;
+type Props = $ReadOnly<{
+  maxIndent?: number,
+}>;
+
+declare export function TabIndentationPlugin(props: Props): null;

packages/lexical-react/src/LexicalTabIndentationPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import type {LexicalCommand, LexicalEditor, RangeSelection} from 'lexical';
+import type {LexicalEditor, RangeSelection} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$filter, $getNearestBlockElementAncestorOrThrow} from '@lexical/utils';
@@ -57,7 +57,10 @@ function $indentOverTab(selection: RangeSelection): boolean {
   return false;
 }
 
-export function registerTabIndentation(editor: LexicalEditor) {
+export function registerTabIndentation(
+  editor: LexicalEditor,
+  maxIndent?: number,
+) {
   return editor.registerCommand<KeyboardEvent>(
     KEY_TAB_COMMAND,
     (event) => {
@@ -67,12 +70,11 @@ export function registerTabIndentation(editor: LexicalEditor) {
       }
 
       event.preventDefault();
-      const command: LexicalCommand<void> = $indentOverTab(selection)
+      return $indentOverTab(selection)
         ? event.shiftKey
-          ? OUTDENT_CONTENT_COMMAND
-          : INDENT_CONTENT_COMMAND
-        : INSERT_TAB_COMMAND;
-      return editor.dispatchCommand(command, undefined);
+          ? editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+          : editor.dispatchCommand(INDENT_CONTENT_COMMAND, maxIndent)
+        : editor.dispatchCommand(INSERT_TAB_COMMAND, undefined);
     },
     COMMAND_PRIORITY_EDITOR,
   );
@@ -83,11 +85,11 @@ export function registerTabIndentation(editor: LexicalEditor) {
  * recommend using this plugin as it could negatively affect acessibility for keyboard
  * users, causing focus to become trapped within the editor.
  */
-export function TabIndentationPlugin(): null {
+export function TabIndentationPlugin({maxIndent}: {maxIndent?: number}): null {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
-    return registerTabIndentation(editor);
-  }, [editor]);
+    return registerTabIndentation(editor, maxIndent);
+  }, [editor, maxIndent]);
 
   return null;
 }

packages/lexical-rich-text/src/index.ts

@@ -708,10 +708,12 @@ export function registerRichText(editor: LexicalEditor): () => void {
     ),
     editor.registerCommand(
       INDENT_CONTENT_COMMAND,
-      () => {
+      (maxIndent) => {
         return $handleIndentAndOutdent((block) => {
-          const indent = block.getIndent();
-          block.setIndent(indent + 1);
+          const indent = block.getIndent() + 1;
+          block.setIndent(
+            maxIndent == null ? indent : Math.min(indent, maxIndent as number),
+          );
         });
       },
       COMMAND_PRIORITY_EDITOR,

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<void>;
+declare export var INDENT_CONTENT_COMMAND: LexicalCommand<number | void>;
 declare export var OUTDENT_CONTENT_COMMAND: LexicalCommand<void>;
 declare export var DROP_COMMAND: LexicalCommand<DragEvent>;
 declare export var FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType>;

packages/lexical/src/LexicalCommands.ts

@@ -83,9 +83,8 @@ 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<void> = createCommand(
-  'INDENT_CONTENT_COMMAND',
-);
+export const INDENT_CONTENT_COMMAND: LexicalCommand<number | void> =
+  createCommand('INDENT_CONTENT_COMMAND');
 export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
   'OUTDENT_CONTENT_COMMAND',
 );