@lobehub/editor 4.15.1 → 4.15.2

package/es/plugins/content-blocks/utils/extract.js

@@ -0,0 +1,188 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { MarkdownWriterContext } from "../../markdown/data-source/markdown-writer-context.js";
+import { $getRoot, $isElementNode } from "lexical";
+//#region src/plugins/content-blocks/utils/extract.ts
+init_helper();
+const ATOMIC_TYPES = new Set([
+	"image",
+	"block-image",
+	"file"
+]);
+const SPLITTABLE_CONTAINER_TYPES = new Set([
+	"paragraph",
+	"heading",
+	"quote"
+]);
+const PLACEHOLDERS = {
+	fileError: (name, msg) => msg ? `[file upload failed: ${name}: ${msg}]` : `[file upload failed: ${name}]`,
+	fileLoading: (name) => `[file uploading: ${name}]`,
+	imageError: (msg) => msg ? `[image upload failed: ${msg}]` : "[image upload failed]",
+	imageLoading: "[image uploading...]"
+};
+const isAtomicNode = (node) => ATOMIC_TYPES.has(node.getType());
+const isInlineAtomicNode = (node) => node.getType() === "image";
+const isImageType = (type) => type === "image" || type === "block-image";
+const readImage = (node) => {
+	const src = node.getSrc?.() ?? node.__src ?? "";
+	const alt = node.getAltText?.() ?? node.__altText ?? "";
+	const rawWidth = node.__width;
+	const rawHeight = node.__height;
+	const width = typeof rawWidth === "number" ? rawWidth : 0;
+	return {
+		alt,
+		height: typeof rawHeight === "number" ? rawHeight : 0,
+		message: node.__message ?? null,
+		src,
+		status: node.__status ?? "uploaded",
+		width
+	};
+};
+const readFile = (node) => ({
+	message: node.__message,
+	name: node.__name ?? "unknown",
+	size: node.__size,
+	status: node.__status ?? "pending",
+	url: node.__fileUrl ?? ""
+});
+const buildImageBlock = (node) => {
+	const info = readImage(node);
+	if (info.status !== "uploaded" || !info.src) return null;
+	const block = {
+		alt: info.alt,
+		type: "image",
+		url: info.src
+	};
+	if (info.width > 0) block.width = info.width;
+	if (info.height > 0) block.height = info.height;
+	return block;
+};
+const buildFileBlock = (node) => {
+	const info = readFile(node);
+	if (info.status !== "uploaded" || !info.url) return null;
+	const block = {
+		name: info.name,
+		type: "file",
+		url: info.url
+	};
+	if (typeof info.size === "number") block.size = info.size;
+	return block;
+};
+const placeholderForImage = (node) => {
+	const info = readImage(node);
+	if (info.status === "error") return PLACEHOLDERS.imageError(info.message);
+	return PLACEHOLDERS.imageLoading;
+};
+const placeholderForFile = (node) => {
+	const info = readFile(node);
+	if (info.status === "error") return PLACEHOLDERS.fileError(info.name, info.message);
+	return PLACEHOLDERS.fileLoading(info.name);
+};
+const hasDirectInlineAtomic = (element) => {
+	for (const child of element.getChildren()) if (isInlineAtomicNode(child)) return true;
+	return false;
+};
+const exportTree = (node) => {
+	const json = node.exportJSON();
+	if ($isElementNode(node)) {
+		const elJson = json;
+		elJson.children = node.getChildren().map((child) => exportTree(child));
+	}
+	return json;
+};
+const renderTextBuffer = (editor, service, buffer) => {
+	if (buffer.length === 0) return "";
+	const synRoot = INodeHelper.createRootNode();
+	INodeHelper.appendChild(synRoot, ...buffer);
+	const synState = editor.parseEditorState({ root: synRoot });
+	const ctx = new MarkdownWriterContext(service);
+	return synState.read(() => {
+		synState._nodeMap.get("root").getChildren().forEach((child) => ctx.processChild(ctx, child));
+		return ctx.toString();
+	});
+};
+const pushPlaceholderParagraph = (buffer, text) => {
+	const para = INodeHelper.createParagraph();
+	INodeHelper.appendChild(para, INodeHelper.createTextNode(text));
+	buffer.push(para);
+};
+const cloneElementShell = (element) => {
+	return {
+		...element.exportJSON(),
+		children: []
+	};
+};
+const mergeAdjacentTextBlocks = (blocks) => {
+	const out = [];
+	for (const block of blocks) {
+		const prev = out.at(-1);
+		if (block.type === "text" && prev?.type === "text") prev.text = `${prev.text}\n\n${block.text}`;
+		else out.push(block);
+	}
+	return out;
+};
+const extractContentBlocks = (editor, service, options = {}) => {
+	const emitPlaceholder = options.emitPlaceholderForUnuploaded ?? true;
+	return editor.getEditorState().read(() => {
+		const root = $getRoot();
+		const blocks = [];
+		const textBuffer = [];
+		const flushText = () => {
+			if (textBuffer.length === 0) return;
+			const md = renderTextBuffer(editor, service, textBuffer).trim();
+			textBuffer.length = 0;
+			if (md) blocks.push({
+				text: md,
+				type: "text"
+			});
+		};
+		const emitAtomic = (node) => {
+			if (isImageType(node.getType())) {
+				const block = buildImageBlock(node);
+				if (block) {
+					flushText();
+					blocks.push(block);
+					return;
+				}
+				if (emitPlaceholder) pushPlaceholderParagraph(textBuffer, placeholderForImage(node));
+				return;
+			}
+			const fNode = node;
+			const block = buildFileBlock(fNode);
+			if (block) {
+				flushText();
+				blocks.push(block);
+				return;
+			}
+			if (emitPlaceholder) pushPlaceholderParagraph(textBuffer, placeholderForFile(fNode));
+		};
+		const visitTopLevel = (node) => {
+			if (isAtomicNode(node)) {
+				emitAtomic(node);
+				return;
+			}
+			if (!$isElementNode(node)) {
+				textBuffer.push(exportTree(node));
+				return;
+			}
+			if (!SPLITTABLE_CONTAINER_TYPES.has(node.getType()) || !hasDirectInlineAtomic(node)) {
+				textBuffer.push(exportTree(node));
+				return;
+			}
+			let currentShell = cloneElementShell(node);
+			const commitShell = () => {
+				if (currentShell.children && currentShell.children.length > 0) textBuffer.push(currentShell);
+				currentShell = cloneElementShell(node);
+			};
+			for (const child of node.getChildren()) if (isInlineAtomicNode(child)) {
+				commitShell();
+				emitAtomic(child);
+			} else currentShell.children.push(exportTree(child));
+			commitShell();
+		};
+		root.getChildren().forEach(visitTopLevel);
+		flushText();
+		return mergeAdjacentTextBlocks(blocks);
+	});
+};
+//#endregion
+export { extractContentBlocks };

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

