@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,148 @@
+import { assert, init_utils } from "../../../editor-kernel/utils.js";
+import { $isTableCellNode, $isTableSelection } from "@lexical/table";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
+//#region src/plugins/table/utils/index.ts
+init_utils();
+const EMPTY_TABLE_SELECTION_INDEXES = {
+	selectedColumns: [],
+	selectedRows: []
+};
+function createDefaultTableColWidths(columnCount, tableWidth = 750) {
+	const safeColumnCount = Math.max(1, columnCount);
+	const columnWidth = Math.floor(tableWidth / safeColumnCount);
+	const colWidths = Array.from({ length: safeColumnCount }, () => columnWidth);
+	colWidths[safeColumnCount - 1] = tableWidth - columnWidth * (safeColumnCount - 1);
+	return colWidths;
+}
+function syncTableWidthDOM(editor, tableKey, colWidths) {
+	const tableElement = editor.getElementByKey(tableKey);
+	const table = tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+	if (!(table instanceof HTMLTableElement)) return;
+	table.style.width = `${colWidths.reduce((total, width) => total + width, 0)}px`;
+}
+const range = (from, to) => {
+	return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+};
+function getSelectedTableColumnIndexes(selection, tableKey, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return [];
+	const shape = selection.getShape();
+	return shape.fromY === 0 && shape.toY === rowCount - 1 ? range(shape.fromX, shape.toX) : [];
+}
+function getSelectedTableRowIndexes(selection, tableKey, columnCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return [];
+	const shape = selection.getShape();
+	return shape.fromX === 0 && shape.toX === columnCount - 1 ? range(shape.fromY, shape.toY) : [];
+}
+function isTableFullySelected(selection, tableKey, columnCount, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return false;
+	const shape = selection.getShape();
+	return shape.fromX === 0 && shape.toX === columnCount - 1 && shape.fromY === 0 && shape.toY === rowCount - 1;
+}
+function getTableSelectionIndexes(selection, tableKey, columnCount, rowCount) {
+	if (!$isTableSelection(selection) || selection.tableKey !== tableKey) return EMPTY_TABLE_SELECTION_INDEXES;
+	return {
+		selectedColumns: getSelectedTableColumnIndexes(selection, tableKey, rowCount),
+		selectedRows: getSelectedTableRowIndexes(selection, tableKey, columnCount)
+	};
+}
+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 getTableSelectionOutlineRect(selectedCells, table, selection) {
+	const outlineElements = [...selectedCells];
+	if (outlineElements.length === 0) return null;
+	const shape = selection.getShape();
+	const tableElement = outlineElements[0].closest("table.editor_table, table");
+	const scrollWrapper = tableElement?.closest(".lobe-editor-table-scroll-wrapper");
+	const tableRoot = scrollWrapper?.parentElement ?? tableElement?.parentElement;
+	const isColumnSelection = shape.fromY === 0 && shape.toY === table.rows - 1;
+	const isRowSelection = shape.fromX === 0 && shape.toX === table.columns - 1;
+	const selectedRowControllers = [];
+	if (isColumnSelection && isRowSelection) return null;
+	if (isColumnSelection) {
+		const columnControllers = scrollWrapper?.querySelectorAll(".table-controller-col .col");
+		for (let index = shape.fromX; index <= shape.toX; index++) {
+			const element = columnControllers?.[index];
+			if (element) outlineElements.push(element);
+		}
+	}
+	if (isRowSelection) {
+		const rowControllers = tableRoot?.querySelectorAll(".table-controller-row .row");
+		for (let index = shape.fromY; index <= shape.toY; index++) {
+			const element = rowControllers?.[index];
+			if (element) {
+				selectedRowControllers.push(element);
+				outlineElements.push(element);
+			}
+		}
+	}
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const element of outlineElements) {
+		if (!element.isConnected) continue;
+		const rect = element.getBoundingClientRect();
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+	}
+	if (isRowSelection && scrollWrapper) {
+		const scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+		const tableRect = tableElement?.getBoundingClientRect();
+		const rowControllerLeft = selectedRowControllers.reduce((currentLeft, element) => Math.min(currentLeft, element.getBoundingClientRect().left), Number.POSITIVE_INFINITY);
+		left = rowControllerLeft === Number.POSITIVE_INFINITY ? scrollWrapperRect.left : rowControllerLeft;
+		right = Math.min(tableRect?.right ?? scrollWrapperRect.right, scrollWrapperRect.right);
+	}
+	if (left === Number.POSITIVE_INFINITY || top === Number.POSITIVE_INFINITY || right === Number.NEGATIVE_INFINITY || bottom === Number.NEGATIVE_INFINITY) return null;
+	return {
+		height: bottom - top,
+		left,
+		top,
+		width: right - left
+	};
+}
+function $updateDOMForSelection(editor, table, selection) {
+	const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
+	const selectedCells = /* @__PURE__ */ new Set();
+	$forEachTableCell(table, (cell, lexicalNode) => {
+		const elem = cell.elem;
+		if (selectedCellNodes.has(lexicalNode)) {
+			cell.highlighted = true;
+			selectedCells.add(elem);
+			$addHighlightToDOM(editor, cell);
+		} else {
+			cell.highlighted = false;
+			$removeHighlightFromDOM(editor, cell);
+			if (!elem.getAttribute("style")) elem.removeAttribute("style");
+		}
+	});
+	return $isTableSelection(selection) ? getTableSelectionOutlineRect([...selectedCells], table, selection) : null;
+}
+//#endregion
+export { $updateDOMForSelection, createDefaultTableColWidths, getTableSelectionIndexes, isTableFullySelected, syncTableWidthDOM };

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 };

