@lobehub/editor 4.16.1 → 4.17.1

package/es/headless.js

@@ -6852,10 +6852,12 @@ function ensureTableControllerDOM(element) {
 	if (legacyPlainToolbar instanceof HTMLElement) {
 		legacyPlainToolbar.className = "toolbar-row";
 		markTableControllerHost(legacyPlainToolbar, true);
-		element.append(legacyPlainToolbar);
+		scrollWrapper.append(legacyPlainToolbar);
 	}
+	const legacyOuterRowToolbar = element.querySelector(":scope > .toolbar-row");
+	if (legacyOuterRowToolbar instanceof HTMLElement) scrollWrapper.append(legacyOuterRowToolbar);
 	ensureToolbar(scrollWrapper, "toolbar-col", true);
-	ensureToolbar(element, "toolbar-row", true);
+	ensureToolbar(scrollWrapper, "toolbar-row", true);
 	ensureTableScrollIndicators(scrollWrapper);
 }
 function reconcileTableDecorator(editor, node, decorator) {

package/es/index.d.ts

@@ -22,6 +22,7 @@ import { BlockPlugin, BlockPluginOptions } from "./plugins/block/plugin/index.js
 import { BlockDragTarget } from "./plugins/block/react/core/types.js";
 import { BlockMenuService, IBlockActionButton, IBlockActionButtonIcon, IBlockMenuItem, IBlockMenuRenderContext, IBlockMenuService, IBlockSelectHandler } from "./plugins/block/service/i-block-menu-service.js";
 import { ReactBlockPlugin, ReactBlockPluginProps } from "./plugins/block/react/ReactBlockPlugin.js";
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/block/react/style.js";
 import { INSERT_CODEINLINE_COMMAND } from "./plugins/code/command/index.js";
 import { CodePlugin } from "./plugins/code/plugin/index.js";
 import { ReactCodePlugin } from "./plugins/code/react/CodeReactPlugin.js";
@@ -121,4 +122,4 @@ declare function enableHotReload(): void;
  */
 declare function disableHotReload(): void;
 //#endregion
-export { $closest, $closestNodeType, $createCursorNode, $getNearestNodeFromDOMNode, $getNodeFromDOMNode, $isCardLikeElementNode, $isCursorNode, AutoCompletePlugin, BlockDragTarget, BlockMenuService, BlockMovePayload, BlockPlugin, BlockPluginOptions, CONTENT_BLOCKS_DATA_TYPE, CardLikeElementNode, CodePlugin, CodeblockPlugin, CodeblockPluginOptions, CodemirrorPlugin, CodemirrorPluginOptions, CommonPlugin, CommonPluginOptions, ContentBlock, ContentBlocksDataSource, ContentBlocksPlugin, ContentBlocksPluginOptions, DEFAULT_HEADLESS_EDITOR_PLUGINS, DOM_DOCUMENT_FRAGMENT_TYPE, DOM_DOCUMENT_TYPE, DOM_ELEMENT_TYPE, DOM_TEXT_TYPE, DataSource, DiffAction, EDITOR_THEME_KEY, ExtractContentBlocksOptions, FileContentBlock, FileListItem, FilePlugin, FilePluginOptions, GET_MARKDOWN_SELECTION_COMMAND, HIDE_TOOLBAR_COMMAND, HOVER_COMMAND, HRPlugin, HRPluginOptions, HeadlessDocumentType, HeadlessEditor, HeadlessEditorExport, HeadlessEditorExportOptions, HeadlessEditorHydrationInput, HeadlessEditorOptions, HeadlessLiteXMLBatchOperation, HeadlessLiteXMLInsertOperation, HeadlessLiteXMLOperation, HeadlessLiteXMLRemoveOperation, HeadlessLiteXMLReplaceOperation, HotkeyEnum, HotkeyId, HotkeyItem, HotkeyScopeEnum, HotkeyScopeId, IBlockActionButton, IBlockActionButtonIcon, IBlockMenuItem, IBlockMenuRenderContext, IBlockMenuService, IBlockSelectHandler, type IEditor, ILinkService, ILitexmlService, IMarkdownShortCutService, INSERT_CHECK_LIST_COMMAND, INSERT_CODEINLINE_COMMAND, INSERT_CODEMIRROR_COMMAND, INSERT_FILE_COMMAND, INSERT_HEADING_COMMAND, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, INSERT_LINK_COMMAND, INSERT_LINK_HIGHLIGHT_COMMAND, INSERT_MARKDOWN_COMMAND, INSERT_MATH_COMMAND, INSERT_MENTION_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INodePlugin, INodePluginOptions, INodeService, ISlashMenuOption, ISlashOption, ISlashService, ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, ITriggerContext, IUploadService, ImageContentBlock, ImageListItem, ImagePlugin, ImagePluginOptions, Kernel, KeyEnum, LITEXML_APPLY_COMMAND, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND, LexicalErrorBoundary, LexicalPortalContainer, LinkHighlightPlugin, LinkHighlightPluginOptions, LinkPlugin, LinkPluginOptions, ListPlugin, ListPluginOptions, LitexmlDataSource, LitexmlPlugin, LitexmlPluginOptions, LitexmlService, MARKDOWN_READER_LEVEL, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX, MOVE_BLOCK_COMMAND, MarkdownPlugin, MathPlugin, MediaLists, MentionPlugin, MentionPluginOptions, MenuRenderProps, ModifierCombination, REMOVE_LIST_COMMAND, ReactAutoCompletePlugin, ReactBlockPlugin, ReactBlockPluginProps, ReactCodePlugin, ReactCodeblockPlugin, ReactCodeblockPluginProps, ReactCodemirrorPlugin, ReactEditor, ReactEditorContent, ReactEditorContentProps, ReactFilePlugin, ReactFilePluginProps, ReactHRPlugin, ReactHRPluginProps, ReactImagePlugin, ReactImagePluginProps, ReactLinkHighlightPlugin, ReactLinkPlugin, ReactLinkPluginProps, ReactListPlugin, ReactListPluginProps, ReactLiteXmlPlugin, ReactMarkdownPlugin, ReactMathPlugin, ReactMentionPlugin, ReactMentionPluginProps, ReactNodePlugin, ReactPlainText, ReactPlainTextProps, ReactSlashOption, ReactSlashOptionProps, ReactSlashPlugin, ReactSlashPluginProps, ReactTablePlugin, ReactToolbarPlugin, ReactVirtualBlockPlugin, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND, SELECT_TABLE_COMMAND, SHOW_TOOLBAR_COMMAND, SerializedMentionNode, SlashMenu, SlashMenuProps, SlashOptions, SlashPlugin, SlashPluginOptions, TableControllerMenuAxis, TableControllerMenuService, TablePlugin, TablePluginOptions, TextContentBlock, ToolbarCommandOptions, UPDATE_CODEBLOCK_LANG, UPDATE_LIST_START_COMMAND, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadPlugin, UploadPluginOptions, VirtualBlockPlugin, VirtualBlockPluginOptions, XMLReaderFunc, XMLReaderRecord, XMLWriterFunc, XMLWriterRecord, assert, browserDebug, bundledLanguagesInfo, compareNodeOrder, createDebugLogger, createEmptyEditorState, createHeadlessEditor, cursorNodeSerialized, debugLogger, debugLoggers, detectCodeLanguage, detectLanguage, devConsole, disableHotReload, enableHotReload, extractContentBlocks, extractMediaFromEditorState, extractMediaLists, genServiceId, generateEditorId, getHotkeyById, getKernelFromEditor, getKernelFromEditorConfig, getNodeKeyFromDOMNode, getParentElement, isDOMNode, isDocumentFragment, isPunctuationChar, isPureUrl, isValidUrl, moment, noop, prodSafeLogger, reconcileDecorator, registerBlockMoveCommand, registerEditorKernel, registerLinkHighlightCommand, registerToolbarCommand, resetRandomKey, scrollIntoView, unregisterEditorKernel, useHasDiffNode, useLexicalComposerContext, useLexicalEditor };
+export { $closest, $closestNodeType, $createCursorNode, $getNearestNodeFromDOMNode, $getNodeFromDOMNode, $isCardLikeElementNode, $isCursorNode, ANCHOR_PADDING_CSS_VAR, AutoCompletePlugin, BlockDragTarget, BlockMenuService, BlockMovePayload, BlockPlugin, BlockPluginOptions, CONTENT_BLOCKS_DATA_TYPE, CardLikeElementNode, CodePlugin, CodeblockPlugin, CodeblockPluginOptions, CodemirrorPlugin, CodemirrorPluginOptions, CommonPlugin, CommonPluginOptions, ContentBlock, ContentBlocksDataSource, ContentBlocksPlugin, ContentBlocksPluginOptions, DEFAULT_BLOCK_ANCHOR_PADDING, DEFAULT_HEADLESS_EDITOR_PLUGINS, DOM_DOCUMENT_FRAGMENT_TYPE, DOM_DOCUMENT_TYPE, DOM_ELEMENT_TYPE, DOM_TEXT_TYPE, DataSource, DiffAction, EDITOR_THEME_KEY, ExtractContentBlocksOptions, FileContentBlock, FileListItem, FilePlugin, FilePluginOptions, GET_MARKDOWN_SELECTION_COMMAND, HIDE_TOOLBAR_COMMAND, HOVER_COMMAND, HRPlugin, HRPluginOptions, HeadlessDocumentType, HeadlessEditor, HeadlessEditorExport, HeadlessEditorExportOptions, HeadlessEditorHydrationInput, HeadlessEditorOptions, HeadlessLiteXMLBatchOperation, HeadlessLiteXMLInsertOperation, HeadlessLiteXMLOperation, HeadlessLiteXMLRemoveOperation, HeadlessLiteXMLReplaceOperation, HotkeyEnum, HotkeyId, HotkeyItem, HotkeyScopeEnum, HotkeyScopeId, IBlockActionButton, IBlockActionButtonIcon, IBlockMenuItem, IBlockMenuRenderContext, IBlockMenuService, IBlockSelectHandler, type IEditor, ILinkService, ILitexmlService, IMarkdownShortCutService, INSERT_CHECK_LIST_COMMAND, INSERT_CODEINLINE_COMMAND, INSERT_CODEMIRROR_COMMAND, INSERT_FILE_COMMAND, INSERT_HEADING_COMMAND, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, INSERT_LINK_COMMAND, INSERT_LINK_HIGHLIGHT_COMMAND, INSERT_MARKDOWN_COMMAND, INSERT_MATH_COMMAND, INSERT_MENTION_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INodePlugin, INodePluginOptions, INodeService, ISlashMenuOption, ISlashOption, ISlashService, ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, ITriggerContext, IUploadService, ImageContentBlock, ImageListItem, ImagePlugin, ImagePluginOptions, Kernel, KeyEnum, LITEXML_APPLY_COMMAND, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND, LexicalErrorBoundary, LexicalPortalContainer, LinkHighlightPlugin, LinkHighlightPluginOptions, LinkPlugin, LinkPluginOptions, ListPlugin, ListPluginOptions, LitexmlDataSource, LitexmlPlugin, LitexmlPluginOptions, LitexmlService, MARKDOWN_READER_LEVEL, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX, MOVE_BLOCK_COMMAND, MarkdownPlugin, MathPlugin, MediaLists, MentionPlugin, MentionPluginOptions, MenuRenderProps, ModifierCombination, REMOVE_LIST_COMMAND, ReactAutoCompletePlugin, ReactBlockPlugin, ReactBlockPluginProps, ReactCodePlugin, ReactCodeblockPlugin, ReactCodeblockPluginProps, ReactCodemirrorPlugin, ReactEditor, ReactEditorContent, ReactEditorContentProps, ReactFilePlugin, ReactFilePluginProps, ReactHRPlugin, ReactHRPluginProps, ReactImagePlugin, ReactImagePluginProps, ReactLinkHighlightPlugin, ReactLinkPlugin, ReactLinkPluginProps, ReactListPlugin, ReactListPluginProps, ReactLiteXmlPlugin, ReactMarkdownPlugin, ReactMathPlugin, ReactMentionPlugin, ReactMentionPluginProps, ReactNodePlugin, ReactPlainText, ReactPlainTextProps, ReactSlashOption, ReactSlashOptionProps, ReactSlashPlugin, ReactSlashPluginProps, ReactTablePlugin, ReactToolbarPlugin, ReactVirtualBlockPlugin, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND, SELECT_TABLE_COMMAND, SHOW_TOOLBAR_COMMAND, SerializedMentionNode, SlashMenu, SlashMenuProps, SlashOptions, SlashPlugin, SlashPluginOptions, TableControllerMenuAxis, TableControllerMenuService, TablePlugin, TablePluginOptions, TextContentBlock, ToolbarCommandOptions, UPDATE_CODEBLOCK_LANG, UPDATE_LIST_START_COMMAND, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadPlugin, UploadPluginOptions, VirtualBlockPlugin, VirtualBlockPluginOptions, XMLReaderFunc, XMLReaderRecord, XMLWriterFunc, XMLWriterRecord, assert, browserDebug, bundledLanguagesInfo, compareNodeOrder, createDebugLogger, createEmptyEditorState, createHeadlessEditor, cursorNodeSerialized, debugLogger, debugLoggers, detectCodeLanguage, detectLanguage, devConsole, disableHotReload, enableHotReload, extractContentBlocks, extractMediaFromEditorState, extractMediaLists, genServiceId, generateEditorId, getHotkeyById, getKernelFromEditor, getKernelFromEditorConfig, getNodeKeyFromDOMNode, getParentElement, isDOMNode, isDocumentFragment, isPunctuationChar, isPureUrl, isValidUrl, moment, noop, prodSafeLogger, reconcileDecorator, registerBlockMoveCommand, registerEditorKernel, registerLinkHighlightCommand, registerToolbarCommand, resetRandomKey, scrollIntoView, unregisterEditorKernel, useHasDiffNode, useLexicalComposerContext, useLexicalEditor };

package/es/index.js

@@ -52,6 +52,7 @@ import { AutoCompletePlugin } from "./plugins/auto-complete/plugin/index.js";
 import ReactAutoCompletePlugin from "./plugins/auto-complete/react/ReactAutoCompletePlugin.js";
 import { MOVE_BLOCK_COMMAND, registerBlockMoveCommand } from "./plugins/block/command/index.js";
 import { BlockPlugin } from "./plugins/block/plugin/index.js";
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/block/react/style.js";
 import ReactBlockPlugin from "./plugins/block/react/ReactBlockPlugin.js";
 import ReactCodePlugin from "./plugins/code/react/CodeReactPlugin.js";
 import { UPDATE_CODEBLOCK_LANG } from "./plugins/codeblock/command/index.js";
@@ -126,4 +127,4 @@ function disableHotReload() {
 	}
 }
 //#endregion