@@ -0,0 +1,9 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/file/command/index.d.ts
+declare const INSERT_FILE_COMMAND: _$lexical.LexicalCommand<{
+  file: File;
+}>;
+//#endregion
+export { INSERT_FILE_COMMAND };

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

@@ -0,0 +1,31 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { $createFileNode } from "../node/FileNode.js";
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_HIGH, createCommand } from "lexical";
+import { $wrapNodeInElement } from "@lexical/utils";
+//#region src/plugins/file/command/index.ts
+init_debug();
+const logger = createDebugLogger("plugin", "file");
+const INSERT_FILE_COMMAND = createCommand("INSERT_FILE_COMMAND");
+function registerFileCommand(editor, handleUpload) {
+	return editor.registerCommand(INSERT_FILE_COMMAND, (payload) => {
+		const { file } = payload;
+		editor.update(() => {
+			const fileNode = $createFileNode(file.name);
+			$insertNodes([fileNode]);
+			if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
+			handleUpload(file).then((url) => {
+				editor.update(() => {
+					fileNode.setUploaded(url.url);
+				});
+			}).catch((error) => {
+				logger.error("❌ File upload failed:", error);
+				editor.update(() => {
+					fileNode.setError("File upload failed : " + error.message);
+				});
+			});
+		});
+		return false;
+	}, COMMAND_PRIORITY_HIGH);
+}
+//#endregion
+export { INSERT_FILE_COMMAND, registerFileCommand };

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

@@ -0,0 +1,4 @@
+import { INSERT_FILE_COMMAND } from "./command/index.js";
+import { FilePlugin, FilePluginOptions } from "./plugin/index.js";
+import { ReactFilePluginProps } from "./react/type.js";
+import { ReactFilePlugin } from "./react/ReactFilePlugin.js";

package/es/plugins/file/node/FileNode.d.ts

