@kerebron/extension-yjs 0.6.6 → 0.7.0

package/src/yPositionPlugin.ts

@@ -1,24 +1,50 @@
-import * as Y from 'yjs';
 import { Awareness } from 'y-protocols/awareness';
+import * as Y from 'yjs';
 
 import { EditorState, Plugin, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 
 import type { CoreEditor } from '@kerebron/editor';
-import type {
-  ExtensionRemoteSelection,
-  SelectionState,
-} from '@kerebron/extension-basic-editor/ExtensionRemoteSelection';
-import { remoteSelectionPluginKey } from '@kerebron/extension-basic-editor/ExtensionRemoteSelection';
+import {
+  type ColorMapper,
+  defaultColorMapper,
+  generateBlankUser,
+  type User,
+} from '@kerebron/editor/user';
+import type { SelectionState } from '@kerebron/extension-basic-editor/ExtensionRemoteSelection';
 
+import { yPositionPluginKey, ySyncPluginKey } from './keys.js';
 import {
   absolutePositionToRelativePosition,
   relativePositionToAbsolutePosition,
-  setMeta,
-} from './lib.js';
-import { yPositionPluginKey, ySyncPluginKey } from './keys.js';
+} from './position.js';
 import type { YSyncPluginState } from './ySyncPlugin.js';
 
