@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/image/node/image-node.d.ts

@@ -0,0 +1,41 @@
+import { BaseImageNode, SerializedImageNode } from "./basie-image-node.js";
+import { DOMConversionMap, LexicalNode, NodeKey } from "lexical";
+
+//#region src/plugins/image/node/image-node.d.ts
+declare class ImageNode extends BaseImageNode {
+  private static _decorate;
+  static setDecorate(decorate: (node: ImageNode) => any): void;
+  static getType(): string;
+  private __loading;
+  private __status;
+  private __message;
+  private __extra;
+  constructor(opt: {
+    altText: string;
+    height?: 'inherit' | number;
+    key?: NodeKey;
+    maxWidth: number;
+    src: string;
+    status?: 'uploaded' | 'loading' | 'error';
+    width?: 'inherit' | number;
+  });
+  get isLoading(): boolean;
+  get status(): 'uploaded' | 'loading' | 'error';
+  get message(): string | null;
+  get src(): string;
+  get altText(): string;
+  get maxWidth(): number;
+  get width(): number | string;
+  get height(): number | string;
+  setMaxWidth(maxWidth: number): void;
+  setStatus(status: 'uploaded' | 'loading' | 'error'): void;
+  setWidth(width: number): void;
+  setUploaded(url: string): void;
+  setError(message: string): void;
+  static clone(node: ImageNode): ImageNode;
+  static importJSON(serializedNode: SerializedImageNode): ImageNode;
+  static importDOM(): DOMConversionMap | null;
+  decorate(): any;
+}
+//#endregion
+export { ImageNode };

package/es/plugins/image/node/image-node.js

@@ -0,0 +1,128 @@
+import { BaseImageNode } from "./basie-image-node.js";
+import { $applyNodeReplacement } from "lexical";
+//#region src/plugins/image/node/image-node.tsx
+var ImageNode = class ImageNode extends BaseImageNode {
+	static {
+		this._decorate = () => null;
+	}
+	static setDecorate(decorate) {
+		ImageNode._decorate = decorate;
+	}
+	static getType() {
+		return "image";
+	}
+	constructor(opt) {
+		super(opt.src, opt.altText, opt.maxWidth, opt.width, opt.height, opt.key);
+		this.__loading = true;
+		this.__status = "uploaded";
+		this.__message = null;
+		this.__extra = null;
+		this.__status = opt.status ?? "uploaded";
+	}
+	get isLoading() {
+		return this.__loading;
+	}
+	get status() {
+		return this.__status;
+	}
+	get message() {
+		return this.__message;
+	}
+	get src() {
+		return this.__src;
+	}
+	get altText() {
+		return this.__altText;
+	}
+	get maxWidth() {
+		return this.__maxWidth;
+	}
+	get width() {
+		return this.__width;
+	}
+	get height() {
+		return this.__height;
+	}
+	setMaxWidth(maxWidth) {
+		const writable = this.getWritable();
+		writable.__maxWidth = maxWidth;
+	}
+	setStatus(status) {
+		const writable = this.getWritable();
+		writable.__status = status;
+	}
+	setWidth(width) {
+		const writable = this.getWritable();
+		writable.__width = width;
+	}
+	setUploaded(url) {
+		const writable = this.getWritable();
+		writable.__loading = false;
+		writable.__src = url;
+		writable.__status = "uploaded";
+	}
+	setError(message) {
+		const writable = this.getWritable();
+		writable.__loading = false;
+		writable.__status = "error";
+		writable.__message = message;
+	}
+	static clone(node) {
+		return new ImageNode({
+			altText: node.__altText,
+			height: node.__height,
+			key: node.__key,
+			maxWidth: node.__maxWidth,
+			src: node.__src,
+			status: node.__status,
+			width: node.__width
+		});
+	}
+	static importJSON(serializedNode) {
+		const { altText, height, width, maxWidth, src, status } = serializedNode;
+		return $createImageNode({
+			altText,
+			height,
+			maxWidth,
+			src,
+			status,
+			width
+		}).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { img: () => ({
+			conversion: $convertImageElement,
+			priority: 0
+		}) };
+	}
+	decorate() {
+		return ImageNode._decorate(this);
+	}
+};
+function $createImageNode({ altText, height, maxWidth = 500, src, width, key, status }) {
+	return $applyNodeReplacement(new ImageNode({
+		altText,
+		height,
+		key,
+		maxWidth,
+		src,
+		status,
+		width
+	}));
+}
+function $convertImageElement(domNode) {
+	const img = domNode;
+	if (img.src.startsWith("file:///")) return null;
+	const { alt: altText, src, width, height } = img;
+	return { node: $createImageNode({
+		altText,
+		height,
+		src,
+		width
+	}) };
+}
+function $isImageNode(node) {
+	return node.getType() === ImageNode.getType();
+}
+//#endregion
+export { $createImageNode, $isImageNode, ImageNode };

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

