@lobehub/editor 4.15.0 → 4.15.2

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

@@ -0,0 +1,253 @@
+import { styles } from "./style.js";
+import { getCellColumnIndex, getCellNodeHeight } from "./utils.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from "@lexical/table";
+import { $getNearestNodeFromDOMNode, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from "lexical";
+import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableResize/index.tsx
+const TableCellResize = memo(({ editor, eventEmitter }) => {
+	const targetRef = useRef(null);
+	const resizerRef = useRef(null);
+	const tableRectRef = useRef(null);
+	const [hasTable, setHasTable] = useState(false);
+	const pointerStartPosRef = useRef(null);
+	const [pointerCurrentPos, updatePointerCurrentPos] = useState(null);
+	const [activeCell, updateActiveCell] = useState(null);
+	const [draggingDirection, updateDraggingDirection] = useState(null);
+	const resetState = useCallback(() => {
+		updateActiveCell(null);
+		targetRef.current = null;
+		updateDraggingDirection(null);
+		pointerStartPosRef.current = null;
+		tableRectRef.current = null;
+	}, []);
+	useEffect(() => {
+		const tableKeys = /* @__PURE__ */ new Set();
+		return mergeRegister(editor.registerMutationListener(TableNode, (nodeMutations) => {
+			for (const [nodeKey, mutation] of nodeMutations) if (mutation === "destroyed") tableKeys.delete(nodeKey);
+			else tableKeys.add(nodeKey);
+			setHasTable(tableKeys.size > 0);
+		}), editor.registerNodeTransform(TableNode, (tableNode) => {
+			if (tableNode.getColWidths()) return tableNode;
+			const numColumns = tableNode.getColumnCount();
+			tableNode.setColWidths(new Array(numColumns).fill(92));
+			return tableNode;
+		}));
+	}, [editor]);
+	useEffect(() => {
+		if (!hasTable) return;
+		const onPointerMove = (event) => {
+			const target = event.target;
+			if (!isHTMLElement(target)) return;
+			if (draggingDirection) {
+				event.preventDefault();
+				event.stopPropagation();
+				updatePointerCurrentPos({
+					x: event.clientX,
+					y: event.clientY
+				});
+				return;
+			}
+			if (resizerRef.current && resizerRef.current.contains(target)) return;
+			if (targetRef.current !== target) {
+				targetRef.current = target;
+				const cell = getDOMCellFromTarget(target);
+				if (cell && activeCell !== cell) editor.getEditorState().read(() => {
+					const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+					if (!tableCellNode) throw new Error("TableCellResizer: Table cell node not found.");
+					const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+					const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+					if (!tableElement) throw new Error("TableCellResizer: Table element not found.");
+					targetRef.current = target;
+					tableRectRef.current = tableElement.getBoundingClientRect();
+					updateActiveCell(cell);
+				}, { editor });
+				else if (!cell) resetState();
+			}
+		};
+		const onPointerDown = (event) => {
+			if (event.pointerType === "touch") onPointerMove(event);
+		};
+		const resizerContainer = resizerRef.current;
+		resizerContainer?.addEventListener("pointermove", onPointerMove, { capture: true });
+		const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("pointermove", onPointerMove);
+			prevRootElement?.removeEventListener("pointerdown", onPointerDown);
+			rootElement?.addEventListener("pointermove", onPointerMove);
+			rootElement?.addEventListener("pointerdown", onPointerDown);
+		});
+		return () => {
+			removeRootListener();
+			resizerContainer?.removeEventListener("pointermove", onPointerMove);
+		};
+	}, [
+		activeCell,
+		draggingDirection,
+		editor,
+		resetState,
+		hasTable
+	]);
+	const isHeightChanging = (direction) => {
+		if (direction === "bottom") return true;
+		return false;
+	};
+	const updateRowHeight = useCallback((heightChange) => {
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		editor.update(() => {
+			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			const baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+			const tableRows = tableNode.getChildren();
+			const tableRowIndex = tableCellNode.getColSpan() === tableNode.getColumnCount() ? baseRowIndex : baseRowIndex + tableCellNode.getRowSpan() - 1;
+			if (tableRowIndex >= tableRows.length || tableRowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
+			const tableRow = tableRows[tableRowIndex];
+			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
+			let height = tableRow.getHeight();
+			if (height === void 0) {
+				const rowCells = tableRow.getChildren();
+				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
+			}
+			const newHeight = Math.max(height + heightChange, 33);
+			tableRow.setHeight(newHeight);
+			eventEmitter.emit("table:resize", {
+				heightChange,
+				newHeight
+			});
+		}, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
+	}, [activeCell, editor]);
+	const updateColumnWidth = useCallback((widthChange) => {
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		editor.update(() => {
+			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+			const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+			if (columnIndex === void 0) throw new Error("TableCellResizer: Table column not found.");
+			const colWidths = tableNode.getColWidths();
+			if (!colWidths) return;
+			const width = colWidths[columnIndex];
+			if (width === void 0) return;
+			const newColWidths = [...colWidths];
+			newColWidths[columnIndex] = Math.max(width + widthChange, 92);
+			tableNode.setColWidths(newColWidths);
+			requestAnimationFrame(() => {
+				eventEmitter.emit("table:resize", { newColWidths });
+			});
+		}, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
+	}, [activeCell, editor]);
+	const pointerUpHandler = useCallback((direction) => {
+		const handler = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+			if (pointerStartPosRef.current) {
+				const { x, y } = pointerStartPosRef.current;
+				if (activeCell === null) return;
+				const zoom = calculateZoomLevel(event.target);
+				if (isHeightChanging(direction)) updateRowHeight((event.clientY - y) / zoom);
+				else updateColumnWidth((event.clientX - x) / zoom);
+				resetState();
+				if (typeof document !== "undefined") document.removeEventListener("pointerup", handler);
+			}
+		};
+		return handler;
+	}, [
+		activeCell,
+		resetState,
+		updateColumnWidth,
+		updateRowHeight
+	]);
+	const toggleResize = useCallback((direction) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		pointerStartPosRef.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		updatePointerCurrentPos(pointerStartPosRef.current);
+		updateDraggingDirection(direction);
+		if (typeof document !== "undefined") document.addEventListener("pointerup", pointerUpHandler(direction));
+	}, [activeCell, pointerUpHandler]);
+	const resizerStyles = useCallback(() => {
+		if (activeCell) {
+			const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
+			const zoom = calculateZoomLevel(activeCell.elem);
+			const zoneWidth = 16;
+			const scrollX = typeof window !== "undefined" ? window.scrollX : 0;
+			const scrollY = typeof window !== "undefined" ? window.scrollY : 0;
+			const styles = {
+				bottom: {
+					backgroundColor: "none",
+					cursor: "row-resize",
+					height: `${zoneWidth}px`,
+					left: `${scrollX + left}px`,
+					top: `${scrollY + top + height - zoneWidth / 2}px`,
+					width: `${width}px`
+				},
+				right: {
+					backgroundColor: "none",
+					cursor: "col-resize",
+					height: `${height}px`,
+					left: `${scrollX + left + width - zoneWidth / 2}px`,
+					top: `${scrollY + top}px`,
+					width: `${zoneWidth}px`
+				}
+			};
+			const tableRect = tableRectRef.current;
+			if (draggingDirection && pointerCurrentPos && tableRect) {
+				if (isHeightChanging(draggingDirection)) {
+					styles[draggingDirection].left = `${scrollX + tableRect.left}px`;
+					styles[draggingDirection].top = `${scrollY + pointerCurrentPos.y / zoom}px`;
+					styles[draggingDirection].height = "3px";
+					styles[draggingDirection].width = `${tableRect.width}px`;
+				} else {
+					styles[draggingDirection].top = `${scrollY + tableRect.top}px`;
+					styles[draggingDirection].left = `${scrollX + pointerCurrentPos.x / zoom}px`;
+					styles[draggingDirection].width = "3px";
+					styles[draggingDirection].height = `${tableRect.height}px`;
+				}
+				styles[draggingDirection].backgroundColor = cssVar.colorPrimary;
+				styles[draggingDirection].mixBlendMode = "unset";
+			}
+			return styles;
+		}
+		return {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		};
+	}, [
+		activeCell,
+		draggingDirection,
+		pointerCurrentPos
+	])();
+	return /* @__PURE__ */ jsx("div", {
+		ref: resizerRef,
+		children: activeCell && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: cx(styles, "TableCellResizer__resizer", "TableCellResizer__ui"),
+			onPointerDown: toggleResize("right"),
+			style: resizerStyles.right || void 0
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles, "TableCellResizer__resizer", "TableCellResizer__ui"),
+			onPointerDown: toggleResize("bottom"),
+			style: resizerStyles.bottom || void 0
+		})] })
+	});
+});
+var TableResize_default = memo(({ editor, eventEmitter }) => {
+	if (typeof document === "undefined") return null;
+	const container = document.querySelector(".ant-app") || document.body;
+	return createPortal(/* @__PURE__ */ jsx(TableCellResize, {
+		editor,
+		eventEmitter
+	}), container);
+});
+//#endregion
+export { TableResize_default as default };

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

