@lobehub/editor 4.24.1 → 4.25.1

package/es/plugins/link/node/LinkBlockCardNode.js

@@ -0,0 +1,66 @@
+import { LinkCardNode } from "./LinkCardNode.js";
+import { $applyNodeReplacement } from "lexical";
+//#region src/plugins/link/node/LinkBlockCardNode.ts
+var LinkBlockCardNode = class LinkBlockCardNode extends LinkCardNode {
+	static getType() {
+		return "link-block-card";
+	}
+	static clone(node) {
+		return new LinkBlockCardNode(node.__url, node.__title, node.__icon, node.__description, node.__openTarget, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createLinkBlockCardNode({
+			description: serializedNode.description,
+			icon: serializedNode.icon,
+			openTarget: serializedNode.openTarget,
+			title: serializedNode.title,
+			url: serializedNode.url
+		}).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { a: (node) => {
+			if (node instanceof HTMLAnchorElement && node.dataset.linkCard === "true" && node.dataset.linkCardLayout === "block") return {
+				conversion: $convertLinkBlockCardElement,
+				priority: 3
+			};
+			return null;
+		} };
+	}
+	constructor(url, title, icon, description, openTarget, key) {
+		super(url, title, icon, description, openTarget, key);
+	}
+	createDOM(config, editor) {
+		const element = super.createDOM(config, editor);
+		element.dataset.linkCardLayout = "block";
+		return element;
+	}
+	exportDOM() {
+		const output = super.exportDOM();
+		if (output.element instanceof HTMLElement) output.element.dataset.linkCardLayout = "block";
+		return output;
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode);
+	}
+	isInline() {
+		return false;
+	}
+};
+function $createLinkBlockCardNode(payload) {
+	return $applyNodeReplacement(new LinkBlockCardNode(payload.url, payload.title, payload.icon, payload.description, payload.openTarget));
+}
+function $convertLinkBlockCardElement(domNode) {
+	const element = domNode;
+	return { node: $createLinkBlockCardNode({
+		description: element.dataset.description,
+		icon: element.dataset.icon,
+		openTarget: element.getAttribute("target"),
+		title: element.textContent || element.href,
+		url: element.getAttribute("href") || ""
+	}) };
+}
+function $isLinkBlockCardNode(node) {
+	return node instanceof LinkBlockCardNode || node?.getType?.() === LinkBlockCardNode.getType();
+}
+//#endregion
+export { $createLinkBlockCardNode, $isLinkBlockCardNode, LinkBlockCardNode };

package/es/plugins/link/node/LinkCardNode.d.ts

@@ -0,0 +1,42 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+//#region src/plugins/link/node/LinkCardNode.d.ts
+type SerializedLinkCardNode = Spread<{
+  description: string;
+  icon: string;
+  openTarget: null | string;
+  title: string;
+  url: string;
+}, SerializedLexicalNode>;
+declare class LinkCardNode extends DecoratorNode<unknown> {
+  __url: string;
+  __title: string;
+  __icon: string;
+  __description: string;
+  __openTarget: null | string;
+  static getType(): string;
+  static clone(node: LinkCardNode): LinkCardNode;
+  static importJSON(serializedNode: SerializedLinkCardNode): LinkCardNode;
+  static importDOM(): DOMConversionMap | null;
+  constructor(url: string, title?: string, icon?: string, description?: string, openTarget?: null | string, key?: NodeKey);
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+  updateDOM(): false;
+  isInline(): boolean;
+  isKeyboardSelectable(): true;
+  exportDOM(): DOMExportOutput;
+  exportJSON(): SerializedLinkCardNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLinkCardNode>): this;
+  getTextContent(): string;
+  getURL(): string;
+  setURL(url: string): this;
+  getTitle(): string;
+  setTitle(title?: string): this;
+  getIcon(): string;
+  setIcon(icon?: string): this;
+  getDescription(): string;
+  setDescription(description?: string): this;
+  getOpenTarget(): null | string;
+  setOpenTarget(openTarget?: null | string): this;
+  decorate(editor: LexicalEditor): unknown;
+}
+//#endregion
+export { LinkCardNode, SerializedLinkCardNode };

package/es/plugins/link/node/LinkCardNode.js

