@lobehub/editor 4.24.1 → 4.25.0

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

@@ -0,0 +1,191 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { clearEditorSkipCollab, initializeEditor } from "./utils/editor-state.js";
+import { ensureYjsNodePropertiesFromEditorState } from "./utils/node-properties.js";
+import { hydrateLexicalFromYjsState, syncCurrentEditorStateToYjs } from "./utils/sync.js";
+import { IYjsService, YjsService } from "../service/index.js";
+import { getAwarenessUsers } from "./utils/awareness.js";
+import { registerYjsHistory } from "./utils/history.js";
+import { $getRoot, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, SKIP_COLLAB_TAG } from "lexical";
+import { UndoManager } from "yjs";
+import { CONNECTED_COMMAND, TOGGLE_CONNECT_COMMAND, createBinding, syncLexicalUpdateToYjs, syncYjsChangesToLexical } from "@lexical/yjs";
+//#region src/plugins/yjs/plugin/index.ts
+init_plugin();
+const YjsPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "YjsPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.bootstrapCurrentEditorState = null;
+		this.docMap = /* @__PURE__ */ new Map();
+		this.hasInitialized = false;
+		this.isReloadingDoc = false;
+		this.markDocumentChanged = null;
+		this.service = new YjsService();
+		kernel.registerServiceHotReload(IYjsService, this.service);
+	}
+	destroy() {
+		super.destroy();
+		this.bootstrapCurrentEditorState = null;
+		this.markDocumentChanged = null;
+		this.service.setState(null);
+	}
+	onDocumentChange() {
+		this.markDocumentChanged?.();
+	}
+	connectProvider(provider, connectionState) {
+		if (connectionState.hasConnected) return;
+		connectionState.hasConnected = true;
+		connectionState.connection = provider.connect();
+	}
+	registerAwareness(provider) {
+		this.service.setAwarenessUsers(getAwarenessUsers(provider));
+		const updateAwarenessUsers = () => {
+			this.service.setAwarenessUsers(getAwarenessUsers(provider));
+		};
+		provider.awareness.on("update", updateAwarenessUsers);
+		this.register(() => {
+			provider.awareness.off("update", updateAwarenessUsers);
+			this.service.setAwarenessUsers([]);
+		});
+	}
+	registerEditorSync(editor, binding, provider, shouldBootstrap, syncState) {
+		this.register(editor.registerUpdateListener(({ dirtyElements, dirtyLeaves, editorState, normalizedNodes, prevEditorState, tags }) => {
+			if (tags.has(SKIP_COLLAB_TAG) || tags.has(COLLABORATION_TAG)) return;
+			if (!syncState.providerHasSynced) return;
+			ensureYjsNodePropertiesFromEditorState(binding, editorState);
+			if (shouldBootstrap && syncState.providerHasSynced && binding.root.isEmpty() && binding.root._xmlText._length === 0) {
+				if (!editorState.read(() => $getRoot().isEmpty())) {
+					syncCurrentEditorStateToYjs(binding, provider);
+					return;
+				}
+			}
+			syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+		}));
+	}
+	registerProviderEvents(editor, binding, provider, id, syncState) {
+		const onProviderDocReload = (doc) => {
+			clearEditorSkipCollab(editor);
+			this.docMap.set(id, doc);
+			this.isReloadingDoc = true;
+			this.service.setState({
+				binding,
+				doc,
+				docMap: this.docMap,
+				id,
+				provider
+			});
+		};
+		const onStatus = ({ status }) => {
+			editor.dispatchCommand(CONNECTED_COMMAND, status === "connected");
+		};
+		const onSync = (isSynced) => {
+			if (!isSynced) return;
+			syncState.providerHasSynced = true;
+			if (this.isReloadingDoc) {
+				this.isReloadingDoc = false;
+				return;
+			}
+			if (binding.root.isEmpty() && binding.root._xmlText._length > 0) {
+				hydrateLexicalFromYjsState(binding);
+				return;
+			}
+			this.bootstrapCurrentEditorState?.();
+		};
+		provider.on("reload", onProviderDocReload);
+		provider.on("status", onStatus);
+		provider.on("sync", onSync);
+		this.register(() => {
+			provider.off("reload", onProviderDocReload);
+			provider.off("status", onStatus);
+			provider.off("sync", onSync);
+			this.bootstrapCurrentEditorState = null;
+			this.markDocumentChanged = null;
+		});
+	}
+	registerProviderToggleCommand(editor, provider) {
+		this.register(editor.registerCommand(TOGGLE_CONNECT_COMMAND, (shouldConnect) => {
+			if (shouldConnect) provider.connect();
+			else provider.disconnect();
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL));
+	}
+	registerProviderTeardown(binding, provider, connectionState) {
+		this.register(() => {
+			if (connectionState.connection) connectionState.connection.then(() => provider.disconnect());
+			else if (connectionState.hasConnected) provider.disconnect();
+			binding.root.destroy(binding);
+			this.service.setState(null);
+		});
+	}
+	registerYjsTreeSync(binding, provider) {
+		const onYjsTreeChanges = (events, transaction) => {
+			if (transaction.origin === binding) return;
+			syncYjsChangesToLexical(binding, provider, events, transaction.origin instanceof UndoManager, () => void 0);
+		};
+		binding.root.getSharedType().observeDeep(onYjsTreeChanges);
+		this.register(() => {
+			binding.root.getSharedType().unobserveDeep(onYjsTreeChanges);
+		});
+	}
+	setBootstrapCurrentEditorState(editor, binding, provider, initialEditorState, shouldBootstrap, syncState) {
+		this.bootstrapCurrentEditorState = () => {
+			if (!shouldBootstrap || !syncState.providerHasSynced || !syncState.documentHasChanged && !initialEditorState || !binding.root.isEmpty() || binding.root._xmlText._length !== 0) return;
+			if (editor.getEditorState().read(() => $getRoot().isEmpty()) && !initialEditorState) return;
+			if (initialEditorState) {
+				clearEditorSkipCollab(editor);
+				initializeEditor(editor, initialEditorState, {
+					discrete: true,
+					skipIfNotEmpty: false,
+					tag: void 0
+				});
+			}
+			syncCurrentEditorStateToYjs(binding, provider);
+		};
+	}
+	setServiceState(binding, id, provider, doc) {
+		this.service.setState({
+			binding,
+			doc,
+			docMap: this.docMap,
+			id,
+			provider
+		});
+	}
+	onInit(editor) {
+		const { excludedProperties, id, initialEditorState, providerFactory, shouldBootstrap = true, yjsDoc } = this.config || {};
+		if (!id || !providerFactory) throw new Error("YjsPlugin requires both \"id\" and \"providerFactory\".");
+		if (this.hasInitialized) return;
+		this.hasInitialized = true;
+		if (yjsDoc) this.docMap.set(id, yjsDoc);
+		const provider = providerFactory(id, this.docMap);
+		const connectionState = {
+			connection: void 0,
+			hasConnected: false
+		};
+		const syncState = {
+			documentHasChanged: false,
+			providerHasSynced: false
+		};
+		const binding = createBinding(editor, provider, id, this.docMap.get(id), this.docMap, excludedProperties);
+		this.setServiceState(binding, id, provider, this.docMap.get(id));
+		this.registerAwareness(provider);
+		this.registerYjsTreeSync(binding, provider);
+		this.registerEditorSync(editor, binding, provider, shouldBootstrap, syncState);
+		this.setBootstrapCurrentEditorState(editor, binding, provider, initialEditorState, shouldBootstrap, syncState);
+		this.markDocumentChanged = () => {
+			syncState.documentHasChanged = true;
+			this.connectProvider(provider, connectionState);
+			this.bootstrapCurrentEditorState?.();
+		};
+		this.registerProviderEvents(editor, binding, provider, id, syncState);
+		this.registerProviderToggleCommand(editor, provider);
+		this.register(registerYjsHistory(editor, binding));
+		if (initialEditorState) this.connectProvider(provider, connectionState);
+		this.registerProviderTeardown(binding, provider, connectionState);
+	}
+};
+//#endregion
+export { YjsPlugin };

