@lobehub/editor 4.24.1 → 4.25.0

package/es/plugins/link/react/renderer-registry.d.ts

@@ -0,0 +1,81 @@
+import { LinkCardNode } from "../node/LinkCardNode.js";
+import { LinkIframeNode } from "../node/LinkIframeNode.js";
+import { LinkNode } from "../node/LinkNode.js";
+import { SchemaNode } from "../node/SchemaNode.js";
+import { ParsedSchemaUrl, SchemaRule } from "../service/i-link-service.js";
+import { FC, MouseEventHandler, ReactEventHandler, ReactNode } from "react";
+import EventEmitter from "eventemitter3";
+import { LexicalEditor } from "lexical";
+//#region src/plugins/link/react/renderer-registry.d.ts
+interface LinkCardRendererProps {
+  description: string;
+  editor: LexicalEditor;
+  icon: string;
+  isLoading: boolean;
+  isSelected: boolean;
+  layout: 'block' | 'inline';
+  node: LinkCardNode;
+  onClickCapture: MouseEventHandler<HTMLElement>;
+  onMouseDownCapture: MouseEventHandler<HTMLElement>;
+  openTarget: null | string;
+  title: string;
+  url: string;
+}
+interface LinkIframeRendererProps {
+  editor: LexicalEditor;
+  isEditable: boolean;
+  isLoading: boolean;
+  isSelected: boolean;
+  node: LinkIframeNode;
+  onLoad: ReactEventHandler<HTMLIFrameElement>;
+  onMouseDownCapture: MouseEventHandler<HTMLElement>;
+  src: string;
+  title: string;
+  url: string;
+}
+interface SchemaRendererProps {
+  editor: LexicalEditor;
+  node: SchemaNode;
+  payload: unknown;
+  schema: ParsedSchemaUrl | null;
+  schemaType: string;
+  title: string;
+  url: string;
+}
+type LinkCardRenderer = (props: LinkCardRendererProps) => ReactNode;
+type LinkIframeRenderer = (props: LinkIframeRendererProps) => ReactNode;
+type SchemaRenderer = (props: SchemaRendererProps) => ReactNode;
+interface SchemaLinkRendererProps {
+  editor: LexicalEditor;
+  node: LinkNode;
+  rel: null | string;
+  schema: ParsedSchemaUrl | null;
+  target: null | string;
+  text: string;
+  title: null | string;
+  url: string;
+}
+type SchemaLinkRenderer = (props: SchemaLinkRendererProps) => ReactNode;
+/** @deprecated Use schemaRules/renderSchema with SchemaNode instead. */
+interface SchemaLinkRendererConfig {
+  protocol: string;
+  render: SchemaLinkRenderer;
+}
+interface ReactSchemaRule extends SchemaRule {
+  render?: SchemaRenderer;
+}
+interface LinkToolbarAction {
+  icon?: FC<any>;
+  key: string;
+  label: string;
+  onClick: (context: {
+    editor: LexicalEditor;
+    node: LinkNode | LinkCardNode | LinkIframeNode | SchemaNode;
+  }) => void;
+  visible?: (context: {
+    editor: LexicalEditor;
+    node: LinkNode | LinkCardNode | LinkIframeNode | SchemaNode;
+  }) => boolean;
+}
+//#endregion
+export { LinkCardRenderer, LinkCardRendererProps, LinkIframeRenderer, LinkIframeRendererProps, LinkToolbarAction, ReactSchemaRule, SchemaLinkRenderer, SchemaLinkRendererConfig, SchemaLinkRendererProps, SchemaRenderer, SchemaRendererProps };

package/es/plugins/link/react/renderer-registry.js

