@kerebron/extension-yjs 0.6.7 → 0.7.0

package/src/YjsProvider.ts

@@ -0,0 +1,75 @@
+// y-websocket is forked because we need better state connection handling
+
+import * as Y from 'yjs';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+
+export const messageSync = 0;
+export const messageQueryAwareness = 3;
+export const messageAwareness = 1;
+export const messageAuth = 2;
+
+export type CreateYjsProvider = (roomId: string) => [YjsProvider, Y.Doc];
+
+export const MessageType = {
+  Sync: 0,
+  Awareness: 1,
+  Auth: 2,
+  QueryAwareness: 3,
+} as const;
+
+export type MessageType = typeof MessageType[keyof typeof MessageType];
+
+export type MessageHandler<T extends YjsProvider> = (
+  encoder: encoding.Encoder,
+  decoder: decoding.Decoder,
+  provider: T,
+  emitSynced: boolean,
+  messageType: MessageType,
+) => void;
+
+export interface YjsProviderEventMap {
+  status: CustomEvent<{ status: 'connected' | 'disconnected' | 'connecting' }>;
+  sync: CustomEvent<{ state: boolean }>;
+  synced: CustomEvent<{ state: boolean }>;
+  'connection-error': CustomEvent<{ event: Event; provider: YjsProvider }>;
+  'connection-close': CustomEvent<
+    { event: CloseEvent | null; provider: YjsProvider }
+  >;
+}
+
+export interface YjsProvider extends EventTarget {
+  awareness: awarenessProtocol.Awareness;
+  doc: Y.Doc;
+  synced: boolean;
+
+  destroy();
+
+  addEventListener<K extends keyof YjsProviderEventMap>(
+    type: K,
+    listener: (event: YjsProviderEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+
+  removeEventListener<K extends keyof YjsProviderEventMap>(
+    type: K,
+    listener: (event: YjsProviderEventMap[K]) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+
+  dispatchEvent(event: Event): boolean;
+
+  // fallback DOM signature (required)
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}

package/src/_dnt.shims.ts

@@ -0,0 +1,60 @@
+const dntGlobals = {
+};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+
+function createMergeProxy<T extends object, U extends object>(
+  baseObj: T,
+  extObj: U,
+): Omit<T, keyof U> & U {
+  return new Proxy(baseObj, {
+    get(_target, prop, _receiver) {
+      if (prop in extObj) {
+        return (extObj as any)[prop];
+      } else {
+        return (baseObj as any)[prop];
+      }
+    },
+    set(_target, prop, value) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      (baseObj as any)[prop] = value;
+      return true;
+    },
+    deleteProperty(_target, prop) {
+      let success = false;
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+        success = true;
+      }
+      if (prop in baseObj) {
+        delete (baseObj as any)[prop];
+        success = true;
+      }
+      return success;
+    },
+    ownKeys(_target) {
+      const baseKeys = Reflect.ownKeys(baseObj);
+      const extKeys = Reflect.ownKeys(extObj);
+      const extKeysSet = new Set(extKeys);
+      return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
+    },
+    defineProperty(_target, prop, desc) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      Reflect.defineProperty(baseObj, prop, desc);
+      return true;
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (prop in extObj) {
+        return Reflect.getOwnPropertyDescriptor(extObj, prop);
+      } else {
+        return Reflect.getOwnPropertyDescriptor(baseObj, prop);
+      }
+    },
+    has(_target, prop) {
+      return prop in extObj || prop in baseObj;
+    },
+  }) as any;
+}

package/src/binding/BindingMetadata.ts

@@ -0,0 +1,6 @@
+import { ProsemirrorMapping } from '../lib.js';
+
+export interface BindingMetadata {
+  mapping: ProsemirrorMapping;
+  isOverlappingMark: Map<string, boolean>;
+}

package/src/binding/PmYjsBinding.ts