@@ -0,0 +1,161 @@
+import { getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND } from "./LinkNode.js";
+import { $applyNodeReplacement, DecoratorNode, createCommand } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/link/node/LinkCardNode.ts
+init_utils();
+const EDIT_LINK_CARD_COMMAND = createCommand();
+var LinkCardNode = class LinkCardNode extends DecoratorNode {
+	static getType() {
+		return "link-card";
+	}
+	static clone(node) {
+		return new LinkCardNode(node.__url, node.__title, node.__icon, node.__description, node.__openTarget, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createLinkCardNode({
+			description: serializedNode.description,
+			icon: serializedNode.icon,
+			openTarget: serializedNode.openTarget,
+			title: serializedNode.title,
+			url: serializedNode.url
+		}).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { a: (node) => {
+			if (node instanceof HTMLAnchorElement && node.dataset.linkCard === "true" && node.dataset.linkCardLayout !== "block") return {
+				conversion: $convertLinkCardElement,
+				priority: 2
+			};
+			return null;
+		} };
+	}
+	constructor(url, title, icon, description, openTarget, key) {
+		super(key);
+		this.__url = url;
+		this.__title = title || url;
+		this.__icon = icon || "";
+		this.__description = description || "";
+		this.__openTarget = openTarget ?? "_blank";
+	}
+	createDOM(config, editor) {
+		const element = document.createElement("span");
+		element.dataset.linkCard = "true";
+		addClassNamesToElement(element, config.theme.linkCard);
+		element.addEventListener("mouseenter", (event) => {
+			if (event.target instanceof HTMLElement) {
+				event.target.classList.add("hover");
+				editor.dispatchCommand(HOVER_LINK_COMMAND, {
+					event,
+					node: this
+				});
+			}
+		});
+		element.addEventListener("mouseleave", (event) => {
+			if (event.target instanceof HTMLElement) {
+				event.target.classList.remove("hover");
+				editor.dispatchCommand(HOVER_OUT_LINK_COMMAND, { event });
+			}
+		});
+		return element;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	isKeyboardSelectable() {
+		return true;
+	}
+	exportDOM() {
+		const element = document.createElement("a");
+		element.dataset.linkCard = "true";
+		element.dataset.icon = this.getIcon();
+		element.dataset.description = this.getDescription();
+		if (this.getOpenTarget()) element.target = this.getOpenTarget();
+		element.href = this.getURL();
+		element.textContent = this.getTitle();
+		return { element };
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			description: this.getDescription(),
+			icon: this.getIcon(),
+			openTarget: this.getOpenTarget(),
+			title: this.getTitle(),
+			url: this.getURL()
+		};
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setURL(serializedNode.url).setTitle(serializedNode.title).setIcon(serializedNode.icon).setDescription(serializedNode.description).setOpenTarget(serializedNode.openTarget ?? "_blank");
+	}
+	getTextContent() {
+		return this.getTitle();
+	}
+	getURL() {
+		return this.getLatest().__url;
+	}
+	setURL(url) {
+		const writable = this.getWritable();
+		writable.__url = url;
+		return writable;
+	}
+	getTitle() {
+		return this.getLatest().__title || this.getURL();
+	}
+	setTitle(title) {
+		const writable = this.getWritable();
+		writable.__title = title || this.getURL();
+		return writable;
+	}
+	getIcon() {
+		return this.getLatest().__icon;
+	}
+	setIcon(icon) {
+		const writable = this.getWritable();
+		writable.__icon = icon || "";
+		return writable;
+	}
+	getDescription() {
+		return this.getLatest().__description;
+	}
+	setDescription(description) {
+		const writable = this.getWritable();
+		writable.__description = description || "";
+		return writable;
+	}
+	getOpenTarget() {
+		return this.getLatest().__openTarget;
+	}
+	setOpenTarget(openTarget) {
+		const writable = this.getWritable();
+		writable.__openTarget = openTarget ?? "_blank";
+		return writable;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator(LinkCardNode.getType());
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		return decorator.render(this, editor);
+	}
+};
+function $createLinkCardNode(payload) {
+	return $applyNodeReplacement(new LinkCardNode(payload.url, payload.title, payload.icon, payload.description, payload.openTarget));
+}
+function $convertLinkCardElement(domNode) {
+	const element = domNode;
+	return { node: $createLinkCardNode({
+		description: element.dataset.description,
+		icon: element.dataset.icon,
+		openTarget: element.getAttribute("target"),
+		title: element.textContent || element.href,
+		url: element.getAttribute("href") || ""
+	}) };
+}
+function $isLinkCardNode(node) {
+	return node instanceof LinkCardNode || node?.getType?.() === LinkCardNode.getType();
+}
+//#endregion
+export { $createLinkCardNode, $isLinkCardNode, EDIT_LINK_CARD_COMMAND, LinkCardNode };

package/es/plugins/link/node/LinkIframeNode.d.ts

@@ -0,0 +1,33 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+//#region src/plugins/link/node/LinkIframeNode.d.ts
+type SerializedLinkIframeNode = Spread<{
+  src: string;
+  title: string;
+  url: string;
+}, SerializedLexicalNode>;
+declare class LinkIframeNode extends DecoratorNode<unknown> {
+  __url: string;
+  __src: string;
+  __title: string;
+  static getType(): string;
+  static clone(node: LinkIframeNode): LinkIframeNode;
+  static importJSON(serializedNode: SerializedLinkIframeNode): LinkIframeNode;
+  static importDOM(): DOMConversionMap | null;
+  constructor(url: string, src?: string, title?: string, key?: NodeKey);
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+  updateDOM(): false;
+  isInline(): false;
+  exportDOM(): DOMExportOutput;
+  exportJSON(): SerializedLinkIframeNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLinkIframeNode>): this;
+  getTextContent(): string;
+  getURL(): string;
+  setURL(url: string): this;
+  getSrc(): string;
+  setSrc(src?: string): this;
+  getTitle(): string;
+  setTitle(title?: string): this;
+  decorate(editor: LexicalEditor): unknown;
+}
+//#endregion
+export { LinkIframeNode, SerializedLinkIframeNode };

