@octanejs/lexical 0.1.9 → 0.1.10

package/src/LexicalHorizontalRuleNode.tsrx

@@ -10,6 +10,7 @@ import {
 } from '@lexical/extension';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useLexicalNodeSelection } from './useLexicalNodeSelection';
+import type { SerializedHorizontalRuleNode } from '@lexical/extension';
 import {
 	$applyNodeReplacement,
 	addClassNamesToElement,
@@ -19,11 +20,13 @@ import {
 	mergeRegister,
 	removeClassNamesFromElement,
 } from 'lexical';
+import type { DOMConversionMap, DOMConversionOutput, NodeKey } from 'lexical';
 import { useEffect } from 'octane';
+import type { OctaneNode } from 'octane';
 
 export { $isHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/extension';
 
-function HorizontalRuleComponent(props) {
+function HorizontalRuleComponent(props: { nodeKey: NodeKey }) {
 	const nodeKey = props.nodeKey;
 	const [editor] = useLexicalComposerContext();
 	const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -68,15 +71,15 @@ export class HorizontalRuleNode extends BaseHorizontalRuleNode {
 		return 'horizontalrule';
 	}
 
-	static clone(node) {
+	static clone(node: HorizontalRuleNode): HorizontalRuleNode {
 		return new HorizontalRuleNode(node.__key);
 	}
 
-	static importJSON(serializedNode) {
+	static importJSON(serializedNode: SerializedHorizontalRuleNode): HorizontalRuleNode {
 		return $createHorizontalRuleNode().updateFromJSON(serializedNode);
 	}
 
-	static importDOM() {
+	static importDOM(): DOMConversionMap | null {
 		return {
 			hr: () => ({
 				conversion: $convertHorizontalRuleElement,
@@ -85,15 +88,15 @@ export class HorizontalRuleNode extends BaseHorizontalRuleNode {
 		};
 	}
 
-	decorate() {
+	decorate(): OctaneNode {
 		return <HorizontalRuleComponent nodeKey={this.__key} />;
 	}
 }
 
-function $convertHorizontalRuleElement() {
+function $convertHorizontalRuleElement(): DOMConversionOutput {
 	return { node: $createHorizontalRuleNode() };
 }
 
-export function $createHorizontalRuleNode() {
+export function $createHorizontalRuleNode(): HorizontalRuleNode {
 	return $applyNodeReplacement(new HorizontalRuleNode());
 }

package/src/LexicalLinkPlugin.tsrx

@@ -2,10 +2,16 @@
 // @lexical/extension's framework-agnostic core.
 import { namedSignals } from '@lexical/extension';
 import { LinkNode, registerLink } from '@lexical/link';
+import type { LinkAttributes } from '@lexical/link';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
-export function LinkPlugin(props) {
+type Props = {
+	validateUrl?: (url: string) => boolean;
+	attributes?: LinkAttributes;
+};
+
+export function LinkPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const validateUrl = props.validateUrl;
 	const attributes = props.attributes;

package/src/LexicalListPlugin.tsrx

@@ -10,7 +10,23 @@ import { useLexicalComposerContext } from './LexicalComposerContext';
 import { mergeRegister } from 'lexical';
 import { useEffect } from 'octane';
 
-export function ListPlugin(props) {
+/**
+ * Props for the {@link ListPlugin} component.
+ */
+export interface ListPluginProps {
+	/**
+ * When `true`, enforces strict indentation rules for list items, ensuring
+ * consistent structure. When `false` (default), indentation is more flexible.
+ */
+	hasStrictIndent?: boolean;
+	/**
+ * When `true`, splitting a numbered list will preserve the numbering
+ * continuity. When `false` (default), the new split list resets to 1.
+ */
+	shouldPreserveNumbering?: boolean;
+}
+
+export function ListPlugin(props: ListPluginProps) {
 	const [editor] = useLexicalComposerContext();
 	const hasStrictIndent =
 		props.hasStrictIndent === undefined ? false : props.hasStrictIndent;

package/src/LexicalMarkdownShortcutPlugin.tsrx

@@ -5,11 +5,12 @@ import {
 	$isHorizontalRuleNode,
 	HorizontalRuleNode,
 } from '@lexical/extension';
+import type { ElementTransformer, Transformer } from '@lexical/markdown';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
-const HR = {
+const HR: ElementTransformer = {
 	dependencies: [HorizontalRuleNode],
 	export: (node) => ($isHorizontalRuleNode(node) ? '***' : null),
 	regExp: /^(---|\*\*\*|___)\s?$/,
@@ -26,9 +27,13 @@ const HR = {
 	type: 'element',
 };
 
-export const DEFAULT_TRANSFORMERS = [HR, ...TRANSFORMERS];
+export const DEFAULT_TRANSFORMERS: Transformer[] = [HR, ...TRANSFORMERS];
 
-export function MarkdownShortcutPlugin(props) {
+type Props = Readonly<{
+		transformers?: Transformer[];
+	}>;
+
+export function MarkdownShortcutPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const transformers =
 		props.transformers === undefined ? DEFAULT_TRANSFORMERS : props.transformers;

package/src/LexicalNestedComposer.tsrx

@@ -3,10 +3,19 @@
 // children via context, inheriting the parent's theme/nodes/namespace/editable
 // state by default. The nested editor is created ahead of time and passed in.
 import { createLexicalComposerContext, LexicalComposerContext } from './LexicalComposerContext';
+import type { LexicalComposerContextWithEditor } from './LexicalComposerContext';
 import { CollaborationContext } from './LexicalCollaborationContext';
 import invariant from '@lexical/internal/invariant';
 import warnOnlyOnce from '@lexical/internal/warnOnlyOnce';
+import type {
+	EditorThemeClasses,
+	Klass,
+	LexicalEditor,
+	LexicalNode,
+	LexicalNodeReplacement,
+} from 'lexical';
 import { createSharedNodeState, getRegisteredNode, getTransformSetFromKlass } from 'lexical';
+import type { OctaneNode } from 'octane';
 import { useContext, useEffect, useMemo, useRef } from 'octane';
 
 const initialNodesWarning = warnOnlyOnce(
@@ -16,7 +25,16 @@ const explicitNamespaceWarning = warnOnlyOnce(
 	`LexicalNestedComposer initialEditor should explicitly initialize its namespace when the node configuration differs from the parentEditor. For backwards compatibility, the namespace will be initialized from parentEditor until v0.32.0, but this has always had incorrect copy/paste behavior when the configuration differed.\nYou can configure your editor's namespace with createEditor({namespace: 'nested-editor-namespace', nodes: [], parentEditor: $getEditor()}).`,
 );
 
-export function LexicalNestedComposer(props) {
+export interface LexicalNestedComposerProps {
+	children?: OctaneNode;
+	initialEditor: LexicalEditor;
+	initialTheme?: EditorThemeClasses;
+	initialNodes?: readonly (Klass<LexicalNode> | LexicalNodeReplacement)[];
+	skipCollabChecks?: undefined | true;
+	skipEditableListener?: undefined | true;
+}
+
+export function LexicalNestedComposer(props: LexicalNestedComposerProps) {
 	const initialEditor = props.initialEditor;
 	const initialNodes = props.initialNodes;
 	const initialTheme = props.initialTheme;
@@ -32,7 +50,7 @@ export function LexicalNestedComposer(props) {
 
 	const [parentEditor, { getTheme: getParentTheme }] = parentContext;
 
-	const composerContext = useMemo(() => {
+	const composerContext = useMemo<LexicalComposerContextWithEditor>(() => {
 		const composerTheme = initialTheme || getParentTheme() || undefined;
 		const context = createLexicalComposerContext(parentContext, composerTheme);
 
@@ -112,7 +130,7 @@ export function LexicalNestedComposer(props) {
 
 	useEffect(() => {
 		if (!skipEditableListener) {
-			const editableListener = (editable) => initialEditor.setEditable(editable);
+			const editableListener = (editable: boolean) => initialEditor.setEditable(editable);
 			editableListener(parentEditor.isEditable());
 			return parentEditor.registerEditableListener(editableListener);
 		}

package/src/LexicalNodeContextMenuPlugin.tsrx

@@ -21,9 +21,12 @@ import {
 	FloatingOverlay,
 	FloatingFocusManager,
 } from '@octanejs/floating-ui';
+import type { FloatingStyles } from '@octanejs/floating-ui';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { $getNearestNodeFromDOMNode, $getRoot } from 'lexical';
+import type { LexicalNode } from 'lexical';
 import { useEffect, useRef, useState } from 'octane';
+import type { OctaneNode } from 'octane';
 
 class MenuOption {
 	key: string;
@@ -43,12 +46,17 @@ class MenuOption {
 export class NodeContextMenuOption extends MenuOption {
 	type: string;
 	title: string;
-	icon: unknown;
+	icon: OctaneNode | null;
 	disabled: boolean;
 	$onSelect: () => void;
-	$showOn?: (node: unknown) => boolean;
+	$showOn?: (node: LexicalNode) => boolean;
 
-	constructor(title, options) {
+	constructor(title: string, options: {
+		disabled?: boolean;
+		icon?: OctaneNode;
+		$onSelect: () => void;
+		$showOn?: (node: LexicalNode) => boolean;
+	}) {
 		super(title);
 		this.type = 'item';
 		this.title = title;
@@ -63,9 +71,9 @@ export class NodeContextMenuOption extends MenuOption {
 
 export class NodeContextMenuSeparator extends MenuOption {
 	type: string;
-	$showOn?: (node: unknown) => boolean;
+	$showOn?: (node: LexicalNode) => boolean;
 
-	constructor(options) {
+	constructor(options?: { $showOn?: (node: LexicalNode) => boolean }) {
 		super('_separator');
 		this.type = 'separator';
 		if (options && options.$showOn) {
@@ -74,10 +82,56 @@ export class NodeContextMenuSeparator extends MenuOption {
 	}
 }
 
+type ContextMenuType = NodeContextMenuOption | NodeContextMenuSeparator;
+
+interface MenuSeparatorType {
+	className: string | undefined;
+	key: string;
+	type: string;
+}
+
+interface MenuItemType extends MenuSeparatorType {
+	disabled: boolean;
+	icon: OctaneNode | null;
+	label: string;
+	onSelect: () => void;
+	title: string;
+}
+
+type MenuType = MenuItemType | MenuSeparatorType;
+
+interface Props {
+	label?: string;
+	nested?: boolean;
+	className?: string;
+	itemClassName?: string;
+	separatorClassName?: string;
+	items: ContextMenuType[];
+}
+
+// A renderable menu entry as ContextMenuList consumes it: a MenuType flattened so
+// item-only fields are optional (`type` is a plain string, so the union does not
+// discriminate), plus the item's resolved getItemProps() bag —
+// `Record<string, unknown>`, the @octanejs/floating-ui prop-getter return type.
+type ContextMenuListItem = MenuSeparatorType & {
+		disabled?: boolean;
+		icon?: OctaneNode | null;
+		label?: string;
+		itemProps: Record<string, unknown>;
+	};
+
+type ContextMenuListProps = {
+	className: string | undefined;
+	setFloating: (node: HTMLElement | null) => void;
+	floatingStyles: FloatingStyles;
+	floatingProps: Record<string, unknown>;
+	items: ContextMenuListItem[];
+};
+
 // The floating menu container + its items. Mirrors the React render's inner <div>:
 // the resolved floating props are spread onto it, and each item spreads its own
 // getItemProps() onto a <button> (or <hr> for a separator).
-function ContextMenuList(props) @{
+function ContextMenuList(props: ContextMenuListProps) @{
 	<div
 		class={props.className}
 		ref={props.setFloating}
@@ -100,19 +154,19 @@ function ContextMenuList(props) @{
 	</div>
 }
 
-export function NodeContextMenuPlugin(props) @{
+export function NodeContextMenuPlugin(props: Props) @{
 	const items = props.items;
 	const className = props.className;
 	const itemClassName = props.itemClassName;
 	const separatorClassName = props.separatorClassName;
 
 	const [editor] = useLexicalComposerContext();
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeIndex, setActiveIndex] = useState<number | null>(null);
 	const [isOpen, setIsOpen] = useState(false);
-	const [renderItems, setRenderItems] = useState([]);
+	const [renderItems, setRenderItems] = useState<MenuType[]>([]);
 
-	const listItemsRef = useRef([]);
-	const listContentRef = useRef([]);
+	const listItemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+	const listContentRef = useRef<(string | null)[]>([]);
 
 	const f = useFloating({
 		middleware: [
@@ -149,7 +203,7 @@ export function NodeContextMenuPlugin(props) @{
 
 	// Build the menu model on right-click and open the menu at the cursor.
 	useEffect(() => {
-		function onContextMenu(e) {
+		function onContextMenu(e: MouseEvent) {
 			e.preventDefault();
 
 			f.refs.setPositionReference({
@@ -167,10 +221,10 @@ export function NodeContextMenuPlugin(props) @{
 				},
 			});
 
-			let visibleItems = [];
+			let visibleItems: ContextMenuType[] = [];
 			if (items) {
 				editor.read(() => {
-					const node = $getNearestNodeFromDOMNode(e.target) ?? $getRoot();
+					const node = $getNearestNodeFromDOMNode(e.target as Element) ?? $getRoot();
 					if (node) {
 						visibleItems = items.filter((option) => (option.$showOn ? option.$showOn(node) : true));
 					}
@@ -187,12 +241,12 @@ export function NodeContextMenuPlugin(props) @{
 				}
 				return {
 					className: itemClassName,
-					disabled: option.disabled,
-					icon: option.icon,
+					disabled: (option as NodeContextMenuOption).disabled,
+					icon: (option as NodeContextMenuOption).icon,
 					key: option.key,
-					label: option.title,
-					onSelect: () => editor.update(() => option.$onSelect()),
-					title: option.title,
+					label: (option as NodeContextMenuOption).title,
+					onSelect: () => editor.update(() => (option as NodeContextMenuOption).$onSelect()),
+					title: (option as NodeContextMenuOption).title,
 					type: option.type,
 				};
 			});
@@ -216,8 +270,8 @@ export function NodeContextMenuPlugin(props) @{
 	listItemsRef.current = [];
 	const itemsForRender = renderItems.map((item, index) => {
 		const onSelect = () => {
-			if (item.onSelect) {
-				item.onSelect();
+			if ((item as MenuItemType).onSelect) {
+				(item as MenuItemType).onSelect();
 			}
 			setIsOpen(false);
 		};
@@ -226,7 +280,7 @@ export function NodeContextMenuPlugin(props) @{
 			itemProps: getItemProps({
 				onClick: onSelect,
 				onMouseUp: onSelect,
-				ref: (node) => {
+				ref: (node: HTMLButtonElement | null) => {
 					listItemsRef.current[index] = node;
 				},
 				tabIndex: activeIndex === index ? 0 : -1,

package/src/LexicalNodeEventPlugin.tsrx

@@ -1,11 +1,18 @@
 // Ported from @lexical/react/src/LexicalNodeEventPlugin.ts.
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { $findMatchingParent, $getNearestNodeFromDOMNode } from 'lexical';
+import type { Klass, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import { useEffect, useRef } from 'octane';
 
 const capturedEvents = new Set(['mouseenter', 'mouseleave']);
 
-export function NodeEventPlugin(props) {
+type Props = {
+	nodeType: Klass<LexicalNode>;
+	eventType: string;
+	eventListener: (event: Event, editor: LexicalEditor, nodeKey: NodeKey) => void;
+};
+
+export function NodeEventPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const nodeType = props.nodeType;
 	const eventType = props.eventType;
@@ -17,9 +24,9 @@ export function NodeEventPlugin(props) {
 	useEffect(() => {
 		const isCaptured = capturedEvents.has(eventType);
 
-		const onEvent = (event) => {
+		const onEvent = (event: Event) => {
 			editor.update(() => {
-				const nearestNode = $getNearestNodeFromDOMNode(event.target);
+				const nearestNode = $getNearestNodeFromDOMNode(event.target as Node);
 				if (nearestNode !== null) {
 					const targetNode =
 						isCaptured

package/src/LexicalNodeMenuPlugin.tsrx

@@ -4,11 +4,29 @@ import { useLexicalComposerContext } from './LexicalComposerContext';
 import { LexicalMenu } from './shared/LexicalMenu.tsrx';
 import { useMenuAnchorRef } from './shared/useMenuAnchorRef';
 import { $getNodeByKey, COMMAND_PRIORITY_LOW } from 'lexical';
+import type { CommandListenerPriority, NodeKey, TextNode } from 'lexical';
 import { startTransition, useCallback, useEffect, useState } from 'octane';
+import type { MenuOption, MenuRenderFn, MenuResolution } from './shared/menuShared';
 
 export { MenuOption } from './shared/menuShared';
 
-export function LexicalNodeMenuPlugin(props) {
+/**
+ * Props for the {@link LexicalNodeMenuPlugin} component.
+ */
+export type NodeMenuPluginProps<TOption extends MenuOption> = {
+	onSelectOption: (option: TOption, textNodeContainingQuery: | TextNode
+	| null, closeMenu: () => void, matchingString: string) => void;
+	options: TOption[];
+	nodeKey: NodeKey | null;
+	menuRenderFn?: MenuRenderFn<TOption>;
+	onClose?: () => void;
+	onOpen?: (resolution: MenuResolution) => void;
+	anchorClassName?: string;
+	commandPriority?: CommandListenerPriority;
+	parent?: HTMLElement;
+};
+
+export function LexicalNodeMenuPlugin<TOption extends MenuOption>(props: NodeMenuPluginProps<TOption>) {
 	const options = props.options;
 	const nodeKey = props.nodeKey;
 	const onClose = props.onClose;
@@ -21,7 +39,7 @@ export function LexicalNodeMenuPlugin(props) {
 	const parent = props.parent;
 
 	const [editor] = useLexicalComposerContext();
-	const [resolution, setResolution] = useState(null);
+	const [resolution, setResolution] = useState<MenuResolution | null>(null);
 	const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName, parent);
 
 	const closeNodeMenu = useCallback(() => {
@@ -31,7 +49,7 @@ export function LexicalNodeMenuPlugin(props) {
 		}
 	}, [onClose, resolution]);
 
-	const openNodeMenu = useCallback((res) => {
+	const openNodeMenu = useCallback((res: MenuResolution) => {
 		setResolution(res);
 		if (onOpen != null && resolution === null) {
 			onOpen(res);

package/src/LexicalOnChangePlugin.tsrx

@@ -1,9 +1,16 @@
 // Ported from @lexical/react/src/LexicalOnChangePlugin.ts.
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { HISTORY_MERGE_TAG } from 'lexical';
+import type { EditorState, LexicalEditor } from 'lexical';
 import { useLayoutEffect } from 'octane';
 
-export function OnChangePlugin(props) {
+type Props = {
+	ignoreHistoryMergeTagChange?: boolean;
+	ignoreSelectionChange?: boolean;
+	onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void;
+};
+
+export function OnChangePlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const ignoreHistoryMergeTagChange =
 		props.ignoreHistoryMergeTagChange === undefined ? true : props.ignoreHistoryMergeTagChange;

package/src/LexicalPlainTextPlugin.tsrx

@@ -5,8 +5,22 @@ import { useLexicalEditable } from './useLexicalEditable';
 import { useCanShowPlaceholder } from './shared/useCanShowPlaceholder';
 import { usePlainTextSetup } from './shared/usePlainTextSetup';
 import { Decorators } from './shared/LexicalDecorators.tsrx';
+import type { OctaneNode } from 'octane';
 
-function Placeholder(props) {
+// Octane analog of @lexical/react's ErrorBoundaryType (a component taking the
+// decorator subtree plus an onError callback).
+type ErrorBoundaryType = (props: {
+		children: OctaneNode;
+		onError: (error: Error) => void;
+	}) => OctaneNode;
+
+type Props = {
+	contentEditable: OctaneNode;
+	placeholder?: ((isEditable: boolean) => OctaneNode) | null | OctaneNode;
+	ErrorBoundary: ErrorBoundaryType;
+};
+
+function Placeholder(props: { content: Props['placeholder'] }) {
 	const [editor] = useLexicalComposerContext();
 	const showPlaceholder = useCanShowPlaceholder(editor);
 	const editable = useLexicalEditable();
@@ -21,7 +35,7 @@ function Placeholder(props) {
 	return content != null ? content : null;
 }
 
-export function PlainTextPlugin(props) @{
+export function PlainTextPlugin(props: Props) @{
 	const [editor] = useLexicalComposerContext();
 	usePlainTextSetup(editor);
 

package/src/LexicalRichTextPlugin.tsrx

@@ -7,8 +7,22 @@ import { useLexicalEditable } from './useLexicalEditable';
 import { useCanShowPlaceholder } from './shared/useCanShowPlaceholder';
 import { useRichTextSetup } from './shared/useRichTextSetup';
 import { Decorators } from './shared/LexicalDecorators.tsrx';
+import type { OctaneNode } from 'octane';
 
-function Placeholder(props) {
+// Octane analog of @lexical/react's ErrorBoundaryType (a component taking the
+// decorator subtree plus an onError callback).
+type ErrorBoundaryType = (props: {
+		children: OctaneNode;
+		onError: (error: Error) => void;
+	}) => OctaneNode;
+
+type Props = {
+	contentEditable: OctaneNode;
+	placeholder?: ((isEditable: boolean) => OctaneNode) | null | OctaneNode;
+	ErrorBoundary: ErrorBoundaryType;
+};
+
+function Placeholder(props: { content: Props['placeholder'] }) {
 	const [editor] = useLexicalComposerContext();
 	const showPlaceholder = useCanShowPlaceholder(editor);
 	const editable = useLexicalEditable();
@@ -23,7 +37,7 @@ function Placeholder(props) {
 	return content != null ? content : null;
 }
 
-export function RichTextPlugin(props) @{
+export function RichTextPlugin(props: Props) @{
 	const [editor] = useLexicalComposerContext();
 	useRichTextSetup(editor);
 

package/src/LexicalSelectionAlwaysOnDisplay.tsrx

@@ -3,7 +3,11 @@ import { selectionAlwaysOnDisplay } from '@lexical/utils';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
-export function SelectionAlwaysOnDisplay(props) {
+type Props = Readonly<{
+		onReposition?: (node: readonly HTMLElement[]) => void;
+	}>;
+
+export function SelectionAlwaysOnDisplay(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const onReposition = props.onReposition;
 	useEffect(() => selectionAlwaysOnDisplay(editor, onReposition), [editor, onReposition]);

package/src/LexicalTabIndentationPlugin.tsrx

@@ -1,12 +1,23 @@
 // Ported from @lexical/react/src/LexicalTabIndentationPlugin.tsx.
 // registerTabIndentation is from @lexical/extension's framework-agnostic core.
 import { registerTabIndentation } from '@lexical/extension';
+import type { CanIndentPredicate } from '@lexical/extension';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
 export { registerTabIndentation } from '@lexical/extension';
 
-export function TabIndentationPlugin(props) {
+type Props = {
+	maxIndent?: number;
+	/**
+ * By default, indents are set on all elements for which
+ * {@link ElementNode.canIndent} returns true. This option allows you to set
+ * indents for specific nodes without overriding the method for others.
+ */
+	$canIndent?: CanIndentPredicate;
+};
+
+export function TabIndentationPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const maxIndent = props.maxIndent;
 	const canIndent = props.$canIndent;