@lobehub/editor 4.15.1 → 4.15.2

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

@@ -0,0 +1,160 @@
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { useEditable } from "../../../../editor-kernel/react/useEditable.js";
+import { Button, Flexbox, Icon, Input, Popover } from "@lobehub/ui";
+import { LinkIcon, UploadIcon } from "lucide-react";
+import { memo, useCallback, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
+//#region src/plugins/image/react/components/ImageEditPopover.tsx
+const ImageEditPopover = memo(({ children, node, handleUpload, onPickFile }) => {
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const [uploading, setUploading] = useState(false);
+	const fileInputRef = useRef(null);
+	const editorRef = useRef(null);
+	const { editable } = useEditable();
+	const t = useTranslation();
+	useLexicalEditor((editor) => {
+		editorRef.current = editor;
+		return () => {
+			editorRef.current = null;
+		};
+	}, []);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (nextOpen && node.status !== "uploaded") return;
+		if (nextOpen) setUrl(node.src);
+		setOpen(nextOpen);
+	}, [node]);
+	const handleClose = useCallback(() => {
+		setOpen(false);
+	}, []);
+	const handleUrlSubmit = useCallback(() => {
+		const editor = editorRef.current;
+		if (!editor || !url.trim()) return;
+		const trimmedUrl = url.trim();
+		handleClose();
+		editor.update(() => {
+			node.setUploaded(trimmedUrl);
+		});
+	}, [
+		node,
+		url,
+		handleClose
+	]);
+	const handleFileChange = useCallback(async (e) => {
+		const file = e.target.files?.[0];
+		if (!file || !handleUpload) return;
+		handleClose();
+		setUploading(true);
+		try {
+			const editor = editorRef.current;
+			if (!editor) return;
+			editor.update(() => {
+				node.setStatus("loading");
+			});
+			const result = await handleUpload(file);
+			editor.update(() => {
+				node.setUploaded(result.url);
+			});
+		} catch {
+			const editor = editorRef.current;
+			if (editor) editor.update(() => {
+				node.setError("Upload failed");
+			});
+		} finally {
+			setUploading(false);
+			if (fileInputRef.current) fileInputRef.current.value = "";
+		}
+	}, [
+		node,
+		handleUpload,
+		handleClose
+	]);
+	const handlePickFile = useCallback(async () => {
+		if (onPickFile) {
+			const file = await onPickFile();
+			if (file && handleUpload) {
+				handleClose();
+				setUploading(true);
+				try {
+					const editor = editorRef.current;
+					if (!editor) return;
+					editor.update(() => {
+						node.setStatus("loading");
+					});
+					const result = await handleUpload(file);
+					editor.update(() => {
+						node.setUploaded(result.url);
+					});
+				} catch {
+					const editor = editorRef.current;
+					if (editor) editor.update(() => {
+						node.setError("Upload failed");
+					});
+				} finally {
+					setUploading(false);
+				}
+			}
+		} else fileInputRef.current?.click();
+	}, [
+		onPickFile,
+		handleUpload,
+		handleClose,
+		node
+	]);
+	return /* @__PURE__ */ jsx(Popover, {
+		arrow: false,
+		content: /* @__PURE__ */ jsxs(Flexbox, {
+			gap: 8,
+			style: { width: 320 },
+			children: [/* @__PURE__ */ jsx(Input, {
+				onChange: (e) => setUrl(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") handleUrlSubmit();
+					if (e.key === "Escape") handleClose();
+				},
+				placeholder: "https://...",
+				prefix: /* @__PURE__ */ jsx(Icon, {
+					color: cssVar.colorTextDescription,
+					icon: LinkIcon
+				}),
+				value: url
+			}), /* @__PURE__ */ jsxs(Flexbox, {
+				gap: 8,
+				horizontal: true,
+				justify: "flex-end",
+				children: [handleUpload && /* @__PURE__ */ jsxs(Fragment, { children: [!onPickFile && /* @__PURE__ */ jsx("input", {
+					accept: "image/*",
+					onChange: handleFileChange,
+					ref: fileInputRef,
+					style: { display: "none" },
+					type: "file"
+				}), /* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Icon, { icon: UploadIcon }),
+					loading: uploading,
+					onClick: handlePickFile,
+					size: "small",
+					type: "text",
+					children: t("image.replace")
+				})] }), /* @__PURE__ */ jsx(Button, {
+					onClick: handleUrlSubmit,
+					size: "small",
+					type: "text",
+					variant: "filled",
+					children: t("confirm")
+				})]
+			})]
+		}),
+		disabled: !editable || node.status !== "uploaded",
+		onOpenChange: handleOpenChange,
+		open,
+		placement: "bottom",
+		styles: { content: { padding: 12 } },
+		trigger: "click",
+		children
+	});
+});
+ImageEditPopover.displayName = "ImageEditPopover";
+//#endregion
+export { ImageEditPopover as default };

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

@@ -0,0 +1,73 @@
+import { styles } from "./style.js";
+import BrokenImage from "./BrokenImage.js";
+import { useSuspenseImage } from "./useSupenseImage.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/plugins/image/react/components/LazyImage.tsx
+function isSVG(src) {
+	return src.toLowerCase().endsWith(".svg");
+}
+const LazyImage = ({ className, node, newWidth, onError, onLoad }) => {
+	const { src, altText, maxWidth, width } = node;
+	const [dimensions, setDimensions] = useState(null);
+	const isSVGImage = isSVG(src);
+	const hasError = useSuspenseImage(src);
+	useEffect(() => {
+		if (hasError && onError) onError();
+	}, [hasError, onError]);
+	if (hasError) return /* @__PURE__ */ jsx(BrokenImage, {});
+	const calculateDimensions = () => {
+		if (!isSVGImage) return {
+			maxWidth,
+			width
+		};
+		const naturalWidth = dimensions?.width || 200;
+		const naturalHeight = dimensions?.height || 200;
+		let finalWidth = naturalWidth;
+		let finalHeight = naturalHeight;
+		if (finalWidth > maxWidth) {
+			const scale = maxWidth / finalWidth;
+			finalWidth = maxWidth;
+			finalHeight = Math.round(finalHeight * scale);
+		}
+		const maxHeight = 500;
+		if (finalHeight > maxHeight) {
+			const scale = maxHeight / finalHeight;
+			finalHeight = maxHeight;
+			finalWidth = Math.round(finalWidth * scale);
+		}
+		return {
+			maxWidth,
+			width: finalWidth
+		};
+	};
+	const imageStyle = calculateDimensions();
+	return /* @__PURE__ */ jsx("img", {
+		alt: altText,
+		className: cx(styles.lazyImage, className || void 0),
+		draggable: "false",
+		onError,
+		onLoad: (e) => {
+			const img = e.currentTarget;
+			const width = Math.min(img.naturalWidth, img.getBoundingClientRect().width);
+			if (isSVGImage) setDimensions({
+				height: img.naturalHeight,
+				width
+			});
+			onLoad?.({
+				height: img.naturalHeight,
+				width
+			});
+		},
+		src,
+		style: {
+			...imageStyle,
+			maxWidth: `calc(min(${newWidth || imageStyle.maxWidth}px, 100%))`,
+			width: newWidth || imageStyle.width
+		}
+	});
+};
+LazyImage.displayName = "LazyImage";
+//#endregion
+export { LazyImage as default };

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

@@ -0,0 +1,62 @@
+import { styles } from "./style.js";
+import { useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/plugins/image/react/components/ResizeHandle.tsx
+const ResizeHandle = ({ imageRef, isBlock, onResize, onResizeEnd, onResizeStart, position }) => {
+	const startWidthRef = useRef(0);
+	const handleMouseDown = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const initialWidth = imageRef.current?.offsetWidth || 0;
+		startWidthRef.current = initialWidth;
+		onResizeStart(initialWidth);
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const rect = isBlock ? e.target.getBoundingClientRect() : {
+			height: 0,
+			left: 0,
+			top: 0,
+			width: 0
+		};
+		const centerX = rect.left + rect.width / 2;
+		let lastDeltaX = 0;
+		let lastDeltaY = 0;
+		const handleMouseMove = (e) => {
+			let deltaX = e.clientX - startX;
+			const deltaY = e.clientY - startY;
+			switch (position) {
+				case "left":
+					deltaX = isBlock ? centerX - e.clientX : -deltaX;
+					break;
+				case "right":
+					if (isBlock) deltaX = e.clientX - centerX;
+					break;
+			}
+			lastDeltaX = deltaX;
+			lastDeltaY = deltaY;
+			onResize(deltaX, deltaY, position);
+		};
+		const handleMouseUp = () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+			if (typeof onResizeEnd === "function") onResizeEnd(lastDeltaX, lastDeltaY);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+	}, [
+		imageRef,
+		isBlock,
+		onResize,
+		onResizeEnd,
+		onResizeStart,
+		position
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.resizeHandle, position === "left" ? styles.resizeHandleLeft : styles.resizeHandleRight),
+		onMouseDown: handleMouseDown
+	});
+};
+ResizeHandle.displayName = "ResizeHandle";
+//#endregion
+export { ResizeHandle };

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