@@ -0,0 +1,300 @@
+import * as Y from 'yjs';
+
+import { Fragment, Slice } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
+
+import { CoreEditor } from '@kerebron/editor';
+import { User } from '@kerebron/editor/user';
+
+import { CreateYjsProvider, YjsProvider } from '../YjsProvider.js';
+import { ProsemirrorMapping } from '../lib.js';
+import { SelectionStash } from '../ui/selection.js';
+import { ySyncPluginKey } from '../keys.js';
+
+import { yXmlFragmentToProseMirrorRootNode } from './convertUtils.js';
+import { updateYFragment } from './updateYFragment.js';
+import { BindingMetadata } from './BindingMetadata.js';
+import { createNodeIfNotExists } from './createNodeFromYElement.js';
+
+type Mutex = (f: () => void, g?: () => void) => void;
+
+export const createMutex = (): Mutex => {
+  let token = true;
+  return (f: () => void, g?: () => void) => {
+    if (token) {
+      token = false;
+      try {
+        f();
+      } finally {
+        token = true;
+      }
+    } else if (g !== undefined) {
+      g();
+    }
+  };
+};
+
+type ConnectionState = 'idle' | 'joining' | 'synced' | 'leaving' | 'error';
+
+export type YjsData = { ydoc: Y.Doc; xmlFragment: Y.XmlFragment };
+
+export class PmYjsBinding extends EventTarget {
+  private provider: YjsProvider | undefined;
+  private connectionState: ConnectionState = 'idle';
+
+  private yjs: YjsData | undefined;
+  private selectionStash: SelectionStash | undefined;
+
+  public addToYjsHistory = true;
+  private hasImported = false;
+  private mux: Mutex;
+  private bindingMetadata: BindingMetadata;
+
+  private syncedHandler: (
+    event: CustomEvent<{
+      state: boolean;
+    }>,
+  ) => void;
+  private _observeFunction: (
+    events: Array<Y.YEvent<any>>,
+    transaction: Y.Transaction,
+  ) => void;
+
+  constructor(private readonly editor: CoreEditor) {
+    super();
+
+    this.bindingMetadata = { mapping: new Map(), isOverlappingMark: new Map() };
+
+    this.mux = createMutex();
+
+    this.syncedHandler = (
+      event: CustomEvent<{
+        state: boolean;
+      }>,
+    ) => {
+      const synced = event.detail.state;
+      if (synced && !this.hasImported) {
+        this.importRemoteYdoc();
+      } else {
+        // this.ydocChanged();
+      }
+    };
+
+    this._observeFunction = (events, transaction) => {
+      this.yXmlChanged(events, transaction);
+    };
+  }
+
+  destroy() {
+    this.connectionState = 'idle';
+    const tr = this.editor.state.tr;
+    this.leaveRoom(tr);
+    this.editor.dispatchTransaction(tr);
+  }
+
+  changeUser(user: User) {
+    if (!this.provider) {
+      return;
+    }
+    this.provider.awareness.setLocalStateField('kerebron:user', user);
+  }
+
+  changeRoom(
+    roomId: string,
+    createYjsProvider: CreateYjsProvider,
+    tr: Transaction,
+  ) {
+    if (this.provider) {
+      this.provider.removeEventListener('synced', this.syncedHandler);
+      this.provider.destroy();
+      this.hasImported = false;
+      this.provider = undefined;
+    }
+
+    this.addToYjsHistory = true;
+
+    this.connectionState = 'joining';
+    const [provider, ydoc] = createYjsProvider(
+      roomId,
+    );
+    this.bindingMetadata.mapping.clear();
+    this.bindingMetadata.isOverlappingMark.clear();
+
+    this.provider = provider;
+    const fieldName = 'kerebron:' + this.editor.schema.topNodeType.name;
+    this.yjs = { ydoc, xmlFragment: ydoc.getXmlFragment(fieldName) };
+    this.selectionStash = new SelectionStash(
+      this.yjs,
+      this.getMapping(),
+      this.editor,
+    );
+    this.yjs.xmlFragment.observeDeep(this._observeFunction);
+
+    this.provider.addEventListener('synced', this.syncedHandler);
+
+    tr.setMeta('yjs:setAwareness', provider.awareness);
+    tr.setMeta('setYjs', this.yjs);
+  }
+
+  leaveRoom(tr: Transaction) {
+    this.connectionState = 'leaving';
+    if (this.provider) {
+      this.provider.removeEventListener('synced', this.syncedHandler);
+      this.provider.destroy();
+    }
+
+    this.addToYjsHistory = true;
+    this.provider = undefined;
+
+    this.selectionStash?.destroy();
+    this.selectionStash = undefined;
+    this.yjs?.xmlFragment.unobserveDeep(this._observeFunction);
+    this.yjs = undefined;
+
+    this.hasImported = false;
+
+    tr.setMeta('addToYjsHistory', false);
+    tr.setMeta('yjs:removeAwareness', true);
+    tr.setMeta('clearYjs', true);
+  }
+
+  importRemoteYdoc() {
+    if (!this.yjs) {
+      return;
+    }
+
+    this.addToYjsHistory = this.editor.state.doc.content.size > 2; // Non empty para
+
+    if (this.yjs.xmlFragment.length === 0) {
+      this.createFromProseMirror(this.yjs);
+    } else {
+      this.overwriteProseMirror(this.yjs.xmlFragment);
+    }
+
+    this.connectionState = 'synced';
+    this.hasImported = true;
+  }
+
+  yXmlChanged(events: Array<Y.YEvent<any>>, ytr: Y.Transaction) {
+    this.mux(() => {
+      if (!this.yjs) {
+        return;
+      }
+
+      const state = this.editor.state;
+
+      const { xmlFragment } = this.yjs;
+
+      // TODO handleSnapShot
+
+      const mapping = this.bindingMetadata.mapping;
+      const delType = (_: any, type: Y.AbstractType<any>) =>
+        mapping.delete(type);
+      Y.iterateDeletedStructs(
+        ytr,
+        ytr.deleteSet,
+        (struct) => {
+          if (struct.constructor === Y.Item) {
+            const type = (struct as Y.Item).content.type;
+            type && mapping.delete(type);
+          }
+        },
+      );
+      ytr.changed.forEach(delType);
+      ytr.changedParentTypes.forEach(delType);
+
+      const fragmentContent = xmlFragment.toArray().map((t) =>
+        createNodeIfNotExists(
+          t as Y.XmlElement,
+          state.schema,
+          this.bindingMetadata,
+        )
+      ).filter((n) => n !== null);
+
+      const tr = state.tr;
+      if (ytr.origin instanceof Y.UndoManager) {
+      } else {
+      }
+      tr.setMeta('addToYjsHistory', false);
+      tr.replace(
+        0,
+        state.doc.content.size,
+        new Slice(Fragment.from(fragmentContent), 0, 0),
+      );
+
+      this.selectionStash?.restore(tr);
+      this.editor.dispatchTransaction(tr);
+    });
+  }
+
+  pmChanged() {
+    if (!this.hasImported) {
+      return;
+    }
+
+    if (!this.yjs) {
+      return;
+    }
+
+    const doc = this.editor.state.doc;
+    const { ydoc, xmlFragment } = this.yjs;
+
+    this.mux(() => {
+      const origin = ySyncPluginKey;
+
+      ydoc.transact((ytr) => {
+        ytr.meta.set('addToYjsHistory', this.addToYjsHistory);
+        updateYFragment(
+          ydoc,
+          xmlFragment,
+          doc,
+          this.bindingMetadata,
+          this.addToYjsHistory,
+        );
+        this.selectionStash?.store();
+      }, origin);
+    });
+  }
+
+  createFromProseMirror(yjs: YjsData) {
+    const doc = this.editor.state.doc;
+    const { ydoc, xmlFragment } = yjs;
+    updateYFragment(
+      ydoc,
+      xmlFragment,
+      doc,
+      this.bindingMetadata,
+      this.addToYjsHistory,
+    );
+  }
+
+  overwriteProseMirror(yXmlFragment: Y.XmlFragment) {
+    const state = this.editor.state;
+    const newRoot = yXmlFragmentToProseMirrorRootNode(
+      yXmlFragment,
+      state.schema,
+    );
+
+    const tr = state.tr;
+    tr.setMeta('addToYjsHistory', false);
+    tr.replaceWith(
+      0,
+      state.doc.content.size,
+      newRoot,
+    );
+
+    this.editor.dispatchTransaction(tr);
+  }
+
+  getYjs(): YjsData | undefined {
+    return this.yjs;
+  }
+
+  getMapping(): ProsemirrorMapping {
+    return this.bindingMetadata.mapping;
+  }
+
+  getSelectionStash(): SelectionStash | undefined {
+    return this.selectionStash;
+  }
+}

