@lobehub/editor 4.17.0 → 4.17.2

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/plugins/block/react/ReactBlockPlugin.js

@@ -4,6 +4,7 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
 import { IBlockMenuService } from "../service/i-block-menu-service.js";
 import { BlockPlugin } from "../plugin/index.js";
+import { useEditable } from "../../../editor-kernel/react/useEditable.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";
@@ -54,7 +55,8 @@ const ReactBlockPlugin = (props) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const [focusedTableBlockId, setFocusedTableBlockId] = useState(null);
 	const [blockMenuService, setBlockMenuService] = useState(null);
-	const blockMenuSuppressed = blockMenuService?.isMenuSuppressed() ?? false;
+	const { editable } = useEditable();
+	const blockMenuSuppressed = (blockMenuService?.isMenuSuppressed() ?? false) || editable === false;
 	useLayoutEffect(() => {
 		if (locale) editor.registerLocale(locale);
 		editor.registerPlugin(BlockPlugin, {

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

@@ -40,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;

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/package.json

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