@@ -0,0 +1,80 @@
+import { normalizeProtocol } from "../service/i-link-service.js";
+import EventEmitter from "eventemitter3";
+//#region src/plugins/link/react/renderer-registry.ts
+var LinkReactRendererRegistry = class extends EventEmitter {
+	constructor(..._args) {
+		super(..._args);
+		this.schemaLinkRenderers = /* @__PURE__ */ new Map();
+		this.schemaRenderers = /* @__PURE__ */ new Map();
+	}
+	update(config) {
+		this.renderCard = config?.renderLinkCard;
+		this.renderIframe = config?.renderLinkIframe;
+		this.renderSchema = config?.renderSchema;
+		this.schemaRenderers = config?.schemaRenderers || /* @__PURE__ */ new Map();
+		this.schemaLinkRenderers = new Map((config?.schemaLinkRenderers || []).map(({ protocol, render }) => [normalizeProtocol(protocol), render]));
+		this.emit("change");
+	}
+	renderCardNode(props) {
+		return this.renderCard?.(props) || null;
+	}
+	renderIframeNode(props) {
+		return this.renderIframe?.(props) || null;
+	}
+	renderSchemaNode(props) {
+		return this.schemaRenderers.get(props.schemaType)?.(props) || this.renderSchema?.(props) || null;
+	}
+	renderLegacySchemaLink(props) {
+		const renderer = this.getSchemaLinkRenderer(props.url);
+		if (!renderer) return null;
+		const legacy = getLegacyLinkPayload(props.payload);
+		return renderer({
+			editor: props.editor,
+			node: props.node,
+			rel: legacy.rel,
+			schema: props.schema,
+			target: legacy.target,
+			text: legacy.text || props.title,
+			title: legacy.title || props.title,
+			url: props.url
+		});
+	}
+	getSchemaLinkRenderer(url) {
+		try {
+			const { protocol } = new URL(url);
+			return this.schemaLinkRenderers.get(protocol) || null;
+		} catch {
+			return null;
+		}
+	}
+};
+function splitReactSchemaRules(rules) {
+	if (!rules) return { schemaRenderers: /* @__PURE__ */ new Map() };
+	const schemaRenderers = /* @__PURE__ */ new Map();
+	return {
+		coreRules: rules.map(({ render, ...rule }) => {
+			if (render) schemaRenderers.set(rule.id, render);
+			return rule;
+		}),
+		schemaRenderers
+	};
+}
+function getLegacyLinkPayload(payload) {
+	if (payload && typeof payload === "object" && "__legacyLink" in payload) {
+		const legacy = payload.__legacyLink;
+		return {
+			rel: typeof legacy?.rel === "string" ? legacy.rel : null,
+			target: typeof legacy?.target === "string" ? legacy.target : null,
+			text: typeof legacy?.text === "string" ? legacy.text : "",
+			title: typeof legacy?.title === "string" ? legacy.title : null
+		};
+	}
+	return {
+		rel: null,
+		target: null,
+		text: "",
+		title: null
+	};
+}
+//#endregion
+export { LinkReactRendererRegistry, splitReactSchemaRules };

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

@@ -15,6 +15,31 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       margin-inline: 0;
       padding: 2px;
       border: none;
+    `,
+		linkCard: css`
+      user-select: none;
+
+      display: inline-block;
+
+      /* Inline decorator wrappers otherwise use the untruncated title as
+         their intrinsic width even when the rendered card is capped at 320px. */
+      max-width: min(320px, 100%);
+      border-radius: 5px;
+
+      line-height: 1;
+      vertical-align: baseline;
+
+      &[data-link-card-layout='block'] {
+        display: block;
+        max-width: 100%;
+        margin-block: 8px;
+      }
+
+      &.hover,
+      &.selected {
+        outline: 2px solid ${cssVar.colorPrimaryBorder};
+        outline-offset: 1px;
+      }
     `,
 		linkEdit: cx(position, css`
         min-width: 320px;
