@lobehub/editor 4.24.0 → 4.25.0

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

@@ -0,0 +1,47 @@
+import { IServiceID } from "../../../types/kernel.js";
+import "../../../types/index.js";
+import { Doc } from "yjs";
+import { Binding, Provider, UserState } from "@lexical/yjs";
+//#region src/plugins/yjs/service/index.d.ts
+interface YjsAwarenessUser {
+  clientId: number;
+  state: UserState;
+}
+interface YjsPluginState {
+  binding: Binding;
+  doc: Doc | undefined;
+  docMap: Map<string, Doc>;
+  id: string;
+  provider: Provider;
+}
+type YjsPluginStateListener = (state: YjsPluginState | null) => void;
+type YjsAwarenessUsersListener = (users: YjsAwarenessUser[]) => void;
+declare class YjsService {
+  private awarenessUsers;
+  private awarenessUsersListeners;
+  private listeners;
+  private state;
+  getAwarenessUsers(): YjsAwarenessUser[];
+  getState(): YjsPluginState | null;
+  /**
+   * Apply a server-produced editor snapshot to the shared document exactly once.
+   *
+   * A normal `IEditor.setDocument` call replaces the local Lexical state without
+   * knowing about the Yjs binding. When the binding sees that state it can treat
+   * every imported node as a new local node and append a second copy to the
+   * shared tree. This path first hydrates from the shared tree, then applies the
+   * snapshot with the collaboration-skip tag and replaces the shared root in a
+   * single Yjs transaction. A second client receiving the same snapshot
+   * therefore becomes a no-op.
+   *
+   * @returns whether the shared document was changed
+   */
+  applyExternalEditorData(editorData: Record<string, unknown>): boolean;
+  setAwarenessUsers(users: YjsAwarenessUser[]): void;
+  setState(state: YjsPluginState | null): void;
+  subscribeAwarenessUsers(listener: YjsAwarenessUsersListener): () => void;
+  subscribe(listener: YjsPluginStateListener): () => void;
+}
+declare const IYjsService: IServiceID<YjsService>;
+//#endregion
+export { IYjsService, YjsAwarenessUser, YjsPluginState, YjsService };

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

