@kerebron/extension-yjs 0.4.28 → 0.4.30

package/src/lib.ts

@@ -0,0 +1,230 @@
+import * as Y from 'yjs';
+import { type EditorView } from 'prosemirror-view';
+import { type Node } from 'prosemirror-model';
+
+import { ySyncPluginKey } from './keys.js';
+
+/**
+ * Either a node if type is YXmlElement or an Array of text nodes if YXmlText
+ */
+type ProsemirrorMapping = Map<Y.AbstractType<any>, Node>;
+
+/**
+ * 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);
+    }
+  });
+};
+
+export const setMeta = (view: EditorView, key, value) => {
+  if (!viewsToUpdate) {
+    viewsToUpdate = new Map();
+    setTimeout(updateMetas, 0);
+  }
+
+  let subMap = viewsToUpdate.get(view);
+  if (subMap === undefined) {
+    subMap = new Map();
+    viewsToUpdate.set(view, subMap);
+  }
+  subMap.set(key, value);
+};
+
+/**
+ * Transforms a Prosemirror based absolute position to a Yjs Cursor (relative position in the Yjs model).
+ */
+export const absolutePositionToRelativePosition = (
+  pos: number,
+  type: Y.XmlFragment,
+  mapping: ProsemirrorMapping,
+): any => {
+  if (pos === 0) {
+    // if the type is later populated, we want to retain the 0 position (hence assoc=-1)
+    return Y.createRelativePositionFromTypeIndex(
+      type,
+      0,
+      type.length === 0 ? -1 : 0,
+    );
+  }
+
+  let n: Y.AbstractType<any> | null = type._first === null
+    ? null
+    : /** @type {Y.ContentType} */ (type._first.content).type;
+  while (n !== null && type !== n) {
+    if (n instanceof Y.XmlText) {
+      if (n._length >= pos) {
+        return Y.createRelativePositionFromTypeIndex(
+          n,
+          pos,
+          type.length === 0 ? -1 : 0,
+        );
+      } else {
+        pos -= n._length;
+      }
+      if (n._item !== null && n._item.next !== null) {
+        n = /** @type {Y.ContentType} */ (n._item.next.content).type;
+      } else {
+        do {
+          n = n._item === null ? null : n._item.parent;
+          pos--;
+        } while (
+          n !== type && n !== null && n._item !== null && n._item.next === null
+        );
+        if (n !== null && n !== type) {
+          // @ts-gnore we know that n.next !== null because of above loop conditition
+          n = n._item === null
+            ? null
+            : /** @type {Y.ContentType} */ (/** @type Y.Item */ (n._item.next)
+              .content).type;
+        }
+      }
+    } else {
+      const pNodeSize =
+        /** @type {any} */ (mapping.get(n) || { nodeSize: 0 }).nodeSize;
+      if (n._first !== null && pos < pNodeSize) {
+        n = /** @type {Y.ContentType} */ (n._first.content).type;
+        pos--;
+      } else {
+        if (pos === 1 && n._length === 0 && pNodeSize > 1) {
+          // edge case, should end in this paragraph
+          return new Y.RelativePosition(
+            n._item === null ? null : n._item.id,
+            n._item === null ? Y.findRootTypeKey(n) : null,
+            null,
+          );
+        }
+        pos -= pNodeSize;
+        if (n._item !== null && n._item.next !== null) {
+          n = /** @type {Y.ContentType} */ (n._item.next.content).type;
+        } else {
+          if (pos === 0) {
+            // set to end of n.parent
+            n = n._item === null ? n : n._item.parent;
+            return new Y.RelativePosition(
+              n._item === null ? null : n._item.id,
+              n._item === null ? Y.findRootTypeKey(n) : null,
+              null,
+            );
+          }
+          do {
+            n = n._item.parent;
+            pos--;
+          } while (n !== type && /** @type {Y.Item} */ (n._item).next === null);
+          // if n is null at this point, we have an unexpected case
+          if (n !== type) {
+            // We know that n._item.next is defined because of above loop condition
+            n =
+              /** @type {Y.ContentType} */ (/** @type {Y.Item} */ (/** @type {Y.Item} */ (n
+                ._item).next).content).type;
+          }
+        }
+      }
+    }
+    if (n === null) {
+      throw new Error('Unexpected case');
+    }
+    if (pos === 0 && n.constructor !== Y.XmlText && n !== type) { // TODO: set to <= 0
+      return createRelativePosition(n._item.parent, n._item);
+    }
+  }
+  return Y.createRelativePositionFromTypeIndex(
+    type,
+    type._length,
+    type.length === 0 ? -1 : 0,
+  );
+};
+
+const createRelativePosition = (type: Y.AbstractType<any>, item: Y.Item) => {
+  let typeid = null;
+  let tname = null;
+  if (type._item === null) {
+    tname = Y.findRootTypeKey(type);
+  } else {
+    typeid = Y.createID(type._item.id.client, type._item.id.clock);
+  }
+  return new Y.RelativePosition(typeid, tname, item.id);
+};
+
+export const relativePositionToAbsolutePosition = (
+  yDoc: Y.Doc,
+  documentType: Y.XmlFragment,
+  relPos: any,
+  mapping: ProsemirrorMapping,
+): null | number => {
+  const decodedPos = Y.createAbsolutePositionFromRelativePosition(relPos, yDoc);
+  if (
+    decodedPos === null ||
+    (decodedPos.type !== documentType &&
+      !Y.isParentOf(documentType, decodedPos.type._item))
+  ) {
+    return null;
+  }
+  let type = decodedPos.type;
+  let pos = 0;
+  if (type instanceof Y.XmlText) {
+    pos = decodedPos.index;
+  } else if (type._item === null || !type._item.deleted) {
+    let n: Y.Item | null = type._first;
+    let i = 0;
+    while (i < type._length && i < decodedPos.index && n !== null) {
+      if (!n.deleted) {
+        const t: Y.AbstractType<any> = n.content.type;
+        i++;
+        if (t instanceof Y.XmlText) {
+          pos += t._length;
+        } else {
+          const node = mapping.get(t);
+          pos += node?.nodeSize || 0;
+        }
+      }
+      n = n.right;
+    }
+    pos += 1; // increase because we go out of n
+  }
+  while (type !== documentType && type._item !== null) {
+    const parent = type._item.parent;
+    if (parent instanceof Y.ID || parent === null) {
+      continue;
+    }
+    if (parent._item === null || !parent._item.deleted) {
+      pos += 1; // the start tag
+      let n = /** @type {Y.AbstractType} */ (parent)._first;
+      // now iterate until we found type
+      while (n !== null) {
+        const contentType: Y.AbstractType<any> = n.content.type;
+        if (contentType === type) {
+          break;
+        }
+        if (!n.deleted) {
+          if (contentType instanceof Y.XmlText) {
+            pos += contentType._length;
+          } else {
+            const node = mapping.get(contentType);
+            pos += node?.nodeSize || 0;
+          }
+        }
+        n = n.right;
+      }
+    }
+    type = parent;
+  }
+  return pos - 1; // we don't count the most outer tag, because it is a fragment
+};