package/es/plugins/yjs/plugin/types.d.ts

@@ -0,0 +1,16 @@
+import { EditorState, LexicalEditor } from "lexical";
+import { Doc } from "yjs";
+import { ExcludedProperties, Provider } from "@lexical/yjs";
+//#region src/plugins/yjs/plugin/types.d.ts
+type YjsProviderFactory = (id: string, yjsDocMap: Map<string, Doc>) => Provider;
+type YjsInitialEditorState = EditorState | ((editor: LexicalEditor) => void) | null | string;
+interface YjsPluginOptions {
+  excludedProperties?: ExcludedProperties;
+  id: string;
+  initialEditorState?: YjsInitialEditorState;
+  providerFactory: YjsProviderFactory;
+  shouldBootstrap?: boolean;
+  yjsDoc?: Doc;
+}
+//#endregion
+export { YjsInitialEditorState, YjsPluginOptions, YjsProviderFactory };

package/es/plugins/yjs/plugin/utils/awareness.js

@@ -0,0 +1,9 @@
+//#region src/plugins/yjs/plugin/utils/awareness.ts
+function getAwarenessUsers(provider) {
+	return Array.from(provider.awareness.getStates(), ([clientId, state]) => ({
+		clientId,
+		state
+	}));
+}
+//#endregion
+export { getAwarenessUsers };