@@ -0,0 +1,84 @@
+import { createEmptyPreviousEditorState } from "../plugin/utils/editor-state.js";
+import { hydrateLexicalFromYjsState, syncCurrentEditorStateToYjs } from "../plugin/utils/sync.js";
+import { SKIP_COLLAB_TAG } from "lexical";
+//#region src/plugins/yjs/service/index.ts
+const serializeComparableEditorState = (state) => {
+	const serialized = state.toJSON();
+	if (serialized.root?.direction === "ltr") serialized.root.direction = null;
+	return JSON.stringify(serialized);
+};
+var YjsService = class {
+	constructor() {
+		this.awarenessUsers = [];
+		this.awarenessUsersListeners = /* @__PURE__ */ new Set();
+		this.listeners = /* @__PURE__ */ new Set();
+		this.state = null;
+	}
+	getAwarenessUsers() {
+		return this.awarenessUsers;
+	}
+	getState() {
+		return this.state;
+	}
+	/**
+	* Apply a server-produced editor snapshot to the shared document exactly once.
+	*
+	* A normal `IEditor.setDocument` call replaces the local Lexical state without
+	* knowing about the Yjs binding. When the binding sees that state it can treat
+	* every imported node as a new local node and append a second copy to the
+	* shared tree. This path first hydrates from the shared tree, then applies the
+	* snapshot with the collaboration-skip tag and replaces the shared root in a
+	* single Yjs transaction. A second client receiving the same snapshot
+	* therefore becomes a no-op.
+	*
+	* @returns whether the shared document was changed
+	*/
+	applyExternalEditorData(editorData) {
+		const state = this.state;
+		if (!state) return false;
+		const { binding, provider } = state;
+		const hasSharedState = !binding.root.isEmpty() || binding.root._xmlText._length > 0;
+		if (hasSharedState && binding.root.isEmpty()) hydrateLexicalFromYjsState(binding, { discrete: true });
+		const previousEditorState = binding.editor.getEditorState();
+		const nextEditorState = binding.editor.parseEditorState(JSON.stringify(editorData));
+		const isSameState = serializeComparableEditorState(previousEditorState) === serializeComparableEditorState(nextEditorState);
+		if (hasSharedState && isSameState) return false;
+		binding.editor.setEditorState(nextEditorState, { tag: SKIP_COLLAB_TAG });
+		const replaceSharedState = () => {
+			const collabRoot = binding.root;
+			const sharedType = binding.root.getSharedType();
+			if (sharedType.length > 0) sharedType.delete(0, sharedType.length);
+			collabRoot._children.length = 0;
+			binding.collabNodeMap.clear();
+			syncCurrentEditorStateToYjs(binding, provider, createEmptyPreviousEditorState(binding.editor));
+		};
+		if (state.doc) state.doc.transact(replaceSharedState, binding);
+		else replaceSharedState();
+		return true;
+	}
+	setAwarenessUsers(users) {
+		this.awarenessUsers = users;
+		this.awarenessUsersListeners.forEach((listener) => listener(users));
+	}
+	setState(state) {
+		this.state = state;
+		this.listeners.forEach((listener) => listener(state));
+	}
+	subscribeAwarenessUsers(listener) {
+		this.awarenessUsersListeners.add(listener);
+		listener(this.awarenessUsers);
+		return () => {
+			this.awarenessUsersListeners.delete(listener);
+		};
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		listener(this.state);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+};
+const IYjsService = { __serviceId: "YjsService" };
+//#endregion
+export { IYjsService, YjsService };

package/es/plugins/yjs/websocket-provider.d.ts

@@ -0,0 +1,78 @@
+import { Doc } from "yjs";
+import { Provider, ProviderAwareness, UserState } from "@lexical/yjs";
+//#region src/plugins/yjs/websocket-provider.d.ts
+interface CreateWebSocketYjsProviderOptions {
+  wsBaseUrl?: string;
+}
+type WebSocketYjsProviderStatus = 'connected' | 'connecting' | 'disconnected' | 'reconnecting';
+type ProviderEventMap = {
+  reload: (doc: Doc) => void;
+  status: (event: {
+    status: WebSocketYjsProviderStatus;
+  }) => void;
+  sync: (isSynced: boolean) => void;
+  update: (event: unknown) => void;
+};
+type AwarenessMessage = {
+  sender: number;
+  state: UserState | null;
+  type: 'awareness';
+};
+type UpdateMessage = {
+  sender: number;
+  type: 'update';
+  update: string;
+};
+type ClientWebSocketMessage = AwarenessMessage | UpdateMessage | {
+  stateVector: string;
+  type: 'sync-request';
+};
+declare class WebSocketAwareness implements ProviderAwareness {
+  private clientId;
+  private send;
+  private listeners;
+  private localState;
+  private states;
+  constructor(clientId: number, send: (message: ClientWebSocketMessage) => void);
+  getLocalState(): UserState | null;
+  getStates(): Map<number, UserState>;
+  off(type: 'update', cb: () => void): void;
+  on(type: 'update', cb: () => void): void;
+  setLocalState(state: UserState | null): void;
+  setLocalStateField(field: string, value: unknown): void;
+  updateRemoteState(clientId: number, state: UserState | null): void;
+  private emitUpdate;
+}
+declare class WebSocketYjsProvider implements Provider {
+  private id;
+  private doc;
+  private wsBaseUrl;
+  awareness: WebSocketAwareness;
+  private listeners;
+  private reconnectAttempt;
+  private reconnectTimer;
+  private shouldConnect;
+  private socket;
+  private updateHandler;
+  constructor(id: string, doc: Doc, wsBaseUrl?: string);
+  connect(): void;
+  disconnect(): void;
+  off<T extends keyof ProviderEventMap>(type: T, cb: ProviderEventMap[T]): void;
+  on<T extends keyof ProviderEventMap>(type: T, cb: ProviderEventMap[T]): void;
+  private clearReconnectTimer;
+  private emit;
+  private getReconnectDelay;
+  private openSocket;
+  private publishLocalDocumentState;
+  private requestServerDocumentState;
+  private scheduleReconnect;
+  private handleClose;
+  private handleMessage;
+  private send;
+}
+declare function createWebSocketYjsProvider(id: string, yjsDocMap: Map<string, Doc>, options?: CreateWebSocketYjsProviderOptions): WebSocketYjsProvider;
+declare function fetchWebSocketDemoDocument(id: string): Promise<unknown>;
+declare function saveWebSocketDemoDocument(id: string, content: unknown): Promise<void>;
+declare function snapshotWebSocketDemoDocument(id: string, content: unknown): void;
+//#endregion
+export { CreateWebSocketYjsProviderOptions, WebSocketYjsProvider, WebSocketYjsProviderStatus, createWebSocketYjsProvider, fetchWebSocketDemoDocument, saveWebSocketDemoDocument, snapshotWebSocketDemoDocument };

package/es/plugins/yjs/websocket-provider.js

@@ -0,0 +1,263 @@
+import { Doc, applyUpdate, encodeStateAsUpdate, encodeStateVector } from "yjs";
+//#region src/plugins/yjs/websocket-provider.ts
+const DEFAULT_HTTP_BASE_URL = "http://localhost:12345";
+const DEFAULT_WS_BASE_URL = "ws://localhost:12345";
+const MAX_RECONNECT_DELAY_MS = 1e4;
+const MIN_RECONNECT_DELAY_MS = 500;
+function encodeUint8Array(update) {
+	let binary = "";
+	const chunkSize = 8192;
+	for (let index = 0; index < update.length; index += chunkSize) binary += String.fromCharCode(...update.slice(index, index + chunkSize));
+	return window.btoa(binary);
+}
+function decodeUint8Array(value) {
+	const binary = window.atob(value);
+	const update = new Uint8Array(binary.length);
+	for (let index = 0; index < binary.length; index += 1) update[index] = binary.charCodeAt(index);
+	return update;
+}
+var WebSocketAwareness = class {
+	constructor(clientId, send) {
+		this.clientId = clientId;
+		this.send = send;
+		this.listeners = /* @__PURE__ */ new Set();
+		this.localState = null;
+		this.states = /* @__PURE__ */ new Map();
+	}
+	getLocalState() {
+		return this.localState;
+	}
+	getStates() {
+		return this.states;
+	}
+	off(type, cb) {
+		if (type === "update") this.listeners.delete(cb);
+	}
+	on(type, cb) {
+		if (type === "update") this.listeners.add(cb);
+	}
+	setLocalState(state) {
+		this.localState = state;
+		if (state) this.states.set(this.clientId, state);
+		else this.states.delete(this.clientId);
+		this.emitUpdate();
+		this.send({
+			sender: this.clientId,
+			state,
+			type: "awareness"
+		});
+	}
+	setLocalStateField(field, value) {
+		const nextState = {
+			...this.localState,
+			[field]: value
+		};
+		this.setLocalState(nextState);
+	}
+	updateRemoteState(clientId, state) {
+		if (clientId === this.clientId) return;
+		if (state) this.states.set(clientId, state);
+		else this.states.delete(clientId);
+		this.emitUpdate();
+	}
+	emitUpdate() {
+		this.listeners.forEach((listener) => listener());
+	}
+};
+var WebSocketYjsProvider = class {
+	constructor(id, doc, wsBaseUrl = DEFAULT_WS_BASE_URL) {
+		this.id = id;
+		this.doc = doc;
+		this.wsBaseUrl = wsBaseUrl;
+		this.listeners = {
+			reload: /* @__PURE__ */ new Set(),
+			status: /* @__PURE__ */ new Set(),
+			sync: /* @__PURE__ */ new Set(),
+			update: /* @__PURE__ */ new Set()
+		};
+		this.reconnectAttempt = 0;
+		this.reconnectTimer = null;
+		this.shouldConnect = false;
+		this.socket = null;
+		this.updateHandler = (update, origin) => {
+			if (origin === this) return;
+			this.send({
+				sender: this.doc.clientID,
+				type: "update",
+				update: encodeUint8Array(update)
+			});
+		};
+		this.awareness = new WebSocketAwareness(this.doc.clientID, (message) => this.send(message));
+	}
+	connect() {
+		this.shouldConnect = true;
+		if (this.socket || this.reconnectTimer) return;
+		this.openSocket("connecting");
+	}
+	disconnect() {
+		this.shouldConnect = false;
+		this.clearReconnectTimer();
+		if (!this.socket) return;
+		this.awareness.setLocalState(null);
+		this.doc.off("update", this.updateHandler);
+		this.socket.close();
+		this.socket = null;
+		this.emit("sync", false);
+		this.emit("status", { status: "disconnected" });
+	}
+	off(type, cb) {
+		this.listeners[type].delete(cb);
+	}
+	on(type, cb) {
+		this.listeners[type].add(cb);
+	}
+	clearReconnectTimer() {
+		if (!this.reconnectTimer) return;
+		clearTimeout(this.reconnectTimer);
+		this.reconnectTimer = null;
+	}
+	emit(type, ...args) {
+		this.listeners[type].forEach((listener) => {
+			listener(...args);
+		});
+	}
+	getReconnectDelay() {
+		const exponentialDelay = MIN_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempt;
+		const jitter = Math.floor(Math.random() * MIN_RECONNECT_DELAY_MS);
+		return Math.min(exponentialDelay + jitter, MAX_RECONNECT_DELAY_MS);
+	}
+	openSocket(status) {
+		const socket = new WebSocket(`${this.wsBaseUrl}/collaboration/${encodeURIComponent(this.id)}?clientId=${this.doc.clientID}`);
+		this.socket = socket;
+		socket.binaryType = "arraybuffer";
+		this.emit("status", { status });
+		socket.addEventListener("open", () => {
+			if (this.socket !== socket) {
+				socket.close();
+				return;
+			}
+			this.reconnectAttempt = 0;
+			this.doc.on("update", this.updateHandler);
+			this.emit("status", { status: "connected" });
+			this.requestServerDocumentState();
+			const localState = this.awareness.getLocalState();
+			if (localState) this.send({
+				sender: this.doc.clientID,
+				state: localState,
+				type: "awareness"
+			});
+		});
+		socket.addEventListener("message", (event) => this.handleMessage(socket, event));
+		socket.addEventListener("close", () => this.handleClose(socket));
+		socket.addEventListener("error", () => {
+			this.emit("status", { status: "disconnected" });
+		});
+	}
+	publishLocalDocumentState() {
+		this.send({
+			sender: this.doc.clientID,
+			type: "update",
+			update: encodeUint8Array(encodeStateAsUpdate(this.doc))
+		});
+	}
+	requestServerDocumentState() {
+		this.send({
+			stateVector: encodeUint8Array(encodeStateVector(this.doc)),
+			type: "sync-request"
+		});
+	}
+	scheduleReconnect() {
+		if (!this.shouldConnect || this.reconnectTimer) return;
+		const delay = this.getReconnectDelay();
+		this.reconnectAttempt += 1;
+		this.emit("status", { status: "reconnecting" });
+		this.reconnectTimer = setTimeout(() => {
+			this.reconnectTimer = null;
+			this.openSocket("reconnecting");
+		}, delay);
+	}
+	handleClose(socket) {
+		if (this.socket !== socket) return;
+		this.doc.off("update", this.updateHandler);
+		this.socket = null;
+		this.emit("sync", false);
+		this.emit("status", { status: "disconnected" });
+		this.scheduleReconnect();
+	}
+	handleMessage(socket, event) {
+		if (this.socket !== socket) return;
+		let message;
+		try {
+			message = JSON.parse(event.data);
+		} catch {
+			this.emit("status", { status: "disconnected" });
+			return;
+		}
+		if (message.type === "awareness") {
+			this.awareness.updateRemoteState(message.sender, message.state);
+			return;
+		}
+		if (message.type === "sync") {
+			try {
+				applyUpdate(this.doc, decodeUint8Array(message.update), this);
+			} catch {
+				this.emit("status", { status: "disconnected" });
+				return;
+			}
+			for (const awareness of message.awareness) this.awareness.updateRemoteState(awareness.clientId, awareness.state);
+			this.emit("sync", true);
+			this.publishLocalDocumentState();
+			return;
+		}
+		if (message.sender === this.doc.clientID) return;
+		try {
+			const update = decodeUint8Array(message.update);
+			applyUpdate(this.doc, update, this);
+			this.emit("update", update);
+		} catch {
+			this.emit("status", { status: "disconnected" });
+		}
+	}
+	send(message) {
+		if (this.socket?.readyState !== WebSocket.OPEN) return;
+		this.socket.send(JSON.stringify(message));
+	}
+};
+function createWebSocketYjsProvider(id, yjsDocMap, options = {}) {
+	const doc = yjsDocMap.get(id) || new Doc();
+	yjsDocMap.set(id, doc);
+	return new WebSocketYjsProvider(id, doc, options.wsBaseUrl);
+}
+async function fetchWebSocketDemoDocument(id) {
+	const response = await fetch(`${DEFAULT_HTTP_BASE_URL}/documents/${encodeURIComponent(id)}`);
+	if (!response.ok) throw new Error(`Failed to load document: ${response.status}`);
+	const { content } = await response.json();
+	return content;
+}
+async function postWebSocketDemoDocument(id, path, content) {
+	const response = await fetch(`${DEFAULT_HTTP_BASE_URL}/documents/${encodeURIComponent(id)}/${path}`, {
+		body: JSON.stringify({ content }),
+		headers: { "Content-Type": "application/json" },
+		method: "POST"
+	});
+	if (!response.ok) throw new Error(`Failed to ${path} document: ${response.status}`);
+}
+async function saveWebSocketDemoDocument(id, content) {
+	await postWebSocketDemoDocument(id, "save", content);
+}
+function snapshotWebSocketDemoDocument(id, content) {
+	const url = `${DEFAULT_HTTP_BASE_URL}/documents/${encodeURIComponent(id)}/snapshot`;
+	const body = JSON.stringify({ content });
+	if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+		const blob = new Blob([body], { type: "text/plain;charset=UTF-8" });
+		if (navigator.sendBeacon(url, blob)) return;
+	}
+	fetch(url, {
+		body,
+		headers: { "Content-Type": "application/json" },
+		keepalive: true,
+		method: "POST"
+	}).catch(() => {});
+}
+//#endregion
+export { WebSocketYjsProvider, createWebSocketYjsProvider, fetchWebSocketDemoDocument, saveWebSocketDemoDocument, snapshotWebSocketDemoDocument };

