feat: add collaboration ability

package.json

@@ -67,6 +67,7 @@
     "downshift": "^7.6.0",
     "js-yaml": "4.1.0",
     "lexical": "^0.16.1",
+    "lodash": "^4.17.21",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-frontmatter": "^2.0.1",
@@ -106,6 +107,7 @@
     "@testing-library/react": "^14.1.2",
     "@types/express": "^4.17.17",
     "@types/js-yaml": "4.0.5",
+    "@types/lodash": "^4.17.6",
     "@types/mdast": "^4.0.3",
     "@types/multer": "^1.4.7",
     "@types/node": "^20.2.5",

src/plugins/codemirror/CodeMirrorEditor.tsx

@@ -32,6 +32,7 @@ export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }: Code
   const { setCode } = useCodeBlockEditorContext()
   const editorViewRef = React.useRef<EditorView | null>(null)
   const elRef = React.useRef<HTMLDivElement | null>(null)
+  const extensionsRef = React.useRef<Extension | null>(null)
 
   const setCodeRef = React.useRef(setCode)
   setCodeRef.current = setCode
@@ -72,6 +73,7 @@ export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }: Code
         parent: elRef.current!,
         state: EditorState.create({ doc: code, extensions })
       })
+      extensionsRef.current = extensions;
     })()
     return () => {
       editorViewRef.current?.destroy()
@@ -80,6 +82,15 @@ export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }: Code
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [readOnly, language])
 
+  React.useEffect(() => {
+    if (editorViewRef.current && extensionsRef.current) {
+      const oldState = editorViewRef.current.state;
+      editorViewRef.current.setState(
+        EditorState.create({ doc: code, extensions: extensionsRef.current, selection: oldState.selection })
+      )
+    }
+  }, [code])
+
   return (
     <div
       className={styles.codeMirrorWrapper}

src/plugins/table/TableEditor.tsx

@@ -16,7 +16,7 @@ import {
   createEditor
 } from 'lexical'
 import * as Mdast from 'mdast'
-import React, { ElementType } from 'react'
+import React, { ElementType, useEffect } from 'react'
 import { exportLexicalTreeToMdast } from '../../exportMarkdownFromLexical'
 import { importMdastTreeToLexical } from '../../importMarkdownToLexical'
 import { lexicalTheme } from '../../styles/lexicalTheme'
@@ -45,6 +45,7 @@ import {
   usedLexicalNodes$
 } from '../core'
 import { useCellValues } from '@mdxeditor/gurx'
+import { isEqual } from "lodash"
 
 /**
  * Returns the element type for the cell based on the rowIndex
@@ -311,7 +312,7 @@ export interface CellProps {
   align?: Mdast.AlignType
   activeCell: [number, number] | null
   setActiveCell: (cell: [number, number] | null) => void
-  focus: boolean
+  focus: boolean,
 }
 
 const Cell: React.FC<Omit<CellProps, 'focus'>> = ({ align, ...props }) => {
@@ -344,7 +345,7 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
     directiveDescriptors,
     codeBlockEditorDescriptors,
     jsxIsAvailable,
-    rootEditor
+    rootEditor,
   ] = useCellValues(
     importVisitors$,
     exportVisitors$,
@@ -353,16 +354,26 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
     directiveDescriptors$,
     codeBlockEditorDescriptors$,
     jsxIsAvailable$,
-    rootEditor$
+    rootEditor$,
   )
-
+
+  const lastContents = React.useRef<Mdast.PhrasingContent[] | null>(null)
   const [editor] = React.useState(() => {
     const editor = createEditor({
       nodes: usedLexicalNodes,
       theme: lexicalTheme
     })
 
+    return editor
+  })
+
+  useEffect(() => {
+    if( isEqual(contents, lastContents.current) )
+      return;
+    lastContents.current = [...contents];
+
     editor.update(() => {
+      $getRoot().clear();
       importMdastTreeToLexical({
         root: $getRoot(),
         mdastRoot: { type: 'root', children: [{ type: 'paragraph', children: contents }] },
@@ -372,9 +383,8 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
         codeBlockEditorDescriptors
       })
     })
-
-    return editor
-  })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, contents, importVisitors])
 
   const saveAndFocus = React.useCallback(
     (nextCell: [number, number] | null) => {
@@ -462,7 +472,7 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
   }, [focus, editor])
 
   return (
-    <LexicalNestedComposer initialEditor={editor}>
+    <LexicalNestedComposer initialEditor={editor} skipCollabChecks>
       <RichTextPlugin contentEditable={<ContentEditable />} placeholder={<div></div>} ErrorBoundary={LexicalErrorBoundary} />
       <HistoryPlugin />
     </LexicalNestedComposer>

src/plugins/table/index.ts

@@ -3,6 +3,8 @@ import { Signal, map } from '@mdxeditor/gurx'
 import * as Mdast from 'mdast'
 import { gfmTableFromMarkdown, gfmTableToMarkdown } from 'mdast-util-gfm-table'
 import { gfmTable } from 'micromark-extension-gfm-table'
+import type { Doc } from 'yjs';
+import { Provider } from '@lexical/yjs';
 import {
   addExportVisitor$,
   addImportVisitor$,
@@ -80,7 +82,7 @@ export const insertTable$ = Signal<{
  * @group Table
  */
 export const tablePlugin = realmPlugin({
-  init(realm) {
+  init(realm, params) {
     realm.pubIn({
       // import
       [addMdastExtension$]: gfmTableFromMarkdown(),
@@ -89,7 +91,7 @@ export const tablePlugin = realmPlugin({
       // export
       [addLexicalNode$]: TableNode,
       [addExportVisitor$]: LexicalTableVisitor,
-      [addToMarkdownExtension$]: gfmTableToMarkdown({ tableCellPadding: true, tablePipeAlign: true })
+      [addToMarkdownExtension$]: gfmTableToMarkdown({ tableCellPadding: true, tablePipeAlign: true }),
     })
   }
 })