package/es/plugins/yjs/plugin/utils/editor-state.js

@@ -0,0 +1,47 @@
+import { $createParagraphNode, $getRoot, HISTORY_MERGE_TAG, SKIP_COLLAB_TAG } from "lexical";
+//#region src/plugins/yjs/plugin/utils/editor-state.ts
+function initializeEditor(editor, initialEditorState, options = {}) {
+	const { discrete, skipIfNotEmpty = true, tag = HISTORY_MERGE_TAG } = options;
+	const updateOptions = Object.keys({
+		...discrete ? { discrete: true } : {},
+		...tag ? { tag } : {}
+	}).length ? {
+		...discrete ? { discrete: true } : {},
+		...tag ? { tag } : {}
+	} : void 0;
+	if (initialEditorState && typeof initialEditorState !== "function") {
+		if (editor.getEditorState().read(() => {
+			return skipIfNotEmpty && !$getRoot().isEmpty();
+		})) return;
+		editor.setEditorState(typeof initialEditorState === "string" ? editor.parseEditorState(initialEditorState) : initialEditorState, updateOptions);
+		return;
+	}
+	editor.update(() => {
+		const root = $getRoot();
+		if (skipIfNotEmpty && !root.isEmpty()) return;
+		if (typeof initialEditorState === "function") {
+			initialEditorState(editor);
+			return;
+		}
+		root.append($createParagraphNode());
+	}, updateOptions);
+}
+function createEmptyPreviousEditorState(editor) {
+	return editor.parseEditorState(JSON.stringify({ root: {
+		children: [],
+		direction: null,
+		format: "",
+		indent: 0,
+		type: "root",
+		version: 1
+	} }));
+}
+function clearEditorSkipCollab(editor) {
+	editor.update(() => {
+		const root = $getRoot();
+		root.clear();
+		root.select();
+	}, { tag: SKIP_COLLAB_TAG });
+}
+//#endregion
+export { clearEditorSkipCollab, createEmptyPreviousEditorState, initializeEditor };

package/es/plugins/yjs/plugin/utils/history.js