package/es/renderer/LexicalRenderer.js

@@ -2,11 +2,14 @@ import { getCSSVariables, getRendererClassName } from "./style.js";
 import { renderNode } from "./engine/render-tree.js";
 import { rendererNodes } from "./nodes/index.js";
 import { createDefaultRenderers } from "./renderers/index.js";
-import { createElement, useMemo } from "react";
+import { MotionComponent, MotionProvider } from "@lobehub/ui";
+import { createElement, use, useMemo } from "react";
 import { createHeadlessEditor } from "@lexical/headless";
 import { $getRoot } from "lexical";
+import { motion } from "motion/react";
 //#region src/renderer/LexicalRenderer.tsx
 function LexicalRenderer({ value, overrides, extraNodes, renderContext, as: Tag = "div", className, style, variant }) {
+	const inheritedMotion = use(MotionComponent);
 	const content = useMemo(() => {
 		const nodes = extraNodes ? [...rendererNodes, ...extraNodes] : rendererNodes;
 		const registry = createDefaultRenderers();
@@ -36,13 +39,17 @@ function LexicalRenderer({ value, overrides, extraNodes, renderContext, as: Tag
 		variant
 	]);
 	const cssVars = getCSSVariables(variant);
-	return createElement(Tag, {
+	const tree = createElement(Tag, {
 		className: getRendererClassName(className),
 		style: {
 			...cssVars,
 			...style
 		}
 	}, createElement("div", null, content));
+	return inheritedMotion ? tree : createElement(MotionProvider, {
+		children: tree,
+		motion
+	});
 }
 //#endregion
 export { LexicalRenderer };

package/es/renderer/engine/render-builtin-node.js

@@ -1,7 +1,7 @@
 import { getListClassName, getTableWrapperClassName } from "../style.js";
 import { parseCSSText } from "./utils.js";
 import { createElement } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/renderer/engine/render-builtin-node.tsx
 const SAFE_URL_PROTOCOLS = /* @__PURE__ */ new Set([
 	"http:",
@@ -31,6 +31,11 @@ function formatLinkHighlightUrl(url) {
 function textToSlug(text) {
 	return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
 }
+const FLUID_TABLE_STYLE = { width: "100%" };
+function toTableColWidths(value) {
+	if (!Array.isArray(value) || value.length === 0) return null;
+	return value.every((width) => Number.isFinite(width) && width > 0) ? value : null;
+}
 const DIFF_ROOT_STYLE = { position: "relative" };
 const DIFF_LIST_ITEM_ROOT_STYLE = {
 	display: "inline-block",
@@ -157,13 +162,17 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 				children
 			}, key);
 		}
-		case "table": return /* @__PURE__ */ jsx("div", {
-			className: getTableWrapperClassName(),
-			children: /* @__PURE__ */ jsx("table", {
-				className: "editor_table",
-				children: /* @__PURE__ */ jsx("tbody", { children })
-			})
-		}, key);
+		case "table": {
+			const colWidths = toTableColWidths(node.colWidths);
+			return /* @__PURE__ */ jsx("div", {
+				className: getTableWrapperClassName(),
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "editor_table",
+					style: colWidths ? void 0 : FLUID_TABLE_STYLE,
+					children: [colWidths && /* @__PURE__ */ jsx("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ jsx("col", { style: { width } }, index)) }), /* @__PURE__ */ jsx("tbody", { children })]
+				})
+			}, key);
+		}
 		case "tablerow": return /* @__PURE__ */ jsx("tr", { children }, key);
 		case "tablecell": {
 			const isHeader = !!node.headerState;

package/es/types/kernel.d.ts

@@ -340,6 +340,10 @@ interface IEditorPlugin<IConfig> {
    * Editor destruction
    */
   destroy(): void;
+  /**
+   * After editor document content is written by setDocument
+   */
+  onDocumentChange?(type: string, content: any, options?: IDocumentOptions): void;
   /**
    * After Lexical editor instantiation
    * @param editor Lexical editor instance

package/es/utils/updatePosition.js

@@ -12,8 +12,11 @@ const updatePosition = ({ floating, placement = "bottom-start", reference, offse
 	}).then((props) => {
 		if (!floating) return false;
 		const { x, y } = props;
-		floating.style.left = `${x}px`;
-		floating.style.top = `${y}px`;
+		const viewportPadding = 8;
+		const viewportMinX = window.scrollX + viewportPadding;
+		const viewportMinY = window.scrollY + viewportPadding;
+		floating.style.left = `${Math.max(x, viewportMinX)}px`;
+		floating.style.top = `${Math.max(y, viewportMinY)}px`;
 		callback?.(props);
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.24.0",
+  "version": "4.25.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -62,6 +62,7 @@
     "build:watch": "tsdown --watch",
     "ci": "npm run lint:circular && npm run lint && npm run type-check",
     "clean": "rm -r es lib dist coverage .react-router .eslintcache node_modules/.cache",
+    "demo:yjs-server": "node ./scripts/yjs-websocket-demo-server.cjs",
     "dev": "lobedocs dev",
     "docs:build": "lobedocs build",
     "docs:build-analyze": "ANALYZE=1 lobedocs build",
@@ -138,6 +139,7 @@
       "chalk": "^4.1.2"
     },
     "patchedDependencies": {
+      "@lexical/yjs@0.42.0": "patches/@lexical__yjs@0.42.0.patch",
       "lexical@0.42.0": "patches/lexical@0.42.0.patch"
     }
   }