@lobehub/editor 4.27.3 → 4.28.0

package/es/codemirror/components/CopyButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { ActionIcon } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { Check, CopyIcon } from "lucide-react";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/es/codemirror/components/LanguageSelect.js

@@ -1,15 +1,15 @@
 "use client";
 import { LANGUAGES } from "../constants.js";
 import { styles } from "./style.js";
-import { Flexbox, MaterialFileTypeIcon, Select, Text } from "@lobehub/ui";
+import { Select, Text } from "@lobehub/ui/base-ui";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, MaterialFileTypeIcon } from "@lobehub/ui";
 import { cx } from "antd-style";
 //#region src/codemirror/components/LanguageSelect.tsx
 const LanguageSelect = ({ selectedLang, onLanguageChange, options, labels, className }) => {
 	const modes = options ?? LANGUAGES;
 	const languageOptions = useMemo(() => modes.map((mode) => ({
-		aliases: mode.ext || [],
 		label: /* @__PURE__ */ jsxs(Flexbox, {
 			align: "center",
 			gap: 4,
@@ -26,7 +26,11 @@ const LanguageSelect = ({ selectedLang, onLanguageChange, options, labels, class
 				children: mode.name
 			})]
 		}),
-		title: mode.ext?.length ? mode.ext.map((ext) => `*.${ext}`).join(",") : `*.${mode.value}`,
+		title: [
+			mode.value,
+			mode.name,
+			...mode.ext || []
+		].join(" "),
 		value: mode.value
 	})), [modes]);
 	return /* @__PURE__ */ jsx(Flexbox, {
@@ -37,14 +41,7 @@ const LanguageSelect = ({ selectedLang, onLanguageChange, options, labels, class
 		onClick: (e) => e.stopPropagation(),
 		children: /* @__PURE__ */ jsx(Select, {
 			className: cx(styles.container),
-			filterOption: (input, option) => {
-				const lang = input.toLowerCase();
-				if ((option?.value)?.toLowerCase().startsWith(lang)) return true;
-				if (String(option?.label).toLowerCase().includes(lang)) return true;
-				if (option?.aliases?.some((ext) => ext.toLowerCase().startsWith(lang))) return true;
-				return false;
-			},
-			onChange: onLanguageChange,
+			onChange: (value) => onLanguageChange(value),
 			options: languageOptions,
 			placeholder: labels?.selectLanguage ?? "Select language",
 			showSearch: true,

package/es/codemirror/components/MoreOptions.js

@@ -1,9 +1,9 @@
 "use client";
-import { ActionIcon, Flexbox, InputNumber, Popover, Text } from "@lobehub/ui";
+import { ActionIcon, InputNumber, Switch, Text } from "@lobehub/ui/base-ui";
 import { MoreHorizontalIcon } from "lucide-react";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Switch } from "antd";
+import { Flexbox, Popover } from "@lobehub/ui";
 //#region src/codemirror/components/MoreOptions.tsx
 const MoreOptions = ({ tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, labels }) => {
 	const handleTabSizeChange = useCallback((value = 2) => {
@@ -25,6 +25,7 @@ const MoreOptions = ({ tabSize, onTabSizeChange, useTabs, onUseTabsChange, showL
 						min: 1,
 						onChange: handleTabSizeChange,
 						size: "small",
+						style: { width: 80 },
 						value: tabSize
 					})]
 				}),

package/es/codemirror/components/Toolbar.js

@@ -2,9 +2,10 @@
 import { CopyButton } from "./CopyButton.js";
 import { LanguageSelect } from "./LanguageSelect.js";
 import { MoreOptions } from "./MoreOptions.js";
-import { ActionIcon, Flexbox } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox } from "@lobehub/ui";
 //#region src/codemirror/components/Toolbar.tsx
 const Toolbar = ({ selectedLang, onLanguageChange, onCopy, tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, onClick, expand, toggleExpand, labels, languageOptions, extra }) => {
 	return /* @__PURE__ */ jsxs(Flexbox, {

package/es/editor-kernel/react/useAnchor.js

@@ -1,7 +1,7 @@
 "use client";
 import { useLexicalComposerContext } from "./react-context.js";
-import { LOBE_THEME_APP_ID } from "@lobehub/ui";
 import { useMemo } from "react";
+import { LOBE_THEME_APP_ID } from "@lobehub/ui";
 //#region src/editor-kernel/react/useAnchor.ts
 const useAnchor = () => {
 	const [editor] = useLexicalComposerContext();

package/es/headless.js

@@ -2580,7 +2580,7 @@ function handleReplaceForApplyDelay(oldNode, newNode, modifyBlockNodes, diffNode
 		}
 		const before = $createDiffContentNode("before");
 		const after = $createDiffContentNode("after");
-		oldNode.getChildren().forEach((child) => before.append($cloneNode(child, editor)));
+		oldNode.getChildren().forEach((child) => before.append(child));
 		newNode.getChildren().forEach((child) => after.append($cloneNode(child, editor)));
 		const diffNode = $createDiffNode("modify");
 		diffNode.append(before, after);
@@ -2594,10 +2594,19 @@ function handleReplaceForApplyDelay(oldNode, newNode, modifyBlockNodes, diffNode
 		oldNode.replace(newNode, false);
 		return;
 	}
+	if ($isListItemNode(oldNode) && $isListItemNode(newNode)) {
+		const before = $createParagraphNode();
+		const after = $createParagraphNode();
+		oldNode.getChildren().forEach((child) => before.append(child));
+		newNode.getChildren().forEach((child) => after.append(child));
+		oldNode.clear();
+		oldNode.append($createDiffNode("listItemModify").append(before, after));
+		return;
+	}
 	if (oldNode === oldBlock) {
 		const diffNode = $createDiffNode("modify");
-		diffNode.append($cloneNode(oldBlock, editor), newNode);
 		oldNode.replace(diffNode, false);
+		diffNode.append($createDiffContentNode("before").append(oldBlock), $createDiffContentNode("after").append(newNode));
 	} else {
 		if (!modifyBlockNodes.has(oldBlock.getKey())) {
 			modifyBlockNodes.add(oldBlock.getKey());
@@ -2829,7 +2838,8 @@ function handleRemove(editor, key, delay) {
 					case "modify": {
 						const children = originDiffNode.getChildren();
 						const newDiff = $createDiffNode("remove");
-						newDiff.append(children[0]);
+						const before = children[0];
+						newDiff.append(...$isDiffContentNode(before) ? before.getChildren() : [before]);
 						originDiffNode.replace(newDiff, false);
 						return;
 					}
@@ -2944,6 +2954,11 @@ function handleInsert(editor, payload, dataSource) {
 					const originDiffNode = $closest(referenceNode, (node) => node.getType() === DiffNode.getType());
 					if (originDiffNode) referenceNode = originDiffNode;
 					newNodes.map((node) => {
+						if ($isListItemNode(node)) {
+							const diffNode = $createDiffNode("listItemAdd");
+							node.getChildren().forEach((child) => diffNode.append(child));
+							return node.append(diffNode);
+						}
 						const diffNode = $createDiffNode("add");
 						diffNode.append(node);
 						return diffNode;
@@ -3117,7 +3132,7 @@ function doAction(editor, node, action) {
 			});
 			node.getParentOrThrow().selectEnd();
 			node.remove();
-		} else if (action === 0) node.remove();
+		} else if (action === 0) node.getParentOrThrow().remove();
 	}
 }
 function registerLiteXMLDiffCommand(editor) {
@@ -4920,6 +4935,7 @@ const LitexmlPlugin = class extends KernelPlugin {
 					else nodeToXML(after, lines, indent);
 					break;
 				}
+				case "listItemAdd":
 				case "add":
 					diffNode.getChildren().forEach((child) => nodeToXML(child, lines, indent));
 					break;
@@ -4971,6 +4987,7 @@ const LitexmlPlugin = class extends KernelPlugin {
 					else ctx.processChild(ctx, after);
 					break;
 				}
+				case "listItemAdd":
 				case "add":
 					diffNode.getChildren().forEach((child) => ctx.processChild(ctx, child));
 					break;
@@ -10022,7 +10039,8 @@ const ListPlugin = class extends KernelPlugin {
 			if ($isRootNode(node.getParent())) return 0;
 			const parent = node.getParent();
 			if (!parent) return 0;
-			return getLevel($getNearestNodeOfType(parent, ListNode)) + 1;
+			const parentList = $getNearestNodeOfType(parent, ListNode);
+			return parentList ? getLevel(parentList) + 1 : 0;
 		};
 		markdownService.registerMarkdownWriter(ListItemNode.getType(), (ctx, node) => {
 			const parent = node.getParent();

package/es/plugins/block/react/ReactBlockPlugin.js

@@ -10,15 +10,16 @@ import { createRuntimeContext } from "./core/runtime-context.js";
 import { collectDragBlocks, getBlockMeasureRect, getTableBlockRect, isTableBlockElement } from "./drag/drag-utils.js";
 import { startBlockDragSession } from "./drag/drag-session.js";
 import { ANCHOR_PADDING_CSS_VAR, styles } from "./style.js";
-import { DropdownMenu, Icon, useAppElement } from "@lobehub/ui";
+import { Button } from "@lobehub/ui/base-ui";
 import { GripVerticalIcon, PlusIcon } from "lucide-react";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DropdownMenu as DropdownMenu$1, Icon, useAppElement } from "@lobehub/ui";
 import { cx } from "antd-style";
-import { Button as Button$1, theme } from "antd";
 import { $findTableNode, $isTableSelection } from "@lexical/table";
 import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
 import { createPortal } from "react-dom";
+import { theme } from "antd";
 //#region src/plugins/block/react/ReactBlockPlugin.tsx
 init_debug();
 const logger = createDebugLogger("plugin", "block-react");
@@ -627,7 +628,7 @@ const ReactBlockPlugin = (props) => {
 					icon: PlusIcon,
 					size: 14
 				}) : void 0;
-				return /* @__PURE__ */ jsx(Button$1, {
+				return /* @__PURE__ */ jsx(Button, {
 					"aria-label": title,
 					icon,
 					onClick: () => item.onClick(menuContext),
@@ -635,14 +636,14 @@ const ReactBlockPlugin = (props) => {
 					title,
 					type: "text"
 				}, item.key);
-			}), /* @__PURE__ */ jsx(DropdownMenu, {
+			}), /* @__PURE__ */ jsx(DropdownMenu$1, {
 				items: dropdownItems,
 				onOpenChange: handleOperationMenuOpenChange,
 				open: operationMenuOpen && operationMenuContext?.blockId === menuContext.blockId,
 				placement: "leftTop",
 				popupProps: { className: OPERATION_MENU_OVERLAY_CLASS },
 				positionerProps: { style: { zIndex: 1e3 } },
-				children: /* @__PURE__ */ jsx(Button$1, {
+				children: /* @__PURE__ */ jsx(Button, {
 					"aria-label": "Block actions and drag",
 					className: styles.dragHandle,
 					"data-block-drag-handle": "true",

package/es/plugins/codemirror-block/react/CodemirrorNode.js

@@ -8,10 +8,11 @@ import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } fro
 import { useLexicalNodeSelection } from "../../../editor-kernel/react/useLexicalNodeSelection.js";
 import MermaidPreview from "./MermaidPreview.js";
 import { useCodemirrorEditLock } from "./useCodemirrorEditLock.js";
-import { ActionIcon, Block } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { CodeXml, Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Block } from "@lobehub/ui";
 import { cx } from "antd-style";
 import { debounce } from "es-toolkit/compat";
 import { $getSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from "lexical";

package/es/plugins/codemirror-block/react/MermaidPreview.js

@@ -1,7 +1,7 @@
 "use client";
-import { Mermaid } from "@lobehub/ui";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Mermaid } from "@lobehub/ui";
 import { cssVar } from "antd-style";
 //#region src/plugins/codemirror-block/react/MermaidPreview.tsx
 const MermaidPreview = ({ code }) => {

package/es/plugins/file/react/components/ReactFile.js

@@ -1,8 +1,8 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
-import { Center, MaterialFileTypeIcon } from "@lobehub/ui";
 import { useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Center, MaterialFileTypeIcon } from "@lobehub/ui";
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
 //#region src/plugins/file/react/components/ReactFile.tsx
 const ReactFile = ({ className, editor, node }) => {

package/es/plugins/image/react/components/Image.js

@@ -7,13 +7,14 @@ import BrokenImage from "./BrokenImage.js";
 import ImageEditPopover from "./ImageEditPopover.js";
 import LazyImage from "./LazyImage.js";
 import { ResizeHandle } from "./ResizeHandle.js";
-import { ActionIcon, Icon } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { LoaderCircleIcon, ZoomInIcon } from "lucide-react";
 import { Suspense, memo, useCallback, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@lobehub/ui";
 import { cx } from "antd-style";
-import { Image } from "antd";
 import { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
+import { Image } from "antd";
 //#region src/plugins/image/react/components/Image.tsx
 function getResizedImageWidth(startWidth, deltaX, maxWidth) {
 	const adjustedDeltaX = deltaX * 2;

package/es/plugins/image/react/components/ImageEditPopover.js

@@ -1,10 +1,11 @@
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { useEditable } from "../../../../editor-kernel/react/useEditable.js";
-import { Button, Flexbox, Icon, Input, Popover } from "@lobehub/ui";
+import { Button, Input } from "@lobehub/ui/base-ui";
 import { LinkIcon, UploadIcon } from "lucide-react";
 import { memo, useCallback, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Icon, Popover } from "@lobehub/ui";
 import { cssVar } from "antd-style";
 //#region src/plugins/image/react/components/ImageEditPopover.tsx
 const ImageEditPopover = memo(({ children, node, handleUpload, onPickFile }) => {
@@ -138,8 +139,7 @@ const ImageEditPopover = memo(({ children, node, handleUpload, onPickFile }) =>
 			})] }), /* @__PURE__ */ jsx(Button, {
 				onClick: handleUrlSubmit,
 				size: "small",
-				type: "text",
-				variant: "filled",
+				type: "fill",
 				children: t("confirm")
 			})]
 		})]

package/es/plugins/link/react/ReactLinkPlugin.js

@@ -15,9 +15,9 @@ import LinkIframe from "./components/LinkIframe.js";
 import LinkToolbar from "./components/LinkToolbar.js";
 import SchemaLink from "./components/SchemaLink.js";
 import { LinkReactRendererRegistry, splitReactSchemaRules } from "./renderer-registry.js";
+import { toast } from "@lobehub/ui/base-ui";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { message } from "antd";
 //#region src/plugins/link/react/ReactLinkPlugin.tsx
 async function copyTextToClipboard(text) {
 	try {
@@ -175,7 +175,7 @@ const ReactLinkPlugin = ({ allowedProtocols, theme, enableHotkey = true, validat
 			label: "link.copy",
 			onClick: async ({ editor, linkNode }) => {
 				await copyTextToClipboard(editor.getEditorState().read(() => linkNode.getURL()));
-				message.success(t("link.copySuccess"));
+				toast.success(t("link.copySuccess"));
 			},
 			order: 30
 		});

package/es/plugins/link/react/components/LinkEdit.js

@@ -4,10 +4,11 @@ import { UPDATE_LINK_TEXT_COMMAND } from "../../command/index.js";
 import { EDIT_LINK_CARD_COMMAND } from "../../node/LinkCardNode.js";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import { styles } from "../style.js";
-import { Block, Button, Flexbox, Hotkey, Icon, Input, Text } from "@lobehub/ui";
+import { Button, Input, Text } from "@lobehub/ui/base-ui";
 import { BaselineIcon, LinkIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Block, Flexbox, Hotkey, Icon } from "@lobehub/ui";
 import { cssVar } from "antd-style";
 import { COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from "lexical";
 import { mergeRegister } from "@lexical/utils";
@@ -38,8 +39,8 @@ const LinkEdit = ({ editor }) => {
 	const handleSubmit = useCallback(() => {
 		if (!editor.isEditable()) return;
 		if (!linkInputRef.current || !linkTextInputRef.current || !editor) return;
-		const inputDOM = linkInputRef.current.input;
-		const textInputDOM = linkTextInputRef.current.input;
+		const inputDOM = linkInputRef.current;
+		const textInputDOM = linkTextInputRef.current;
 		if (cardNodeRef.current) {
 			const cardNode = cardNodeRef.current;
 			editor.update(() => {
@@ -73,8 +74,8 @@ const LinkEdit = ({ editor }) => {
 	const handleKeyDown = useCallback((event) => {
 		if (!linkNodeRef.current && !cardNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
 		const linkNode = linkNodeRef.current;
-		const inputDOM = linkInputRef.current.input;
-		const textInputDOM = linkTextInputRef.current.input;
+		const inputDOM = linkInputRef.current;
+		const textInputDOM = linkTextInputRef.current;
 		switch (event.key) {
 			case "Enter":
 				event.preventDefault();
@@ -268,8 +269,7 @@ const LinkEdit = ({ editor }) => {
 					handleSubmit();
 				},
 				size: "small",
-				type: "text",
-				variant: "filled",
+				type: "fill",
 				children: [t("confirm"), /* @__PURE__ */ jsx(Hotkey, {
 					compact: true,
 					keys: "enter",

package/es/plugins/link/react/components/LinkToolbar.js

@@ -8,10 +8,10 @@ import { useEditable } from "../../../../editor-kernel/react/useEditable.js";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import { styles } from "../style.js";
 import { $isLinkToolbarNode, convertLinkNodeByKeyToSchema, convertLinkToolbarNodeByKeyToLink, getLinkToolbarCapabilities, replaceNodeByKeyWithBlockCardNode, replaceNodeByKeyWithCardNode, replaceNodeByKeyWithIframeNode } from "../../conversion/index.js";
-import { Flexbox, Icon } from "@lobehub/ui";
 import { CopyIcon, EditIcon, ExternalLinkIcon, GalleryHorizontalEndIcon, LinkIcon, PanelTopOpenIcon, PanelsTopLeftIcon, UnlinkIcon } from "lucide-react";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Flexbox, Icon } from "@lobehub/ui";
 import { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_NORMAL } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/link/react/components/LinkToolbar.tsx

package/es/plugins/list/plugin/index.js

@@ -130,7 +130,8 @@ const ListPlugin = class extends KernelPlugin {
 			if ($isRootNode(node.getParent())) return 0;
 			const parent = node.getParent();
 			if (!parent) return 0;
-			return getLevel($getNearestNodeOfType(parent, ListNode)) + 1;
+			const parentList = $getNearestNodeOfType(parent, ListNode);
+			return parentList ? getLevel(parentList) + 1 : 0;
 		};
 		markdownService.registerMarkdownWriter(ListItemNode.getType(), (ctx, node) => {
 			const parent = node.getParent();

package/es/plugins/litexml/command/diffCommand.js

@@ -125,7 +125,7 @@ function doAction(editor, node, action) {
 			});
 			node.getParentOrThrow().selectEnd();
 			node.remove();
-		} else if (action === 0) node.remove();
+		} else if (action === 0) node.getParentOrThrow().remove();
 	}
 }
 function registerLiteXMLDiffCommand(editor) {

package/es/plugins/litexml/command/index.js

@@ -96,7 +96,7 @@ function handleReplaceForApplyDelay(oldNode, newNode, modifyBlockNodes, diffNode
 		}
 		const before = $createDiffContentNode("before");
 		const after = $createDiffContentNode("after");
-		oldNode.getChildren().forEach((child) => before.append($cloneNode(child, editor)));
+		oldNode.getChildren().forEach((child) => before.append(child));
 		newNode.getChildren().forEach((child) => after.append($cloneNode(child, editor)));
 		const diffNode = $createDiffNode("modify");
 		diffNode.append(before, after);
@@ -110,10 +110,19 @@ function handleReplaceForApplyDelay(oldNode, newNode, modifyBlockNodes, diffNode
 		oldNode.replace(newNode, false);
 		return;
 	}
+	if ($isListItemNode(oldNode) && $isListItemNode(newNode)) {
+		const before = $createParagraphNode();
+		const after = $createParagraphNode();
+		oldNode.getChildren().forEach((child) => before.append(child));
+		newNode.getChildren().forEach((child) => after.append(child));
+		oldNode.clear();
+		oldNode.append($createDiffNode("listItemModify").append(before, after));
+		return;
+	}
 	if (oldNode === oldBlock) {
 		const diffNode = $createDiffNode("modify");
-		diffNode.append($cloneNode(oldBlock, editor), newNode);
 		oldNode.replace(diffNode, false);
+		diffNode.append($createDiffContentNode("before").append(oldBlock), $createDiffContentNode("after").append(newNode));
 	} else {
 		if (!modifyBlockNodes.has(oldBlock.getKey())) {
 			modifyBlockNodes.add(oldBlock.getKey());
@@ -345,7 +354,8 @@ function handleRemove(editor, key, delay) {
 					case "modify": {
 						const children = originDiffNode.getChildren();
 						const newDiff = $createDiffNode("remove");
-						newDiff.append(children[0]);
+						const before = children[0];
+						newDiff.append(...$isDiffContentNode(before) ? before.getChildren() : [before]);
 						originDiffNode.replace(newDiff, false);
 						return;
 					}
@@ -461,6 +471,11 @@ function handleInsert(editor, payload, dataSource) {
 					const originDiffNode = $closest(referenceNode, (node) => node.getType() === DiffNode.getType());
 					if (originDiffNode) referenceNode = originDiffNode;
 					newNodes.map((node) => {
+						if ($isListItemNode(node)) {
+							const diffNode = $createDiffNode("listItemAdd");
+							node.getChildren().forEach((child) => diffNode.append(child));
+							return node.append(diffNode);
+						}
 						const diffNode = $createDiffNode("add");
 						diffNode.append(node);
 						return diffNode;

package/es/plugins/litexml/plugin/index.js

@@ -86,6 +86,7 @@ const LitexmlPlugin = class extends KernelPlugin {
 					else nodeToXML(after, lines, indent);
 					break;
 				}
+				case "listItemAdd":
 				case "add":
 					diffNode.getChildren().forEach((child) => nodeToXML(child, lines, indent));
 					break;
@@ -137,6 +138,7 @@ const LitexmlPlugin = class extends KernelPlugin {
 					else ctx.processChild(ctx, after);
 					break;
 				}
+				case "listItemAdd":
 				case "add":
 					diffNode.getChildren().forEach((child) => ctx.processChild(ctx, child));
 					break;

package/es/plugins/litexml/react/DiffNodeToolbar/index.js

@@ -2,9 +2,10 @@ import { LexicalPortalContainer } from "../../../../editor-kernel/react/PortalCo
 import { LITEXML_DIFFNODE_COMMAND } from "../../command/symbols.js";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { styles } from "./style.js";
-import { ActionIcon, Block } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { Check, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Block } from "@lobehub/ui";
 import { useThemeMode } from "antd-style";
 //#region src/plugins/litexml/react/DiffNodeToolbar/index.tsx
 const ReactDiffNodeToolbar = ({ editor, node }) => {

package/es/plugins/litexml/react/TableRowDiffToolbar.js

@@ -2,10 +2,11 @@ import { $isTableRowDiffNode } from "../node/TableRowDiffNode.js";
 import { LITEXML_DIFFNODE_COMMAND } from "../command/symbols.js";
 import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
 import { styles } from "./DiffNodeToolbar/style.js";
-import { ActionIcon, Block } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { Check, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Block } from "@lobehub/ui";
 import { useThemeMode } from "antd-style";
 import { $getNearestNodeFromDOMNode } from "lexical";
 import { createPortal } from "react-dom";

package/es/plugins/markdown/react/index.js

@@ -3,8 +3,8 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { INodePlugin } from "../../inode/plugin/index.js";
 import { MarkdownPlugin } from "../plugin/index.js";
 import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
-import { toast } from "@lobehub/ui";
 import { useLayoutEffect } from "react";
+import { toast } from "@lobehub/ui";
 //#region src/plugins/markdown/react/index.tsx
 const ReactMarkdownPlugin = () => {
 	const [editor] = useLexicalComposerContext();

package/es/plugins/math/react/components/MathEditor.js

@@ -101,7 +101,7 @@ const MathEdit = memo(({ renderComp }) => {
 	}, [mathNode, editor]);
 	const handleFocus = useCallback(() => {
 		textareaRef.current?.focus();
-		if (prev) textareaRef.current?.resizableTextArea?.textArea?.setSelectionRange(0, 0);
+		if (prev) textareaRef.current?.setSelectionRange(0, 0);
 	}, [prev]);
 	const setTextareaRef = useCallback((ref) => {
 		textareaRef.current = ref;

package/es/plugins/math/react/components/MathEditorContainer.js

@@ -1,8 +1,8 @@
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import { styles } from "../style.js";
-import { Flexbox, Popover } from "@lobehub/ui";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Flexbox, Popover } from "@lobehub/ui";
 //#region src/plugins/math/react/components/MathEditorContainer.tsx
 const MathEditorContainer = memo(({ children, isBlockMode, mathDOM, onFocus, prev }) => {
 	const anchorRef = useRef(null);

package/es/plugins/math/react/components/MathEditorContent.js

@@ -1,9 +1,10 @@
 import { CONTROL_OR_META, init_sys } from "../../../../common/sys.js";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { styles } from "../style.js";
-import { Button, Flexbox, Hotkey, Text, TextArea } from "@lobehub/ui";
+import { Button, Text, TextArea } from "@lobehub/ui/base-ui";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Hotkey } from "@lobehub/ui";
 import { isModifierMatch } from "lexical";
 import { renderToString } from "katex";
 //#region src/plugins/math/react/components/MathEditorContent.tsx
@@ -118,8 +119,7 @@ const MathEditorContent = memo(({ focusRef, mathNode, onArrowLeft, onArrowRight,
 					onSubmit();
 				},
 				size: "small",
-				type: "text",
-				variant: "filled",
+				type: "fill",
 				children: [t("confirm"), /* @__PURE__ */ jsx(Hotkey, {
 					compact: true,
 					keys: "mod+enter",

package/es/plugins/math/react/components/Placeholder.js

@@ -1,7 +1,8 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { styles } from "../style.js";
-import { Center, Text } from "@lobehub/ui";
+import { Text } from "@lobehub/ui/base-ui";
 import { jsx } from "react/jsx-runtime";
+import { Center } from "@lobehub/ui";
 import { cx } from "antd-style";
 //#region src/plugins/math/react/components/Placeholder.tsx
 const Placeholder = ({ mathBlock }) => {

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -1,9 +1,9 @@
 "use client";
 import { flattenSlashOptions, isSlashDividerOption, isSlashSectionOption } from "../../service/i-slash-service.js";
 import { shouldShowLoadingPlaceholder } from "./menuLoading.js";
-import { Icon, LOBE_THEME_APP_ID, menuSharedStyles } from "@lobehub/ui";
 import { isValidElement, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, LOBE_THEME_APP_ID, menuSharedStyles } from "@lobehub/ui";
 import { createStaticStyles } from "antd-style";
 import { createPortal } from "react-dom";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";

package/es/plugins/slash/service/i-slash-service.d.ts

@@ -1,8 +1,8 @@
 import { IEditor, IServiceID } from "../../../types/kernel.js";
 import "../../../types/index.js";
 import "../utils/utils.js";
-import { DropdownMenuItemType } from "@lobehub/ui";
 import { ReactNode } from "react";
+import { DropdownMenuItemType } from "@lobehub/ui";
 import Fuse, { IFuseOptions } from "fuse.js";
 //#region src/plugins/slash/service/i-slash-service.d.ts
 type ISlashDividerOption = {

package/es/plugins/table/react/TableActionMenu/ActionMenu.js

@@ -1,9 +1,9 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils.js";
-import { DropdownMenu } from "@lobehub/ui";
 import { Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { DropdownMenu } from "@lobehub/ui";
 import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from "@lexical/table";
 import { $getSelection, $setSelection } from "lexical";
 //#region src/plugins/table/react/TableActionMenu/ActionMenu.tsx

package/es/plugins/table/react/TableActionMenu/index.js

@@ -2,7 +2,7 @@ import { useAnchor } from "../../../../editor-kernel/react/useAnchor.js";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import TableActionMenu$1 from "./ActionMenu.js";
 import { styles } from "./style.js";
-import { ActionIcon } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { ChevronDown } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/es/plugins/table/react/TableHoverActions/index.js

@@ -2,7 +2,7 @@ import { useLexicalComposerContext } from "../../../../editor-kernel/react/react
 import { useAnchor } from "../../../../editor-kernel/react/useAnchor.js";
 import { styles } from "./style.js";
 import { getMouseInfo, useDebounce } from "./utils.js";
-import { ActionIcon } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { PlusIcon } from "lucide-react";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/es/plugins/toolbar/react/index.js

@@ -6,9 +6,9 @@ import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command/index.j
 import { getDOMRangeRect } from "../utils/getDOMRangeRect.js";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition.js";
 import { styles } from "./style.js";
-import { Block, LOBE_THEME_APP_ID } from "@lobehub/ui";
 import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Block, LOBE_THEME_APP_ID } from "@lobehub/ui";
 import { cx, useThemeMode } from "antd-style";
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";

package/es/react/ChatInput/ChatInput.js

@@ -1,9 +1,9 @@
 "use client";
 import { useHeight } from "../hooks/useSize.js";
 import { styles } from "./style.js";
-import { Flexbox } from "@lobehub/ui";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox } from "@lobehub/ui";
 import { cx, useThemeMode } from "antd-style";
 import { Resizable } from "re-resizable";
 import useMergeState from "use-merge-value";

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

@@ -1,5 +1,5 @@
-import { FlexboxProps } from "@lobehub/ui";
 import { CSSProperties, ReactNode, Ref } from "react";
+import { FlexboxProps } from "@lobehub/ui";
 //#region src/react/ChatInput/type.d.ts
 interface ChatInputProps extends Omit<FlexboxProps, 'height'> {
   classNames?: {

package/es/react/ChatInputActionBar/ChatInputActionBar.js

@@ -1,7 +1,7 @@
 "use client";
 import { styles } from "./style.js";
-import { Flexbox } from "@lobehub/ui";
 import { jsxs } from "react/jsx-runtime";
+import { Flexbox } from "@lobehub/ui";
 import { cx } from "antd-style";
 //#region src/react/ChatInputActionBar/ChatInputActionBar.tsx
 const ChatInputActionBar = ({ className, style, left, right, ...rest }) => {

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

@@ -1,5 +1,5 @@
-import { FlexboxProps } from "@lobehub/ui";
 import { ReactNode } from "react";
+import { FlexboxProps } from "@lobehub/ui";
 //#region src/react/ChatInputActionBar/type.d.ts
 interface ChatInputActionBarProps extends Omit<FlexboxProps, 'children'> {
   left?: ReactNode;

package/es/react/ChatInputActions/ChatInputActions.js

@@ -2,9 +2,9 @@
 import { styles } from "./style.js";
 import ActionItem from "./components/ActionItem.js";
 import { useDisplayActionCount } from "./components/useDisplayActionCount.js";
-import { Flexbox, TooltipGroup } from "@lobehub/ui";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Flexbox, TooltipGroup } from "@lobehub/ui";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 //#region src/react/ChatInputActions/ChatInputActions.tsx

package/es/react/ChatInputActions/components/ActionItem.js

@@ -1,7 +1,7 @@
 "use client";
 import ActionRender from "./ActionRender.js";
 import CollapsedActions from "./CollapsedActions.js";
-import { ActionIcon, Dropdown } from "@lobehub/ui";
+import { ActionIcon, DropdownMenu } from "@lobehub/ui/base-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/ChatInputActions/components/ActionItem.tsx
 const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, collapsed, gap, setGroupCollapsed }) => {
@@ -16,8 +16,9 @@ const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, collapsed,
 			onActionClick
 		}, child?.key || `action-${childIndex}`))
 	});
-	if (item.type === "dropdown") return /* @__PURE__ */ jsx(Dropdown, {
-		menu: { items: item.children },
+	if (item.type === "dropdown") return /* @__PURE__ */ jsx(DropdownMenu, {
+		items: item.children,
+		trigger: "hover",
 		children: /* @__PURE__ */ jsx(ActionIcon, {
 			active: item.active,
 			danger: item.danger,

package/es/react/ChatInputActions/components/ActionRender.js

@@ -1,8 +1,7 @@
 import { styles } from "../style.js";
-import { ActionIcon } from "@lobehub/ui";
+import { ActionIcon, Divider } from "@lobehub/ui/base-ui";
 import { isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Divider } from "antd";
 //#region src/react/ChatInputActions/components/ActionRender.tsx
 const ActionRender = ({ item, onActionClick, disabled }) => {
 	if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, {

package/es/react/ChatInputActions/components/CollapsedActions.js

@@ -1,8 +1,9 @@
 "use client";
 import { styles } from "../style.js";
-import { ActionIcon, Flexbox, Popover, useMotionComponent } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Popover, useMotionComponent } from "@lobehub/ui";
 //#region src/react/ChatInputActions/components/CollapsedActions.tsx
 const CollapsedActions = ({ children, groupCollapse = false, onGroupCollapseChange, gap, mode }) => {
 	const Motion = useMotionComponent();

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

@@ -1,5 +1,5 @@
-import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
 import { ReactNode } from "react";
+import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
 //#region src/react/ChatInputActions/type.d.ts
 type ChatInputActionEvent = Pick<MenuInfo, 'key' | 'keyPath' | 'domEvent'>;
 interface ActionItem extends MenuItemType {

package/es/react/CodeLanguageSelect/CodeLanguageSelect.js

@@ -1,14 +1,14 @@
 "use client";
 import { styles } from "./style.js";
-import { Flexbox, MaterialFileTypeIcon, Select, Text } from "@lobehub/ui";
+import { Select, Text } from "@lobehub/ui/base-ui";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, MaterialFileTypeIcon } from "@lobehub/ui";
 import { cx } from "antd-style";
 import { bundledLanguagesInfo } from "shiki";
 //#region src/react/CodeLanguageSelect/CodeLanguageSelect.tsx
 const CodeLanguageSelect = ({ className, ...rest }) => {
 	const options = useMemo(() => [{
-		aliases: ["text", "txt"],
 		label: /* @__PURE__ */ jsxs(Flexbox, {
 			align: "center",
 			gap: 4,
@@ -25,9 +25,9 @@ const CodeLanguageSelect = ({ className, ...rest }) => {
 				children: "Plaintext"
 			})]
 		}),
+		title: "plaintext text txt",
 		value: "plaintext"
 	}, ...bundledLanguagesInfo.map((item) => ({
-		aliases: item.aliases,
 		label: /* @__PURE__ */ jsxs(Flexbox, {
 			align: "center",
 			gap: 4,
@@ -44,18 +44,12 @@ const CodeLanguageSelect = ({ className, ...rest }) => {
 				children: item.name
 			})]
 		}),
-		title: (item.aliases || [item.id]).filter(Boolean).map((item) => `*.${item}`).join(","),
+		title: [item.id, ...item.aliases || []].join(" "),
 		value: item.id
 	}))], []);
 	return /* @__PURE__ */ jsx(Select, {
 		className: cx(styles.container, className),
 		defaultValue: "plaintext",
-		filterOption: (input, option) => {
-			const lang = input.toLowerCase();
-			if ((option?.value)?.startsWith(lang)) return true;
-			if (option?.aliases?.some((item) => item.startsWith(lang))) return true;
-			return false;
-		},
 		options,
 		showSearch: true,
 		variant: "filled",

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

@@ -1,4 +1,4 @@
-import { SelectProps } from "@lobehub/ui";
+import { SelectProps } from "@lobehub/ui/base-ui";
 //#region src/react/CodeLanguageSelect/type.d.ts
 type CodeLanguageSelectProps = Omit<SelectProps, 'options'>;
 //#endregion

package/es/react/FloatActions/FloatActions.js

@@ -1,8 +1,8 @@
 "use client";
 import { styles } from "./style.js";
 import ActionItem from "./components/ActionItem.js";
-import { Flexbox } from "@lobehub/ui";
 import { jsx } from "react/jsx-runtime";
+import { Flexbox } from "@lobehub/ui";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 //#region src/react/FloatActions/FloatActions.tsx

package/es/react/FloatActions/components/ActionItem.js

@@ -1,7 +1,7 @@
 "use client";
 import ActionRender from "./ActionRender.js";
 import CollapsedActions from "./CollapsedActions.js";
-import { ActionIcon, Dropdown } from "@lobehub/ui";
+import { ActionIcon, DropdownMenu } from "@lobehub/ui/base-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/FloatActions/components/ActionItem.tsx
 const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, gap, setGroupCollapsed }) => {
@@ -16,8 +16,9 @@ const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, gap, setGro
 			onActionClick
 		}, child?.key || `action-${childIndex}`))
 	});
-	if (item.type === "dropdown") return /* @__PURE__ */ jsx(Dropdown, {
-		menu: { items: item.children },
+	if (item.type === "dropdown") return /* @__PURE__ */ jsx(DropdownMenu, {
+		items: item.children,
+		trigger: "hover",
 		children: /* @__PURE__ */ jsx(ActionIcon, {
 			active: item.active,
 			danger: item.danger,

package/es/react/FloatActions/components/ActionRender.js

@@ -1,8 +1,7 @@
 import { styles } from "../style.js";
-import { ActionIcon } from "@lobehub/ui";
+import { ActionIcon, Divider } from "@lobehub/ui/base-ui";
 import { isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Divider } from "antd";
 //#region src/react/FloatActions/components/ActionRender.tsx
 const ActionRender = ({ item, onActionClick, disabled }) => {
 	if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, {

package/es/react/FloatActions/components/CollapsedActions.js

@@ -1,8 +1,9 @@
 "use client";
 import { styles } from "../style.js";
-import { ActionIcon, Flexbox, Popover, useMotionComponent } from "@lobehub/ui";
+import { ActionIcon } from "@lobehub/ui/base-ui";
 import { CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Popover, useMotionComponent } from "@lobehub/ui";
 //#region src/react/FloatActions/components/CollapsedActions.tsx
 const CollapsedActions = ({ children, groupCollapse = false, onGroupCollapseChange, gap, mode }) => {
 	const Motion = useMotionComponent();

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

@@ -1,5 +1,5 @@
-import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
 import { ReactNode } from "react";
+import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
 //#region src/react/FloatActions/type.d.ts
 type FloatActionsEvent = Pick<MenuInfo, 'key' | 'keyPath' | 'domEvent'>;
 interface ActionItem extends MenuItemType {

package/es/react/SendButton/SendButton.js

@@ -2,22 +2,26 @@
 import SendIcon from "./components/SendIcon.js";
 import StopIcon from "./components/StopIcon.js";
 import { styles } from "./style.js";
-import { Button, Icon } from "@lobehub/ui";
-import { ChevronDownIcon } from "lucide-react";
+import { Button, SplitButton } from "@lobehub/ui/base-ui";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import { Dropdown as Dropdown$1, Space } from "antd";
 //#region src/react/SendButton/SendButton.tsx
-const SendButton = ({ type = "primary", menu, className, style, loading, generating, size = 32, shape, onSend, onStop, disabled, onClick, styles: _styles, classNames: _classNames, ...rest }) => {
+const SendButton = ({ type = "primary", menu, className, style, loading, generating, size = 32, shape, onSend, onStop, disabled, onClick, placement = "topRight", trigger, title, ...rest }) => {
 	const cssVariables = useMemo(() => ({ "--send-button-size": `${size}px` }), [size]);
+	const handleSend = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		onSend?.(e);
+		onClick?.(e);
+	};
 	if (generating) return /* @__PURE__ */ jsx(Button, {
 		className: cx(styles.loadingButton, className),
 		onClick: (e) => {
 			e.stopPropagation();
 			e.preventDefault();
-			if (onStop) onStop(e);
-			if (onClick) onClick(e);
+			onStop?.(e);
+			onClick?.(e);
 		},
 		shape,
 		style: {
@@ -25,7 +29,8 @@ const SendButton = ({ type = "primary", menu, className, style, loading, generat
 			...style,
 			width: menu ? size * 2 : size
 		},
-		variant: "filled",
+		title,
+		type: "fill",
 		...rest,
 		children: /* @__PURE__ */ jsx(StopIcon, { size: size * .75 })
 	});
@@ -39,6 +44,7 @@ const SendButton = ({ type = "primary", menu, className, style, loading, generat
 			...style,
 			width: menu ? size * 2 : size
 		},
+		title,
 		type,
 		...rest
 	});
@@ -46,59 +52,33 @@ const SendButton = ({ type = "primary", menu, className, style, loading, generat
 		className: cx(styles.button, disabled && styles.disabled, className),
 		disabled,
 		icon: /* @__PURE__ */ jsx(SendIcon, {}),
-		onClick: (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			if (onSend) onSend(e);
-			if (onClick) onClick(e);
-		},
+		onClick: handleSend,
 		shape,
 		style: {
 			...cssVariables,
 			...style
 		},
+		title,
 		type,
 		...rest
 	});
-	return /* @__PURE__ */ jsxs(Space.Compact, {
-		className: cx(styles.dropdownButton, disabled && styles.disabled, shape === "round" && styles.dropdownButtonRound, className),
+	return /* @__PURE__ */ jsxs(SplitButton, {
+		className: cx(styles.splitButton, disabled && styles.splitButtonDisabled, shape === "round" && styles.splitButtonRound, className),
+		disabled,
 		style: {
 			...cssVariables,
 			...style
 		},
-		...rest,
-		children: [/* @__PURE__ */ jsx(Button, {
-			className: cx(styles.button, disabled && styles.disabled, className),
-			disabled,
+		type,
+		children: [/* @__PURE__ */ jsx(SplitButton.Main, {
 			icon: /* @__PURE__ */ jsx(SendIcon, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				if (onSend) onSend(e);
-				if (onClick) onClick(e);
-			},
-			shape,
-			style: {
-				...cssVariables,
-				...style
-			},
-			type,
+			onClick: handleSend,
+			title,
 			...rest
-		}), /* @__PURE__ */ jsx(Dropdown$1, {
-			menu,
-			placement: "topRight",
-			...rest,
-			children: /* @__PURE__ */ jsx(Button, {
-				className: cx(styles.button, disabled && styles.disabled, className),
-				disabled,
-				icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronDownIcon }),
-				shape,
-				style: {
-					...cssVariables,
-					cursor: "pointer"
-				},
-				type
-			})
+		}), /* @__PURE__ */ jsx(SplitButton.Menu, {
+			items: menu.items,
+			placement,
+			trigger
 		})]
 	});
 };

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

@@ -1,3 +1,3 @@
-import { SendButtonProps } from "./type.js";
+import { SendButtonClickHandler, SendButtonProps } from "./type.js";
 import SendButton from "./SendButton.js";
-export { SendButtonProps, SendButton as default };
+export { SendButtonClickHandler, SendButtonProps, SendButton as default };

package/es/react/SendButton/style.js

@@ -1,67 +1,59 @@
 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;
-    }
+    flex: none;
+    width: var(--send-button-size, 32px) !important;
+    height: var(--send-button-size, 32px) !important;
+    padding-inline: 0 !important;
   `,
 	disabled: css`
-    &.${prefixCls}-btn {
-      cursor: default;
-      border-color: ${cssVar.colorBorderSecondary};
-      background: transparent;
+    cursor: default;
+    border-color: ${cssVar.colorBorderSecondary};
+    background: transparent;
+  `,
+	loadingButton: css`
+    flex: none;
+    height: var(--send-button-size, 32px) !important;
+    padding-inline: 0 !important;
+  `,
+	splitButton: css`
+    flex: none;
+    width: fit-content;
+
+    & > :where(button, a) {
+      height: var(--send-button-size, 32px) !important;
+      padding-inline: 0 !important;
     }
 
-    .${prefixCls}-btn-compact-first-item {
-      cursor: default;
-      border-color: ${cssVar.colorBorderSecondary};
-      background: transparent;
+    & > :where(button, a):first-of-type {
+      width: calc(var(--send-button-size, 32px) * 1.2) !important;
+    }
+
+    & > :where(button, a):last-of-type {
+      width: calc(var(--send-button-size, 32px) * 0.8) !important;
     }
-    .${prefixCls}-dropdown-trigger {
+  `,
+	splitButtonDisabled: css`
+    opacity: 1;
+
+    & > :where(button, a) {
       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 {
+	splitButtonRound: css`
+    & > :where(button, a):first-of-type {
       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);
+
+    & > :where(button, a):last-of-type {
+      width: var(--send-button-size, 32px) !important;
       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

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

@@ -1,11 +1,26 @@
-import { DropdownButtonProps } from "antd/lib/dropdown/index.js";
+import { ButtonProps, DropdownItem, DropdownMenuProps } from "@lobehub/ui/base-ui";
+import { CSSProperties, MouseEvent, Ref } from "react";
 //#region src/react/SendButton/type.d.ts
-interface SendButtonProps extends Omit<DropdownButtonProps, 'children' | 'icon' | 'size'> {
+type SendButtonClickHandler = (e: MouseEvent<HTMLElement>) => void;
+interface SendButtonProps extends Omit<ButtonProps, 'children' | 'className' | 'disabled' | 'icon' | 'loading' | 'onClick' | 'outdent' | 'ref' | 'shape' | 'size' | 'style' | 'title' | 'type'> {
+  className?: string;
+  disabled?: boolean;
   generating?: boolean;
-  onSend?: DropdownButtonProps['onClick'];
-  onStop?: DropdownButtonProps['onClick'];
+  loading?: boolean;
+  menu?: {
+    items: DropdownItem[];
+  };
+  onClick?: SendButtonClickHandler;
+  onSend?: SendButtonClickHandler;
+  onStop?: SendButtonClickHandler;
+  placement?: DropdownMenuProps['placement'];
+  ref?: Ref<HTMLButtonElement>;
   shape?: 'default' | 'round';
   size?: number;
+  style?: CSSProperties;
+  title?: string;
+  trigger?: DropdownMenuProps['trigger'];
+  type?: ButtonProps['type'];
 }
 //#endregion
-export { SendButtonProps };
+export { SendButtonClickHandler, SendButtonProps };

package/es/renderer/LexicalRenderer.js

@@ -2,8 +2,8 @@ import { getCSSVariables, getRendererClassName } from "./style.js";
 import { renderNode } from "./engine/render-tree.js";
 import { rendererNodes } from "./nodes/index.js";
 import { createDefaultRenderers } from "./renderers/index.js";
-import { MotionComponent, MotionProvider } from "@lobehub/ui";
 import { createElement, use, useMemo } from "react";
+import { MotionComponent, MotionProvider } from "@lobehub/ui";
 import { createHeadlessEditor } from "@lexical/headless";
 import { $getRoot } from "lexical";
 import { motion } from "motion/react";

package/es/renderer/renderers/codeblock.js

@@ -1,7 +1,7 @@
 "use client";
 import { renderMermaidBlock } from "./mermaid.js";
-import { Highlighter } from "@lobehub/ui";
 import { jsx } from "react/jsx-runtime";
+import { Highlighter } from "@lobehub/ui";
 //#region src/renderer/renderers/codeblock.tsx
 function CodeBlockRenderer({ node }) {
 	const language = node.language || "";

package/es/renderer/renderers/mermaid.js

@@ -1,6 +1,6 @@
 "use client";
-import { Mermaid } from "@lobehub/ui";
 import { jsx } from "react/jsx-runtime";
+import { Mermaid } from "@lobehub/ui";
 //#region src/renderer/renderers/mermaid.tsx
 function renderMermaidBlock(node, key) {
 	const code = node.code || "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.27.3",
+  "version": "4.28.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -131,7 +131,7 @@
     "yjs": "^13.6.31"
   },
   "peerDependencies": {
-    "@lobehub/ui": "^5.0.0",
+    "@lobehub/ui": "^5.54.0",
     "antd": "^6.1.1",
     "motion": "^12.0.0",
     "react": "^19.0.0",