@@ -0,0 +1,31 @@
+import { CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND } from "lexical";
+import { createUndoManager } from "@lexical/yjs";
+//#region src/plugins/yjs/plugin/utils/history.ts
+function registerYjsHistory(editor, binding) {
+	const undoManager = createUndoManager(binding, binding.root.getSharedType());
+	const updateUndoRedoState = () => {
+		editor.dispatchCommand(CAN_UNDO_COMMAND, undoManager.undoStack.length > 0);
+		editor.dispatchCommand(CAN_REDO_COMMAND, undoManager.redoStack.length > 0);
+	};
+	undoManager.on("stack-item-added", updateUndoRedoState);
+	undoManager.on("stack-item-popped", updateUndoRedoState);
+	undoManager.on("stack-cleared", updateUndoRedoState);
+	const unregisterUndo = editor.registerCommand(UNDO_COMMAND, () => {
+		undoManager.undo();
+		return true;
+	}, COMMAND_PRIORITY_CRITICAL);
+	const unregisterRedo = editor.registerCommand(REDO_COMMAND, () => {
+		undoManager.redo();
+		return true;
+	}, COMMAND_PRIORITY_CRITICAL);
+	return () => {
+		unregisterUndo();
+		unregisterRedo();
+		undoManager.off("stack-item-added", updateUndoRedoState);
+		undoManager.off("stack-item-popped", updateUndoRedoState);
+		undoManager.off("stack-cleared", updateUndoRedoState);
+		undoManager.destroy();
+	};
+}
+//#endregion
+export { registerYjsHistory };

package/es/plugins/yjs/plugin/utils/node-properties.js

@@ -0,0 +1,39 @@
+//#region src/plugins/yjs/plugin/utils/node-properties.ts
+const ignoredNodeProperties = /* @__PURE__ */ new Set([
+	"__cachedText",
+	"__first",
+	"__key",
+	"__last",
+	"__next",
+	"__parent",
+	"__prev",
+	"__size",
+	"__state",
+	"__text"
+]);
+function shouldIgnoreNodeProperty(property, node, binding) {
+	if (ignoredNodeProperties.has(property) || typeof node[property] === "function") return true;
+	const excludedProperties = binding.excludedProperties.get(node.constructor);
+	return Boolean(excludedProperties?.has(property));
+}
+function ensureYjsNodeProperties(binding, node) {
+	if (binding.nodeProperties.has(node.__type)) return;
+	let defaultNode = node;
+	try {
+		defaultNode = new node.constructor();
+	} catch {
+		defaultNode = node;
+	}
+	const defaultProperties = {};
+	for (const [property, value] of Object.entries(defaultNode)) if (!shouldIgnoreNodeProperty(property, defaultNode, binding)) defaultProperties[property] = value;
+	binding.nodeProperties.set(node.__type, Object.freeze(defaultProperties));
+}
+function ensureYjsNodePropertiesFromEditorState(binding, editorState) {
+	editorState.read(() => {
+		editorState._nodeMap.forEach((node) => {
+			ensureYjsNodeProperties(binding, node);
+		});
+	});
+}
+//#endregion
+export { ensureYjsNodePropertiesFromEditorState };

package/es/plugins/yjs/plugin/utils/sync.js

@@ -0,0 +1,24 @@
+import { createEmptyPreviousEditorState } from "./editor-state.js";
+import { ensureYjsNodePropertiesFromEditorState } from "./node-properties.js";
+import { COLLABORATION_TAG } from "lexical";
+import { syncLexicalUpdateToYjs } from "@lexical/yjs";
+//#region src/plugins/yjs/plugin/utils/sync.ts
+function syncCurrentEditorStateToYjs(binding, provider, prevEditorState = createEmptyPreviousEditorState(binding.editor)) {
+	const editorState = binding.editor.getEditorState();
+	ensureYjsNodePropertiesFromEditorState(binding, editorState);
+	syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, /* @__PURE__ */ new Map([["root", true]]), /* @__PURE__ */ new Set(), /* @__PURE__ */ new Set(), /* @__PURE__ */ new Set());
+}
+function hydrateLexicalFromYjsState(binding, options = {}) {
+	const root = binding.root;
+	const sharedType = root.getSharedType();
+	binding.editor.update(() => {
+		root.applyChildrenYjsDelta(binding, sharedType.toDelta());
+		root.syncChildrenFromYjs(binding);
+	}, {
+		discrete: options.discrete ? true : void 0,
+		skipTransforms: true,
+		tag: COLLABORATION_TAG
+	});
+}
+//#endregion
+export { hydrateLexicalFromYjsState, syncCurrentEditorStateToYjs };