package/src/binding/convertUtils.ts

@@ -0,0 +1,124 @@
+import * as Y from 'yjs';
+
+import { Fragment, Node, type Schema } from 'prosemirror-model';
+
+import { TransactFunc } from '../lib.js';
+
+import { updateYFragment } from './updateYFragment.js';
+import { createNodeFromYElement } from './createNodeFromYElement.js';
+import { BindingMetadata } from './BindingMetadata.js';
+
+export const createEmptyMeta = (): BindingMetadata => ({
+  mapping: new Map(),
+  isOverlappingMark: new Map(),
+});
+
+/**
+ * Utility function for converting an Y.Fragment to a ProseMirror fragment.
+ */
+export const yXmlFragmentToProseMirrorFragment = (
+  yXmlFragment: Y.XmlFragment,
+  schema: Schema,
+) => {
+  const elements: Y.XmlElement[] = yXmlFragment.toArray().filter((i) =>
+    i instanceof Y.XmlElement
+  );
+  const fragmentContent = elements.map((t) =>
+    createNodeFromYElement(
+      t,
+      schema,
+      createEmptyMeta(),
+    )
+  ).filter((n) => n !== null);
+  return Fragment.fromArray(fragmentContent);
+};
+
+/**
+ * Utility function for converting an Y.Fragment to a ProseMirror node.
+ */
+export const yXmlFragmentToProseMirrorRootNode = (
+  yXmlFragment: Y.XmlFragment,
+  schema: Schema,
+) =>
+  schema.topNodeType.create(
+    null,
+    yXmlFragmentToProseMirrorFragment(yXmlFragment, schema),
+  );
+
+/**
+ * Utility method to convert a Prosemirror Doc Node into a Y.Doc.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ */
+export function prosemirrorToYDoc(
+  doc: Node,
+  xmlFragment: string = 'prosemirror',
+): Y.Doc {
+  const ydoc = new Y.Doc();
+  const type: Y.XmlFragment = ydoc.get(xmlFragment, Y.XmlFragment);
+  if (!type.doc) {
+    return ydoc;
+  }
+
+  prosemirrorToYXmlFragment(doc, type);
+  return type.doc;
+}
+
+/**
+ * Utility method to update an empty Y.XmlFragment with content from a Prosemirror Doc Node.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ *
+ * Note: The Y.XmlFragment does not need to be part of a Y.Doc document at the time that this
+ * method is called, but it must be added before any other operations are performed on it.
+ */
+export function prosemirrorToYXmlFragment(
+  doc: Node,
+  xmlFragment: Y.XmlFragment,
+): Y.XmlFragment {
+  const type = xmlFragment || new Y.XmlFragment();
+  const ydoc: { transact: TransactFunc<void> } = type.doc
+    ? type.doc
+    : { transact: (transaction) => transaction(undefined) };
+  updateYFragment(ydoc, type, doc, {
+    mapping: new Map(),
+    isOverlappingMark: new Map(),
+  });
+  return type;
+}
+
+/**
+ * Utility method to convert Prosemirror compatible JSON into a Y.Doc.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ */
+export function prosemirrorJSONToYDoc(
+  schema: Schema,
+  state: any,
+  xmlFragment: string = 'prosemirror',
+): Y.Doc {
+  const doc = Node.fromJSON(schema, state);
+  return prosemirrorToYDoc(doc, xmlFragment);
+}
+
+/**
+ * Utility method to convert Prosemirror compatible JSON to a Y.XmlFragment
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ */
+export function prosemirrorJSONToYXmlFragment(
+  schema: Schema,
+  state: any,
+  xmlFragment: Y.XmlFragment,
+): Y.XmlFragment {
+  const doc = Node.fromJSON(schema, state);
+  return prosemirrorToYXmlFragment(doc, xmlFragment);
+}

