@lobehub/editor 4.15.1 → 4.15.2

package/es/react/SendButton/index.d.ts

@@ -0,0 +1,2 @@
+import { SendButtonProps } from "./type.js";
+import { SendButton } from "./SendButton.js";

package/es/react/SendButton/style.js

@@ -0,0 +1,68 @@
+import { createStaticStyles } from "antd-style";
+//#region src/react/SendButton/style.ts
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	button: css`
+    &.${prefixCls}-btn {
+      flex: none;
+      width: var(--send-button-size, 32px) !important;
+      height: var(--send-button-size, 32px);
+      padding-inline: 0 !important;
+    }
+  `,
+	disabled: css`
+    &.${prefixCls}-btn {
+      cursor: default;
+      border-color: ${cssVar.colorBorderSecondary};
+      background: transparent;
+    }
+
+    .${prefixCls}-btn-compact-first-item {
+      cursor: default;
+      border-color: ${cssVar.colorBorderSecondary};
+      background: transparent;
+    }
+    .${prefixCls}-dropdown-trigger {
+      cursor: default;
+      border-color: ${cssVar.colorBorderSecondary};
+      border-inline-start-color: transparent;
+      background: transparent;
+    }
+  `,
+	dropdownButton: css`
+    flex: none;
+    width: fit-content;
+    .${prefixCls}-btn {
+      width: calc(var(--send-button-size, 32px) * 1.2);
+      height: var(--send-button-size, 32px);
+    }
+    .${prefixCls}-dropdown-trigger {
+      width: calc(var(--send-button-size, 32px) * 0.8);
+      &.${prefixCls}-btn-primary {
+        &::before {
+          background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 10%, transparent) !important;
+        }
+      }
+    }
+  `,
+	dropdownButtonRound: css`
+    .${prefixCls}-btn-compact-first-item {
+      border-start-start-radius: calc(var(--send-button-size, 32px) / 2);
+      border-end-start-radius: calc(var(--send-button-size, 32px) / 2);
+    }
+    .${prefixCls}-dropdown-trigger {
+      width: var(--send-button-size, 32px);
+      border-start-end-radius: calc(var(--send-button-size, 32px) / 2);
+      border-end-end-radius: calc(var(--send-button-size, 32px) / 2);
+    }
+  `,
+	loadingButton: css`
+    &.${prefixCls}-btn {
+      flex: none;
+      height: var(--send-button-size, 32px);
+      padding-inline: 0 !important;
+    }
+  `
+}));
+//#endregion
+export { styles };

package/es/react/SendButton/type.d.ts

@@ -0,0 +1,12 @@
+import { DropdownButtonProps } from "antd/lib/dropdown/index.js";
+
+//#region src/react/SendButton/type.d.ts
+interface SendButtonProps extends Omit<DropdownButtonProps, 'children' | 'icon' | 'size'> {
+  generating?: boolean;
+  onSend?: DropdownButtonProps['onClick'];
+  onStop?: DropdownButtonProps['onClick'];
+  shape?: 'default' | 'round';
+  size?: number;
+}
+//#endregion
+export { SendButtonProps };

package/es/react/SlashMenu/SlashMenu.d.ts