@@ -0,0 +1,16 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableResize/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return css`
+    touch-action: none;
+    position: absolute;
+    z-index: 1;
+
+    @media (pointer: coarse) {
+      background-color: ${cssVar.colorPrimary};
+      mix-blend-mode: color;
+    }
+  `;
+});
+//#endregion
+export { styles };

package/es/plugins/table/react/TableResize/utils.js

@@ -0,0 +1,9 @@
+//#region src/plugins/table/react/TableResize/utils.ts
+const getCellColumnIndex = (tableCellNode, tableMap) => {
+	for (const element of tableMap) for (const [column, element_] of element.entries()) if (element_.cell === tableCellNode) return column;
+};
+const getCellNodeHeight = (cell, activeEditor) => {
+	return activeEditor.getElementByKey(cell.getKey())?.clientHeight;
+};
+//#endregion
+export { getCellColumnIndex, getCellNodeHeight };

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

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

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

@@ -0,0 +1,49 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { TablePlugin } from "../plugin/index.js";
+import PortalAnchor from "../../../editor-kernel/react/PortalAnchor.js";
+import { $updateDOMForSelection } from "../utils/index.js";
+import TableActionMenu from "./TableActionMenu/index.js";
+import TableHoverActions from "./TableHoverActions/index.js";
+import TableResize_default from "./TableResize/index.js";
+import { styles } from "./style.js";
+import { useLayoutEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $findTableNode, $getElementForTableNode, $isTableSelection } from "@lexical/table";
+import EventEmitter from "eventemitter3";
+import { $getSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/table/react/index.tsx
+const ReactTablePlugin = ({ className, locale }) => {
+	const [editor] = useLexicalComposerContext();
+	const [lexicalEditor, setLexicalEditor] = useState(null);
+	const eventEmitter = useMemo(() => {
+		return new EventEmitter();
+	}, []);
+	useLayoutEffect(() => {
+		if (locale) editor.registerLocale(locale);
+		editor.registerPlugin(TablePlugin, { theme: cx(styles, className) });
+	}, []);
+	useLexicalEditor((editor) => {
+		setLexicalEditor(editor);
+		editor.registerUpdateListener(() => {
+			editor.read(() => {
+				const selection = $getSelection();
+				if (!$isTableSelection(selection) && !$isRangeSelection(selection)) return null;
+				const tableNode = $findTableNode(selection.anchor.getNode());
+				if (!tableNode) return null;
+				$updateDOMForSelection(editor, $getElementForTableNode(editor, tableNode), selection);
+			});
+		});
+		return () => {
+			setLexicalEditor(null);
+		};
+	}, []);
+	return lexicalEditor && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableResize_default, {
+		editor: lexicalEditor,
+		eventEmitter
+	}), /* @__PURE__ */ jsxs(PortalAnchor, { children: [/* @__PURE__ */ jsx(TableActionMenu, { editor: lexicalEditor }), /* @__PURE__ */ jsx(TableHoverActions, { editor: lexicalEditor })] })] });
+};
+//#endregion
+export { ReactTablePlugin };

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