@@ -0,0 +1,24 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { BlockImageNode } from "../node/block-image-node.js";
+import { ImageNode } from "../node/image-node.js";
+import { JSX } from "react";
+
+//#region src/plugins/image/plugin/index.d.ts
+interface ImagePluginOptions {
+  defaultBlockImage?: boolean;
+  handleRehost?: (url: string) => Promise<{
+    url: string;
+  }>;
+  handleUpload: (file: File) => Promise<{
+    url: string;
+  }>;
+  needRehost?: (url: string) => boolean;
+  renderImage: (node: ImageNode | BlockImageNode) => JSX.Element | null;
+  theme?: {
+    blockImage?: string;
+    image?: string;
+  };
+}
+declare const ImagePlugin: IEditorPluginConstructor<ImagePluginOptions>;
+//#endregion
+export { ImagePlugin, ImagePluginOptions };

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

@@ -0,0 +1,183 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { INodeService } from "../../inode/service/index.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { IUploadService } from "../../upload/service/i-upload-service.js";
+import { $isBlockImageNode, BlockImageNode } from "../node/block-image-node.js";
+import { $isImageNode, ImageNode } from "../node/image-node.js";
+import { INSERT_IMAGE_COMMAND, registerImageCommand } from "../command/index.js";
+//#region src/plugins/image/plugin/index.ts
+init_helper();
+init_plugin();
+const ImagePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "ImagePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		kernel.registerNodes([ImageNode, BlockImageNode]);
+		ImageNode.setDecorate(config.renderImage);
+		BlockImageNode.setDecorate(config.renderImage);
+		if (config?.theme) kernel.registerThemes(config.theme);
+	}
+	onInit(editor) {
+		this.register(registerImageCommand(editor, this.config.handleUpload, this.config?.defaultBlockImage !== false));
+		this.registerMarkdown();
+		this.registerLiteXml();
+		this.registerINode();
+		this.registerUpload(editor);
+		if (this.config?.needRehost && this.config?.handleRehost) {
+			const needRehost = this.config.needRehost;
+			const handleRehost = this.config.handleRehost;
+			this.register(editor.registerNodeTransform(ImageNode, (node) => {
+				if (node.status === "uploaded" && needRehost(node.src)) {
+					node.setStatus("loading");
+					handleRehost(node.src).then(({ url }) => {
+						editor.update(() => {
+							node.setUploaded(url);
+						});
+					}).catch(() => {
+						editor.update(() => {
+							node.setError("Rehost failed");
+						});
+					});
+				}
+			}));
+			this.register(editor.registerNodeTransform(BlockImageNode, (node) => {
+				if (node.status === "uploaded" && needRehost(node.src)) {
+					node.setStatus("loading");
+					handleRehost(node.src).then(({ url }) => {
+						editor.update(() => {
+							node.setUploaded(url);
+						});
+					}).catch(() => {
+						editor.update(() => {
+							node.setError("Rehost failed");
+						});
+					});
+				}
+			}));
+		}
+	}
+	registerUpload(editor) {
+		const uploadService = this.kernel.requireService(IUploadService);
+		if (!uploadService) return;
+		uploadService.registerUpload(async (file, from, range) => {
+			const imageWidth = await this.getImageWidth(file);
+			return editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+				block: this.config?.defaultBlockImage !== false,
+				file,
+				maxWidth: imageWidth,
+				range
+			});
+		}, 0);
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(ImageNode.getType(), (node, ctx) => {
+			if ($isImageNode(node)) {
+				const attributes = { src: node.src };
+				if (node.altText) attributes.alt = node.altText;
+				return ctx.createXmlNode("img", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLWriter(BlockImageNode.getType(), (node, ctx) => {
+			if ($isBlockImageNode(node)) {
+				const attributes = {
+					block: "true",
+					src: node.src
+				};
+				if (node.altText) attributes.alt = node.altText;
+				if (node.width) attributes.width = String(node.width);
+				if (node.maxWidth) attributes["max-width"] = String(node.maxWidth);
+				return ctx.createXmlNode("img", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLReader("img", (xmlNode) => {
+			if (this.config?.defaultBlockImage !== false) return INodeHelper.createElementNode(BlockImageNode.getType(), {
+				altText: xmlNode.getAttribute("alt") || "",
+				maxWidth: xmlNode.getAttribute("max-width") ? parseInt(xmlNode.getAttribute("max-width"), 10) : void 0,
+				src: xmlNode.getAttribute("src") || "",
+				width: xmlNode.getAttribute("width") ? parseInt(xmlNode.getAttribute("width"), 10) : void 0
+			});
+			if (xmlNode.getAttribute("block") === "true") return INodeHelper.createElementNode(BlockImageNode.getType(), {
+				altText: xmlNode.getAttribute("alt") || "",
+				maxWidth: xmlNode.getAttribute("max-width") ? parseInt(xmlNode.getAttribute("max-width"), 10) : void 0,
+				src: xmlNode.getAttribute("src") || "",
+				width: xmlNode.getAttribute("width") ? parseInt(xmlNode.getAttribute("width"), 10) : void 0
+			});
+			else return INodeHelper.createElementNode(ImageNode.getType(), {
+				altText: xmlNode.getAttribute("alt") || "",
+				maxWidth: xmlNode.getAttribute("max-width") ? parseInt(xmlNode.getAttribute("max-width"), 10) : void 0,
+				src: xmlNode.getAttribute("src") || "",
+				width: xmlNode.getAttribute("width") ? parseInt(xmlNode.getAttribute("width"), 10) : void 0
+			});
+		});
+	}
+	registerMarkdown() {
+		const defaultBlockImage = this.config?.defaultBlockImage !== false;
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownWriter(ImageNode.getType(), (ctx, node) => {
+			if ($isImageNode(node)) ctx.appendLine(`![${node.altText}](${node.src})`);
+		});
+		markdownService.registerMarkdownWriter(BlockImageNode.getType(), (ctx, node) => {
+			if ($isBlockImageNode(node)) ctx.appendLine(`![${node.altText}](${node.src})\n\n`);
+		});
+		markdownService.registerMarkdownReader("image", (node) => {
+			const altText = node.alt;
+			const src = node.url;
+			return INodeHelper.createTypeNode(defaultBlockImage ? BlockImageNode.getType() : ImageNode.getType(), {
+				altText,
+				showCaption: false,
+				src,
+				version: 1
+			});
+		});
+	}
+	registerINode() {
+		const service = this.kernel.requireService(INodeService);
+		if (!service) return;
+		service.registerProcessNodeTree(({ root }) => {
+			const loopNodes = (node) => {
+				if ("children" in node && Array.isArray(node.children)) {
+					if (node.type === "paragraph" && node.children.length === 1 && node.children[0].type === BlockImageNode.getType()) return node.children[0];
+					node.children = node.children.map((child) => {
+						return loopNodes(child);
+					});
+				}
+				return node;
+			};
+			root.children = root.children.map((child) => {
+				return loopNodes(child);
+			});
+		});
+	}
+	getImageWidth(file) {
+		return new Promise((resolve) => {
+			const reader = new FileReader();
+			reader.addEventListener("load", (e) => {
+				const img = new Image();
+				img.addEventListener("load", () => {
+					resolve(img.naturalWidth);
+				});
+				img.addEventListener("error", () => {
+					resolve(800);
+				});
+				img.src = e.target?.result;
+			});
+			reader.addEventListener("error", () => {
+				resolve(800);
+			});
+			reader.readAsDataURL(file);
+		});
+	}
+};
+//#endregion
+export { ImagePlugin };

package/es/plugins/image/react/ReactImagePlugin.d.ts

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

package/es/plugins/image/react/ReactImagePlugin.js

@@ -0,0 +1,41 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { UploadPlugin } from "../../upload/plugin/index.js";
+import { ImagePlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import Image from "./components/Image.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/image/react/ReactImagePlugin.tsx
+const defaultUpload = (file) => {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve({ url: URL.createObjectURL(file) });
+		}, 1e3);
+	});
+};
+const ReactImagePlugin = ({ theme, className, defaultBlockImage, handleUpload, needRehost, handleRehost, onPickFile }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(UploadPlugin);
+		editor.registerPlugin(ImagePlugin, {
+			defaultBlockImage,
+			handleRehost,
+			handleUpload: handleUpload || defaultUpload,
+			needRehost,
+			renderImage: (node) => {
+				return /* @__PURE__ */ jsx(Image, {
+					className,
+					handleUpload: handleUpload || defaultUpload,
+					node,
+					onPickFile
+				});
+			},
+			theme: theme || styles
+		});
+	}, []);
+	return null;
+};
+ReactImagePlugin.displayName = "ReactImagePlugin";
+//#endregion
+export { ReactImagePlugin as default };

package/es/plugins/image/react/components/BrokenImage.js

@@ -0,0 +1,16 @@
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { imageBroken } from "../style.js";
+import { styles } from "./style.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/image/react/components/BrokenImage.tsx
+const BrokenImage = () => {
+	return /* @__PURE__ */ jsx("img", {
+		alt: useTranslation()("image.broken"),
+		className: styles.brokenImage,
+		draggable: "false",
+		src: imageBroken
+	});
+};
+BrokenImage.displayName = "BrokenImage";
+//#endregion
+export { BrokenImage as default };

package/es/plugins/image/react/components/Image.js

@@ -0,0 +1,190 @@
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { $isBlockImageNode } from "../../node/block-image-node.js";
+import { styles } from "./style.js";
+import BrokenImage from "./BrokenImage.js";
+import ImageEditPopover from "./ImageEditPopover.js";
+import LazyImage from "./LazyImage.js";
+import { ResizeHandle } from "./ResizeHandle.js";
+import { Icon } from "@lobehub/ui";
+import { LoaderCircleIcon } from "lucide-react";
+import { Suspense, memo, useCallback, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
+//#region src/plugins/image/react/components/Image.tsx
+function getResizedImageWidth(startWidth, deltaX, maxWidth) {
+	const adjustedDeltaX = deltaX * 2;
+	return Math.max(50, Math.min(startWidth + adjustedDeltaX, maxWidth));
+}
+const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
+	const [isSelected, setSelected] = useLexicalNodeSelection(node.getKey());
+	const [isHovered, setIsHovered] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [size, setSize] = useState({
+		height: 0,
+		width: 0
+	});
+	const [newWidth, setNewWidth] = useState(null);
+	const imageRef = useRef(null);
+	const originalSizeRef = useRef({
+		height: 0,
+		width: 0
+	});
+	const editorRef = useRef(null);
+	const startWidthRef = useRef(0);
+	const lastLoadedSrcRef = useRef(null);
+	const isBlock = useMemo(() => {
+		return $isBlockImageNode(node);
+	}, [node]);
+	useLexicalEditor((editor) => {
+		editorRef.current = editor;
+		const unregister = editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, _activeEditor) => {
+			return false;
+		}, COMMAND_PRIORITY_LOW);
+		return () => {
+			editorRef.current = null;
+			unregister();
+		};
+	}, []);
+	const handleResize = useCallback((deltaX) => {
+		if (!originalSizeRef.current.width || !originalSizeRef.current.height) return;
+		if (!imageRef.current) return;
+		const aspectRatio = originalSizeRef.current.width / originalSizeRef.current.height;
+		const maxWidth = imageRef.current.parentElement?.clientWidth || window.innerWidth;
+		const newWidth = getResizedImageWidth(startWidthRef.current, deltaX, maxWidth);
+		setSize({
+			height: newWidth / aspectRatio,
+			width: newWidth
+		});
+		setNewWidth(newWidth);
+		setScale(newWidth / originalSizeRef.current.width);
+	}, []);
+	const handleResizeStart = useCallback((initialWidth) => {
+		startWidthRef.current = initialWidth;
+	}, []);
+	const handleClick = useCallback((e) => {
+		e.stopPropagation();
+		setSelected(true);
+	}, [setSelected]);
+	const handleDoubleClick = useCallback((e) => {
+		const editor = editorRef.current;
+		if (!editor) return;
+		e.stopPropagation();
+		e.preventDefault();
+		const orig = originalSizeRef.current;
+		if (!orig.width || !orig.height) return;
+		setSize(orig);
+		setScale(1);
+		setNewWidth(orig.width);
+		editor.update(() => {
+			try {
+				node.setWidth(orig.width);
+				node.setMaxWidth(orig.width);
+			} catch {}
+		});
+	}, []);
+	const handleMouseEnter = useCallback(() => {
+		setIsHovered(true);
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		setIsHovered(false);
+	}, []);
+	const children = useMemo(() => {
+		switch (node.status) {
+			case "error": return /* @__PURE__ */ jsx(BrokenImage, {});
+			case "uploaded":
+			case "loading": return /* @__PURE__ */ jsx(Suspense, {
+				fallback: lastLoadedSrcRef.current ? /* @__PURE__ */ jsx("img", {
+					alt: node.altText,
+					className: cx(styles.lazyImage, className || void 0),
+					draggable: "false",
+					src: lastLoadedSrcRef.current,
+					style: { width: "100%" }
+				}) : null,
+				children: /* @__PURE__ */ jsx(LazyImage, {
+					className,
+					newWidth,
+					node,
+					onLoad: (loadedSize) => {
+						lastLoadedSrcRef.current = node.src;
+						originalSizeRef.current.width = loadedSize.width;
+						originalSizeRef.current.height = loadedSize.height;
+						setSize(loadedSize);
+					}
+				})
+			});
+			default: return null;
+		}
+	}, [
+		node.status,
+		className,
+		node,
+		newWidth
+	]);
+	const handleResizeEnd = useCallback((deltaX) => {
+		if (!originalSizeRef.current.width || !originalSizeRef.current.height) return;
+		if (!imageRef.current) return;
+		const maxWidth = imageRef.current.parentElement?.clientWidth || window.innerWidth;
+		const finalWidth = getResizedImageWidth(startWidthRef.current, deltaX, maxWidth);
+		const editor = editorRef.current;
+		if (!editor) return;
+		editor.update(() => {
+			try {
+				node.setWidth(finalWidth);
+				node.setMaxWidth(finalWidth);
+			} catch {}
+		});
+	}, [node]);
+	return /* @__PURE__ */ jsx(ImageEditPopover, {
+		handleUpload,
+		node,
+		onPickFile,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.imageContainer, {
+				loading: node.status === "loading",
+				selected: isSelected
+			}),
+			draggable: false,
+			onClick: handleClick,
+			onDoubleClick: handleDoubleClick,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			ref: imageRef,
+			style: { width: size.width || "auto" },
+			children: [
+				children,
+				node.status === "loading" && /* @__PURE__ */ jsx("div", {
+					className: styles.loadingIcon,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: LoaderCircleIcon,
+						size: 24,
+						spin: true
+					})
+				}),
+				showScaleInfo && isSelected && scale !== 1 && /* @__PURE__ */ jsxs("div", {
+					className: styles.scaleInfo,
+					children: [Math.round(scale * 100), "%"]
+				}),
+				isHovered && node.status === "uploaded" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResizeHandle, {
+					imageRef,
+					isBlock,
+					onResize: handleResize,
+					onResizeEnd: handleResizeEnd,
+					onResizeStart: handleResizeStart,
+					position: "left"
+				}), /* @__PURE__ */ jsx(ResizeHandle, {
+					imageRef,
+					isBlock,
+					onResize: handleResize,
+					onResizeEnd: handleResizeEnd,
+					onResizeStart: handleResizeStart,
+					position: "right"
+				})] })
+			]
+		})
+	});
+});
+Image.displayName = "Image";
+//#endregion
+export { Image as default };