createHeadlessCollaborativeEditor.js

"use strict";

import type { LexicalEditor, LexicalNode } from "Lexical";
import type { Binding, Provider } from "LexicalYjs";

import {
  createBinding,
  syncLexicalUpdateToYjs,
  syncYjsChangesToLexical,
} from "LexicalYjs";

import { Doc, encodeStateAsUpdate } from "yjs";

export default function headlessConvertYDocStateToLexicalJSON(
  nodes: Array<Class<LexicalNode>>,
  yDocState: Uint8Array
): SerializedEditorState {
  const { binding, editor } = createHeadlessCollaborationEditor(nodes);
  applyUpdate(binding.doc, yDocState, { isUpdateRemote: true });
  editor.update(() => {}, { discrete: true });
  return editor.getEditorState().toJSON();
}

/**
 * Creates headless collaboration editor with no-op provider (since it won't
 * connect to message distribution infra) and binding. It also sets up
 * bi-directional synchronization between yDoc and editor
 */
function createHeadlessCollaborationEditor(nodes: Array<Class<LexicalNode>>): {
  editor: LexicalEditor,
  provider: Provider,
  binding: Binding,
} {
  const editor = createEditor({
    headless: true,
    namespace: "headless",
    nodes,
    onError: (error) => {
      throw error;
    },
  });
  const id = "main";
  const doc = new Doc();
  const docMap = new Map([[id, doc]]);
  const provider = createNoOpProvider();
  const binding = createBinding(editor, provider, id, doc, docMap);
  registerCollaborationListeners(editor, provider, binding);
  return {
    binding,
    editor,
    provider,
  };
}

function registerCollaborationListeners(
  editor: LexicalEditor,
  provider: Provider,
  binding: Binding
): void {
  editor.registerUpdateListener(
    ({
      dirtyElements,
      dirtyLeaves,
      editorState,
      normalizedNodes,
      prevEditorState,
      tags,
    }) => {
      if (tags.has("skip-collab") === false) {
        syncLexicalUpdateToYjs(
          binding,
          provider,
          prevEditorState,
          editorState,
          dirtyElements,
          dirtyLeaves,
          normalizedNodes,
          tags
        );
      }
    }
  );

  binding.root.getSharedType().observeDeep((events, transaction) => {
    if (transaction?.origin !== binding) {
      syncYjsChangesToLexical(binding, provider, events);
    }
  });
}

function createNoOpProvider(): Provider {
  const emptyFunction = () => {};
  return {
    awareness: {
      getLocalState: () => null,
      getStates: () => new Map(),
      off: emptyFunction,
      on: emptyFunction,
      setLocalState: emptyFunction,
    },
    connect: emptyFunction,
    disconnect: emptyFunction,
    off: emptyFunction,
    on: emptyFunction,
  };
}

@fantactuka this is great. Thank you. I'm running into an issue where I have yjs buffers stored in a db. I'm able to successfully pull them out and load them into Lexical on the client, but in headless mode, I'm getting an empty array of children in the Lexical JSON. any ideas?

@jamespantalones have you found a solution for this? I'm experiencing the same

Hey @jvandenaardweg Yeah, ended up solving it. The issue involved having multiple YJS instances in the app. we were using next.js, which was pulling in both the commonjs and the esm exports from YJS. Once we got that issue resolved to alias all yjs occurrences to a single instance, the problem was solved

@jamespantalones thanks for the reply!

I think I was having a different issue, but it was also related to ESM and CommonJS issues. Got it worked out by your hint on ESM/CommonJS. Thanks for that!