+/**
+ * Is null if no timeout is in progress.
+ * Is defined if a timeout is in progress.
+ * Maps from view
+ */
+let viewsToUpdate: Map<EditorView, Map<any, any>> | null = null;
+
+const updateMetas = () => {
+  const ups: Map<EditorView, Map<any, any>> | null = viewsToUpdate;
+  viewsToUpdate = null;
+  if (!ups) {
+    return;
+  }
+  ups.forEach((metas, view) => {
+    const tr = view.state.tr;
+    const syncState = ySyncPluginKey.getState(view.state);
+    if (syncState && syncState.binding) { //  && !syncState.binding.isDestroyed
+      metas.forEach((val, key) => {
+        tr.setMeta(key, val);
+      });
+      view.dispatch(tr);
+    }
+  });
+};
+
 type AwarenessListener = (
   { added, updated, removed }: {
     added: number[];
@@ -36,20 +62,24 @@ interface PositionPluginConfig {
 export interface YPositionPluginState {
   awareness?: Awareness;
   awarenessListener?: AwarenessListener;
+  cursorStateField: string;
+  userStateField: string;
+  me: User;
+  colorMapper: ColorMapper;
 }
 
 function destroyAwareness(
-  state: YPositionPluginState,
-  cursorStateField: string,
+  pluginState: YPositionPluginState,
 ) {
-  if (!state.awareness) {
+  if (!pluginState.awareness) {
     return;
   }
-  const awareness = state.awareness;
-  if (state.awarenessListener) {
-    awareness.off('change', state.awarenessListener);
+  const awareness = pluginState.awareness;
+  if (pluginState.awarenessListener) {
+    awareness.off('change', pluginState.awarenessListener);
   }
-  awareness.setLocalStateField(cursorStateField, null);
+  awareness.setLocalStateField(pluginState.cursorStateField, null);
+  pluginState.awareness = undefined;
 }
 
 function initAwareness(state: YPositionPluginState, editor: CoreEditor) {
@@ -63,10 +93,14 @@ function initAwareness(state: YPositionPluginState, editor: CoreEditor) {
     { added, updated, removed },
   ) => {
     const ystate: YSyncPluginState = ySyncPluginKey.getState(view.state)!;
-    if (!ystate.provider) {
+    if (!ystate.binding) {
       return;
     }
-    const awareness = ystate.provider.awareness;
+    const yjs = ystate.binding.getYjs();
+    if (!yjs) {
+      return;
+    }
+
     const clients = added.concat(updated).concat(removed);
     if (
       clients.findIndex((id: number) => id !== awareness.doc.clientID) ===
@@ -75,46 +109,37 @@ function initAwareness(state: YPositionPluginState, editor: CoreEditor) {
       return;
     }
 
-    if (view.docView) {
-      setMeta(view, remoteSelectionPluginKey, {
-        remotePositionUpdated: true,
-      });
-    }
-
+    const { ydoc, xmlFragment } = yjs;
     const remoteStates: SelectionState[] = [];
-
-    const ydoc = ystate.ydoc;
-
     awareness.getStates().forEach((aw, clientId) => {
       if (!defaultAwarenessStateFilter(ydoc.clientID, clientId, aw)) {
         return;
       }
 
-      if (!aw.cursor) {
+      const cursor = aw[state.cursorStateField];
+      const user: User | undefined = aw[state.userStateField];
+
+      if (!cursor || !user) {
         return;
       }
 
       const anchor = relativePositionToAbsolutePosition(
         ydoc,
-        ystate.type,
-        Y.createRelativePositionFromJSON(aw.cursor.anchor),
-        ystate.binding.mapping,
+        xmlFragment,
+        Y.createRelativePositionFromJSON(cursor.anchor),
+        ystate.binding.getMapping(),
       );
       const head = relativePositionToAbsolutePosition(
         ydoc,
-        ystate.type,
-        Y.createRelativePositionFromJSON(aw.cursor.head),
-        ystate.binding.mapping,
+        xmlFragment,
+        Y.createRelativePositionFromJSON(cursor.head),
+        ystate.binding.getMapping(),
       );
 
       if (anchor !== null && head !== null) {
         remoteStates.push({
           clientId,
-          user: {
-            name: aw.user?.name,
-            color: aw.user?.color,
-            colorLight: aw.user?.colorLight,
-          },
+          user: user,
           cursor: {
             anchor,
             head,
@@ -122,12 +147,10 @@ function initAwareness(state: YPositionPluginState, editor: CoreEditor) {
         });
       }
     });
-    const extension: ExtensionRemoteSelection = editor.getExtension(
-      'remote-selection',
-    )!;
 
-    extension.setRemoteStates(remoteStates);
-    // view.dispatch({ annotations: [yRemoteSelectionsAnnotation.of([])] });
+    const tr = editor.state.tr;
+    tr.setMeta('remoteSelectionChange', { remoteStates });
+    editor.dispatchTransaction(tr);
   };
 
   awareness.on('change', state.awarenessListener);
@@ -147,40 +170,49 @@ export const yPositionPlugin = (
   {
     getSelection = (state: EditorState) => state.selection,
   }: PositionPluginConfig = {},
-  cursorStateField: string = 'cursor',
 ) => {
   return new Plugin<YPositionPluginState>({
     key: yPositionPluginKey,
     state: {
-      init: (_initargs, state): YPositionPluginState => {
+      init: (): YPositionPluginState => {
         return {
           awareness: undefined,
+          cursorStateField: 'kerebron:cursor',
+          userStateField: 'kerebron:user',
+          me: generateBlankUser(),
+          colorMapper: defaultColorMapper,
         };
       },
       apply: (tr: Transaction, pluginState: YPositionPluginState) => {
-        const awareness = tr.getMeta('yjs:awareness');
+        const changeUser = tr.getMeta('changeUser');
+        if (changeUser) {
+          pluginState.me = { ...changeUser.user };
+        }
+        const setColorMapper = tr.getMeta('setColorMapper');
+        if (setColorMapper) {
+          pluginState.colorMapper = setColorMapper.colorMapper;
+        }
+
+        const awareness = tr.getMeta('yjs:setAwareness');
         if (awareness) {
           if (pluginState.awareness) {
-            destroyAwareness(pluginState, cursorStateField);
+            destroyAwareness(pluginState);
           }
           pluginState.awareness = awareness;
           if (pluginState.awareness) {
             initAwareness(pluginState, editor);
           }
         }
+
+        if (tr.getMeta('yjs:removeAwareness')) {
+          if (pluginState.awareness) {
+            destroyAwareness(pluginState);
+          }
+        }
         return pluginState;
       },
     },
     view: (view: EditorView) => {
-      // const ystate: YSyncPluginState = ySyncPluginKey.getState(view.state)!;
-      // if (
-      //   ystate.snapshot != null || ystate.prevSnapshot != null ||
-      //   ystate.binding.mapping.size === 0
-      // ) {
-      //   // do not render cursors while snapshot is active
-      //   return DecorationSet.empty;
-      // }
-
       const updateAwareness = (
         selectionAnchor: number,
         selectionHead: number,
@@ -195,30 +227,37 @@ export const yPositionPlugin = (
         const current = awareness.getLocalState() || {};
 
         const ystate: YSyncPluginState = ySyncPluginKey.getState(view.state)!;
+        const yjs = ystate.binding.getYjs();
+        if (!yjs) {
+          return;
+        }
+        const { xmlFragment } = yjs;
 
         const anchor: Y.RelativePosition = absolutePositionToRelativePosition(
           selectionAnchor,
-          ystate.type,
-          ystate.binding.mapping,
+          xmlFragment,
+          ystate.binding.getMapping(),
         );
         const head: Y.RelativePosition = absolutePositionToRelativePosition(
           selectionHead,
-          ystate.type,
-          ystate.binding.mapping,
+          xmlFragment,
+          ystate.binding.getMapping(),
         );
 
+        const cursor = current[state.cursorStateField];
+
         if (
-          current.cursor == null ||
+          cursor == null ||
           !Y.compareRelativePositions(
-            Y.createRelativePositionFromJSON(current.cursor.anchor),
+            Y.createRelativePositionFromJSON(cursor.anchor),
             anchor,
           ) ||
           !Y.compareRelativePositions(
-            Y.createRelativePositionFromJSON(current.cursor.head),
+            Y.createRelativePositionFromJSON(cursor.head),
             head,
           )
         ) {
-          awareness.setLocalStateField(cursorStateField, {
+          awareness.setLocalStateField(state.cursorStateField, {
             anchor,
             head,
           });
@@ -232,22 +271,31 @@ export const yPositionPlugin = (
         if (!state.awareness) {
           return;
         }
-        const awareness = state.awareness;
 
-        const ystate = ySyncPluginKey.getState(view.state)!;
+        const ystate: YSyncPluginState = ySyncPluginKey.getState(view.state)!;
+        const yjs = ystate.binding.getYjs();
+        if (!yjs) {
+          return;
+        }
+
+        const awareness = state.awareness;
         const current = awareness.getLocalState() || {};
 
+        const { ydoc, xmlFragment } = yjs;
+
+        const cursor = current[state.cursorStateField];
+
         if (
-          current.cursor != null &&
+          cursor &&
           relativePositionToAbsolutePosition(
-              ystate.ydoc,
-              ystate.type,
-              Y.createRelativePositionFromJSON(current.cursor.anchor),
-              ystate.binding.mapping,
+              ydoc,
+              xmlFragment,
+              Y.createRelativePositionFromJSON(cursor.anchor),
+              ystate.binding.getMapping(),
             ) !== null
         ) {
           // delete cursor information if current cursor information is owned by this editor binding
-          awareness.setLocalStateField(cursorStateField, null);
+          awareness.setLocalStateField(state.cursorStateField, null);
         }
       };
 
@@ -286,7 +334,7 @@ export const yPositionPlugin = (
               view.state,
             );
           if (pluginState) {
-            destroyAwareness(pluginState, cursorStateField);
+            destroyAwareness(pluginState);
           }
 
           editor.removeEventListener(

package/src/ySyncPlugin.ts

@@ -2,57 +2,46 @@ import * as Y from 'yjs';
 import { Plugin } from 'prosemirror-state';
 
 import { ySyncPluginKey, yUndoPluginKey } from './keys.js';
-import { defaultColors, ProsemirrorBinding } from './ProsemirrorBinding.js';
-import { Schema } from 'prosemirror-model';
-import type { CreateWsProvider, YjsProvider } from './ExtensionYjs.js';
-
-export type TransactFunc<T> = (
-  f: (arg0?: Y.Transaction) => T,
-  origin?: any,
-) => T;
-
-export interface ColorDef {
-  light: string;
-  dark: string;
-}
+import type { CreateYjsProvider } from './YjsProvider.js';
+import { PmYjsBinding } from './binding/PmYjsBinding.js';
+import { CoreEditor } from '@kerebron/editor';
 
 interface YSyncOpts {
-  colors?: Array<ColorDef>;
-  colorMapping?: Map<string, ColorDef>;
   permanentUserData?: Y.PermanentUserData;
   onFirstRender?: () => void;
   roomId?: string;
 }
 
 export interface YSyncPluginState {
-  roomId: string;
-  provider?: YjsProvider;
-  type: Y.XmlFragment;
-  ydoc: Y.Doc;
-
-  binding: ProsemirrorBinding;
-  addToHistory: boolean;
+  binding: PmYjsBinding;
   isChangeOrigin: boolean;
-  restore: any;
-  snapshot?: Y.Snapshot;
-  prevSnapshot?: Y.Snapshot;
-  isUndoRedoOperation: boolean;
-  colors: Array<ColorDef>;
-  colorMapping: Map<string, ColorDef>;
+  isUndoRedoOperation: boolean; // Used in y-history.test.ts
   permanentUserData?: Y.PermanentUserData;
 }
 
+interface YSyncMeta {
+  getYDoc?: {
+    resolve: (doc: Y.Doc) => void;
+    reject: (reason: any) => void;
+  };
+  changeRoom?: {
+    roomId: string;
+  };
+  leaveRoom?: boolean;
+  isChangeOrigin?: boolean;
+  isUndoRedoOperation?: boolean;
+  restore?: any;
+}
+
 /**
  * This plugin listens to changes in prosemirror view and keeps yXmlState and view in sync.
  *
  * This plugin also keeps references to the type and the shared document so other plugins can access it.
  */
 export const ySyncPlugin = (
-  schema: Schema,
-  createWsProvider: CreateWsProvider,
+  editor: CoreEditor,
+  createYjsProvider: CreateYjsProvider,
   {
-    colors = defaultColors,
-    colorMapping = new Map(),
     onFirstRender = () => {
     },
   }: YSyncOpts = {},
@@ -60,132 +49,76 @@ export const ySyncPlugin = (
   let initialContentChanged = false;
   const plugin: Plugin<YSyncPluginState> = new Plugin<YSyncPluginState>({
     props: {
-      // editable: (state) => {
-      //   const syncState = ySyncPluginKey.getState(state)!;
-      //   return syncState.snapshot && syncState.prevSnapshot;
-      // },
+      editable: (state) => {
+        return true;
+      },
     },
     key: ySyncPluginKey,
     state: {
       init: (_initargs, state): YSyncPluginState => {
-        const ydoc = new Y.Doc();
-        const yXmlFragment: Y.XmlFragment = ydoc.getXmlFragment('prosemirror');
-        const binding = new ProsemirrorBinding(yXmlFragment, new Map());
-
         return {
-          roomId: '',
-          provider: undefined,
-          binding,
-          type: yXmlFragment,
-          ydoc: ydoc,
-          snapshot: undefined,
-          prevSnapshot: undefined,
+          binding: new PmYjsBinding(editor),
           isChangeOrigin: false,
           isUndoRedoOperation: false,
-          addToHistory: true,
-          restore: undefined,
-          colors,
-          colorMapping,
           permanentUserData: undefined,
         };
       },
       apply: (tr, pluginState: YSyncPluginState) => {
-        const change: Partial<YSyncPluginState> = tr.getMeta(ySyncPluginKey);
-        if (change !== undefined) {
-          pluginState = {
-            ...pluginState,
-            ...change,
-          };
-
-          if ('roomId' in change) {
-            if (change.roomId) {
-              const [provider, ydoc] = createWsProvider(change.roomId);
-              pluginState.provider = provider;
-              const yXmlFragment: Y.XmlFragment = ydoc.getXmlFragment(
-                'prosemirror',
-              );
-              pluginState.type = yXmlFragment, pluginState.ydoc = ydoc;
-
-              if (pluginState.provider) {
-                if (pluginState.binding.prosemirrorView) {
-                  const view = pluginState.binding.prosemirrorView;
-                  const tr = view.state.tr.setMeta(
-                    'yjs:awareness',
-                    pluginState.provider.awareness,
-                  );
-                  view.dispatch(tr);
-                }
-              }
+        const pluginMeta: Partial<YSyncMeta> = tr.getMeta(ySyncPluginKey);
+
+        const changeUser = tr.getMeta('changeUser');
+        if (changeUser) {
+          pluginState.binding.changeUser(changeUser.user);
+        }
+
+        if (pluginMeta?.getYDoc) {
+          const yjs = pluginState.binding.getYjs();
+          if (yjs) {
+            pluginMeta.getYDoc.resolve(yjs.ydoc);
+          } else {
+            if (pluginMeta.getYDoc.reject) {
+              pluginMeta.getYDoc.reject(new Error('No yjs'));
             } else {
-              const ydoc = new Y.Doc();
-              const yXmlFragment: Y.XmlFragment = ydoc.getXmlFragment(
-                'prosemirror',
-              );
-              pluginState.type = yXmlFragment, pluginState.ydoc = ydoc;
-              pluginState.provider = undefined;
+              throw new Error('No yjs');
             }
-            pluginState.snapshot = undefined;
-            pluginState.prevSnapshot = undefined;
-            pluginState.isChangeOrigin = false;
-            pluginState.isUndoRedoOperation = false;
-            pluginState.addToHistory = true;
-            pluginState.restore = undefined;
+          }
+          return pluginState;
+        }
 
-            initialContentChanged = false;
+        if (pluginMeta?.leaveRoom) {
+          pluginState.isChangeOrigin = false;
+          pluginState.isUndoRedoOperation = false;
 
-            pluginState.binding.changeRoom(pluginState.type);
-            setTimeout(() => {
-              pluginState.binding._forceRerender();
-            }, 0);
+          initialContentChanged = false;
 
-            return pluginState;
-          }
+          pluginState.binding.leaveRoom(tr);
+
+          return pluginState;
         }
 
-        pluginState.addToHistory = tr.getMeta('addToHistory') !== false;
-        // always set isChangeOrigin. If undefined, this is not change origin.
-        pluginState.isChangeOrigin = !!change?.isChangeOrigin;
-        pluginState.isUndoRedoOperation = !!change?.isChangeOrigin &&
-          !!change?.isUndoRedoOperation;
-
-        const binding = pluginState.binding;
-
-        if (binding?.prosemirrorView) {
-          if (change?.snapshot || change?.prevSnapshot) {
-            // snapshot changed, rerender next
-            setTimeout(() => {
-              if (!binding.prosemirrorView) {
-                return;
-              }
-              if (change.restore == null) {
-                binding._renderSnapshot(
-                  change.snapshot,
-                  change.prevSnapshot,
-                  pluginState,
-                );
-              } else {
-                binding._renderSnapshot(
-                  change.snapshot,
-                  change.snapshot,
-                  pluginState,
-                );
-                // reset to current prosemirror state
-                delete pluginState.restore;
-                delete pluginState.snapshot;
-                delete pluginState.prevSnapshot;
-                initialContentChanged = false;
-                binding.mux(() => {
-                  if (!binding.prosemirrorView) {
-                    return;
-                  }
-                  binding.prosemirrorChanged(
-                    binding.prosemirrorView.state.doc,
-                  );
-                });
-              }
-            }, 0);
-          }
+        if (pluginMeta?.changeRoom) {
+          pluginState.isChangeOrigin = false;
+          pluginState.isUndoRedoOperation = false;
+
+          initialContentChanged = false;
+
+          const roomId = pluginMeta.changeRoom.roomId;
+          pluginState.binding.changeRoom(
+            roomId,
+            createYjsProvider,
+            tr,
+          );
+
+          return pluginState;
         }
+
+        pluginState.binding.addToYjsHistory =
+          tr.getMeta('addToYjsHistory') !== false;
+        // always set isChangeOrigin. If undefined, this is not change origin.
+        pluginState.isChangeOrigin = !!pluginMeta?.isChangeOrigin;
+        pluginState.isUndoRedoOperation = !!pluginMeta?.isChangeOrigin &&
+          !!pluginMeta?.isUndoRedoOperation;
+
         return pluginState;
       },
     },
@@ -195,11 +128,6 @@ export const ySyncPlugin = (
       )!;
       const binding = pluginState.binding;
 
-      binding.initView(view);
-      if (binding.mapping.size === 0) {
-        // force rerender to update the bindings mapping
-        binding._forceRerender();
-      }
       onFirstRender();
       return {
         update: () => {
@@ -212,37 +140,26 @@ export const ySyncPlugin = (
 
           const binding = pluginState.binding;
           if (
-            !pluginState.snapshot && !pluginState.prevSnapshot
+            // If the content doesn't change initially, we don't render anything to Yjs
+            // If the content was cleared by a user action, we want to catch the change and
+            // represent it in Yjs
+            initialContentChanged ||
+            view.state.doc.content.findDiffStart(
+                view.state.doc.type.createAndFill()!.content,
+              ) !== null
           ) {
+            initialContentChanged = true;
             if (
-              // If the content doesn't change initially, we don't render anything to Yjs
-              // If the content was cleared by a user action, we want to catch the change and
-              // represent it in Yjs
-              initialContentChanged ||
-              view.state.doc.content.findDiffStart(
-                  view.state.doc.type.createAndFill()!.content,
-                ) !== null
+              pluginState.binding.addToYjsHistory === false &&
+              !pluginState.isChangeOrigin
             ) {
-              initialContentChanged = true;
-              if (
-                pluginState.addToHistory === false &&
-                !pluginState.isChangeOrigin
-              ) {
-                const yUndoPluginState = yUndoPluginKey.getState(view.state);
-                if (yUndoPluginState?.undoManager) {
-                  yUndoPluginState.undoManager.stopCapturing();
-                }
+              const yUndoPluginState = yUndoPluginKey.getState(view.state);
+              if (yUndoPluginState?.undoManager) {
+                yUndoPluginState.undoManager.stopCapturing();
               }
-              binding.mux(() => {
-                if (!pluginState.ydoc) {
-                  return;
-                }
-                pluginState.ydoc.transact((tr) => {
-                  tr.meta.set('addToHistory', pluginState.addToHistory);
-                  binding.prosemirrorChanged(view.state.doc);
-                }, ySyncPluginKey);
-              });
             }
+
+            binding.pmChanged();
           }
         },
         destroy: () => {