@@ -0,0 +1,63 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => css`
+    overflow-x: auto;
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em)
+      calc(var(--lobe-markdown-margin-multiple) * 0.5em + 16px);
+
+    .editor_table {
+      table-layout: fixed;
+      border-spacing: 0;
+      border-collapse: collapse;
+
+      width: fit-content;
+
+      text-align: start;
+      text-indent: initial;
+      text-wrap: pretty;
+      word-break: auto-phrase;
+      overflow-wrap: break-word;
+
+      background: ${cssVar.colorFillQuaternary};
+
+      > tr:first-of-type {
+        background: ${cssVar.colorFillQuaternary};
+
+        .editor_table_cell_header {
+          font-weight: bold;
+        }
+      }
+    }
+
+    code {
+      word-break: break-word;
+    }
+
+    .editor_table_cell_header {
+      font-weight: normal;
+    }
+
+    .editor_table_cell {
+      position: relative;
+
+      overflow: auto;
+
+      width: 75px;
+      padding-block: 6px;
+      padding-inline: 8px;
+      border: 1px solid ${cssVar.colorFillSecondary};
+
+      text-align: start;
+      vertical-align: top;
+
+      outline: none;
+    }
+
+    .editor_table_cell_selected {
+      color: #000;
+      background-color: ${cssVar.yellow};
+      caret-color: transparent;
+    }
+  `);
+//#endregion
+export { styles };