package/es/plugins/link/node/LinkIframeNode.js

@@ -0,0 +1,131 @@
+import { getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND } from "./LinkNode.js";
+import { $applyNodeReplacement, DecoratorNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/link/node/LinkIframeNode.ts
+init_utils();
+var LinkIframeNode = class LinkIframeNode extends DecoratorNode {
+	static getType() {
+		return "link-iframe";
+	}
+	static clone(node) {
+		return new LinkIframeNode(node.__url, node.__src, node.__title, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createLinkIframeNode({
+			src: serializedNode.src,
+			title: serializedNode.title,
+			url: serializedNode.url
+		}).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { a: (node) => {
+			if (node instanceof HTMLAnchorElement && node.dataset.linkIframe === "true") return {
+				conversion: $convertLinkIframeElement,
+				priority: 2
+			};
+			return null;
+		} };
+	}
+	constructor(url, src, title, key) {
+		super(key);
+		this.__url = url;
+		this.__src = src || url;
+		this.__title = title || url;
+	}
+	createDOM(config, editor) {
+		const element = document.createElement("div");
+		element.dataset.linkIframe = "true";
+		addClassNamesToElement(element, config.theme.linkIframe);
+		element.addEventListener("mouseenter", (event) => {
+			if (event.target instanceof HTMLElement) {
+				event.target.classList.add("hover");
+				editor.dispatchCommand(HOVER_LINK_COMMAND, {
+					event,
+					node: this
+				});
+			}
+		});
+		element.addEventListener("mouseleave", (event) => {
+			if (event.target instanceof HTMLElement) {
+				event.target.classList.remove("hover");
+				editor.dispatchCommand(HOVER_OUT_LINK_COMMAND, { event });
+			}
+		});
+		return element;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	exportDOM() {
+		const element = document.createElement("a");
+		element.dataset.linkIframe = "true";
+		element.dataset.src = this.getSrc();
+		element.href = this.getURL();
+		element.textContent = this.getTitle();
+		return { element };
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			src: this.getSrc(),
+			title: this.getTitle(),
+			url: this.getURL()
+		};
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setURL(serializedNode.url).setSrc(serializedNode.src).setTitle(serializedNode.title);
+	}
+	getTextContent() {
+		return this.getTitle();
+	}
+	getURL() {
+		return this.getLatest().__url;
+	}
+	setURL(url) {
+		const writable = this.getWritable();
+		writable.__url = url;
+		return writable;
+	}
+	getSrc() {
+		return this.getLatest().__src || this.getURL();
+	}
+	setSrc(src) {
+		const writable = this.getWritable();
+		writable.__src = src || this.getURL();
+		return writable;
+	}
+	getTitle() {
+		return this.getLatest().__title || this.getURL();
+	}
+	setTitle(title) {
+		const writable = this.getWritable();
+		writable.__title = title || this.getURL();
+		return writable;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator(LinkIframeNode.getType());
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		return decorator.render(this, editor);
+	}
+};
+function $createLinkIframeNode(payload) {
+	return $applyNodeReplacement(new LinkIframeNode(payload.url, payload.src, payload.title));
+}
+function $convertLinkIframeElement(domNode) {
+	const element = domNode;
+	return { node: $createLinkIframeNode({
+		src: element.dataset.src,
+		title: element.textContent || element.href,
+		url: element.getAttribute("href") || ""
+	}) };
+}
+function $isLinkIframeNode(node) {
+	return node instanceof LinkIframeNode || node?.getType?.() === LinkIframeNode.getType();
+}
+//#endregion
+export { $createLinkIframeNode, $isLinkIframeNode, LinkIframeNode };

package/es/plugins/link/node/LinkNode.d.ts

@@ -1,9 +1,55 @@
-import { BaseSelection, DOMConversionMap, EditorConfig, ElementNode, LexicalCommand, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, RangeSelection, SerializedElementNode, Spread } from "lexical";
+import { BaseSelection, DOMConversionMap, EditorConfig, ElementDOMSlot, ElementNode, LexicalCommand, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, RangeSelection, SerializedElementNode, Spread } from "lexical";
 //#region src/plugins/link/node/LinkNode.d.ts
 type LinkAttributes = {
   rel?: null | string;
   target?: null | string;
   title?: null | string;
 };
+type SerializedLinkNode = Spread<{
+  url: string;
+}, Spread<LinkAttributes, SerializedElementNode>>;
+type LinkHTMLElementType = HTMLAnchorElement | HTMLSpanElement;
+/** @noInheritDoc */
+declare class LinkNode extends ElementNode {
+  /** @internal */
+  __url: string;
+  /** @internal */
+  __target: null | string;
+  /** @internal */
+  __rel: null | string;
+  /** @internal */
+  __title: null | string;
+  static getType(): string;
+  static clone(node: LinkNode): LinkNode;
+  constructor(url?: string, attributes?: LinkAttributes, key?: NodeKey);
+  createDOM(config: EditorConfig, editor: LexicalEditor): LinkHTMLElementType;
+  updateLinkDOM(prevNode: this | null, anchor: LinkHTMLElementType, _config: EditorConfig): void;
+  updateDOM(prevNode: this, anchor: LinkHTMLElementType, config: EditorConfig): boolean;
+  static importDOM(): DOMConversionMap | null;
+  static importJSON(serializedNode: SerializedLinkNode): LinkNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLinkNode>): this;
+  sanitizeUrl(url: string, allowedProtocols?: Set<string>): string;
+  exportJSON(): SerializedLinkNode | SerializedAutoLinkNode;
+  getURL(): string;
+  setURL(url: string): this;
+  getTarget(): null | string;
+  setTarget(target: null | string): this;
+  getRel(): null | string;
+  setRel(rel: null | string): this;
+  getTitle(): null | string;
+  setTitle(title: null | string): this;
+  insertNewAfter(_: RangeSelection, restoreSelection?: boolean): null | ElementNode;
+  canInsertTextBefore(): false;
+  canInsertTextAfter(): false;
+  canBeEmpty(): false;
+  isInline(): true;
+  extractWithChild(child: LexicalNode, selection: BaseSelection): boolean;
+  isEmailURI(): boolean;
+  isWebSiteURI(): boolean;
+  getDOMSlot(element: HTMLElement): ElementDOMSlot<HTMLElement>;
+}
+type SerializedAutoLinkNode = Spread<{
+  isUnlinked: boolean;
+}, SerializedLinkNode>;
 //#endregion
-export { LinkAttributes };
+export { LinkAttributes, LinkNode, SerializedAutoLinkNode, SerializedLinkNode };

package/es/plugins/link/node/LinkNode.js

@@ -1,5 +1,6 @@
 import { createDebugLogger, init_debug } from "../../../utils/debug.js";
-import { assert, init_utils } from "../../../editor-kernel/utils.js";
+import { assert, getKernelFromEditorConfig, init_utils } from "../../../editor-kernel/utils.js";
+import { ILinkService } from "../service/i-link-service.js";
 import { $applyNodeReplacement, $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $normalizeSelection__EXPERIMENTAL, $setSelection, ElementNode, createCommand } from "lexical";
 import { $findMatchingParent, addClassNamesToElement, isHTMLAnchorElement } from "@lexical/utils";
 //#region src/plugins/link/node/LinkNode.ts
@@ -45,7 +46,7 @@ var LinkNode = class LinkNode extends ElementNode {
 				event.target.classList.add("hover");
 				editor.dispatchCommand(HOVER_LINK_COMMAND, {
 					event,
-					linkNode: this
+					node: this
 				});
 			}
 		});