@@ -0,0 +1,135 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/image/react/components/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	brokenImage: css`
+    width: 200px;
+    height: auto;
+  `,
+	imageContainer: css`
+    cursor: default;
+    user-select: none;
+
+    position: relative;
+
+    overflow: hidden;
+    display: inline-block;
+
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    transition: border-color 0.2s ease;
+
+    &.selected {
+      cursor: pointer;
+      outline: none;
+
+      &::after {
+        pointer-events: none;
+        content: '';
+
+        position: absolute;
+        z-index: 10;
+        inset: 0;
+
+        background-color: color-mix(in srgb, ${cssVar.yellow} 10%, transparent);
+      }
+    }
+
+    &.loading {
+      &::after {
+        pointer-events: none;
+        content: '';
+
+        position: absolute;
+        z-index: 10;
+        inset: 0;
+
+        background-color: color-mix(in srgb, ${cssVar.colorBgContainer} 40%, transparent);
+
+        animation: image-loading-pulse 1.5s ease-in-out infinite;
+      }
+
+      @keyframes image-loading-pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+
+        50% {
+          opacity: 0.4;
+        }
+      }
+    }
+  `,
+	lazyImage: css`
+    cursor: default;
+  `,
+	loadingIcon: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 11;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+	resizeHandle: css`
+    pointer-events: auto;
+    cursor: col-resize;
+
+    position: absolute;
+    z-index: 9999;
+    inset-block-start: 0;
+
+    width: 6px;
+    height: 100%;
+
+    &::after {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
+      transform: translateY(-50%);
+
+      width: 6px;
+      height: min(80px, 80%);
+      border: 1px solid color-mix(in srgb, rgb(255, 255, 255) 75%, transparent);
+      border-radius: 3px;
+
+      background-color: color-mix(in srgb, rgb(0, 0, 0) 50%, transparent);
+    }
+  `,
+	resizeHandleLeft: css`
+    inset-inline-start: 8px;
+  `,
+	resizeHandleRight: css`
+    inset-inline-end: 8px;
+  `,
+	scaleInfo: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 11;
+    inset-block-start: 2px;
+    inset-inline-start: 2px;
+
+    padding-block: 2px;
+    padding-inline: 6px;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font-size: 12px;
+    color: white;
+
+    background-color: color-mix(in srgb, rgb(0, 0, 0) 50%, transparent);
+  `
+}));
+//#endregion
+export { styles };

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

@@ -0,0 +1,22 @@
+//#region src/plugins/image/react/components/useSupenseImage.ts
+const imageCache = /* @__PURE__ */ new Map();
+const useSuspenseImage = (src) => {
+	let cached = imageCache.get(src);
+	if (typeof cached === "boolean") return cached;
+	else if (!cached) {
+		cached = new Promise((resolve) => {
+			const img = new Image();
+			img.src = src;
+			img.addEventListener("load", () => resolve(false));
+			img.addEventListener("error", () => resolve(true));
+		}).then((hasError) => {
+			imageCache.set(src, hasError);
+			return hasError;
+		});
+		imageCache.set(src, cached);
+		throw cached;
+	}
+	throw cached;
+};
+//#endregion
+export { useSuspenseImage };

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

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

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

@@ -0,0 +1,31 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/image/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	image: css`
+    cursor: default;
+    user-select: none;
+    position: relative;
+    display: inline-block;
+
+    &.selected {
+      background-color: ${cssVar.colorPrimaryBg};
+    }
+  `,
+	blockImage: css`
+    cursor: default;
+    user-select: none;
+
+    position: relative;
+
+    display: block;
+
+    text-align: center;
+
+    &.selected {
+      background-color: ${cssVar.colorPrimaryBg};
+    }
+  `
+}));
+const imageBroken = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NDAgNDAwIj48cGF0aCBmaWxsPSIjM0IzQjNCIiBkPSJNMCAwaDY0MHY0MDBIMHoiLz48cGF0aCBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTTM3Mi41IDEzMi41aC0xMDVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTV2MTA1YzAgOC4yODQgNi43MTYgMTUgMTUgMTVoMTA1YzguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEwNWMwLTguMjg0LTYuNzE2LTE1LTE1LTE1eiIvPjxwYXRoIHN0cm9rZT0iIzYyNjI2MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1IiBkPSJNMjk3LjUgMTkyLjVjOC4yODQgMCAxNS02LjcxNiAxNS0xNSAwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTguMjg0IDAtMTUgNi43MTYtMTUgMTUgMCA4LjI4NCA2LjcxNiAxNSAxNSAxNXpNMzg3LjUgMjIyLjUwMmwtMjMuMTQ1LTIzLjE0NWExNS4wMDEgMTUuMDAxIDAgMDAtMjEuMjEgMEwyNzUgMjY3LjUwMiIvPjwvc3ZnPg==";
+//#endregion
+export { imageBroken, styles };

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

@@ -0,0 +1,23 @@
+//#region src/plugins/image/react/type.d.ts
+interface ReactImagePluginProps {
+  className?: string;
+  defaultBlockImage?: boolean;
+  handleRehost?: (url: string) => Promise<{
+    url: string;
+  }>;
+  handleUpload?: (file: File) => Promise<{
+    url: string;
+  }>;
+  needRehost?: (url: string) => boolean;
+  /**
+   * Custom file picker for environments where programmatic input.click() is blocked (e.g. Electron).
+   * When provided, this will be called instead of triggering the hidden file input.
+   */
+  onPickFile?: () => Promise<File | null>;
+  theme?: {
+    blockImage?: string;
+    image?: string;
+  };
+}
+//#endregion
+export { ReactImagePluginProps };

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

@@ -0,0 +1,3 @@
+import { INodePlugin, INodePluginOptions } from "./plugin/index.js";
+import { ReactNodePlugin } from "./react/index.js";
+import { INodeService } from "./service/index.js";

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

@@ -0,0 +1,19 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/inode/plugin/index.d.ts
+/**
+ * NodePluginOptions - Configuration options for the Node plugin
+ */
+interface INodePluginOptions {
+  /**
+   * Enable or disable the node data source
+   * @default true
+   */
+  enabled?: boolean;
+}
+/**
+ * LitexmlPlugin - A plugin that provides XML-based data source support
+ * Allows converting between Lexical editor state and XML format
+ */
+declare const INodePlugin: IEditorPluginConstructor<INodePluginOptions>;
+//#endregion
+export { INodePlugin, INodePluginOptions };

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

@@ -0,0 +1,23 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { INodeService, NodeService } from "../service/index.js";
+//#region src/plugins/inode/plugin/index.ts
+init_plugin();
+/**
+* LitexmlPlugin - A plugin that provides XML-based data source support
+* Allows converting between Lexical editor state and XML format
+*/
+const INodePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "INodePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		const nodeService = new NodeService();
+		kernel.registerService(INodeService, nodeService);
+	}
+	onInit() {}
+};
+//#endregion
+export { INodePlugin };

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+
+//#region src/plugins/inode/react/index.d.ts
+declare const ReactNodePlugin: FC<void>;
+//#endregion
+export { ReactNodePlugin };

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

@@ -0,0 +1,15 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { INodePlugin } from "../plugin/index.js";
+import { useLayoutEffect } from "react";
+//#region src/plugins/inode/react/index.tsx
+const ReactNodePlugin = () => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(INodePlugin);
+	}, [editor]);
+	return null;
+};
+ReactNodePlugin.displayName = "ReactNodePlugin";
+//#endregion
+export { ReactNodePlugin as default };

package/es/plugins/inode/service/index.d.ts

@@ -0,0 +1,17 @@
+import { IServiceID } from "../../../types/kernel.js";
+import { IRootNode } from "../../../editor-kernel/inode/root-node.js";
+//#region src/plugins/inode/service/index.d.ts
+interface INodeService {
+  processNodeTree(inode: {
+    root: IRootNode;
+  }): void;
+  registerProcessNodeTree(process: (inode: {
+    root: IRootNode;
+  }) => void): void;
+}
+/**
+ * Service ID for Node service
+ */
+declare const INodeService: IServiceID<INodeService>;
+//#endregion
+export { INodeService };

package/es/plugins/inode/service/index.js

@@ -0,0 +1,22 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+//#region src/plugins/inode/service/index.ts
+/**
+* Service ID for Node service
+*/
+const INodeService = genServiceId("INodeService");
+/**
+* Default implementation of INodeService
+*/
+var NodeService = class {
+	constructor() {
+		this.processNodeTreeHandlers = [];
+	}
+	registerProcessNodeTree(process) {
+		this.processNodeTreeHandlers.push(process);
+	}
+	processNodeTree(inode) {
+		for (const handler of this.processNodeTreeHandlers) handler(inode);
+	}
+};
+//#endregion
+export { INodeService, NodeService };

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

@@ -0,0 +1,10 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor, NodeKey } from "lexical";
+
+//#region src/plugins/link/command/index.d.ts
+declare const INSERT_LINK_COMMAND: _$lexical.LexicalCommand<{
+  title?: string;
+  url?: string;
+}>;
+//#endregion
+export { INSERT_LINK_COMMAND };

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

@@ -0,0 +1,33 @@
+import { $createLinkNode } from "../node/LinkNode.js";
+import { $createTextNode, $getNodeByKey, $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/link/command/index.ts
+const INSERT_LINK_COMMAND = createCommand("INSERT_LINK_COMMAND");
+const UPDATE_LINK_TEXT_COMMAND = createCommand("UPDATE_LINK_TEXT_COMMAND");
+function registerLinkCommand(editor) {
+	return mergeRegister(editor.registerCommand(INSERT_LINK_COMMAND, (payload) => {
+		const { url, title = url } = payload;
+		editor.update(() => {
+			const linkNode = $createLinkNode(url, { title });
+			const textNode = $createTextNode(title);
+			linkNode.append(textNode);
+			$insertNodes([linkNode]);
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(UPDATE_LINK_TEXT_COMMAND, (payload) => {
+		const { key, text } = payload;
+		editor.update(() => {
+			const linkNode = $getNodeByKey(key);
+			if (linkNode) {
+				const newLinkNode = $createLinkNode(linkNode.getURL(), { title: text });
+				const textNode = $createTextNode(text);
+				newLinkNode.append(textNode);
+				linkNode?.replace(newLinkNode);
+				newLinkNode.select(1);
+			}
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR));
+}
+//#endregion
+export { INSERT_LINK_COMMAND, UPDATE_LINK_TEXT_COMMAND, registerLinkCommand };

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

@@ -0,0 +1,5 @@
+import { INSERT_LINK_COMMAND } from "./command/index.js";
+import { LinkPlugin, LinkPluginOptions } from "./plugin/index.js";
+import { ReactLinkPluginProps } from "./react/type.js";
+import { ReactLinkPlugin } from "./react/ReactLinkPlugin.js";
+import { ILinkService } from "./service/i-link-service.js";