package/es/plugins/table/react/type.d.ts

@@ -0,0 +1,8 @@
+import { ILocaleKeys } from "../../../types/locale.js";
+//#region src/plugins/table/react/type.d.ts
+interface ReactTablePluginProps {
+  className?: string;
+  locale?: Partial<Record<keyof ILocaleKeys, string>>;
+}
+//#endregion
+export { ReactTablePluginProps };

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

@@ -0,0 +1,48 @@
+import { assert, init_utils } from "../../../editor-kernel/utils.js";
+import { $isTableCellNode } from "@lexical/table";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
+//#region src/plugins/table/utils/index.ts
+init_utils();
+function $forEachTableCell(grid, cb) {
+	const { domRows } = grid;
+	for (const [y, row] of domRows.entries()) {
+		if (!row) continue;
+		for (const [x, cell] of row.entries()) {
+			if (!cell) continue;
+			const lexicalNode = $getNearestNodeFromDOMNode(cell.elem);
+			if (lexicalNode !== null) cb(cell, lexicalNode, {
+				x,
+				y
+			});
+		}
+	}
+}
+function $addHighlightToDOM(editor, cell) {
+	const element = cell.elem;
+	const editorThemeClasses = editor._config.theme;
+	assert($isTableCellNode($getNearestNodeFromDOMNode(element)), "Expected to find LexicalNode from Table Cell DOMNode");
+	addClassNamesToElement(element, editorThemeClasses.tableCellSelected);
+}
+function $removeHighlightFromDOM(editor, cell) {
+	const element = cell.elem;
+	assert($isTableCellNode($getNearestNodeFromDOMNode(element)), "Expected to find LexicalNode from Table Cell DOMNode");
+	const editorThemeClasses = editor._config.theme;
+	removeClassNamesFromElement(element, editorThemeClasses.tableCellSelected);
+}
+function $updateDOMForSelection(editor, table, selection) {
+	const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
+	$forEachTableCell(table, (cell, lexicalNode) => {
+		const elem = cell.elem;
+		if (selectedCellNodes.has(lexicalNode)) {
+			cell.highlighted = true;
+			$addHighlightToDOM(editor, cell);
+		} else {
+			cell.highlighted = false;
+			$removeHighlightFromDOM(editor, cell);
+			if (!elem.getAttribute("style")) elem.removeAttribute("style");
+		}
+	});
+}
+//#endregion
+export { $updateDOMForSelection };