@@ -59,7 +60,8 @@ var LinkNode = class LinkNode extends ElementNode {
 	}
 	updateLinkDOM(prevNode, anchor, _config) {
 		if (isHTMLAnchorElement(anchor)) {
-			if (!prevNode || prevNode.__url !== this.__url) anchor.href = this.sanitizeUrl(this.__url);
+			const linkService = getLinkServiceFromConfig(_config);
+			if (!prevNode || prevNode.__url !== this.__url) anchor.href = this.sanitizeUrl(this.__url, linkService?.getAllowedProtocols());
 			for (const attr of [
 				"target",
 				"rel",
@@ -90,11 +92,11 @@ var LinkNode = class LinkNode extends ElementNode {
 	updateFromJSON(serializedNode) {
 		return super.updateFromJSON(serializedNode).setURL(serializedNode.url).setRel(serializedNode.rel || null).setTarget(serializedNode.target || null).setTitle(serializedNode.title || null);
 	}
-	sanitizeUrl(url) {
+	sanitizeUrl(url, allowedProtocols = SUPPORTED_URL_PROTOCOLS) {
 		url = formatUrl(url);
 		try {
 			const parsedUrl = new URL(formatUrl(url));
-			if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) return "about:blank";
+			if (!allowedProtocols.has(parsedUrl.protocol)) return "about:blank";
 		} catch {
 			return url;
 		}
@@ -174,7 +176,13 @@ var LinkNode = class LinkNode extends ElementNode {
 	isWebSiteURI() {
 		return this.__url.startsWith("https://") || this.__url.startsWith("http://");
 	}
+	getDOMSlot(element) {
+		return super.getDOMSlot(element);
+	}
 };
+function getLinkServiceFromConfig(config) {
+	return getKernelFromEditorConfig(config)?.requireService(ILinkService) || null;
+}
 function $convertAnchorElement(domNode) {
 	let node = null;
 	if (isHTMLAnchorElement(domNode)) {
@@ -202,7 +210,7 @@ function $createLinkNode(url = "", attributes) {
 * @returns true if node is a LinkNode, false otherwise.
 */
 function $isLinkNode(node) {
-	return node instanceof LinkNode;
+	return node instanceof LinkNode || node?.getType?.() === "link" || node?.getType?.() === "autolink";
 }
 var AutoLinkNode = class AutoLinkNode extends LinkNode {
 	constructor(url = "", attributes = {}, key) {

package/es/plugins/link/node/SchemaNode.d.ts

@@ -0,0 +1,36 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+//#region src/plugins/link/node/SchemaNode.d.ts
+type SerializedSchemaNode = Spread<{
+  payload?: unknown;
+  schemaType: string;
+  title: string;
+  url: string;
+}, SerializedLexicalNode>;
+declare class SchemaNode extends DecoratorNode<unknown> {
+  __url: string;
+  __schemaType: string;
+  __payload: unknown;
+  __title: string;
+  static getType(): string;
+  static clone(node: SchemaNode): SchemaNode;
+  static importJSON(serializedNode: SerializedSchemaNode): SchemaNode;
+  static importDOM(): DOMConversionMap | null;
+  constructor(url: string, schemaType?: string, payload?: unknown, title?: string, key?: NodeKey);
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+  updateDOM(): false;
+  exportDOM(): DOMExportOutput;
+  exportJSON(): SerializedSchemaNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedSchemaNode>): this;
+  getTextContent(): string;
+  getURL(): string;
+  setURL(url: string): this;
+  getSchemaType(): string;
+  setSchemaType(schemaType?: string): this;
+  getPayload(): unknown;
+  setPayload(payload: unknown): this;
+  getTitle(): string;
+  setTitle(title?: string): this;
+  decorate(editor: LexicalEditor): unknown;
+}
+//#endregion
+export { SchemaNode, SerializedSchemaNode };