@lobehub/editor 4.15.1 → 4.15.2

package/es/headless/extract-media-from-editor-state.d.ts

@@ -0,0 +1,22 @@
+import { SerializedEditorState } from "lexical";
+
+//#region src/headless/extract-media-from-editor-state.d.ts
+interface ImageListItem {
+  alt: string;
+  id: string;
+  url: string;
+}
+interface FileListItem {
+  fileType: string;
+  id: string;
+  name: string;
+  size: number;
+  url: string;
+}
+interface MediaLists {
+  fileList: FileListItem[];
+  imageList: ImageListItem[];
+}
+declare const extractMediaFromEditorState: (state: SerializedEditorState | null | undefined) => MediaLists;
+//#endregion
+export { FileListItem, ImageListItem, MediaLists, extractMediaFromEditorState };

package/es/headless/extract-media-from-editor-state.js

@@ -0,0 +1,49 @@
+//#region src/headless/extract-media-from-editor-state.ts
+const IMAGE_TYPES = new Set(["image", "block-image"]);
+const FILE_TYPE = "file";
+const generateId = () => {
+	if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
+	return `id-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+};
+const inferFileType = (name) => {
+	const dotIndex = name.lastIndexOf(".");
+	if (dotIndex < 0 || dotIndex === name.length - 1) return "unknown";
+	return name.slice(dotIndex + 1).toLowerCase() || "unknown";
+};
+const extractMediaFromEditorState = (state) => {
+	const imageList = [];
+	const fileList = [];
+	const visit = (node) => {
+		const type = node.type;
+		if (IMAGE_TYPES.has(type)) {
+			if (node.status === "uploaded" && typeof node.src === "string" && node.src) imageList.push({
+				alt: typeof node.altText === "string" ? node.altText : "",
+				id: generateId(),
+				url: node.src
+			});
+			return;
+		}
+		if (type === FILE_TYPE) {
+			if (node.status === "uploaded" && typeof node.fileUrl === "string" && node.fileUrl) {
+				const name = typeof node.name === "string" ? node.name : "unknown";
+				fileList.push({
+					fileType: inferFileType(name),
+					id: generateId(),
+					name,
+					size: typeof node.size === "number" ? node.size : 0,
+					url: node.fileUrl
+				});
+			}
+			return;
+		}
+		if (Array.isArray(node.children)) for (const child of node.children) visit(child);
+	};
+	const root = state?.root;
+	if (root && Array.isArray(root.children)) for (const child of root.children) visit(child);
+	return {
+		fileList,
+		imageList
+	};
+};
+//#endregion
+export { extractMediaFromEditorState };

package/es/headless/index.d.ts

@@ -0,0 +1,69 @@
+import { IDocumentOptions, IEditor, IPlugin } from "../types/kernel.js";
+import { LITEXML_MODIFY_COMMAND } from "../plugins/litexml/command/index.js";
+import { FileListItem, ImageListItem, MediaLists, extractMediaFromEditorState } from "./extract-media-from-editor-state.js";
+import { CommandPayloadType, SerializedEditorState, SerializedLexicalNode } from "lexical";
+
+//#region src/headless/index.d.ts
+type HeadlessDocumentType = 'json' | 'litexml' | 'markdown' | (string & object);
+interface HeadlessEditorHydrationInput {
+  content: unknown;
+  options?: IDocumentOptions;
+  type: HeadlessDocumentType;
+}
+interface HeadlessEditorExportOptions {
+  litexml?: boolean;
+}
+interface HeadlessEditorExport {
+  editorData: SerializedEditorState<SerializedLexicalNode>;
+  litexml?: string;
+  markdown: string;
+}
+interface HeadlessEditorOptions {
+  additionalPlugins?: ReadonlyArray<IPlugin>;
+  initialValue?: HeadlessEditorHydrationInput;
+  plugins?: ReadonlyArray<IPlugin>;
+}
+interface HeadlessLiteXMLReplaceOperation {
+  action: 'apply' | 'replace';
+  delay?: boolean;
+  litexml: string | string[];
+}
+type HeadlessLiteXMLInsertOperation = {
+  action: 'insert';
+  afterId: string;
+  delay?: boolean;
+  litexml: string;
+} | {
+  action: 'insert';
+  beforeId: string;
+  delay?: boolean;
+  litexml: string;
+};
+interface HeadlessLiteXMLRemoveOperation {
+  action: 'remove';
+  delay?: boolean;
+  id: string;
+}
+interface HeadlessLiteXMLBatchOperation {
+  action: 'batch';
+  operations: CommandPayloadType<typeof LITEXML_MODIFY_COMMAND>;
+}
+type HeadlessLiteXMLOperation = HeadlessLiteXMLBatchOperation | HeadlessLiteXMLInsertOperation | HeadlessLiteXMLRemoveOperation | HeadlessLiteXMLReplaceOperation;
+declare const DEFAULT_HEADLESS_EDITOR_PLUGINS: ReadonlyArray<IPlugin>;
+declare class HeadlessEditor {
+  readonly kernel: IEditor;
+  constructor(options?: HeadlessEditorOptions);
+  hydrate(input: HeadlessEditorHydrationInput): this;
+  hydrateEditorData(editorData: SerializedEditorState<SerializedLexicalNode> | string, options?: IDocumentOptions): this;
+  hydrateLiteXML(litexml: string, options?: IDocumentOptions): this;
+  hydrateMarkdown(markdown: string, options?: IDocumentOptions): this;
+  applyLiteXML(operation: HeadlessLiteXMLOperation | ReadonlyArray<HeadlessLiteXMLOperation>): Promise<this>;
+  applyLiteXMLBatch(operations: CommandPayloadType<typeof LITEXML_MODIFY_COMMAND>): Promise<this>;
+  export(options?: HeadlessEditorExportOptions): HeadlessEditorExport;
+  exportState(options?: HeadlessEditorExportOptions): HeadlessEditorExport;
+  destroy(): void;
+  private applyLiteXMLOperation;
+}
+declare function createHeadlessEditor(options?: HeadlessEditorOptions): HeadlessEditor;
+//#endregion
+export { DEFAULT_HEADLESS_EDITOR_PLUGINS, HeadlessDocumentType, HeadlessEditor, HeadlessEditorExport, HeadlessEditorExportOptions, HeadlessEditorHydrationInput, HeadlessEditorOptions, HeadlessLiteXMLBatchOperation, HeadlessLiteXMLInsertOperation, HeadlessLiteXMLOperation, HeadlessLiteXMLRemoveOperation, HeadlessLiteXMLReplaceOperation, createHeadlessEditor };

package/es/headless/index.js

@@ -0,0 +1,189 @@
+import { moment } from "../editor-kernel/utils.js";
+import Editor from "../editor-kernel/index.js";
+import { LITEXML_APPLY_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND } from "../plugins/litexml/command/index.js";
+import { MarkdownPlugin } from "../plugins/markdown/plugin/index.js";
+import { LitexmlPlugin } from "../plugins/litexml/plugin/index.js";
+import { CommonPlugin } from "../plugins/common/plugin/index.js";
+import { CodePlugin } from "../plugins/code/plugin/index.js";
+import { HRPlugin } from "../plugins/hr/plugin/index.js";
+import { LinkPlugin } from "../plugins/link/plugin/index.js";
+import { ListPlugin } from "../plugins/list/plugin/index.js";
+import { TablePlugin } from "../plugins/table/plugin/index.js";
+import { HeadlessCodeblockPlugin } from "./plugins/codeblock.js";
+import "./extract-media-from-editor-state.js";
+//#region src/headless/index.ts
+const getNumericId = (id) => {
+	if (typeof id !== "number" && typeof id !== "string") return null;
+	const numericId = Number(id);
+	return Number.isInteger(numericId) && numericId >= 0 ? numericId : null;
+};
+const findMaxSerializedId = (node) => {
+	if (!node || typeof node !== "object") return -1;
+	const record = node;
+	const ownMax = getNumericId(record.id) ?? -1;
+	if (!Array.isArray(record.children)) return ownMax;
+	return record.children.reduce((maxId, child) => Math.max(maxId, findMaxSerializedId(child)), ownMax);
+};
+const createSerializedId = (context) => String(context.nextId++);
+const createCodeChildrenFromLegacyCode = (code, context) => code.split("\n").flatMap((text, index, array) => {
+	const textNode = {
+		detail: 0,
+		format: 0,
+		id: createSerializedId(context),
+		mode: "normal",
+		style: "",
+		text,
+		type: "code-highlight",
+		version: 1
+	};
+	if (index === array.length - 1) return textNode;
+	return [textNode, {
+		id: createSerializedId(context),
+		type: "linebreak",
+		version: 1
+	}];
+});
+const normalizeLegacyEditorDataNode = (node, context) => {
+	if (!node || typeof node !== "object") return node;
+	const record = node;
+	const children = Array.isArray(record.children) ? record.children.map((child) => normalizeLegacyEditorDataNode(child, context)) : record.children;
+	if (record.type === "code" && typeof record.code === "string" && !Array.isArray(children)) return {
+		...record,
+		children: createCodeChildrenFromLegacyCode(record.code, context),
+		direction: record.direction ?? "ltr",
+		format: record.format ?? "",
+		indent: record.indent ?? 0,
+		language: record.language ?? "plaintext",
+		theme: record.theme ?? record.codeTheme
+	};
+	if (Array.isArray(children)) return {
+		...record,
+		children
+	};
+	return record;
+};
+const normalizeLegacyEditorData = (editorData) => {
+	const data = typeof editorData === "string" ? JSON.parse(editorData) : editorData;
+	const context = { nextId: findMaxSerializedId(data.root) + 1 };
+	return {
+		...data,
+		root: normalizeLegacyEditorDataNode(data.root, context)
+	};
+};
+const extractSerializedCodeText = (children) => children.map((child) => {
+	if (!child || typeof child !== "object") return "";
+	const record = child;
+	if (record.type === "linebreak") return "\n";
+	if (record.type === "tab") return "	";
+	if (typeof record.text === "string") return record.text;
+	if (Array.isArray(record.children)) return extractSerializedCodeText(record.children);
+	return "";
+}).join("");
+const preserveSerializedCodeText = (node) => {
+	if (!node || typeof node !== "object") return node;
+	const record = node;
+	const children = Array.isArray(record.children) ? record.children.map((child) => preserveSerializedCodeText(child)) : record.children;
+	if (record.type === "code" && Array.isArray(children)) return {
+		...record,
+		children,
+		code: extractSerializedCodeText(children)
+	};
+	if (Array.isArray(children)) return {
+		...record,
+		children
+	};
+	return record;
+};
+const preserveSerializedCodeTextInEditorData = (editorData) => ({
+	...editorData,
+	root: preserveSerializedCodeText(editorData.root)
+});
+const DEFAULT_HEADLESS_EDITOR_PLUGINS = [
+	[CommonPlugin, { enableHotkey: false }],
+	MarkdownPlugin,
+	[LinkPlugin, { enableHotkey: false }],
+	CodePlugin,
+	HeadlessCodeblockPlugin,
+	HRPlugin,
+	ListPlugin,
+	TablePlugin,
+	LitexmlPlugin
+];
+var HeadlessEditor = class {
+	constructor(options = {}) {
+		this.kernel = Editor.createEditor();
+		const plugins = [...options.plugins ?? DEFAULT_HEADLESS_EDITOR_PLUGINS, ...options.additionalPlugins ?? []];
+		this.kernel.registerPlugins(plugins);
+		this.kernel.initHeadlessEditor();
+		if (options.initialValue) this.hydrate(options.initialValue);
+	}
+	hydrate(input) {
+		this.kernel.setDocument(input.type, input.content, input.options);
+		return this;
+	}
+	hydrateEditorData(editorData, options) {
+		this.kernel.setDocument("json", normalizeLegacyEditorData(editorData), options);
+		return this;
+	}
+	hydrateLiteXML(litexml, options) {
+		this.kernel.setDocument("litexml", litexml, options);
+		return this;
+	}
+	hydrateMarkdown(markdown, options) {
+		this.kernel.setDocument("markdown", markdown, options);
+		return this;
+	}
+	async applyLiteXML(operation) {
+		const operations = Array.isArray(operation) ? operation : [operation];
+		for (const item of operations) this.applyLiteXMLOperation(item);
+		await moment();
+		return this;
+	}
+	async applyLiteXMLBatch(operations) {
+		this.kernel.dispatchCommand(LITEXML_MODIFY_COMMAND, operations);
+		await moment();
+		return this;
+	}
+	export(options = {}) {
+		const snapshot = {
+			editorData: preserveSerializedCodeTextInEditorData(this.kernel.getDocument("json")),
+			markdown: this.kernel.getDocument("markdown")
+		};
+		if (options.litexml) snapshot.litexml = this.kernel.getDocument("litexml");
+		return snapshot;
+	}
+	exportState(options) {
+		return this.export(options);
+	}
+	destroy() {
+		this.kernel.destroy();
+	}
+	applyLiteXMLOperation(operation) {
+		switch (operation.action) {
+			case "apply":
+			case "replace":
+				this.kernel.dispatchCommand(LITEXML_APPLY_COMMAND, {
+					delay: operation.delay,
+					litexml: operation.litexml
+				});
+				return;
+			case "batch":
+				this.kernel.dispatchCommand(LITEXML_MODIFY_COMMAND, operation.operations);
+				return;
+			case "insert":
+				this.kernel.dispatchCommand(LITEXML_INSERT_COMMAND, operation);
+				return;
+			case "remove":
+				this.kernel.dispatchCommand(LITEXML_REMOVE_COMMAND, {
+					delay: operation.delay,
+					id: operation.id
+				});
+				return;
+		}
+	}
+};
+function createHeadlessEditor(options) {
+	return new HeadlessEditor(options);
+}
+//#endregion
+export { DEFAULT_HEADLESS_EDITOR_PLUGINS, HeadlessEditor, createHeadlessEditor };

package/es/headless/plugins/codeblock.js

@@ -0,0 +1,82 @@
+import { INodeHelper, init_helper } from "../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../editor-kernel/plugin.js";
+import { ILitexmlService } from "../../plugins/litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../plugins/markdown/service/shortcut.js";
+import { getCodeLanguageByInput } from "../../plugins/codeblock/utils/language.js";
+import { TabNode } from "lexical";
+import { $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode } from "@lexical/code-core";
+//#region src/headless/plugins/codeblock.ts
+init_helper();
+init_plugin();
+const createCodeChildren = (code) => code.split("\n").flatMap((text, index, array) => {
+	const textNode = INodeHelper.createTextNode(text);
+	textNode.type = "code-highlight";
+	if (index === array.length - 1) return textNode;
+	return [textNode, {
+		type: "linebreak",
+		version: 1
+	}];
+}).flat();
+const HeadlessCodeblockPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "HeadlessCodeblockPlugin";
+	}
+	constructor(kernel) {
+		super();
+		this.kernel = kernel;
+		kernel.registerNodes([CodeNode, CodeHighlightNode]);
+		kernel.registerThemes({ code: "editor-code" });
+	}
+	onInit() {
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(CodeNode.getType(), (node, ctx) => {
+			const codeNode = node;
+			return ctx.createXmlNode("code", { lang: codeNode.getLanguage() || "plaintext" }, codeNode.getTextContent());
+		});
+		litexmlService.registerXMLReader("code", (xmlElement, children) => {
+			const text = children.map((value) => value.text || "").join("");
+			return INodeHelper.createElementNode(CodeNode.getType(), {
+				children: createCodeChildren(text),
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				language: xmlElement.getAttribute("lang"),
+				version: 1
+			});
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownWriter(CodeNode.getType(), (ctx, node) => {
+			if ($isCodeNode(node)) ctx.wrap("```" + (node.getLanguage() || "") + "\n", "\n```\n");
+		});
+		markdownService.registerMarkdownWriter(TabNode.getType(), (ctx) => {
+			ctx.appendLine("  ");
+		});
+		markdownService.registerMarkdownWriter(CodeHighlightNode.getType(), (ctx, node) => {
+			if ($isCodeHighlightNode(node)) ctx.appendLine(node.getTextContent());
+		});
+		markdownService.registerMarkdownWriter("linebreak", (ctx, node) => {
+			if ($isCodeNode(node.getParent())) ctx.appendLine("\n");
+		});
+		markdownService.registerMarkdownReader("code", (node) => {
+			const language = node.lang ? getCodeLanguageByInput(node.lang) : "plaintext";
+			return INodeHelper.createElementNode("code", {
+				children: createCodeChildren(node.value),
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				language,
+				version: 1
+			});
+		});
+	}
+};
+//#endregion
+export { HeadlessCodeblockPlugin };