-export { $closest, $closestNodeType, $createCursorNode, $getNearestNodeFromDOMNode, $getNodeFromDOMNode, $isCardLikeElementNode, $isCursorNode, AutoCompletePlugin, BlockMenuService, BlockPlugin, CONTENT_BLOCKS_DATA_TYPE, CardLikeElementNode, CodePlugin, CodeblockPlugin, CodemirrorPlugin, CommonPlugin, ContentBlocksDataSource, ContentBlocksPlugin, DEFAULT_HEADLESS_EDITOR_PLUGINS, DOM_DOCUMENT_FRAGMENT_TYPE, DOM_DOCUMENT_TYPE, DOM_ELEMENT_TYPE, DOM_TEXT_TYPE, DataSource, DiffAction, EDITOR_THEME_KEY, FilePlugin, GET_MARKDOWN_SELECTION_COMMAND, HIDE_TOOLBAR_COMMAND, HOVER_COMMAND, HRPlugin, HeadlessEditor, HotkeyEnum, HotkeyScopeEnum, IBlockMenuService, ILinkService, ILitexmlService, IMarkdownShortCutService, INSERT_CHECK_LIST_COMMAND, INSERT_CODEINLINE_COMMAND, INSERT_CODEMIRROR_COMMAND, INSERT_FILE_COMMAND, INSERT_HEADING_COMMAND, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, INSERT_LINK_COMMAND, INSERT_LINK_HIGHLIGHT_COMMAND, INSERT_MARKDOWN_COMMAND, INSERT_MATH_COMMAND, INSERT_MENTION_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INodePlugin, INodeService, ITableControllerMenuService, IUploadService, ImagePlugin, Kernel, KeyEnum, LITEXML_APPLY_COMMAND, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND, LexicalErrorBoundary, LexicalPortalContainer, LinkHighlightPlugin, LinkPlugin, ListPlugin, LitexmlDataSource, LitexmlPlugin, LitexmlService, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX, MOVE_BLOCK_COMMAND, MarkdownPlugin, MathPlugin, MentionPlugin, REMOVE_LIST_COMMAND, ReactAutoCompletePlugin, ReactBlockPlugin, ReactCodePlugin, ReactCodeblockPlugin, ReactCodemirrorPlugin, ReactEditor, ReactEditorContent, ReactFilePlugin, ReactHRPlugin, ReactImagePlugin, ReactLinkHighlightPlugin, ReactLinkPlugin, ReactListPlugin, ReactLiteXmlPlugin, ReactMarkdownPlugin, ReactMathPlugin, ReactMentionPlugin, ReactNodePlugin, ReactPlainText, ReactSlashOption, ReactSlashPlugin, ReactTablePlugin, ReactToolbarPlugin, ReactVirtualBlockPlugin, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND, SELECT_TABLE_COMMAND, SHOW_TOOLBAR_COMMAND, SlashMenu, SlashPlugin, TableControllerMenuService, TablePlugin, UPDATE_CODEBLOCK_LANG, UPDATE_LIST_START_COMMAND, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadPlugin, VirtualBlockPlugin, assert, browserDebug, bundledLanguagesInfo, compareNodeOrder, createDebugLogger, createEmptyEditorState, createHeadlessEditor, cursorNodeSerialized, debugLogger, debugLoggers, detectCodeLanguage, detectLanguage, devConsole, disableHotReload, enableHotReload, extractContentBlocks, extractMediaFromEditorState, extractMediaLists, genServiceId, generateEditorId, getHotkeyById, getKernelFromEditor, getKernelFromEditorConfig, getNodeKeyFromDOMNode, getParentElement, isDOMNode, isDocumentFragment, isPunctuationChar, isPureUrl, isValidUrl, moment, noop, prodSafeLogger, reconcileDecorator, registerBlockMoveCommand, registerEditorKernel, registerLinkHighlightCommand, registerToolbarCommand, resetRandomKey, scrollIntoView, unregisterEditorKernel, useHasDiffNode, useLexicalComposerContext, useLexicalEditor };
+export { $closest, $closestNodeType, $createCursorNode, $getNearestNodeFromDOMNode, $getNodeFromDOMNode, $isCardLikeElementNode, $isCursorNode, ANCHOR_PADDING_CSS_VAR, AutoCompletePlugin, BlockMenuService, BlockPlugin, CONTENT_BLOCKS_DATA_TYPE, CardLikeElementNode, CodePlugin, CodeblockPlugin, CodemirrorPlugin, CommonPlugin, ContentBlocksDataSource, ContentBlocksPlugin, DEFAULT_BLOCK_ANCHOR_PADDING, DEFAULT_HEADLESS_EDITOR_PLUGINS, DOM_DOCUMENT_FRAGMENT_TYPE, DOM_DOCUMENT_TYPE, DOM_ELEMENT_TYPE, DOM_TEXT_TYPE, DataSource, DiffAction, EDITOR_THEME_KEY, FilePlugin, GET_MARKDOWN_SELECTION_COMMAND, HIDE_TOOLBAR_COMMAND, HOVER_COMMAND, HRPlugin, HeadlessEditor, HotkeyEnum, HotkeyScopeEnum, IBlockMenuService, ILinkService, ILitexmlService, IMarkdownShortCutService, INSERT_CHECK_LIST_COMMAND, INSERT_CODEINLINE_COMMAND, INSERT_CODEMIRROR_COMMAND, INSERT_FILE_COMMAND, INSERT_HEADING_COMMAND, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, INSERT_LINK_COMMAND, INSERT_LINK_HIGHLIGHT_COMMAND, INSERT_MARKDOWN_COMMAND, INSERT_MATH_COMMAND, INSERT_MENTION_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INodePlugin, INodeService, ITableControllerMenuService, IUploadService, ImagePlugin, Kernel, KeyEnum, LITEXML_APPLY_COMMAND, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND, LexicalErrorBoundary, LexicalPortalContainer, LinkHighlightPlugin, LinkPlugin, ListPlugin, LitexmlDataSource, LitexmlPlugin, LitexmlService, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX, MOVE_BLOCK_COMMAND, MarkdownPlugin, MathPlugin, MentionPlugin, REMOVE_LIST_COMMAND, ReactAutoCompletePlugin, ReactBlockPlugin, ReactCodePlugin, ReactCodeblockPlugin, ReactCodemirrorPlugin, ReactEditor, ReactEditorContent, ReactFilePlugin, ReactHRPlugin, ReactImagePlugin, ReactLinkHighlightPlugin, ReactLinkPlugin, ReactListPlugin, ReactLiteXmlPlugin, ReactMarkdownPlugin, ReactMathPlugin, ReactMentionPlugin, ReactNodePlugin, ReactPlainText, ReactSlashOption, ReactSlashPlugin, ReactTablePlugin, ReactToolbarPlugin, ReactVirtualBlockPlugin, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND, SELECT_TABLE_COMMAND, SHOW_TOOLBAR_COMMAND, SlashMenu, SlashPlugin, TableControllerMenuService, TablePlugin, UPDATE_CODEBLOCK_LANG, UPDATE_LIST_START_COMMAND, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadPlugin, VirtualBlockPlugin, assert, browserDebug, bundledLanguagesInfo, compareNodeOrder, createDebugLogger, createEmptyEditorState, createHeadlessEditor, cursorNodeSerialized, debugLogger, debugLoggers, detectCodeLanguage, detectLanguage, devConsole, disableHotReload, enableHotReload, extractContentBlocks, extractMediaFromEditorState, extractMediaLists, genServiceId, generateEditorId, getHotkeyById, getKernelFromEditor, getKernelFromEditorConfig, getNodeKeyFromDOMNode, getParentElement, isDOMNode, isDocumentFragment, isPunctuationChar, isPureUrl, isValidUrl, moment, noop, prodSafeLogger, reconcileDecorator, registerBlockMoveCommand, registerEditorKernel, registerLinkHighlightCommand, registerToolbarCommand, resetRandomKey, scrollIntoView, unregisterEditorKernel, useHasDiffNode, useLexicalComposerContext, useLexicalEditor };