@@ -24,10 +49,47 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 		linkEditFooter: css`
       border-block-start: 1px solid ${cssVar.colorBorderSecondary};
       background: ${cssVar.colorFillQuaternary};
+    `,
+		linkIframe: css`
+      margin-block: 8px;
     `,
 		linkToolbar: cx(position, css`
+        position: fixed;
+
+        overflow: hidden;
+
+        padding-block: 6px;
+        padding-inline: 10px;
+        border: 1px solid ${cssVar.colorBorder};
+        border-radius: 6px;
+
         background: ${cssVar.colorBgElevated};
-      `)
+        box-shadow: ${cssVar.boxShadowSecondary};
+      `),
+		popoverActionItem: css`
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: 0;
+      border-radius: ${cssVar.borderRadius}px;
+
+      color: inherit;
+
+      background: transparent;
+
+      &:hover {
+        background: ${cssVar.colorFillQuaternary};
+      }
+    `,
+		schemaLink: css`
+      margin-block: 8px;
+    `
 	};
 });
 //#endregion

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

@@ -1,13 +1,36 @@
 import { LinkAttributes } from "../node/LinkNode.js";
+import { LinkEmbedRule, LinkLabels } from "../service/i-link-service.js";
+import { LinkCardRenderer, LinkIframeRenderer, LinkToolbarAction, ReactSchemaRule, SchemaLinkRendererConfig, SchemaRenderer } from "./renderer-registry.js";
 //#region src/plugins/link/react/type.d.ts
+type ReactLinkDefaultToolbarItemKey = 'copy' | 'edit' | 'open' | 'unlink';
+type ReactLinkDefaultToolbarItems = boolean | Partial<Record<ReactLinkDefaultToolbarItemKey, boolean>>;
 interface ReactLinkPluginProps {
+  allowedProtocols?: string[];
+  /** Registration-time option. Remount ReactLinkPlugin to apply changes. */
   attributes?: LinkAttributes;
   className?: string;
+  defaultToolbarItems?: ReactLinkDefaultToolbarItems;
+  /** Registration-time option. Remount ReactLinkPlugin to apply changes. */
   enableHotkey?: boolean;
+  labels?: Partial<LinkLabels>;
+  linkEmbedRules?: LinkEmbedRule[];
+  /** Registration-time normalization strategy. Defaults to true for legacy compatibility. */
+  normalizeSchemaLinks?: boolean;
+  renderLinkCard?: LinkCardRenderer;
+  renderLinkIframe?: LinkIframeRenderer;
+  renderSchema?: SchemaRenderer;
+  schemaLinkRenderers?: SchemaLinkRendererConfig[];
+  schemaRules?: ReactSchemaRule[];
+  /** Registration-time option. Remount ReactLinkPlugin to apply changes. */
   theme?: {
     link?: string;
+    linkCard?: string;
+    linkIframe?: string;
+    schemaLink?: string;
   };
+  toolbarActions?: LinkToolbarAction[];
+  /** Registration-time option. Remount ReactLinkPlugin to apply changes. */
   validateUrl?: (url: string) => boolean;
 }
 //#endregion
-export { ReactLinkPluginProps };
+export { ReactLinkDefaultToolbarItemKey, ReactLinkDefaultToolbarItems, ReactLinkPluginProps };

package/es/plugins/link/service/i-link-service.d.ts

@@ -1,10 +1,165 @@
 import { IServiceID } from "../../../types/kernel.js";
 import "../../../types/index.js";
+import { LinkCardNode } from "../node/LinkCardNode.js";
+import { LinkIframeNode } from "../node/LinkIframeNode.js";
+import { LinkNode } from "../node/LinkNode.js";
+import { SchemaNode } from "../node/SchemaNode.js";
+import { LinkBlockCardNode } from "../node/LinkBlockCardNode.js";
 import EventEmitter from "eventemitter3";
+import { LexicalEditor, LexicalNode } from "lexical";
 //#region src/plugins/link/service/i-link-service.d.ts
+interface ParsedSchemaUrl {
+  hash: string;
+  host: string;
+  params: Record<string, string>;
+  pathname: string;
+  protocol: string;
+  raw: string;
+  search: string;
+}
+interface LinkRuleContext {
+  editor: LexicalEditor;
+  text: string;
+  title: string;
+}
+interface LinkCardPayload {
+  description?: string;
+  icon?: string;
+  openTarget?: null | string;
+  title?: string;
+  url?: string;
+}
+interface LinkIframePayload {
+  src?: string;
+  title?: string;
+  url?: string;
+}
+interface SchemaPayload {
+  payload?: unknown;
+  schemaType?: string;
+  title?: string;
+  url?: string;
+}
+interface LinkEmbedRule {
+  allowBlockCard?: boolean;
+  allowCard?: boolean;
+  allowIframe?: boolean;
+  getCardPayload?: (url: string, context: LinkRuleContext) => LinkCardPayload | Promise<LinkCardPayload>;
+  getIframePayload?: (url: string, context: LinkRuleContext) => LinkIframePayload;
+  id: string;
+  match: (url: string, context: LinkRuleContext) => boolean;
+}
+interface SchemaRule {
+  id: string;
+  match: (url: string, context: LinkRuleContext & {
+    schema: ParsedSchemaUrl | null;
+  }) => boolean;
+  parse?: (url: string, schema: ParsedSchemaUrl | null) => SchemaPayload | unknown;
+}
+interface LinkLabels {
+  convertToBlockCard: string;
+  convertToCard: string;
+  convertToIframe: string;
+  convertToLink: string;
+  convertToSchema: string;
+}
+type LinkToolbarNode = LinkNode | LinkCardNode | LinkBlockCardNode | LinkIframeNode | SchemaNode;
+interface LinkToolbarActionContext {
+  editor: LexicalEditor;
+  node: LinkToolbarNode;
+}
+interface LinkToolbarAction {
+  icon?: unknown;
+  key: string;
+  label: string;
+  onClick: (context: LinkToolbarActionContext) => void;
+  visible?: (context: LinkToolbarActionContext) => boolean;
+}
+/** @deprecated Use schemaRules with SchemaNode instead. React rendering lives in the React plugin. */
+interface SchemaLinkRendererConfig {
+  protocol: string;
+}
+interface LinkServiceConfig {
+  allowedProtocols?: string[];
+  labels?: Partial<LinkLabels>;
+  linkEmbedRules?: LinkEmbedRule[];
+  schemaLinkRenderers?: SchemaLinkRendererConfig[];
+  schemaRules?: SchemaRule[];
+  toolbarActions?: LinkToolbarAction[];
+}
+type LinkToolbarItemIcon = 'copy' | 'edit' | 'open' | 'unlink';
+interface LinkToolbarRenderContext {
+  close: () => void;
+  editor: LexicalEditor;
+  linkDom: HTMLElement | null;
+  linkNode: LinkNode;
+}
+interface LinkToolbarItem {
+  icon: LinkToolbarItemIcon;
+  key: string;
+  label: string | ((context: LinkToolbarRenderContext) => string);
+  onClick: (context: LinkToolbarRenderContext) => void | Promise<void>;
+  order?: number;
+  when?: (context: LinkToolbarRenderContext) => boolean;
+}
 interface ILinkService {
+  readonly enableLinkToolbar: boolean;
+  getAllowedProtocols(): Set<string>;
+  getEmbedRule(url: string, context: LinkRuleContext): LinkEmbedRule | null;
+  getLabels(): LinkLabels;
+  getSchemaRule(url: string, context: LinkRuleContext & {
+    schema?: ParsedSchemaUrl | null;
+  }): SchemaRule | null;
+  getToolbarActions(context: LinkToolbarActionContext): LinkToolbarAction[];
+  getToolbarItems(context: LinkToolbarRenderContext): LinkToolbarItem[];
+  hasSchemaLinkRenderer(url: string): boolean;
+  isCardMetadataLoading(nodeKey: string): boolean;
+  parseSchemaUrl(url: string): ParsedSchemaUrl | null;
+  registerToolbarItem(item: LinkToolbarItem): () => void;
+  restoreLinkToolbar(token: symbol): void;
   setLinkToolbar(enable: boolean): void;
+  subscribe(listener: () => void): () => void;
+  subscribeCardMetadata(listener: () => void): () => void;
+  suppressLinkToolbar(reason?: string): symbol;
+  updateConfig(config?: LinkServiceConfig): void;
 }
 declare const ILinkService: IServiceID<ILinkService>;
+declare class LinkService extends EventEmitter<'cardMetadataChange' | 'change' | 'linkToolbarChange'> implements ILinkService {
+  private cardMetadataLoadingKeys;
+  private protocolPolicy;
+  private legacySchemaLinkRegistry;
+  private ruleRegistry;
+  private toolbarController;
+  private toolbarItems;
+  get enableLinkToolbar(): boolean;
+  getAllowedProtocols(): Set<string>;
+  getEmbedRule(url: string, context: LinkRuleContext): LinkEmbedRule | null;
+  getLabels(): LinkLabels;
+  hasSchemaLinkRenderer(url: string): boolean;
+  isCardMetadataLoading(nodeKey: string): boolean;
+  setCardMetadataLoading(nodeKey: string, loading: boolean): void;
+  getSchemaRule(url: string, context: LinkRuleContext & {
+    schema?: ParsedSchemaUrl | null;
+  }): SchemaRule | null;
+  getToolbarActions(context: LinkToolbarActionContext): LinkToolbarAction[];
+  parseSchemaUrl(url: string): ParsedSchemaUrl | null;
+  updateConfig(config?: LinkServiceConfig): void;
+  setAllowedProtocols(protocols: string[]): void;
+  setEmbedRules(rules?: LinkEmbedRule[]): void;
+  setLabels(labels?: Partial<LinkLabels>): void;
+  setSchemaLinkRenderers(renderers?: SchemaLinkRendererConfig[]): void;
+  setSchemaRules(rules?: SchemaRule[]): void;
+  setToolbarActions(actions?: LinkToolbarAction[]): void;
+  getToolbarItems(context: LinkToolbarRenderContext): LinkToolbarItem[];
+  registerToolbarItem(item: LinkToolbarItem): () => void;
+  setLinkToolbar(enable: boolean): void;
+  suppressLinkToolbar(reason?: string): symbol;
+  restoreLinkToolbar(token: symbol): void;
+  subscribe(listener: () => void): () => void;
+  subscribeCardMetadata(listener: () => void): () => void;
+}
+declare function normalizeProtocol(protocol: string): string;
+declare function getNodeUrl(node: LexicalNode): string;
+declare function getNodeTitle(node: LexicalNode): string;
 //#endregion
-export { ILinkService };
+export { ILinkService, LinkCardPayload, LinkEmbedRule, LinkIframePayload, LinkLabels, LinkRuleContext, LinkService, LinkServiceConfig, LinkToolbarAction, LinkToolbarActionContext, LinkToolbarItem, LinkToolbarItemIcon, LinkToolbarNode, LinkToolbarRenderContext, ParsedSchemaUrl, SchemaLinkRendererConfig, SchemaPayload, SchemaRule, getNodeTitle, getNodeUrl, normalizeProtocol };