@@ -0,0 +1,7 @@
+import { SlashMenuProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/react/SlashMenu/SlashMenu.d.ts
+declare const SlashMenu: FC<SlashMenuProps>;
+//#endregion
+export { SlashMenu };

package/es/react/SlashMenu/SlashMenu.js

@@ -0,0 +1,40 @@
+"use client";
+import FloatMenu from "../FloatMenu/FloatMenu.js";
+import { Menu } from "@lobehub/ui";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/SlashMenu/SlashMenu.tsx
+const SlashMenu = ({ options, activeKey, loading, onSelect, classNames, styles: customStyles, menuProps, ...floatMenuProps }) => {
+	const handleMenuClick = useCallback(({ key }) => {
+		if (!onSelect) return;
+		const option = options.find((item) => "key" in item && item.key === key);
+		if (option) onSelect?.(option);
+	}, [options, onSelect]);
+	return /* @__PURE__ */ jsx(FloatMenu, {
+		classNames: {
+			container: classNames?.container,
+			root: classNames?.root
+		},
+		styles: {
+			container: customStyles?.container,
+			root: customStyles?.root
+		},
+		...floatMenuProps,
+		children: /* @__PURE__ */ jsx(Menu, {
+			className: classNames?.menu,
+			items: loading ? [{
+				disabled: true,
+				key: "loading",
+				label: "Loading..."
+			}] : options,
+			mode: "inline",
+			onClick: handleMenuClick,
+			selectedKeys: activeKey ? [activeKey] : void 0,
+			style: customStyles?.menu,
+			...menuProps
+		})
+	});
+};
+SlashMenu.displayName = "SlashMenu";
+//#endregion
+export { SlashMenu as default };

package/es/react/SlashMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { SlashMenuProps } from "./type.js";
+import { SlashMenu } from "./SlashMenu.js";

package/es/react/SlashMenu/type.d.ts

@@ -0,0 +1,17 @@
+import { MenuRenderProps } from "../../plugins/slash/react/type.js";
+import { FloatMenuProps } from "../FloatMenu/type.js";
+import { MenuProps } from "@lobehub/ui";
+import { CSSProperties } from "react";
+
+//#region src/react/SlashMenu/type.d.ts
+interface SlashMenuProps extends MenuRenderProps, Omit<FloatMenuProps, 'children'> {
+  classNames?: FloatMenuProps['classNames'] & {
+    menu?: string;
+  };
+  menuProps?: MenuProps;
+  styles?: FloatMenuProps['styles'] & {
+    menu?: CSSProperties;
+  };
+}
+//#endregion
+export { SlashMenuProps };

package/es/react/hooks/useEditor.d.ts

@@ -0,0 +1,5 @@
+import { IEditor } from "../../types/kernel.js";
+//#region src/react/hooks/useEditor.d.ts
+declare const useEditor: () => IEditor;
+//#endregion
+export { useEditor };

package/es/react/hooks/useEditor.js

@@ -0,0 +1,8 @@
+import Editor from "../../editor-kernel/index.js";
+import { useMemo } from "react";
+//#region src/react/hooks/useEditor.ts
+const useEditor = () => {
+	return useMemo(() => Editor.createEditor(), []);
+};
+//#endregion
+export { useEditor };

package/es/react/hooks/useEditorState/index.d.ts

@@ -0,0 +1,71 @@
+import { IEditor } from "../../../types/kernel.js";
+//#region src/react/hooks/useEditorState/index.d.ts
+/**
+ * Editor state and toolbar methods return type
+ */
+interface EditorState {
+  /** Current block type (e.g., 'paragraph', 'h1', 'h2', 'bullet', 'number', 'code') */
+  blockType: string | null;
+  /** Format selection as blockquote */
+  blockquote: () => void;
+  /** Toggle bold formatting */
+  bold: () => void;
+  /** Toggle bullet list */
+  bulletList: () => void;
+  /** Whether redo operation is available */
+  canRedo: boolean;
+  /** Whether undo operation is available */
+  canUndo: boolean;
+  /** Toggle check list */
+  checkList: () => void;
+  /** Toggle code formatting */
+  code: () => void;
+  /** Format selection as code block */
+  codeblock: () => void;
+  /** Current code block language */
+  codeblockLang: string | null | undefined;
+  /** Insert or toggle link */
+  insertLink: () => void;
+  /** Insert math (inline or block based on context) */
+  insertMath: () => void;
+  /** Whether cursor is inside a blockquote */
+  isBlockquote: boolean;
+  /** Whether selection has bold formatting */
+  isBold: boolean;
+  /** Whether selection has code formatting */
+  isCode: boolean;
+  /** Whether cursor is inside a code block */
+  isCodeblock: boolean;
+  /** Whether editor content is empty */
+  isEmpty: boolean;
+  /** Whether selection has italic formatting */
+  isItalic: boolean;
+  /** Whether editor has selection */
+  isSelected: boolean;
+  /** Whether selection has strikethrough formatting */
+  isStrikethrough: boolean;
+  /** Whether selection has underline formatting */
+  isUnderline: boolean;
+  /** Toggle italic formatting */
+  italic: () => void;
+  /** Toggle numbered list */
+  numberList: () => void;
+  /** Redo last operation */
+  redo: () => void;
+  /** Toggle strikethrough formatting */
+  strikethrough: () => void;
+  /** Toggle underline formatting */
+  underline: () => void;
+  /** Undo last operation */
+  undo: () => void;
+  /** Update code block language */
+  updateCodeblockLang: (lang: string) => void;
+}
+/**
+ * Provide toolbar state and toolbar methods
+ * @param editor - Editor instance
+ * @returns Editor state and methods for toolbar functionality
+ */
+declare function useEditorState(editor?: IEditor): EditorState;
+//#endregion
+export { EditorState, useEditorState };

package/es/react/hooks/useEditorState/index.js

@@ -0,0 +1,347 @@
+import { $isRootTextContentEmpty, init_utils } from "../../../plugins/common/utils/index.js";
+import { noop } from "../../../editor-kernel/utils.js";
+import { $createCodeMirrorNode, $isCodeMirrorNode } from "../../../plugins/codemirror-block/node/CodeMirrorNode.js";
+import { $isSelectionInCodeInline } from "../../../plugins/code/node/code.js";
+import { INSERT_CODEINLINE_COMMAND } from "../../../plugins/code/command/index.js";
+import { $isLinkNode, TOGGLE_LINK_COMMAND, formatUrl } from "../../../plugins/link/node/LinkNode.js";
+import { extractUrlFromText, sanitizeUrl, validateUrl } from "../../../plugins/link/utils/index.js";
+import { INSERT_CHECK_LIST_COMMAND } from "../../../plugins/list/plugin/checkList.js";
+import { UPDATE_CODEBLOCK_LANG } from "../../../plugins/codeblock/command/index.js";
+import { $isLinkHighlightNode } from "../../../plugins/link-highlight/node/link-highlight.js";
+import { INSERT_LINK_HIGHLIGHT_COMMAND } from "../../../plugins/link-highlight/command/index.js";
+import { $createMathBlockNode, $createMathInlineNode } from "../../../plugins/math/node/index.js";
+import { $findTopLevelElement, formatParagraph, getSelectedNode } from "./utils.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { $createNodeSelection, $getSelection, $isParagraphNode, $isRangeSelection, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
+import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import { $setBlocksType } from "@lexical/selection";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from "@lexical/list";
+import { $createCodeNode, $isCodeNode } from "@lexical/code-core";
+import { debounce } from "es-toolkit";
+//#region src/react/hooks/useEditorState/index.ts
+init_utils();
+/**
+* Provide toolbar state and toolbar methods
+* @param editor - Editor instance
+* @returns Editor state and methods for toolbar functionality
+*/
+function useEditorState(editor) {
+	const [canUndo, setCanUndo] = useState(false);
+	const [canRedo, setCanRedo] = useState(false);
+	const [editable, setEditable] = useState(editor?.isEditable() ?? true);
+	const [isBold, setIsBold] = useState(false);
+	const [isItalic, setIsItalic] = useState(false);
+	const [isUnderline, setIsUnderline] = useState(false);
+	const [isStrikethrough, setIsStrikethrough] = useState(false);
+	const [isSubscript, setIsSubscript] = useState(false);
+	const [isSuperscript, setIsSuperscript] = useState(false);
+	const [isCode, setIsCode] = useState(false);
+	const [isLink, setIsLink] = useState(false);
+	const [isCodeblock, setIsInCodeblok] = useState(false);
+	const [isBlockquote, setIsInBlockquote] = useState(false);
+	const [codeblockLang, setCodeblockLang] = useState(null);
+	const [isEmpty, setIsEmpty] = useState(true);
+	const [isSelected, setIsSelected] = useState(false);
+	const [blockType, setBlockType] = useState(null);
+	const $handleHeadingNode = useCallback((selectedElement) => {
+		setBlockType($isHeadingNode(selectedElement) ? selectedElement.getTag() : selectedElement.getType());
+	}, [setBlockType]);
+	const $updateToolbar = useCallback(() => {
+		const selection = $getSelection();
+		const lexicalEditor = editor?.getLexicalEditor();
+		setIsSelected(false);
+		setEditable(editor?.isEditable() ?? true);
+		if (lexicalEditor) setIsEmpty($isRootTextContentEmpty(lexicalEditor.isComposing(), false));
+		if ($isRangeSelection(selection)) {
+			setIsSelected(!!selection._cachedNodes);
+			setIsBold(selection.hasFormat("bold"));
+			setIsItalic(selection.hasFormat("italic"));
+			setIsUnderline(selection.hasFormat("underline"));
+			setIsStrikethrough(selection.hasFormat("strikethrough"));
+			setIsSubscript(selection.hasFormat("subscript"));
+			setIsSuperscript(selection.hasFormat("superscript"));
+			setIsCode($isSelectionInCodeInline(lexicalEditor));
+			const anchorNode = selection.anchor.getNode();
+			const focusNode = selection.focus.getNode();
+			const element = $findTopLevelElement(anchorNode);
+			const focusElement = $findTopLevelElement(focusNode);
+			const elementKey = element.getKey();
+			const elementDOM = editor?.getLexicalEditor()?.getElementByKey(elementKey);
+			const node = getSelectedNode(selection);
+			const parent = node.getParent();
+			setIsLink($isLinkNode(parent) || $isLinkNode(node) || $isLinkHighlightNode(parent) || $isLinkHighlightNode(node));
+			const isLexicalCodeBlock = $isCodeNode(element) && $isCodeNode(focusElement) && elementKey === focusElement.getKey();
+			const isCodeMirrorBlock = $isCodeMirrorNode(element) && $isCodeMirrorNode(focusElement) && elementKey === focusElement.getKey();
+			setIsInCodeblok(isLexicalCodeBlock || isCodeMirrorBlock);
+			if (isLexicalCodeBlock) setCodeblockLang(element.getLanguage());
+			else if (isCodeMirrorBlock) setCodeblockLang(element.lang);
+			else setCodeblockLang("");
+			setIsInBlockquote($isQuoteNode(element) && $isQuoteNode(focusElement) && elementKey === focusElement.getKey());
+			if (elementDOM !== null) if ($isListNode(element)) {
+				const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+				setBlockType(parentList ? parentList.getListType() : element.getListType());
+			} else $handleHeadingNode(element);
+		} else if (!selection) {
+			setIsSelected(false);
+			setIsBold(false);
+			setIsItalic(false);
+			setIsUnderline(false);
+			setIsStrikethrough(false);
+			setIsSubscript(false);
+			setIsSuperscript(false);
+			setIsCode(false);
+			setIsLink(false);
+			setIsInCodeblok(false);
+			setIsInBlockquote(false);
+			setCodeblockLang(null);
+			setBlockType(null);
+		}
+	}, [editor]);
+	const undo = useCallback(() => {
+		editor?.dispatchCommand(UNDO_COMMAND, void 0);
+	}, [editor]);
+	const redo = useCallback(() => {
+		editor?.dispatchCommand(REDO_COMMAND, void 0);
+	}, [editor]);
+	const formatText = useCallback((type) => {
+		editor?.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+	}, [editor]);
+	const bold = useCallback(() => {
+		formatText("bold");
+	}, [formatText]);
+	const underline = useCallback(() => {
+		formatText("underline");
+	}, [formatText]);
+	const strikethrough = useCallback(() => {
+		formatText("strikethrough");
+	}, [formatText]);
+	const italic = useCallback(() => {
+		formatText("italic");
+	}, [formatText]);
+	const subscript = useCallback(() => {
+		formatText("subscript");
+	}, [formatText]);
+	const superscript = useCallback(() => {
+		formatText("superscript");
+	}, [formatText]);
+	const code = useCallback(() => {
+		editor?.dispatchCommand(INSERT_CODEINLINE_COMMAND, void 0);
+	}, [formatText]);
+	const bulletList = useCallback(() => {
+		if (blockType !== "bullet") editor?.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+		else formatParagraph(editor?.getLexicalEditor());
+	}, [blockType, editor]);
+	const numberList = useCallback(() => {
+		if (blockType !== "number") editor?.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+		else formatParagraph(editor?.getLexicalEditor());
+	}, [blockType, editor]);
+	const checkList = useCallback(() => {
+		if (blockType !== "check") editor?.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+		else formatParagraph(editor?.getLexicalEditor());
+	}, [blockType, editor]);
+	const codeblock = useCallback(() => {
+		if (blockType !== "code") editor?.getLexicalEditor()?.update(() => {
+			let selection = $getSelection();
+			if (!selection) return;
+			const lexicalEditor = editor?.getLexicalEditor();
+			if (lexicalEditor ? lexicalEditor._nodes.has("code") && lexicalEditor._nodes.get("code")?.klass.name === "CodeMirrorNode" : false) if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(codeMirrorNode.getKey());
+				selection.insertNodes([codeMirrorNode]);
+				$setSelection(nodeSelection);
+			} else {
+				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
+				selection.insertNodes([codeMirrorNode]);
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(codeMirrorNode.getKey());
+				$setSelection(nodeSelection);
+			}
+			else if (!$isRangeSelection(selection) || selection.isCollapsed()) $setBlocksType(selection, () => $createCodeNode());
+			else {
+				const textContent = selection.getTextContent();
+				const codeNode = $createCodeNode();
+				selection.insertNodes([codeNode]);
+				selection = $getSelection();
+				if ($isRangeSelection(selection)) selection.insertRawText(textContent);
+			}
+		});
+		else formatParagraph(editor?.getLexicalEditor());
+	}, [blockType, editor]);
+	const blockquote = useCallback(() => {
+		if (blockType !== "quote") editor?.getLexicalEditor()?.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createQuoteNode());
+		});
+		else formatParagraph(editor?.getLexicalEditor());
+	}, [blockType, editor]);
+	const updateCodeblockLang = useCallback((lang) => {
+		if (!isCodeblock) return;
+		editor?.dispatchCommand(UPDATE_CODEBLOCK_LANG, { lang });
+	}, [editor, isCodeblock]);
+	const insertLink = useCallback(() => {
+		const lexical = editor?.getLexicalEditor();
+		if (!lexical) return;
+		let inLinkNode = false;
+		let inLinkHighlightNode = false;
+		lexical.getEditorState().read(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) {
+				const node = getSelectedNode(selection);
+				const parent = node.getParent();
+				if ($isLinkNode(parent) || $isLinkNode(node)) inLinkNode = true;
+				if ($isLinkHighlightNode(parent) || $isLinkHighlightNode(node)) inLinkHighlightNode = true;
+			}
+		});
+		if (inLinkHighlightNode) {
+			lexical.dispatchCommand(INSERT_LINK_HIGHLIGHT_COMMAND, void 0);
+			setIsLink(false);
+			return;
+		}
+		if (inLinkNode) {
+			setIsLink(false);
+			lexical.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+			return;
+		}
+		if (!isLink) {
+			if (lexical.dispatchCommand(INSERT_LINK_HIGHLIGHT_COMMAND, void 0)) {
+				setIsLink(true);
+				return;
+			}
+			let nextUrl = sanitizeUrl("https://");
+			let expandTo = null;
+			lexical.getEditorState().read(() => {
+				const selection = $getSelection();
+				if ($isRangeSelection(selection)) {
+					const text = selection.getTextContent();
+					if (!selection.isCollapsed()) {
+						const maybeUrl = formatUrl(text.trim());
+						if (validateUrl(maybeUrl)) nextUrl = maybeUrl;
+					} else {
+						const found = extractUrlFromText(selection.anchor.getNode().getTextContent());
+						if (found && validateUrl(formatUrl(found.url))) expandTo = {
+							index: found.index,
+							length: found.length
+						};
+					}
+				}
+			});
+			setIsLink(true);
+			lexical.update(() => {
+				if (expandTo) {
+					const selection = $getSelection();
+					if ($isRangeSelection(selection)) {
+						const anchorNode = selection.anchor.getNode();
+						selection.anchor.set(anchorNode.getKey(), expandTo.index, "text");
+						selection.focus.set(anchorNode.getKey(), expandTo.index + expandTo.length, "text");
+					}
+				}
+				lexical.dispatchCommand(TOGGLE_LINK_COMMAND, validateUrl(nextUrl) ? nextUrl : sanitizeUrl("https://"));
+			});
+		}
+	}, [editor, isLink]);
+	const insertMath = useCallback(() => {
+		editor?.getLexicalEditor()?.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) {
+				const element = $findTopLevelElement(selection.anchor.getNode());
+				const mathNode = $isParagraphNode(element) && selection.isCollapsed() && selection.anchor.offset === 0 && element.getTextContentSize() === 0 || !selection.isCollapsed() && selection.anchor.offset === 0 && selection.focus.offset === element.getTextContentSize() ? $createMathBlockNode("") : $createMathInlineNode("");
+				selection.insertNodes([mathNode]);
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(mathNode.getKey());
+				$setSelection(nodeSelection);
+			}
+		});
+	}, [editor]);
+	useEffect(() => {
+		if (!editor) return;
+		const lexicalEditor = editor.getLexicalEditor();
+		let cleanup = noop;
+		const debounceUpdate = debounce(() => {
+			lexicalEditor?.read(() => {
+				$updateToolbar();
+			});
+		}, 500);
+		const handleLexicalEditor = (lexicalEditor) => {
+			cleanup = mergeRegister(lexicalEditor.registerUpdateListener(debounce(({ editorState }) => {
+				editorState.read(() => {
+					$updateToolbar();
+				});
+			}, 500)), lexicalEditor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+				if (lexicalEditor.isComposing()) return false;
+				debounceUpdate();
+				return false;
+			}, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+				setCanUndo(payload);
+				return false;
+			}, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+				setCanRedo(payload);
+				return false;
+			}, COMMAND_PRIORITY_LOW));
+			return cleanup;
+		};
+		if (!lexicalEditor) {
+			editor.on("initialized", handleLexicalEditor);
+			return () => {
+				cleanup();
+				editor.off("initialized", handleLexicalEditor);
+			};
+		}
+		return handleLexicalEditor(lexicalEditor);
+	}, [editor, $updateToolbar]);
+	return useMemo(() => ({
+		blockType,
+		blockquote,
+		bold,
+		bulletList,
+		canRedo,
+		canUndo,
+		checkList,
+		code,
+		codeblock,
+		codeblockLang,
+		editable,
+		insertLink,
+		insertMath,
+		isBlockquote,
+		isBold,
+		isCode,
+		isCodeblock,
+		isEmpty,
+		isItalic,
+		isSelected,
+		isStrikethrough,
+		isSubscript,
+		isSuperscript,
+		isUnderline,
+		italic,
+		numberList,
+		redo,
+		strikethrough,
+		subscript,
+		superscript,
+		underline,
+		undo,
+		updateCodeblockLang
+	}), [
+		blockType,
+		canRedo,
+		canUndo,
+		codeblockLang,
+		isBold,
+		isCode,
+		isEmpty,
+		isBlockquote,
+		isCodeblock,
+		isItalic,
+		isSelected,
+		isStrikethrough,
+		isUnderline,
+		isSubscript,
+		isSuperscript,
+		italic
+	]);
+}
+//#endregion
+export { useEditorState };