package/es/plugins/block/index.d.ts

@@ -2,4 +2,5 @@ import { BlockMovePayload, MOVE_BLOCK_COMMAND, registerBlockMoveCommand } from "
 import { BlockPlugin, BlockPluginOptions } from "./plugin/index.js";
 import { BlockDragTarget } from "./react/core/types.js";
 import { BlockMenuService, IBlockActionButton, IBlockActionButtonIcon, IBlockMenuItem, IBlockMenuRenderContext, IBlockMenuService, IBlockSelectHandler } from "./service/i-block-menu-service.js";
-import { ReactBlockPlugin, ReactBlockPluginProps } from "./react/ReactBlockPlugin.js";
+import { ReactBlockPlugin, ReactBlockPluginProps } from "./react/ReactBlockPlugin.js";
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./react/style.js";

package/es/plugins/block/plugin/index.d.ts

@@ -1,6 +1,15 @@
 import { IEditorPluginConstructor } from "../../../types/kernel.js";
 //#region src/plugins/block/plugin/index.d.ts
 interface BlockPluginOptions {
+  /**
+   * Inline padding reserved on the editor root so the floating block menu /
+   * drag handle has somewhere to render without overlapping the block content.
+   * Pass `0` (or `'0'`) when the surrounding layout already provides enough
+   * left gutter. Accepts a number (treated as px) or any valid CSS
+   * `padding-inline` value (e.g. `'40px 0'`). When omitted, defaults to 54px
+   * on each side.
+   */
+  anchorPadding?: number | string;
   attributeName?: string;
   className?: string;
 }

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