@@ -0,0 +1,38 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, SerializedLexicalNode, Spread } from "lexical";
+
+//#region src/plugins/file/node/FileNode.d.ts
+type SerializedFileNode = Spread<{
+  fileUrl?: string;
+  message?: string;
+  name: string;
+  size?: number;
+  status?: 'pending' | 'uploaded' | 'error';
+}, SerializedLexicalNode>;
+declare class FileNode extends DecoratorNode<any> {
+  static getType(): string;
+  static clone(node: FileNode): FileNode;
+  static importJSON(serializedNode: SerializedFileNode): FileNode;
+  static importDOM(): DOMConversionMap | null;
+  __name: string;
+  __fileUrl: string | undefined;
+  __size: number | undefined;
+  __status: 'pending' | 'uploaded' | 'error';
+  __message?: string;
+  get name(): string;
+  get fileUrl(): string | undefined;
+  get size(): number | undefined;
+  get status(): 'pending' | 'uploaded' | 'error';
+  get message(): string | undefined;
+  constructor(name: string, fileUrl?: string, size?: number, status?: 'pending' | 'uploaded' | 'error', message?: string, key?: string);
+  setUploaded(url: string): void;
+  setError(message: string): void;
+  exportDOM(): DOMExportOutput;
+  createDOM(config: EditorConfig): HTMLElement;
+  exportJSON(): SerializedFileNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedFileNode>): this;
+  getTextContent(): string;
+  updateDOM(): boolean;
+  decorate(editor: LexicalEditor): any;
+}
+//#endregion
+export { FileNode };

package/es/plugins/file/node/FileNode.js