package/src/userColors.ts

@@ -0,0 +1,10 @@
+export const userColors = [
+  { color: '#30bced', light: '#30bced33' },
+  { color: '#6eeb83', light: '#6eeb8333' },
+  { color: '#ffbc42', light: '#ffbc4233' },
+  { color: '#ecd444', light: '#ecd44433' },
+  { color: '#ee6352', light: '#ee635233' },
+  { color: '#9ac2c9', light: '#9ac2c933' },
+  { color: '#8acb88', light: '#8acb8833' },
+  { color: '#1be7ff', light: '#1be7ff33' },
+];

package/src/utils.ts

@@ -0,0 +1,13 @@
+import * as sha256 from 'lib0/hash/sha256';
+import * as buf from 'lib0/buffer';
+
+const _convolute = (digest: Uint8Array) => {
+  const N = 6;
+  for (let i = N; i < digest.length; i++) {
+    digest[i % N] = digest[i % N] ^ digest[i];
+  }
+  return digest.slice(0, N);
+};
+
+export const hashOfJSON = (json: any) =>
+  buf.toBase64(_convolute(sha256.digest(buf.encodeAny(json))));

package/src/yPositionPlugin.ts

@@ -0,0 +1,228 @@
+import * as Y from 'yjs';
+import * as awarenessProtocol from 'y-protocols/awareness';
+
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
+
+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 {
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+  setMeta,
+} from './lib.js';
+import { ySyncPluginKey } from './keys.js';
+
+export const yPositionPluginKey = new PluginKey('yjs-position');
+
+type AwarenessListener = (
+  { added, updated, removed }: {
+    added: number[];
+    updated: number[];
+    removed: number[];
+  },
+  s: any,
+  t: any,
+) => void;
+
+interface PositionPluginConfig {
+  getSelection?: (arg0: any) => any;
+}
+
+/**
+ * Default awareness state filter
+ */
+export const defaultAwarenessStateFilter = (
+  currentClientId: number,
+  userClientId: number,
+  _user: any,
+): boolean => currentClientId !== userClientId;
+
+export const yPositionPlugin = (
+  awareness: awarenessProtocol.Awareness,
+  editor: CoreEditor,
+  {
+    getSelection = (state: EditorState) => state.selection,
+  }: PositionPluginConfig = {},
+  cursorStateField: string = 'cursor',
+) => {
+  return new Plugin({
+    key: yPositionPluginKey,
+    view: (view) => {
+      const extension: ExtensionRemoteSelection = editor.getExtension(
+        'remote-selection',
+      )!;
+
+      const awarenessListener: AwarenessListener = (
+        { added, updated, removed },
+      ) => {
+        const clients = added.concat(updated).concat(removed);
+        if (
+          clients.findIndex((id: number) => id !== awareness.doc.clientID) ===
+            -1
+        ) {
+          return;
+        }
+
+        if (view.docView) {
+          setMeta(view, remoteSelectionPluginKey, {
+            remotePositionUpdated: true,
+          });
+        }
+
+        const remoteStates: SelectionState[] = [];
+
+        const ystate = ySyncPluginKey.getState(view.state);
+        const y = ystate.doc;
+
+        awareness.getStates().forEach((aw, clientId) => {
+          if (!defaultAwarenessStateFilter(y.clientID, clientId, aw)) {
+            return;
+          }
+
+          if (!aw.cursor) {
+            return;
+          }
+
+          let anchor = relativePositionToAbsolutePosition(
+            y,
+            ystate.type,
+            Y.createRelativePositionFromJSON(aw.cursor.anchor),
+            ystate.binding.mapping,
+          );
+          let head = relativePositionToAbsolutePosition(
+            y,
+            ystate.type,
+            Y.createRelativePositionFromJSON(aw.cursor.head),
+            ystate.binding.mapping,
+          );
+
+          if (anchor !== null && head !== null) {
+            remoteStates.push({
+              clientId,
+              user: {
+                name: aw.user?.name,
+                color: aw.user?.color,
+                colorLight: aw.user?.colorLight,
+              },
+              cursor: {
+                anchor,
+                head,
+              },
+            });
+          }
+        });
+
+        extension.setRemoteStates(remoteStates);
+        // view.dispatch({ annotations: [yRemoteSelectionsAnnotation.of([])] });
+      };
+
+      {
+        // if (
+        //   ystate.snapshot != null || ystate.prevSnapshot != null ||
+        //   ystate.binding.mapping.size === 0
+        // ) {
+        //   // do not render cursors while snapshot is active
+        //   return DecorationSet.create(state.doc, []);
+        // }
+      }
+
+      const updateAwareness = (
+        selectionAnchor: number,
+        selectionHead: number,
+      ) => {
+        const ystate = ySyncPluginKey.getState(view.state);
+        const current = awareness.getLocalState() || {};
+
+        const anchor: Y.RelativePosition = absolutePositionToRelativePosition(
+          selectionAnchor,
+          ystate.type,
+          ystate.binding.mapping,
+        );
+        const head: Y.RelativePosition = absolutePositionToRelativePosition(
+          selectionHead,
+          ystate.type,
+          ystate.binding.mapping,
+        );
+
+        if (
+          current.cursor == null ||
+          !Y.compareRelativePositions(
+            Y.createRelativePositionFromJSON(current.cursor.anchor),
+            anchor,
+          ) ||
+          !Y.compareRelativePositions(
+            Y.createRelativePositionFromJSON(current.cursor.head),
+            head,
+          )
+        ) {
+          awareness.setLocalStateField(cursorStateField, {
+            anchor,
+            head,
+          });
+        }
+      };
+
+      const clearAwareness = () => {
+        const ystate = ySyncPluginKey.getState(view.state);
+        const current = awareness.getLocalState() || {};
+
+        if (
+          current.cursor != null &&
+          relativePositionToAbsolutePosition(
+              ystate.doc,
+              ystate.type,
+              Y.createRelativePositionFromJSON(current.cursor.anchor),
+              ystate.binding.mapping,
+            ) !== null
+        ) {
+          // delete cursor information if current cursor information is owned by this editor binding
+          awareness.setLocalStateField(cursorStateField, null);
+        }
+      };
+
+      const updateCursorInfo = () => {
+        if (view.hasFocus()) {
+          const selection = getSelection(view.state);
+          updateAwareness(selection.anchor, selection.head);
+        } else {
+          // clearAwareness();
+        }
+      };
+
+      const localPositionChangedListener = (event: CustomEvent) => {
+        const { detail } = event;
+        updateAwareness(detail.anchor, detail.head);
+      };
+
+      editor.addEventListener(
+        'localPositionChanged',
+        localPositionChangedListener,
+      );
+
+      awareness.on('change', awarenessListener);
+      view.dom.addEventListener('focusin', updateCursorInfo);
+      view.dom.addEventListener('focusout', updateCursorInfo);
+      return {
+        update: updateCursorInfo,
+        destroy: () => {
+          view.dom.removeEventListener('focusin', updateCursorInfo);
+          view.dom.removeEventListener('focusout', updateCursorInfo);
+          awareness.off('change', awarenessListener);
+          awareness.setLocalStateField(cursorStateField, null);
+          editor.removeEventListener(
+            'localPositionChanged',
+            localPositionChangedListener,
+          );
+        },
+      };
+    },
+    updateCursorInfo(state: EditorState) {
+      throw new Error('TODO: merge with updateCursorInfo above');
+    },
+  });
+};