@@ -7,13 +7,13 @@ import { BlockPlugin } from "../plugin/index.js";
 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 { styles } from "./style.js";
-import { Icon } from "@lobehub/ui";
+import { ANCHOR_PADDING_CSS_VAR, styles } from "./style.js";
+import { DropdownMenu, Icon, useAppElement } from "@lobehub/ui";
 import { GripVerticalIcon, PlusIcon } from "lucide-react";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import { Button as Button$1, Dropdown as Dropdown$1, theme } from "antd";
+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";
@@ -33,8 +33,13 @@ const getTableMenuAnchorRect = (element) => {
 const ReactBlockPlugin = (props) => {
 	const { token } = theme.useToken();
 	const [editor] = useLexicalComposerContext();
-	const { rootClassName, className, attributeName, locale, onHoverBlockChange, onDragTargetChange, onDragTargetResolve } = props;
+	const appElement = useAppElement();
+	const { rootClassName, className, attributeName, anchorPadding, locale, onHoverBlockChange, onDragTargetChange, onDragTargetResolve } = props;
 	const mergedRootClassName = cx(styles.root, rootClassName?.trim() || className?.trim());
+	const anchorPaddingValue = useMemo(() => {
+		if (anchorPadding === void 0) return null;
+		return typeof anchorPadding === "number" ? `${anchorPadding}px` : anchorPadding;
+	}, [anchorPadding]);
 	const menuRef = useRef(null);
 	const dragLayerRef = useRef(null);
 	const contextRef = useRef(createRuntimeContext());
@@ -53,15 +58,23 @@ const ReactBlockPlugin = (props) => {
 	useLayoutEffect(() => {
 		if (locale) editor.registerLocale(locale);
 		editor.registerPlugin(BlockPlugin, {
+			anchorPadding,
 			attributeName,
 			className: mergedRootClassName
 		});
 	}, [
+		anchorPadding,
 		attributeName,
 		editor,
 		locale,
 		mergedRootClassName
 	]);
+	useLexicalEditor((lexicalEditor) => lexicalEditor.registerRootListener((rootElement, prevRootElement) => {
+		if (prevRootElement) prevRootElement.style.removeProperty(ANCHOR_PADDING_CSS_VAR);
+		if (!rootElement) return;
+		if (anchorPaddingValue === null) rootElement.style.removeProperty(ANCHOR_PADDING_CSS_VAR);
+		else rootElement.style.setProperty(ANCHOR_PADDING_CSS_VAR, anchorPaddingValue);
+	}), [anchorPaddingValue]);
 	useLexicalEditor(() => {
 		const service = editor.requireService(IBlockMenuService);
 		if (!service) {
@@ -382,24 +395,50 @@ const ReactBlockPlugin = (props) => {
 		editor,
 		isDragging
 	]);
+	const menuContext = useMemo(() => {
+		if (operationMenuOpen && operationMenuContext) return operationMenuContext;
+		const lockedContext = blockMenuService?.getMenuLockedContext();
+		if (lockedContext) {
+			const root = editor.getRootElement();
+			const fresh = root?.querySelector(`[data-block-id="${CSS.escape(lockedContext.blockId)}"]`);
+			if (fresh && root?.contains(fresh)) return {
+				blockElement: fresh,
+				blockId: lockedContext.blockId,
+				editor
+			};
+		}
+		if (!hoveredBlock) return null;
+		return {
+			blockElement: hoveredBlock.blockElement,
+			blockId: hoveredBlock.blockId,
+			editor
+		};
+	}, [
+		editor,
+		hoveredBlock,
+		operationMenuOpen,
+		operationMenuContext,
+		blockMenuService,
+		menuVersion
+	]);
 	useLayoutEffect(() => {
-		if (!hoveredBlock) {
+		if (!menuContext) {
 			if (operationMenuOpen) return;
 			setMenuPosition({});
 			return;
 		}
 		const updateMenuPosition = () => {
-			const blockRect = getBlockMeasureRect(hoveredBlock.blockElement);
+			const blockRect = getBlockMeasureRect(menuContext.blockElement);
 			if (!blockRect) {
 				setMenuPosition({});
 				return;
 			}
 			const menuWidth = menuRef.current?.offsetWidth || 32;
 			const gap = 8;
-			const listItemOffset = hoveredBlock.blockElement.tagName === "LI" ? 16 : 0;
-			const isTableBlock = isTableBlockElement(hoveredBlock.blockElement);
-			const tableMenuOffset = focusedTableBlockId === hoveredBlock.blockId && isTableBlock ? TABLE_FOCUSED_MENU_OFFSET : 0;
-			const tableAnchorRect = isTableBlock ? getTableMenuAnchorRect(hoveredBlock.blockElement) : null;
+			const listItemOffset = menuContext.blockElement.tagName === "LI" ? 16 : 0;
+			const isTableBlock = isTableBlockElement(menuContext.blockElement);
+			const tableMenuOffset = focusedTableBlockId === menuContext.blockId && isTableBlock ? TABLE_FOCUSED_MENU_OFFSET : 0;
+			const tableAnchorRect = isTableBlock ? getTableMenuAnchorRect(menuContext.blockElement) : null;
 			const root = editor.getRootElement();
 			const rootRect = root?.getBoundingClientRect();
 			const rootPaddingLeft = root ? Number.parseFloat(window.getComputedStyle(root).paddingLeft || "0") : 0;
@@ -422,18 +461,10 @@ const ReactBlockPlugin = (props) => {
 	}, [
 		editor,
 		focusedTableBlockId,
-		hoveredBlock,
+		menuContext,
 		layoutVersion,
 		operationMenuOpen
 	]);
-	const menuContext = useMemo(() => {
-		if (!hoveredBlock) return null;
-		return {
-			blockElement: hoveredBlock.blockElement,
-			blockId: hoveredBlock.blockId,
-			editor
-		};
-	}, [editor, hoveredBlock]);
 	const operationMenus = useMemo(() => {
 		if (!operationMenuContext || !blockMenuService) return [];
 		return blockMenuService.getMenus(operationMenuContext);
@@ -493,19 +524,6 @@ const ReactBlockPlugin = (props) => {
 		contextRef.current.dragTarget = null;
 		setDragIndicator(null);
 	};
-	const toggleOperationMenu = (context) => {
-		if (!context) {
-			setOperationMenuOpen(false);
-			setOperationMenuContext(null);
-			return;
-		}
-		setOperationMenuOpen((open) => {
-			const shouldOpen = !(open && contextRef.current.operationMenuAnchorBlockId === context.blockId);
-			contextRef.current.operationMenuAnchorBlockId = shouldOpen ? context.blockId : null;
-			setOperationMenuContext(shouldOpen ? context : null);
-			return shouldOpen;
-		});
-	};
 	const handleDragHandlePointerDown = (event) => {
 		if (!menuContext) return;
 		event.stopPropagation();
@@ -521,16 +539,24 @@ const ReactBlockPlugin = (props) => {
 			onDraggingChange: setIsDragging,
 			setDragIndicator,
 			setOperationMenuContext,
-			setOperationMenuOpen,
-			toggleOperationMenu
+			setOperationMenuOpen
 		});
 	};
-	const handleDragHandleClick = () => {
+	const handleOperationMenuOpenChange = (open) => {
 		if (contextRef.current.ignoreNextHandleClick) {
 			contextRef.current.ignoreNextHandleClick = false;
 			return;
 		}
-		toggleOperationMenu(menuContext);
+		if (!menuContext) return;
+		if (open) {
+			setOperationMenuOpen(true);
+			setOperationMenuContext(menuContext);
+			contextRef.current.operationMenuAnchorBlockId = menuContext.blockId;
+		} else {
+			setOperationMenuOpen(false);
+			setOperationMenuContext(null);
+			contextRef.current.operationMenuAnchorBlockId = null;
+		}
 	};
 	const dropdownItems = useMemo(() => operationMenus.map((item) => ({
 		key: item.key,
@@ -562,19 +588,13 @@ const ReactBlockPlugin = (props) => {
 					title,
 					type: "text"
 				}, item.key);
-			}), /* @__PURE__ */ jsx(Dropdown$1, {
-				align: { points: ["tr", "tl"] },
-				classNames: { root: OPERATION_MENU_OVERLAY_CLASS },
-				menu: { items: dropdownItems },
-				onOpenChange: (open) => {
-					if (!open) {
-						setOperationMenuOpen(false);
-						setOperationMenuContext(null);
-						contextRef.current.operationMenuAnchorBlockId = null;
-					}
-				},
+			}), /* @__PURE__ */ jsx(DropdownMenu, {
+				items: dropdownItems,
+				onOpenChange: handleOperationMenuOpenChange,
 				open: operationMenuOpen && operationMenuContext?.blockId === menuContext.blockId,
-				trigger: [],
+				placement: "leftTop",
+				popupProps: { className: OPERATION_MENU_OVERLAY_CLASS },
+				positionerProps: { style: { zIndex: 1e3 } },
 				children: /* @__PURE__ */ jsx(Button$1, {
 					"aria-label": "Block actions and drag",
 					className: styles.dragHandle,
@@ -583,7 +603,6 @@ const ReactBlockPlugin = (props) => {
 						icon: GripVerticalIcon,
 						size: 14
 					}),
-					onClick: handleDragHandleClick,
 					onPointerDown: handleDragHandlePointerDown,
 					size: "small",
 					title: "Block actions and drag",
@@ -606,7 +625,7 @@ const ReactBlockPlugin = (props) => {
 			top: dragIndicator.top,
 			width: dragIndicator.width
 		}
-	})] }), document.body)] });
+	})] }), appElement ?? document.body)] });
 };
 ReactBlockPlugin.displayName = "ReactBlockPlugin";
 //#endregion