package/es/plugins/toolbar/command/index.d.ts

@@ -0,0 +1,12 @@
+import { LexicalCommand, LexicalEditor } from "lexical";
+
+//#region src/plugins/toolbar/command/index.d.ts
+declare const HIDE_TOOLBAR_COMMAND: LexicalCommand<void>;
+declare const SHOW_TOOLBAR_COMMAND: LexicalCommand<void>;
+interface ToolbarCommandOptions {
+  onHide?: () => void;
+  onShow?: () => void;
+}
+declare function registerToolbarCommand(editor: LexicalEditor, options?: ToolbarCommandOptions): () => void;
+//#endregion
+export { HIDE_TOOLBAR_COMMAND, SHOW_TOOLBAR_COMMAND, ToolbarCommandOptions, registerToolbarCommand };

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

@@ -0,0 +1,17 @@
+import { COMMAND_PRIORITY_LOW, createCommand } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/toolbar/command/index.ts
+const HIDE_TOOLBAR_COMMAND = createCommand();
+const SHOW_TOOLBAR_COMMAND = createCommand();
+function registerToolbarCommand(editor, options) {
+	const { onHide, onShow } = options || {};
+	return mergeRegister(editor.registerCommand(HIDE_TOOLBAR_COMMAND, () => {
+		onHide?.();
+		return true;
+	}, COMMAND_PRIORITY_LOW), editor.registerCommand(SHOW_TOOLBAR_COMMAND, () => {
+		onShow?.();
+		return true;
+	}, COMMAND_PRIORITY_LOW));
+}
+//#endregion
+export { HIDE_TOOLBAR_COMMAND, SHOW_TOOLBAR_COMMAND, registerToolbarCommand };

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

@@ -0,0 +1,2 @@
+import { HIDE_TOOLBAR_COMMAND, SHOW_TOOLBAR_COMMAND, ToolbarCommandOptions, registerToolbarCommand } from "./command/index.js";
+import { ReactToolbarPlugin } from "./react/index.js";

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

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

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