package/es/plugins/yjs/react/codemirrorEditLockProvider.js

@@ -0,0 +1,59 @@
+//#region src/plugins/yjs/react/codemirrorEditLockProvider.ts
+function getAwarenessData(state) {
+	const awarenessData = state?.awarenessData;
+	if (!awarenessData || typeof awarenessData !== "object") return {};
+	return awarenessData;
+}
+function getEditingBlock(state) {
+	const editingBlock = getAwarenessData(state).editingBlock;
+	return editingBlock && typeof editingBlock.key === "string" ? editingBlock : null;
+}
+function updateLocalLock(state, key, nextLock) {
+	const localState = state.provider.awareness.getLocalState();
+	if (!localState) return;
+	const nextAwarenessData = { ...getAwarenessData(localState) };
+	if (nextLock) nextAwarenessData.editingBlock = nextLock;
+	else if (nextAwarenessData.editingBlock?.key === key) delete nextAwarenessData.editingBlock;
+	state.provider.awareness.setLocalState({
+		...localState,
+		awarenessData: nextAwarenessData
+	});
+}
+function createCodemirrorEditLockProvider(state) {
+	const localClientId = state.binding.clientID;
+	const getRemoteLockOwner = (key) => {
+		for (const [clientId, userState] of state.provider.awareness.getStates()) {
+			if (clientId === localClientId) continue;
+			const lock = getEditingBlock(userState);
+			if (lock?.key === key) return {
+				id: clientId,
+				lock,
+				name: userState.name
+			};
+		}
+		return null;
+	};
+	return {
+		acquireLock: (key, label) => {
+			if (getRemoteLockOwner(key)) return false;
+			updateLocalLock(state, key, {
+				key,
+				label,
+				updatedAt: Date.now()
+			});
+			return true;
+		},
+		getRemoteLockOwner,
+		releaseLock: (key) => {
+			updateLocalLock(state, key, null);
+		},
+		subscribe: (listener) => {
+			state.provider.awareness.on("update", listener);
+			return () => {
+				state.provider.awareness.off("update", listener);
+			};
+		}
+	};
+}
+//#endregion
+export { createCodemirrorEditLockProvider };

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

@@ -0,0 +1,23 @@
+import { YjsInitialEditorState, YjsProviderFactory } from "../plugin/types.js";
+import "../plugin/index.js";
+import { FC, RefObject } from "react";
+import { Doc, Doc as Doc$1 } from "yjs";
+import { ExcludedProperties, SyncCursorPositionsFn } from "@lexical/yjs";
+//#region src/plugins/yjs/react/index.d.ts
+interface ReactYjsPluginProps {
+  awarenessData?: object;
+  cursorColor?: string;
+  cursorsContainerRef?: RefObject<HTMLElement | null>;
+  excludedProperties?: ExcludedProperties;
+  id: string;
+  initialEditorState?: YjsInitialEditorState;
+  persistCursorOnBlur?: boolean;
+  providerFactory: YjsProviderFactory;
+  shouldBootstrap?: boolean;
+  syncCursorPositionsFn?: SyncCursorPositionsFn;
+  username?: string;
+  yjsDoc?: Doc;
+}
+declare const ReactYjsPlugin: FC<ReactYjsPluginProps>;
+//#endregion
+export { type Doc$1 as Doc, ReactYjsPlugin, ReactYjsPluginProps };

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