package/es/plugins/block/react/drag/drag-session.js

@@ -64,8 +64,7 @@ const applyDragSourceOpacity = (sourceBlock) => {
 		sourceBlock.style.opacity = previousOpacity;
 	};
 };
-const startBlockDragSession = ({ clientX, clientY, clearDragPreview, contextRef, dragGhostContainer, editor, menuContext, onDraggingChange, onDragTargetResolve, setDragIndicator, setOperationMenuContext, setOperationMenuOpen, toggleOperationMenu }) => {
-	setOperationMenuOpen(false);
+const startBlockDragSession = ({ clientX, clientY, clearDragPreview, contextRef, dragGhostContainer, editor, menuContext, onDraggingChange, onDragTargetResolve, setDragIndicator, setOperationMenuContext, setOperationMenuOpen }) => {
 	let dragGhost = null;
 	let restoreSourceOpacity = null;
 	contextRef.current.dragStartPoint = {
@@ -148,8 +147,6 @@ const startBlockDragSession = ({ clientX, clientY, clearDragPreview, contextRef,
 	};
 	const onPointerUp = () => {
 		if (!contextRef.current.dragStarted && !contextRef.current.dragMoved) {
-			toggleOperationMenu(menuContext);
-			contextRef.current.ignoreNextHandleClick = true;
 			contextRef.current.draggingSource = null;
 			contextRef.current.dragPointerY = null;
 			contextRef.current.dragBlocks = [];

package/es/plugins/block/react/index.d.ts

@@ -1,2 +1,3 @@
 import { BlockDragTarget } from "./core/types.js";
-import { ReactBlockPlugin, ReactBlockPluginProps } from "./ReactBlockPlugin.js";
+import { ReactBlockPlugin, ReactBlockPluginProps } from "./ReactBlockPlugin.js";
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./style.js";

package/es/plugins/block/react/style.d.ts

@@ -0,0 +1,11 @@
+//#region src/plugins/block/react/style.d.ts
+declare const ANCHOR_PADDING_CSS_VAR = "--lobe-block-anchor-padding";
+/**
+ * Default inline padding (px) reserved on the editor root so the floating
+ * block menu / drag handle has room to render. Exported for consumers that
+ * need to align surrounding chrome (e.g. a title section above the editor)
+ * with the editor's content edge.
+ */
+declare const DEFAULT_BLOCK_ANCHOR_PADDING = 54;
+//#endregion
+export { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING };

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

@@ -1,5 +1,13 @@
 import { createStaticStyles } from "antd-style";
 //#region src/plugins/block/react/style.ts
+const ANCHOR_PADDING_CSS_VAR = "--lobe-block-anchor-padding";
+/**
+* Default inline padding (px) reserved on the editor root so the floating
+* block menu / drag handle has room to render. Exported for consumers that
+* need to align surrounding chrome (e.g. a title section above the editor)
+* with the editor's content edge.
+*/
+const DEFAULT_BLOCK_ANCHOR_PADDING = 54;
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	dragHandle: css`
     cursor: grab !important;
@@ -32,9 +40,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     pointer-events: auto;
     position: fixed;
     z-index: 100;
-    transition:
-      inset-inline-start 200ms ease,
-      inset-block-start 200ms ease;
   `,
 	menuInner: css`
     display: flex;
@@ -59,8 +64,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	root: css`
-    padding-inline: 54px 54px;
+    padding-inline: var(${ANCHOR_PADDING_CSS_VAR}, ${54}px);
   `
 }));
 //#endregion
-export { styles };
+export { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING, styles };

package/es/plugins/block/service/i-block-menu-service.d.ts

@@ -30,12 +30,25 @@ interface IBlockSelectHandler {
 }
 interface IBlockMenuService {
   getActionButtons(context: IBlockMenuRenderContext): IBlockActionButton[];
+  /**
+   * Returns the currently pinned menu context, or null when no lock is active.
+   * While locked, the block menu UI freezes at the pinned block and hover
+   * detection no longer reassigns the anchor.
+   */
+  getMenuLockedContext(): IBlockMenuRenderContext | null;
   getMenus(context: IBlockMenuRenderContext): IBlockMenuItem[];
   isMenuSuppressed(): boolean;
   registerActionButton(item: IBlockActionButton): () => void;
   registerMenu(item: IBlockMenuItem): () => void;
   registerSelectHandler(item: IBlockSelectHandler): () => void;
   selectNode(node: LexicalNode): boolean;
+  /**
+   * Pin the block menu UI to the provided context (typically while a consumer
+   * popup spawned by an action button is open). Pass `null` for `context` to
+   * release the lock owned by `key`. Multiple keys may hold locks
+   * simultaneously; the most recently set lock wins.
+   */
+  setMenuLockedContext(key: string, context: IBlockMenuRenderContext | null): void;
   setMenuSuppressed(key: string, suppressed: boolean): void;
   subscribe(listener: () => void): () => void;
 }
@@ -44,15 +57,18 @@ declare class BlockMenuService implements IBlockMenuService {
   private actionButtons;
   private items;
   private listeners;
+  private lockedContexts;
   private selectHandlers;
   private suppressors;
   getActionButtons(context: IBlockMenuRenderContext): IBlockActionButton[];
+  getMenuLockedContext(): IBlockMenuRenderContext | null;
   getMenus(context: IBlockMenuRenderContext): IBlockMenuItem[];
   isMenuSuppressed(): boolean;
   registerActionButton(item: IBlockActionButton): () => void;
   registerMenu(item: IBlockMenuItem): () => void;
   registerSelectHandler(item: IBlockSelectHandler): () => void;
   selectNode(node: LexicalNode): boolean;
+  setMenuLockedContext(key: string, context: IBlockMenuRenderContext | null): void;
   setMenuSuppressed(key: string, suppressed: boolean): void;
   subscribe(listener: () => void): () => void;
   private notify;

package/es/plugins/block/service/i-block-menu-service.js

@@ -6,12 +6,19 @@ var BlockMenuService = class {
 		this.actionButtons = /* @__PURE__ */ new Map();
 		this.items = /* @__PURE__ */ new Map();
 		this.listeners = /* @__PURE__ */ new Set();
+		this.lockedContexts = /* @__PURE__ */ new Map();
 		this.selectHandlers = /* @__PURE__ */ new Map();
 		this.suppressors = /* @__PURE__ */ new Set();
 	}
 	getActionButtons(context) {
 		return Array.from(this.actionButtons.values()).filter((item) => item.when ? item.when(context) : true).sort((a, b) => (a.order || 0) - (b.order || 0));
 	}
+	getMenuLockedContext() {
+		if (this.lockedContexts.size === 0) return null;
+		let last = null;
+		for (const ctx of this.lockedContexts.values()) last = ctx;
+		return last;
+	}
 	getMenus(context) {
 		return Array.from(this.items.values()).filter((item) => item.when ? item.when(context) : true).sort((a, b) => (a.order || 0) - (b.order || 0));
 	}
@@ -47,6 +54,18 @@ var BlockMenuService = class {
 		for (const handler of handlers) if (handler.onSelect(node)) return true;
 		return false;
 	}
+	setMenuLockedContext(key, context) {
+		const existing = this.lockedContexts.get(key);
+		if (context === null) {
+			if (!this.lockedContexts.delete(key)) return;
+			this.notify();
+			return;
+		}
+		if (existing === context) return;
+		this.lockedContexts.delete(key);
+		this.lockedContexts.set(key, context);
+		this.notify();
+	}
 	setMenuSuppressed(key, suppressed) {
 		const size = this.suppressors.size;
 		if (suppressed) this.suppressors.add(key);

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

@@ -6,6 +6,7 @@ import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection,
 import { $createListItemNode, $isListItemNode } from "@lexical/list";
 //#region src/plugins/slash/plugin/index.ts
 init_plugin();
+const SLASH_ADD_LOCK_KEY = "__slash_add_below";
 const SlashPlugin = class extends KernelPlugin {
 	static {
 		this.pluginName = "SlashPlugin";
@@ -15,6 +16,7 @@ const SlashPlugin = class extends KernelPlugin {
 		this.kernel = kernel;
 		this.config = config;
 		this.service = null;
+		this.blockMenuService = null;
 		this.currentSlashTrigger = null;
 		this.currentSlashTriggerIndex = -1;
 		this.manualOpen = false;
@@ -31,13 +33,15 @@ const SlashPlugin = class extends KernelPlugin {
 		this.currentSlashTriggerIndex = -1;
 		this.manualOpen = false;
 		this.suppressOpen = true;
+		this.blockMenuService?.setMenuLockedContext(SLASH_ADD_LOCK_KEY, null);
 	}
 	onInit(editor) {
 		const blockMenuService = this.kernel.requireService(IBlockMenuService);
+		this.blockMenuService = blockMenuService;
 		if (blockMenuService) {
 			const unregisterAddBlockButton = blockMenuService.registerActionButton({
 				icon: "plus",
-				key: "__slash_add_below",
+				key: SLASH_ADD_LOCK_KEY,
 				onClick: (context) => {
 					const lexicalEditor = context.editor.getLexicalEditor();
 					if (!lexicalEditor) return;
@@ -76,6 +80,7 @@ const SlashPlugin = class extends KernelPlugin {
 						match: null,
 						trigger: slashOptions.trigger
 					});
+					blockMenuService.setMenuLockedContext(SLASH_ADD_LOCK_KEY, context);
 				},
 				order: -100,
 				title: "Add block below"
@@ -153,6 +158,8 @@ const SlashPlugin = class extends KernelPlugin {
 		}));
 	}
 	destroy() {
+		this.blockMenuService?.setMenuLockedContext(SLASH_ADD_LOCK_KEY, null);
+		this.blockMenuService = null;
 		super.destroy();
 	}
 };

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

@@ -1,23 +1,19 @@
 "use client";
-import { Menu } from "@lobehub/ui";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Icon, menuSharedStyles } from "@lobehub/ui";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createStaticStyles } from "antd-style";
 import { createPortal } from "react-dom";
 import { flip, offset, shift, useFloating } from "@floating-ui/react";
 //#region src/plugins/slash/react/components/DefaultSlashMenu.tsx
 const LOBE_THEME_APP_ID$1 = "lobe-ui-theme-app";
 const styles = createStaticStyles(({ css, cssVar }) => ({
-	menu: css`
-    z-index: 9999;
-    width: max-content;
-  `,
 	popup: css`
     scrollbar-width: none;
 
     overflow-y: auto;
 
-    min-width: 120px;
+    min-width: 200px;
     max-height: min(50vh, 400px);
     padding: 4px;
     border-radius: ${cssVar.borderRadius};
@@ -28,68 +24,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       0 0 15px 0 #00000008,
       0 2px 30px 0 #00000014,
       0 0 0 1px ${cssVar.colorBorder} inset;
-
-    .ant-menu {
-      min-width: 200px;
-      padding: 0 !important;
-      border-inline-end: none !important;
-
-      color: ${cssVar.colorText} !important;
-
-      background: transparent !important;
-      background-color: transparent !important;
-    }
-
-    .ant-menu-item {
-      overflow: hidden;
-      display: flex !important;
-      align-items: center;
-
-      width: 100% !important;
-      min-height: 36px;
-      margin: 0 !important;
-      padding-block: 8px !important;
-      padding-inline: 12px !important;
-      border-radius: ${cssVar.borderRadiusSM} !important;
-
-      font-size: 14px;
-      line-height: 20px;
-      color: ${cssVar.colorText} !important;
-
-      background: transparent !important;
-
-      transition: all 150ms ${cssVar.motionEaseOut};
-
-      &:hover,
-      &.ant-menu-item-active {
-        background: ${cssVar.colorFillTertiary} !important;
-      }
-
-      &:active {
-        background: ${cssVar.colorFillSecondary} !important;
-      }
-    }
-
-    .ant-menu-item-divider {
-      height: 1px;
-      margin-block: 4px !important;
-      margin-inline: 0 !important;
-      background: ${cssVar.colorBorder} !important;
-    }
-
-    .ant-menu-title-content,
-    .ant-menu-title-content-with-extra {
-      overflow: visible;
-      display: inline-flex;
-      gap: 24px;
-      justify-content: space-between;
-
-      width: 100%;
-
-      text-overflow: unset;
-    }
+  `,
+	root: css`
+    z-index: 1100;
+    width: max-content;
   `
 }));
+const isDividerOption = (option) => "type" in option && option.type === "divider";
 const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, open, options, placement: forcePlacement, position }) => {
 	const resolvedPlacement = forcePlacement ? `${forcePlacement}-start` : "top-start";
 	const middleware = useMemo(() => [
@@ -99,7 +40,7 @@ const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, ope
 	], [forcePlacement]);
 	const getRectRef = useRef(position.getRect);
 	getRectRef.current = position.getRect;
-	const { refs, floatingStyles, update } = useFloating({
+	const { refs, floatingStyles, isPositioned, update } = useFloating({
 		middleware,
 		open,
 		placement: resolvedPlacement,
@@ -136,30 +77,55 @@ const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, ope
 		getPopupContainer,
 		update
 	]);
-	const handleMenuClick = useCallback(({ key }) => {
-		const option = options.find((item) => "key" in item && item.key === key);
-		if (option) onSelect(option);
-	}, [options, onSelect]);
-	const hasVisibleItems = options?.some((item) => !("type" in item && item.type === "divider"));
+	const hasVisibleItems = options?.some((item) => !isDividerOption(item));
 	if (!open || !hasVisibleItems) return null;
 	const portalContainer = getPopupContainer?.() || document.getElementById(LOBE_THEME_APP_ID$1) || document.body;
+	const renderedItems = loading ? /* @__PURE__ */ jsx("div", {
+		className: menuSharedStyles.empty,
+		children: "Loading..."
+	}) : options.map((opt, index) => {
+		if (isDividerOption(opt)) return /* @__PURE__ */ jsx("div", { className: menuSharedStyles.separator }, `__divider_${index}`);
+		const item = opt;
+		const isHighlighted = item.key === activeKey;
+		const isDisabled = Boolean(item.disabled);
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-disabled": isDisabled || void 0,
+			className: menuSharedStyles.item,
+			"data-disabled": isDisabled ? "" : void 0,
+			"data-highlighted": isHighlighted ? "" : void 0,
+			onClick: () => {
+				if (isDisabled) return;
+				onSelect(item);
+			},
+			onMouseDown: (event) => event.preventDefault(),
+			role: "menuitem",
+			children: [
+				item.icon ? /* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.icon,
+					children: /* @__PURE__ */ jsx(Icon, { icon: item.icon })
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.label,
+					children: item.label
+				}),
+				item.extra ? /* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.extra,
+					children: item.extra
+				}) : null
+			]
+		}, String(item.key));
+	});
 	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: styles.menu,
+		className: styles.root,
 		"data-resloved-placement": resolvedPlacement,
 		ref: refs.setFloating,
-		style: floatingStyles,
+		style: {
+			...floatingStyles,
+			visibility: isPositioned ? "visible" : "hidden"
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles.popup,
-			children: /* @__PURE__ */ jsx(Menu, {
-				activeKey,
-				items: loading ? [{
-					disabled: true,
-					key: "loading",
-					label: "Loading..."
-				}] : options,
-				onClick: handleMenuClick,
-				selectable: false
-			})
+			children: renderedItems
 		})
 	}), portalContainer);
 };

package/es/plugins/table/node/index.js

@@ -86,10 +86,12 @@ function ensureTableControllerDOM(element) {
 	if (legacyPlainToolbar instanceof HTMLElement) {
 		legacyPlainToolbar.className = "toolbar-row";
 		markTableControllerHost(legacyPlainToolbar, true);
-		element.append(legacyPlainToolbar);
+		scrollWrapper.append(legacyPlainToolbar);
 	}
+	const legacyOuterRowToolbar = element.querySelector(":scope > .toolbar-row");
+	if (legacyOuterRowToolbar instanceof HTMLElement) scrollWrapper.append(legacyOuterRowToolbar);
 	ensureToolbar(scrollWrapper, "toolbar-col", true);
-	ensureToolbar(element, "toolbar-row", true);
+	ensureToolbar(scrollWrapper, "toolbar-row", true);
 	ensureTableScrollIndicators(scrollWrapper);
 }
 function reconcileTableDecorator(editor, node, decorator) {

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

@@ -1,6 +1,6 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils.js";
-import { Dropdown } from "@lobehub/ui";
+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";
@@ -221,8 +221,8 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 		tableCellNode,
 		clearTableSelection
 	]);
-	return /* @__PURE__ */ jsx(Dropdown, {
-		menu: { items: useMemo(() => {
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		items: useMemo(() => {
 			return [
 				{
 					icon: PanelTopCloseIcon,
@@ -287,7 +287,7 @@ const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge
 			renderDeleteMenuLabel,
 			toggleTableRowIsHeader,
 			toggleTableColumnIsHeader
-		]) },
+		]),
 		children
 	});
 });

package/es/plugins/table/react/style.js

@@ -9,6 +9,7 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
     .lobe-editor-table-scroll-wrapper {
       position: relative;
       overflow: auto visible;
+      margin-inline: calc(var(--lobe-block-anchor-padding, 54px) * -1);
       padding-block-start: 14px;
     }
 
@@ -62,6 +63,11 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       height: 0;
     }
 
+    .toolbar-col,
+    .toolbar-row {
+      inset-inline-start: var(--lobe-block-anchor-padding, 54px);
+    }
+
     .table-controller,
     .table-controller-col,
     .table-controller-row {
@@ -83,6 +89,7 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       border-collapse: collapse;
 
       width: fit-content;
+      margin-inline: var(--lobe-block-anchor-padding, 54px);
 
       text-align: start;
       text-indent: initial;

package/es/react.d.ts

@@ -1,3 +1,4 @@
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/block/react/style.js";
 import { ChatInputProps } from "./react/ChatInput/type.js";
 import { ChatInput } from "./react/ChatInput/ChatInput.js";
 import { ChatInputActionBarProps } from "./react/ChatInputActionBar/type.js";
@@ -20,4 +21,4 @@ import { SendButtonProps } from "./react/SendButton/type.js";
 import { SendButton } from "./react/SendButton/SendButton.js";
 import { SlashMenuProps } from "./react/SlashMenu/type.js";
 import { SlashMenu } from "./react/SlashMenu/SlashMenu.js";
-export { ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, Editor, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, FloatMenu, type FloatMenuProps, SendButton, type SendButtonProps, SlashMenu, type SlashMenuProps, useEditor, useEditorContent, useEditorState, withProps };
+export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, FloatMenu, type FloatMenuProps, SendButton, type SendButtonProps, SlashMenu, type SlashMenuProps, useEditor, useEditorContent, useEditorState, withProps };

package/es/react.js

@@ -1,3 +1,4 @@
+import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/block/react/style.js";
 import ChatInput from "./react/ChatInput/ChatInput.js";
 import ChatInputActionBar from "./react/ChatInputActionBar/ChatInputActionBar.js";
 import ChatInputActions from "./react/ChatInputActions/ChatInputActions.js";
@@ -11,4 +12,4 @@ import FloatActions from "./react/FloatActions/FloatActions.js";
 import FloatMenu from "./react/FloatMenu/FloatMenu.js";
 import SendButton from "./react/SendButton/SendButton.js";
 import SlashMenu from "./react/SlashMenu/SlashMenu.js";
-export { ChatInput, ChatInputActionBar, ChatInputActions, CodeLanguageSelect, Editor, EditorProvider, FloatActions, FloatMenu, SendButton, SlashMenu, useEditor, useEditorContent, useEditorState, withProps };
+export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, ChatInputActions, CodeLanguageSelect, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, EditorProvider, FloatActions, FloatMenu, SendButton, SlashMenu, useEditor, useEditorContent, useEditorState, withProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.16.1",
+  "version": "4.17.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",