@@ -0,0 +1,109 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { ILinkService } from "../../link/service/i-link-service.js";
+import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command/index.js";
+import { getDOMRangeRect } from "../utils/getDOMRangeRect.js";
+import { setFloatingElemPosition } from "../utils/setFloatingElemPosition.js";
+import { styles } from "./style.js";
+import { Block } from "@lobehub/ui";
+import { useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/toolbar/react/index.tsx
+init_debug();
+const ReactToolbarPlugin = ({ className, children }) => {
+	const popupCharStylesEditorRef = useRef(null);
+	const anchorElemRef = useRef(null);
+	const [kernelEditor] = useLexicalComposerContext();
+	const { isDarkMode } = useThemeMode();
+	const isMouseDownRef = useRef(false);
+	const logger = createDebugLogger("plugin", "toolbar");
+	const $updateTextFormatFloatingToolbar = useCallback((editor) => {
+		if (!anchorElemRef.current) return;
+		const selection = $getSelection();
+		const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+		const nativeSelection = getDOMSelection(editor._window);
+		if (popupCharStylesEditorElem === null) return;
+		const rootElement = editor.getRootElement();
+		if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+			const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+			logger.debug("🔍 rangeRect", rangeRect);
+			setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElemRef.current, false);
+		} else {
+			popupCharStylesEditorElem.style.opacity = "0";
+			popupCharStylesEditorElem.style.transform = "translate(-10000px, -10000px)";
+		}
+	}, [anchorElemRef]);
+	const $hideFloatingToolbar = useCallback(() => {
+		if (!anchorElemRef.current) return;
+		const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+		if (popupCharStylesEditorElem === null) return;
+		popupCharStylesEditorElem.style.opacity = "0";
+		popupCharStylesEditorElem.style.transform = "translate(-10000px, -10000px)";
+	}, [anchorElemRef]);
+	const handleMouseDownFactory = useCallback((updateToolbar) => (e) => {
+		if (e.button === 0) {
+			isMouseDownRef.current = true;
+			updateToolbar();
+		}
+	}, []);
+	const handleMouseUpFactory = useCallback((updateToolbar) => (e) => {
+		if (e.button === 0) {
+			isMouseDownRef.current = false;
+			updateToolbar();
+		}
+	}, []);
+	useLexicalEditor(() => {
+		const service = kernelEditor.requireService(ILinkService);
+		if (service) {
+			service.setLinkToolbar(false);
+			return () => {
+				service.setLinkToolbar(true);
+			};
+		}
+	}, []);
+	useLexicalEditor((editor) => {
+		const handleMouseDown = handleMouseDownFactory(() => {
+			editor.dispatchCommand(HIDE_TOOLBAR_COMMAND, void 0);
+		});
+		const handleMouseUp = handleMouseUpFactory(() => {
+			editor.update(() => {
+				$updateTextFormatFloatingToolbar(editor);
+			});
+		});
+		const rootElement = editor.getRootElement();
+		if (rootElement) {
+			rootElement.addEventListener("mousedown", handleMouseDown);
+			document.addEventListener("mouseup", handleMouseUp);
+		}
+		return mergeRegister(registerToolbarCommand(editor, { onHide: $hideFloatingToolbar }), editor.registerUpdateListener(({ editorState }) => {
+			if (!isMouseDownRef.current) editorState.read(() => {
+				$updateTextFormatFloatingToolbar(editor);
+			});
+		}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+			if (!isMouseDownRef.current) $updateTextFormatFloatingToolbar(editor);
+			return false;
+		}, COMMAND_PRIORITY_LOW), () => {
+			if (rootElement) {
+				rootElement.removeEventListener("mousedown", handleMouseDown);
+				document.removeEventListener("mouseup", handleMouseUp);
+			}
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.anchor,
+		ref: anchorElemRef,
+		children: /* @__PURE__ */ jsx(Block, {
+			className: cx(isDarkMode ? styles.toolbarDark : styles.toolbarLight, className),
+			padding: 4,
+			ref: popupCharStylesEditorRef,
+			variant: "outlined",
+			children
+		})
+	});
+};
+//#endregion
+export { ReactToolbarPlugin };

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

@@ -0,0 +1,55 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/toolbar/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	anchor: css`
+    position: relative;
+  `,
+	toolbarDark: css`
+    will-change: transform;
+
+    position: absolute;
+    z-index: 10;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transform: translate(-10000px, -10000px);
+
+    display: flex;
+
+    border-color: ${cssVar.colorFillSecondary};
+
+    vertical-align: middle;
+
+    opacity: 0;
+    background: ${cssVar.colorBgElevated};
+    box-shadow:
+      0 14px 28px -6px color-mix(in srgb, #000 18.75%, transparent),
+      0 2px 4px -1px color-mix(in srgb, #000 12.19%, transparent);
+
+    transition: opacity 0.12s ${cssVar.motionEaseOut};
+  `,
+	toolbarLight: css`
+    will-change: transform;
+
+    position: absolute;
+    z-index: 10;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transform: translate(-10000px, -10000px);
+
+    display: flex;
+
+    border-color: ${cssVar.colorFillSecondary};
+
+    vertical-align: middle;
+
+    opacity: 0;
+    background: ${cssVar.colorBgElevated};
+    box-shadow:
+      0 14px 28px -6px color-mix(in srgb, #000 10.2%, transparent),
+      0 2px 4px -1px color-mix(in srgb, #000 5.88%, transparent);
+
+    transition: opacity 0.12s ${cssVar.motionEaseOut};
+  `
+}));
+//#endregion
+export { styles };

package/es/plugins/toolbar/react/type.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+//#region src/plugins/toolbar/react/type.d.ts
+interface ReactToolbarPluginProps {
+  children?: ReactNode;
+  className?: string;
+}
+//#endregion
+export { ReactToolbarPluginProps };