Initialising lexical state with markdown document and sync chages to yjs document

[navanshu]

Hi, I am currently porting from a markdown editor to lexical editor, all the documents are in markdown,
I have figured how to initialise the editor with existing markdown documents, but I want it to as yjs document, so yjs collaboration plugin can work with it.

import code from '@lexical/code';
import headless from '@lexical/headless';
import html from '@lexical/html';
import link from '@lexical/link';
import list from '@lexical/list';
import LY from '@lexical/yjs';
import markdown from '@lexical/markdown';
import text from '@lexical/rich-text';
import table from '@lexical/table';
import FastGlob from 'fast-glob';
import { readFile } from 'fs/promises';
import JSDOM from 'jsdom';
import lexical from 'lexical';
import { Doc, XmlText } from 'yjs';

const { TRANSFORMERS, $convertFromMarkdownString } = markdown;
const { $generateHtmlFromNodes } = html;
const { createHeadlessEditor } = headless;
const { HeadingNode, QuoteNode } = text;
const { TableCellNode, TableNode, TableRowNode } = table;
const { ListItemNode, ListNode } = list;
const { CodeHighlightNode, CodeNode } = code;
const { AutoLinkNode, LinkNode } = link;

const { window } = new JSDOM.JSDOM();
// @ts-ignore
globalThis.window = window;
globalThis.document = window.document;

export const MARKDOWN_NODES = [
 HeadingNode,
 ListNode,
 ListItemNode,
 QuoteNode,
 CodeNode,
 CodeHighlightNode,
 TableNode,
 TableCellNode,
 TableRowNode,
 AutoLinkNode,
 LinkNode
];

export const LexMap = new Map(
 await Promise.all(
  (
   await FastGlob('./graphs/**/*.md', {
    onlyFiles: true
   })
  ).map(async (d) => {
   const data = await readFile(d, 'utf8');

   const editor = createHeadlessEditor({
    namespace: '----------',
    nodes: MARKDOWN_NODES,
    onError: (error) => {
     console.error(error);
    }
   });

   const doc = new Doc();

   const dummyProvider: any = {
    awareness: {
     getLocalState: () => null,
     getStates: () => []
    }
   };
   const dummyId = 'dummy-id';

   const copyBinding = LY.createBinding(
    editor,
    dummyProvider,
    dummyId,
    doc,
    new Map([[dummyId, doc]])
   );

   const oldState = editor.getEditorState();

   editor.update(
    () => {
     $convertFromMarkdownString(data, TRANSFORMERS, lexical.$getRoot());
     // Checking state output as html
     // const html = $generateHtmlFromNodes(editor, null);
    }
   );

   return [d, doc] as [string, Doc];
  })
 )
);

[navanshu]

Found the solution here https://gist.github.com/fantactuka/ee8ef8ac1c51d179c7a9199262444b04