@@ -0,0 +1,106 @@
+import { getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { $applyNodeReplacement, DecoratorNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/file/node/FileNode.ts
+init_utils();
+var FileNode = class FileNode extends DecoratorNode {
+	static getType() {
+		return "file";
+	}
+	static clone(node) {
+		return new FileNode(node.__name, node.__fileUrl, node.__size, node.__status, node.__message, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return new FileNode(serializedNode.name, serializedNode.fileUrl, serializedNode.size, serializedNode.status, serializedNode.message);
+	}
+	static importDOM() {
+		return { span: (node) => {
+			if (node.classList.contains("file")) return {
+				conversion: $convertFileElement,
+				priority: 0
+			};
+			return null;
+		} };
+	}
+	get name() {
+		return this.__name;
+	}
+	get fileUrl() {
+		return this.__fileUrl;
+	}
+	get size() {
+		return this.__size;
+	}
+	get status() {
+		return this.__status;
+	}
+	get message() {
+		return this.__message;
+	}
+	constructor(name, fileUrl, size, status, message, key) {
+		super(key);
+		this.__name = name;
+		this.__fileUrl = fileUrl;
+		this.__size = size;
+		this.__status = status || "pending";
+		this.__message = message;
+	}
+	setUploaded(url) {
+		const writable = this.getWritable();
+		writable.__fileUrl = url;
+		writable.__status = "uploaded";
+		writable.__message = void 0;
+	}
+	setError(message) {
+		const writable = this.getWritable();
+		writable.__status = "error";
+		writable.__message = message;
+	}
+	exportDOM() {
+		return { element: document.createElement("span") };
+	}
+	createDOM(config) {
+		const element = document.createElement("span");
+		addClassNamesToElement(element, config.theme.file);
+		return element;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			fileUrl: this.fileUrl,
+			message: this.message,
+			name: this.name,
+			size: this.size,
+			status: this.status
+		};
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode);
+	}
+	getTextContent() {
+		return "\n";
+	}
+	updateDOM() {
+		return false;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator("file");
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		return {
+			queryDOM: decorator.queryDOM,
+			render: decorator.render(this, editor)
+		};
+	}
+};
+function $createFileNode(name = "unknown", fileUrl, size, status, message) {
+	return $applyNodeReplacement(new FileNode(name, fileUrl, size, status, message));
+}
+function $convertFileElement() {
+	return { node: $createFileNode() };
+}
+function $isFileNode(node) {
+	return node.getType() === FileNode.getType();
+}
+//#endregion
+export { $createFileNode, $isFileNode, FileNode };

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

@@ -0,0 +1,18 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { FileNode } from "../node/FileNode.js";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/file/plugin/index.d.ts
+interface FilePluginOptions {
+  decorator: (node: FileNode, editor: LexicalEditor) => any;
+  handleUpload: (file: File) => Promise<{
+    url: string;
+  }>;
+  markdownWriter?: (file: FileNode) => string;
+  theme?: {
+    file?: string;
+  };
+}
+declare const FilePlugin: IEditorPluginConstructor<FilePluginOptions>;
+//#endregion
+export { FilePlugin, FilePluginOptions };

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

@@ -0,0 +1,103 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { $createFileNode, $isFileNode, FileNode } from "../node/FileNode.js";
+import { registerFileCommand } from "../command/index.js";
+import { IUploadService } from "../../upload/service/i-upload-service.js";
+import { registerFileNodeSelectionObserver } from "../utils/index.js";
+import { $createParagraphNode, $createRangeSelection, $insertNodes, $isRootOrShadowRoot, $setSelection } from "lexical";
+import { $wrapNodeInElement } from "@lexical/utils";
+//#region src/plugins/file/plugin/index.ts
+init_helper();
+init_plugin();
+init_debug();
+const FilePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "FilePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "file");
+		kernel.registerNodes([FileNode]);
+		if (config?.theme) kernel.registerThemes(config?.theme);
+		this.registerDecorator(kernel, FileNode.getType(), (node, editor) => {
+			return config?.decorator ? config.decorator(node, editor) : null;
+		});
+	}
+	onInit(editor) {
+		this.kernel.requireService(IUploadService)?.registerUpload(async (file, from, range) => {
+			editor.update(() => {
+				if (range) {
+					const rangeSelection = $createRangeSelection();
+					if (range !== null && range !== void 0) rangeSelection.applyDOMRange(range);
+					$setSelection(rangeSelection);
+				}
+				const fileNode = $createFileNode(file.name);
+				$insertNodes([fileNode]);
+				if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
+				this.config.handleUpload(file).then((url) => {
+					editor.update(() => {
+						fileNode.setUploaded(url.url);
+					});
+				}).catch((error) => {
+					this.logger.error("File upload failed:", error);
+					editor.update(() => {
+						fileNode.setError("File upload failed : " + error.message);
+					});
+				});
+			});
+			return null;
+		});
+		this.register(registerFileCommand(editor, this.config.handleUpload));
+		this.register(registerFileNodeSelectionObserver(editor));
+		this.registerLiteXml();
+		this.registerMarkdownWriter();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(FileNode.getType(), (node, ctx) => {
+			if ($isFileNode(node)) return ctx.createXmlNode("file", {
+				fileUrl: node.fileUrl || "",
+				message: node.message || "",
+				name: node.name,
+				size: node.size?.toString() || "0",
+				status: node.status
+			});
+			return false;
+		});
+		litexmlService.registerXMLReader("file", (xmlElement) => {
+			const name = xmlElement.getAttribute("name") || "unknown";
+			const fileUrl = xmlElement.getAttribute("fileUrl") || "";
+			const status = xmlElement.getAttribute("status");
+			return INodeHelper.createTypeNode(FileNode.getType(), {
+				fileUrl,
+				message: xmlElement.getAttribute("message") || "",
+				name,
+				size: parseInt(xmlElement.getAttribute("size") || "0", 10),
+				status
+			});
+		});
+	}
+	registerMarkdownWriter() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownWriter(FileNode.getType(), (ctx, node) => {
+			if ($isFileNode(node)) {
+				if (this.config?.markdownWriter) {
+					ctx.appendLine(this.config.markdownWriter(node));
+					return;
+				}
+				if (node.status === "pending") ctx.appendLine(`Uploading ${node.name}...`);
+				else if (node.status === "error") ctx.appendLine(`Failed to upload ${node.name}: ${node.message}`);
+				else ctx.appendLine(`[${node.name}](${node.fileUrl})`);
+			}
+		});
+	}
+};
+//#endregion
+export { FilePlugin };

package/es/plugins/file/react/ReactFilePlugin.d.ts

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

package/es/plugins/file/react/ReactFilePlugin.js

@@ -0,0 +1,35 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { UploadPlugin } from "../../upload/plugin/index.js";
+import { FilePlugin } from "../plugin/index.js";
+import ReactFile from "./components/ReactFile.js";
+import { styles } from "./style.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/file/react/ReactFilePlugin.tsx
+const ReactFilePlugin = ({ className, locale, handleUpload, markdownWriter, theme }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		if (locale) editor.registerLocale(locale);
+		editor.registerPlugin(UploadPlugin);
+		editor.registerPlugin(FilePlugin, {
+			decorator: (node, editor) => {
+				return /* @__PURE__ */ jsx(ReactFile, {
+					className,
+					editor,
+					node
+				});
+			},
+			handleUpload: async (file) => {
+				if (handleUpload) return handleUpload(file);
+				throw new Error("No upload handler provided");
+			},
+			markdownWriter,
+			theme: theme || styles
+		});
+	}, [editor]);
+	return null;
+};
+ReactFilePlugin.displayName = "ReactFilePlugin";
+//#endregion
+export { ReactFilePlugin as default };

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