package/src/{createNodeFromYElement.ts → binding/createNodeFromYElement.ts}

@@ -2,9 +2,9 @@ import * as PModel from 'prosemirror-model';
 import { Mark, Schema } from 'prosemirror-model';
 import * as Y from 'yjs';
 
-import type { BindingMetadata } from './ProsemirrorBinding.js';
-import { ySyncPluginKey } from './keys.js';
-import { isVisible } from './utils.js';
+import type { BindingMetadata } from './BindingMetadata.js';
+import { ySyncPluginKey } from '../keys.js';
+import { isVisible } from '../utils.js';
 import { yattr2markname } from './updateYFragment.js';
 
 export const attributesToMarks = (

package/src/{updateYFragment.ts → binding/updateYFragment.ts}

@@ -4,10 +4,10 @@ import { Mark, Node, Schema } from 'prosemirror-model';
 
 import { simpleDiff } from 'lib0/diff';
 
-import { ySyncPluginKey } from './keys.js';
-import * as utils from './utils.js';
-import type { BindingMetadata } from './ProsemirrorBinding.js';
-import { TransactFunc } from './ySyncPlugin.js';
+import { ySyncPluginKey } from '../keys.js';
+import * as utils from '../utils.js';
+import type { BindingMetadata } from './BindingMetadata.js';
+import { TransactFunc } from '../lib.js';
 
 const hashedMarkNameRegex = /(.*)(--[a-zA-Z0-9+/=]{8})$/;
 export const yattr2markname = (attrName: string) =>
@@ -21,8 +21,11 @@ const marksToAttributes = (
   marks.forEach((mark) => {
     if (mark.type.name !== 'ychange') {
       let isOverlapping = true;
-      if (!meta.isOMark.has(mark.type.name)) {
-        meta.isOMark.set(mark.type.name, !mark.type.excludes(mark.type));
+      if (!meta.isOverlappingMark.has(mark.type.name)) {
+        meta.isOverlappingMark.set(
+          mark.type.name,
+          !mark.type.excludes(mark.type),
+        );
         isOverlapping = false;
       }
 
@@ -278,7 +281,9 @@ export const updateYFragment = (
   yDomFragment: Y.XmlFragment,
   pNode: Node,
   meta: BindingMetadata,
+  addToYjsHistory?: boolean,
 ) => {
+  const origin = ySyncPluginKey;
   if (
     yDomFragment instanceof Y.XmlElement &&
     yDomFragment.nodeName !== pNode.type.name
@@ -342,7 +347,9 @@ export const updateYFragment = (
       }
     }
   }
-  ydoc.transact(() => {
+  ydoc.transact((ytr) => {
+    ytr.meta.set('updateYFragment', 1);
+    ytr.meta.set('addToYjsHistory', addToYjsHistory);
     // try to compare and update
     while (yChildCnt - left - right > 0 && pChildCnt - left - right > 0) {
       const leftY: Y.XmlElement | Y.XmlText = yChildren[left];
@@ -435,5 +442,5 @@ export const updateYFragment = (
       }
       yDomFragment.insert(left, ins);
     }
-  }, ySyncPluginKey);
+  }, origin);
 };