package/es/plugins/toolbar/utils/getDOMRangeRect.js

@@ -0,0 +1,20 @@
+//#region src/plugins/toolbar/utils/getDOMRangeRect.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+function getDOMRangeRect(nativeSelection, rootElement) {
+	const domRange = nativeSelection.getRangeAt(0);
+	let rect;
+	if (nativeSelection.anchorNode === rootElement) {
+		let inner = rootElement;
+		while (inner.firstElementChild !== null) inner = inner.firstElementChild;
+		rect = inner.getBoundingClientRect();
+	} else rect = domRange.getBoundingClientRect();
+	return rect;
+}
+//#endregion
+export { getDOMRangeRect };

package/es/plugins/toolbar/utils/setFloatingElemPosition.js

@@ -0,0 +1,50 @@
+//#region src/plugins/toolbar/utils/setFloatingElemPosition.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const VERTICAL_GAP = 4;
+const HORIZONTAL_OFFSET = 0;
+function getScrollParent(element) {
+	let parent = element.parentElement;
+	while (parent) {
+		const { overflow, overflowY, overflowX } = window.getComputedStyle(parent);
+		if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+function setFloatingElemPosition(targetRect, floatingElem, anchorElem, isLink = false, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+	const scrollerElem = getScrollParent(anchorElem);
+	if (targetRect === null || !scrollerElem) {
+		floatingElem.style.opacity = "0";
+		floatingElem.style.transform = "translate(-10000px, -10000px)";
+		return;
+	}
+	const floatingElemRect = floatingElem.getBoundingClientRect();
+	const anchorElementRect = anchorElem.getBoundingClientRect();
+	const editorScrollerRect = scrollerElem.getBoundingClientRect();
+	let top = targetRect.top - floatingElemRect.height - verticalGap;
+	let left = targetRect.left - horizontalOffset;
+	const selection = window.getSelection();
+	if (selection && selection.rangeCount > 0) {
+		const textNode = selection.getRangeAt(0).startContainer;
+		if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+			const textElement = textNode.nodeType === Node.ELEMENT_NODE ? textNode : textNode.parentElement;
+			const textAlign = window.getComputedStyle(textElement).textAlign;
+			if (textAlign === "right" || textAlign === "end") left = targetRect.right - floatingElemRect.width + horizontalOffset;
+		}
+	}
+	if (top < editorScrollerRect.top) top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2);
+	if (left + floatingElemRect.width > editorScrollerRect.right) left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+	if (left < editorScrollerRect.left) left = editorScrollerRect.left + horizontalOffset;
+	top -= anchorElementRect.top + 12;
+	left -= anchorElementRect.left;
+	floatingElem.style.opacity = "1";
+	floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+//#endregion
+export { setFloatingElemPosition };

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

@@ -0,0 +1,2 @@
+import { UploadPlugin, UploadPluginOptions } from "./plugin/index.js";
+import { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM } from "./service/i-upload-service.js";

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

@@ -0,0 +1,6 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/upload/plugin/index.d.ts
+interface UploadPluginOptions {}
+declare const UploadPlugin: IEditorPluginConstructor<UploadPluginOptions>;
+//#endregion
+export { UploadPlugin, UploadPluginOptions };

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

@@ -0,0 +1,47 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { IUploadService, UploadService } from "../service/i-upload-service.js";
+import { getDragSelection } from "../utils/index.js";
+import { COMMAND_PRIORITY_HIGH, DROP_COMMAND } from "lexical";
+import { DRAG_DROP_PASTE } from "@lexical/rich-text";
+//#region src/plugins/upload/plugin/index.ts
+init_plugin();
+init_debug();
+const UploadPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "UploadPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "upload");
+		kernel.registerService(IUploadService, new UploadService());
+	}
+	onInit(editor) {
+		this.register(editor.registerCommand(DROP_COMMAND, (event) => {
+			const dataTransfer = event.dataTransfer;
+			if (dataTransfer && dataTransfer.files.length > 0) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				const file = dataTransfer.files[0];
+				const uploadService = this.kernel.requireService(IUploadService);
+				if (uploadService) uploadService.uploadFile(file, "drop", getDragSelection(event)).catch((error) => {
+					this.logger.error("Upload failed:", error);
+				});
+			}
+			return true;
+		}, COMMAND_PRIORITY_HIGH));
+		this.register(editor.registerCommand(DRAG_DROP_PASTE, (files) => {
+			for (const file of files) {
+				const uploadService = this.kernel.requireService(IUploadService);
+				if (uploadService) uploadService.uploadFile(file, "drag-drop-paste", null).catch((error) => {
+					this.logger.error("Upload failed:", error);
+				});
+			}
+			return true;
+		}, COMMAND_PRIORITY_HIGH));
+	}
+};
+//#endregion
+export { UploadPlugin };

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