@@ -0,0 +1,50 @@
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { Center, MaterialFileTypeIcon } from "@lobehub/ui";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+//#region src/plugins/file/react/components/ReactFile.tsx
+const ReactFile = ({ className, editor, node }) => {
+	const spanRef = useRef(null);
+	const t = useTranslation();
+	const [, setSelected, clearSelection] = useLexicalNodeSelection(node.getKey());
+	const onClick = useCallback((payload) => {
+		if (payload.target === spanRef.current) {
+			clearSelection();
+			setSelected(true);
+			return true;
+		}
+		return false;
+	}, [clearSelection, setSelected]);
+	useEffect(() => {
+		return editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW);
+	}, [
+		editor,
+		node,
+		onClick
+	]);
+	if (node.status === "pending") return /* @__PURE__ */ jsx("div", {
+		className,
+		children: t("file.uploading")
+	});
+	if (node.status === "error") return /* @__PURE__ */ jsx("div", {
+		className,
+		children: t("file.error", { message: node.message || "Unknown error" })
+	});
+	return /* @__PURE__ */ jsxs(Center, {
+		className,
+		gap: ".2em",
+		horizontal: true,
+		ref: spanRef,
+		children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+			filename: node.name,
+			size: 18,
+			type: "file",
+			variant: "raw"
+		}), node.name]
+	});
+};
+ReactFile.displayName = "ReactFile";
+//#endregion
+export { ReactFile as default };

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

@@ -0,0 +1,2 @@
+import { ReactFilePluginProps } from "./type.js";
+import { ReactFilePlugin } from "./ReactFilePlugin.js";

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

@@ -0,0 +1,32 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/file/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({ file: css`
+    user-select: none;
+
+    display: inline-block;
+
+    margin-inline: 0.25em;
+    padding-block: 0.2em;
+    padding-inline: 0.4em;
+    border: 1px solid var(--lobe-markdown-border-color);
+    border-radius: 0.25em;
+
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: 0.875em;
+    line-height: 1;
+    word-break: break-word;
+    white-space: break-spaces;
+
+    background: ${cssVar.colorFillSecondary};
+
+    span {
+      user-select: none;
+    }
+
+    &.selected {
+      color: #000;
+      background: ${cssVar.yellow};
+    }
+  ` }));
+//#endregion
+export { styles };

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

@@ -0,0 +1,17 @@
+import { ILocaleKeys } from "../../../types/locale.js";
+import { FileNode } from "../node/FileNode.js";
+
+//#region src/plugins/file/react/type.d.ts
+interface ReactFilePluginProps {
+  className?: string;
+  handleUpload: (file: File) => Promise<{
+    url: string;
+  }>;
+  locale?: Partial<Record<keyof ILocaleKeys, string>>;
+  markdownWriter?: (file: FileNode) => string;
+  theme?: {
+    file?: string;
+  };
+}
+//#endregion
+export { ReactFilePluginProps };

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

@@ -0,0 +1,29 @@
+import { $getSelection, $isNodeSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/file/utils/index.ts
+function registerFileNodeSelectionObserver(editor) {
+	const selectFileKeys = [];
+	return editor.registerUpdateListener(({ editorState }) => {
+		const selection = editorState.read(() => $getSelection());
+		const newSelectFileKeys = [];
+		if ($isNodeSelection(selection)) editorState.read(() => selection.getNodes()).forEach((node) => {
+			if (node.getType() === "file") newSelectFileKeys.push(node.getKey());
+		});
+		else if ($isRangeSelection(selection) && !selection.isCollapsed()) editorState.read(() => {
+			selection.getNodes().forEach((node) => {
+				if (node.getType() === "file") newSelectFileKeys.push(node.getKey());
+			});
+		});
+		const removeKeys = selectFileKeys.filter((key) => !newSelectFileKeys.includes(key));
+		const addKeys = newSelectFileKeys.filter((key) => !selectFileKeys.includes(key));
+		selectFileKeys.length = 0;
+		selectFileKeys.push(...newSelectFileKeys);
+		removeKeys.forEach((key) => {
+			editor.getElementByKey(key)?.classList.remove("selected");
+		});
+		addKeys.forEach((key) => {
+			editor.getElementByKey(key)?.classList.add("selected");
+		});
+	});
+}
+//#endregion
+export { registerFileNodeSelectionObserver };