@@ -0,0 +1,200 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { ICodemirrorEditLockService } from "../../codemirror-block/service/index.js";
+import { IYjsService } from "../service/index.js";
+import { YjsPlugin } from "../plugin/index.js";
+import { createCodemirrorEditLockProvider } from "./codemirrorEditLockProvider.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND } from "lexical";
+import { createPortal } from "react-dom";
+import { initLocalState, setLocalStateFocus, syncCursorPositions } from "@lexical/yjs";
+//#region src/plugins/yjs/react/index.tsx
+const DEFAULT_CURSOR_COLOR = "#2563eb";
+const DEFAULT_USERNAME = "Anonymous";
+const CURSOR_OVERLAY_Z_INDEX = 1;
+function useYjsState(lexicalEditor, pluginRegisteredSignal) {
+	const [editor] = useLexicalComposerContext();
+	const [state, setState] = useState(null);
+	useEffect(() => {
+		if (!lexicalEditor) return;
+		return editor.requireService(IYjsService)?.subscribe(setState);
+	}, [
+		editor,
+		lexicalEditor,
+		pluginRegisteredSignal
+	]);
+	return state;
+}
+function YjsCursors({ cursorsContainerRef, lexicalEditor, syncCursorPositionsFn, state }) {
+	const [defaultContainer, setDefaultContainer] = useState(null);
+	const cursorsContainer = cursorsContainerRef?.current || defaultContainer || document.body;
+	useLayoutEffect(() => {
+		if (cursorsContainerRef?.current) return;
+		const rootElement = lexicalEditor.getRootElement();
+		setDefaultContainer(rootElement?.parentElement || rootElement || document.body);
+	}, [cursorsContainerRef, lexicalEditor]);
+	return useMemo(() => {
+		const ref = (element) => {
+			state.binding.cursorsContainer = element;
+			if (element) syncCursorPositionsFn(state.binding, state.provider);
+		};
+		return createPortal(/* @__PURE__ */ jsx("div", {
+			ref,
+			style: {
+				height: 0,
+				left: 0,
+				pointerEvents: "none",
+				position: "absolute",
+				top: 0,
+				width: 0,
+				zIndex: CURSOR_OVERLAY_Z_INDEX
+			}
+		}), cursorsContainer);
+	}, [
+		cursorsContainer,
+		state.binding,
+		state.provider,
+		syncCursorPositionsFn
+	]);
+}
+const ReactYjsPlugin = ({ awarenessData = {}, cursorColor = DEFAULT_CURSOR_COLOR, cursorsContainerRef, excludedProperties, id, initialEditorState, persistCursorOnBlur = true, providerFactory, shouldBootstrap, syncCursorPositionsFn = syncCursorPositions, username = DEFAULT_USERNAME, yjsDoc }) => {
+	const [editor] = useLexicalComposerContext();
+	const [lexicalEditor, setLexicalEditor] = useState(null);
+	const [pluginRegisteredSignal, setPluginRegisteredSignal] = useState(0);
+	const lastLocalSelectionRef = useRef(null);
+	const state = useYjsState(lexicalEditor, pluginRegisteredSignal);
+	useLayoutEffect(() => {
+		editor.registerPlugin(YjsPlugin, {
+			excludedProperties,
+			id,
+			initialEditorState,
+			providerFactory,
+			shouldBootstrap,
+			yjsDoc
+		});
+		setPluginRegisteredSignal((value) => value + 1);
+	}, [
+		editor,
+		excludedProperties,
+		id,
+		initialEditorState,
+		providerFactory,
+		shouldBootstrap,
+		yjsDoc
+	]);
+	useLexicalEditor((activeEditor) => {
+		setLexicalEditor(activeEditor);
+		return () => {
+			setLexicalEditor(null);
+		};
+	}, []);
+	useEffect(() => {
+		if (!lexicalEditor || !state) return;
+		const awareness = state.provider.awareness;
+		const setLocalState = awareness.setLocalState.bind(awareness);
+		const getLocalStateWithPreservedSelection = (localState) => {
+			if (!localState) {
+				lastLocalSelectionRef.current = null;
+				return localState;
+			}
+			if (localState.anchorPos && localState.focusPos) {
+				lastLocalSelectionRef.current = {
+					anchorPos: localState.anchorPos,
+					focusPos: localState.focusPos
+				};
+				return localState;
+			}
+			if (!persistCursorOnBlur || !localState.focusing || !lastLocalSelectionRef.current) return localState;
+			return {
+				...localState,
+				anchorPos: lastLocalSelectionRef.current.anchorPos,
+				focusPos: lastLocalSelectionRef.current.focusPos
+			};
+		};
+		awareness.setLocalState = (localState) => {
+			setLocalState(getLocalStateWithPreservedSelection(localState));
+		};
+		initLocalState(state.provider, username, cursorColor, persistCursorOnBlur || document.activeElement === lexicalEditor.getRootElement(), awarenessData);
+		const updateAwareness = () => {
+			const localState = awareness.getLocalState();
+			const nextLocalState = getLocalStateWithPreservedSelection(localState);
+			if (nextLocalState !== localState) setLocalState(nextLocalState);
+			syncCursorPositionsFn(state.binding, state.provider);
+		};
+		awareness.on("update", updateAwareness);
+		const unregisterUpdate = lexicalEditor.registerUpdateListener(updateAwareness);
+		let animationFrame = 0;
+		const renderCursorPositions = () => {
+			updateAwareness();
+			animationFrame = window.requestAnimationFrame(renderCursorPositions);
+		};
+		animationFrame = window.requestAnimationFrame(renderCursorPositions);
+		return () => {
+			awareness.setLocalState = setLocalState;
+			awareness.off("update", updateAwareness);
+			unregisterUpdate();
+			window.cancelAnimationFrame(animationFrame);
+		};
+	}, [
+		awarenessData,
+		cursorColor,
+		lexicalEditor,
+		persistCursorOnBlur,
+		state,
+		syncCursorPositionsFn,
+		username
+	]);
+	useEffect(() => {
+		if (!lexicalEditor || !state) return;
+		return editor.requireService(ICodemirrorEditLockService)?.registerProvider(createCodemirrorEditLockProvider(state));
+	}, [
+		editor,
+		lexicalEditor,
+		state
+	]);
+	useEffect(() => {
+		if (!lexicalEditor || !state) return;
+		const setFocus = (focusing) => {
+			if (!focusing && persistCursorOnBlur) return false;
+			setLocalStateFocus(state.provider, username, cursorColor, focusing, awarenessData);
+			return false;
+		};
+		const unregisterFocus = lexicalEditor.registerCommand(FOCUS_COMMAND, () => setFocus(true), COMMAND_PRIORITY_EDITOR);
+		const unregisterBlur = lexicalEditor.registerCommand(BLUR_COMMAND, () => setFocus(false), COMMAND_PRIORITY_EDITOR);
+		return () => {
+			unregisterFocus();
+			unregisterBlur();
+		};
+	}, [
+		awarenessData,
+		cursorColor,
+		lexicalEditor,
+		persistCursorOnBlur,
+		state,
+		username
+	]);
+	useEffect(() => {
+		if (!state) return;
+		const clearAwarenessState = () => {
+			state.provider.awareness.setLocalState(null);
+		};
+		window.addEventListener("beforeunload", clearAwarenessState);
+		window.addEventListener("pagehide", clearAwarenessState);
+		return () => {
+			window.removeEventListener("beforeunload", clearAwarenessState);
+			window.removeEventListener("pagehide", clearAwarenessState);
+			clearAwarenessState();
+		};
+	}, [state]);
+	if (!lexicalEditor || !state) return null;
+	return /* @__PURE__ */ jsx(YjsCursors, {
+		cursorsContainerRef,
+		lexicalEditor,
+		state,
+		syncCursorPositionsFn
+	});
+};
+//#endregion
+export { ReactYjsPlugin };