package/es/react/hooks/useEditorState/utils.js

@@ -0,0 +1,28 @@
+import { $createParagraphNode, $getSelection, $isRootOrShadowRoot } from "lexical";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isAtNodeEnd, $setBlocksType } from "@lexical/selection";
+//#region src/react/hooks/useEditorState/utils.ts
+const $findTopLevelElement = (node) => {
+	let topLevelElement = node.getKey() === "root" ? node : $findMatchingParent(node, (e) => {
+		const parent = e.getParent();
+		return parent !== null && $isRootOrShadowRoot(parent);
+	});
+	if (topLevelElement === null) topLevelElement = node.getTopLevelElementOrThrow();
+	return topLevelElement;
+};
+const formatParagraph = (editor) => {
+	editor?.update(() => {
+		$setBlocksType($getSelection(), () => $createParagraphNode());
+	});
+};
+const getSelectedNode = (selection) => {
+	const anchor = selection.anchor;
+	const focus = selection.focus;
+	const anchorNode = selection.anchor.getNode();
+	const focusNode = selection.focus.getNode();
+	if (anchorNode === focusNode) return anchorNode;
+	if (selection.isBackward()) return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+	else return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+};
+//#endregion
+export { $findTopLevelElement, formatParagraph, getSelectedNode };

package/es/react/hooks/useSize.js

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { debounce } from "es-toolkit";
+//#region src/react/hooks/useSize.ts
+const useWidth = (options = {}) => {
+	const { debounceMs = 100 } = options;
+	const ref = useRef(null);
+	const [size, setSize] = useState();
+	const resizeObserverRef = useRef(null);
+	const updateSize = useCallback(debounce((entries) => {
+		if (entries[0]) {
+			const { width } = entries[0].contentRect;
+			setSize(Math.floor(width));
+		}
+	}, debounceMs), [debounceMs]);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		resizeObserverRef.current = new ResizeObserver(updateSize);
+		resizeObserverRef.current.observe(element);
+		return () => {
+			if (resizeObserverRef.current) {
+				resizeObserverRef.current.disconnect();
+				updateSize.cancel?.();
+			}
+		};
+	}, [updateSize]);
+	return {
+		ref,
+		width: size
+	};
+};
+const useHeight = (options = {}) => {
+	const { debounceMs = 100 } = options;
+	const ref = useRef(null);
+	const [size, setSize] = useState();
+	const resizeObserverRef = useRef(null);
+	const updateSize = useCallback(debounce((entries) => {
+		if (entries[0]) {
+			const { height } = entries[0].contentRect;
+			setSize(Math.floor(height));
+		}
+	}, debounceMs), [debounceMs]);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		resizeObserverRef.current = new ResizeObserver(updateSize);
+		resizeObserverRef.current.observe(element);
+		return () => {
+			if (resizeObserverRef.current) {
+				resizeObserverRef.current.disconnect();
+				updateSize.cancel?.();
+			}
+		};
+	}, [updateSize]);
+	return {
+		height: size,
+		ref
+	};
+};
+//#endregion
+export { useHeight, useWidth };