@@ -0,0 +1,13 @@
+import { IServiceID } from "../../../types/kernel.js";
+//#region src/plugins/upload/service/i-upload-service.d.ts
+declare const UPLOAD_PRIORITY_LOW = 2;
+declare const UPLOAD_PRIORITY_MEDIUM = 1;
+declare const UPLOAD_PRIORITY_HIGH = 0;
+type UPLOAD_PRIORITY = typeof UPLOAD_PRIORITY_LOW | typeof UPLOAD_PRIORITY_MEDIUM | typeof UPLOAD_PRIORITY_HIGH;
+interface IUploadService {
+  registerUpload(handler: (file: File, from: string, range: Range | null | undefined) => Promise<boolean | null>, priority?: UPLOAD_PRIORITY): void;
+  uploadFile(file: File, from: string, range: Range | null | undefined): Promise<boolean>;
+}
+declare const IUploadService: IServiceID<IUploadService>;
+//#endregion
+export { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM };

package/es/plugins/upload/service/i-upload-service.js

@@ -0,0 +1,30 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+//#region src/plugins/upload/service/i-upload-service.ts
+const UPLOAD_PRIORITY_LOW = 2;
+const UPLOAD_PRIORITY_MEDIUM = 1;
+const UPLOAD_PRIORITY_HIGH = 0;
+const IUploadService = genServiceId("UploadService");
+var UploadService = class {
+	constructor() {
+		this.uploadHandlers = [
+			[],
+			[],
+			[]
+		];
+	}
+	registerUpload(handler, priority = 2) {
+		this.uploadHandlers[priority].push(handler);
+	}
+	async uploadFile(file, from, range) {
+		for (const uploadHandlers of this.uploadHandlers) {
+			if (uploadHandlers.length === 0) continue;
+			for (const handler of uploadHandlers) {
+				const result = await handler(file, from, range);
+				if (result) return result;
+			}
+		}
+		throw new Error("No upload handler registered for this file type: " + file.type);
+	}
+};
+//#endregion
+export { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadService };

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

@@ -0,0 +1,15 @@
+import { getDOMSelectionFromTarget } from "lexical";
+//#region src/plugins/upload/utils/index.ts
+function getDragSelection(event) {
+	if (typeof document === "undefined") return null;
+	let range;
+	const domSelection = getDOMSelectionFromTarget(event.target);
+	if (document.caretRangeFromPoint) range = document.caretRangeFromPoint(event.clientX, event.clientY);
+	else if (event.rangeParent && domSelection !== null) {
+		domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+		range = domSelection.getRangeAt(0);
+	} else throw new Error(`Cannot get the selection when dragging`);
+	return range;
+}
+//#endregion
+export { getDragSelection };

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

@@ -0,0 +1,2 @@
+import { VirtualBlockPlugin, VirtualBlockPluginOptions } from "./plugin/index.js";
+import { ReactVirtualBlockPlugin } from "./react/ReactVirtualBlock.js";

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

@@ -0,0 +1,8 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/virtual-block/plugin/index.d.ts
+interface VirtualBlockPluginOptions {
+  theme?: string;
+}
+declare const VirtualBlockPlugin: IEditorPluginConstructor<VirtualBlockPluginOptions>;
+//#endregion
+export { VirtualBlockPlugin, VirtualBlockPluginOptions };

package/es/plugins/virtual-block/plugin/index.js

@@ -0,0 +1,19 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { registerRichKeydown } from "./register.js";
+//#region src/plugins/virtual-block/plugin/index.ts
+init_plugin();
+const VirtualBlockPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "VirtualBlockPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		kernel.registerThemes({ virtualBlock: config?.theme || "" });
+	}
+	onInit(editor) {
+		this.register(registerRichKeydown(editor, this.kernel));
+	}
+};
+//#endregion
+export { VirtualBlockPlugin };