@kerebron/extension-yjs 0.0.1

package/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/esm/yCursorPlugin.d.ts

@@ -0,0 +1,42 @@
+import * as awarenessProtocol from 'y-protocols/awareness';
+import { DecorationAttrs } from 'prosemirror-view';
+/**
+ * Default awareness state filter
+ *
+ * @param {number} currentClientId current client id
+ * @param {number} userClientId user client id
+ * @param {any} _user user data
+ * @return {boolean}
+ */
+export declare const defaultAwarenessStateFilter: (currentClientId: number, userClientId: number, _user: any) => boolean;
+/**
+ * Default generator for a cursor element
+ *
+ * @param {any} user user data
+ * @return {HTMLElement}
+ */
+export declare const defaultCursorBuilder: (user: any) => any;
+/**
+ * Default generator for the selection attributes
+ *
+ * @param {any} user user data
+ * @return {import('prosemirror-view').DecorationAttrs}
+ */
+export declare const defaultSelectionBuilder: (user: any) => {
+    style: string;
+    class: string;
+};
+export declare const createDecorations: (state: any, awareness: awarenessProtocol.Awareness, awarenessFilter: (arg0: number, arg1: number, arg2: any) => boolean, createCursor: (user: {
+    name: string;
+    color: string;
+}, clientId: number) => Element, createSelection: (user: {
+    name: string;
+    color: string;
+}, clientId: number) => DecorationAttrs) => any;
+export declare const yCursorPlugin: (awareness: awarenessProtocol.Awareness, { awarenessStateFilter, cursorBuilder, selectionBuilder, getSelection, }?: {
+    awarenessStateFilter?: (arg0: any, arg1: any, arg2: any) => boolean;
+    cursorBuilder?: (user: any, clientId: number) => HTMLElement;
+    selectionBuilder?: (user: any, clientId: number) => DecorationAttrs;
+    getSelection?: (arg0: any) => any;
+}, cursorStateField?: string) => any;
+//# sourceMappingURL=yCursorPlugin.d.ts.map

package/esm/yCursorPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yCursorPlugin.d.ts","sourceRoot":"","sources":["../src/yCursorPlugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAI3D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAYnD;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,oBACrB,MAAM,gBACT,MAAM,SACb,GAAG,KACT,OAA2C,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,oBAahC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;CAKnC,CAAC;AAIF,eAAO,MAAM,iBAAiB,UACrB,GAAG,aACC,iBAAiB,CAAC,SAAS,mBACrB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,gBACrD,CACZ,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EACrC,QAAQ,EAAE,MAAM,KACb,OAAO,mBACK,CACf,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EACrC,QAAQ,EAAE,MAAM,KACb,eAAe,KACnB,GA6DF,CAAC;AAEF,eAAO,MAAM,aAAa,cACb,iBAAiB,CAAC,SAAS,6EAMnC;IACD,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IACpE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC;IAC7D,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,eAAe,CAAC;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CACnC,qBACiB,MAAM,QAiHzB,CAAC"}

package/esm/yCursorPlugin.js

@@ -0,0 +1,169 @@
+import * as Y from 'yjs';
+import { Decoration, DecorationSet } from 'prosemirror-view'; // eslint-disable-line
+import { Plugin } from 'prosemirror-state'; // eslint-disable-line
+import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, setMeta, } from 'y-prosemirror';
+import { yCursorPluginKey, ySyncPluginKey } from 'y-prosemirror';
+import * as math from 'lib0/math';
+/**
+ * Default awareness state filter
+ *
+ * @param {number} currentClientId current client id
+ * @param {number} userClientId user client id
+ * @param {any} _user user data
+ * @return {boolean}
+ */
+export const defaultAwarenessStateFilter = (currentClientId, userClientId, _user) => currentClientId !== userClientId;
+/**
+ * Default generator for a cursor element
+ *
+ * @param {any} user user data
+ * @return {HTMLElement}
+ */
+export const defaultCursorBuilder = (user) => {
+    const cursor = document.createElement('span');
+    cursor.classList.add('ProseMirror-yjs-cursor');
+    cursor.setAttribute('style', `border-color: ${user.color}`);
+    const userDiv = document.createElement('div');
+    userDiv.setAttribute('style', `background-color: ${user.color}`);
+    userDiv.insertBefore(document.createTextNode(user.name), null);
+    const nonbreakingSpace1 = document.createTextNode('\u2060');
+    const nonbreakingSpace2 = document.createTextNode('\u2060');
+    cursor.insertBefore(nonbreakingSpace1, null);
+    cursor.insertBefore(userDiv, null);
+    cursor.insertBefore(nonbreakingSpace2, null);
+    return cursor;
+};
+/**
+ * Default generator for the selection attributes
+ *
+ * @param {any} user user data
+ * @return {import('prosemirror-view').DecorationAttrs}
+ */
+export const defaultSelectionBuilder = (user) => {
+    return {
+        style: `background-color: ${user.color}70`,
+        class: 'ProseMirror-yjs-selection',
+    };
+};
+const rxValidColor = /^#[0-9a-fA-F]{6}$/;
+export const createDecorations = (state, awareness, awarenessFilter, createCursor, createSelection) => {
+    const ystate = ySyncPluginKey.getState(state);
+    const y = ystate.doc;
+    const decorations = [];
+    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, []);
+    }
+    awareness.getStates().forEach((aw, clientId) => {
+        if (!awarenessFilter(y.clientID, clientId, aw)) {
+            return;
+        }
+        if (aw.cursor != null) {
+            const user = aw.user || {};
+            if (user.color == null) {
+                user.color = '#ffa500';
+            }
+            else if (!rxValidColor.test(user.color)) {
+                // We only support 6-digit RGB colors in y-prosemirror
+                console.warn('A user uses an unsupported color format', user);
+            }
+            if (user.name == null) {
+                user.name = `User: ${clientId}`;
+            }
+            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) {
+                const maxsize = math.max(state.doc.content.size - 1, 0);
+                anchor = math.min(anchor, maxsize);
+                head = math.min(head, maxsize);
+                decorations.push(Decoration.widget(head, () => createCursor(user, clientId), {
+                    key: clientId + '',
+                    side: 10,
+                }));
+                const from = math.min(anchor, head);
+                const to = math.max(anchor, head);
+                decorations.push(Decoration.inline(from, to, createSelection(user, clientId), {
+                    inclusiveEnd: true,
+                    inclusiveStart: false,
+                }));
+            }
+        }
+    });
+    return DecorationSet.create(state.doc, decorations);
+};
+export const yCursorPlugin = (awareness, { awarenessStateFilter = defaultAwarenessStateFilter, cursorBuilder = defaultCursorBuilder, selectionBuilder = defaultSelectionBuilder, getSelection = (state) => state.selection, } = {}, cursorStateField = 'cursor') => {
+    return new Plugin({
+        key: yCursorPluginKey,
+        state: {
+            init(_, state) {
+                return createDecorations(state, awareness, awarenessStateFilter, cursorBuilder, selectionBuilder);
+            },
+            apply(tr, prevState, _oldState, newState) {
+                const ystate = ySyncPluginKey.getState(newState);
+                const yCursorState = tr.getMeta(yCursorPluginKey);
+                if ((ystate && ystate.isChangeOrigin) ||
+                    (yCursorState && yCursorState.awarenessUpdated)) {
+                    return createDecorations(newState, awareness, awarenessStateFilter, cursorBuilder, selectionBuilder);
+                }
+                return prevState.map(tr.mapping, tr.doc);
+            },
+        },
+        props: {
+            decorations: (state) => {
+                return yCursorPluginKey.getState(state);
+            },
+        },
+        view: (view) => {
+            const awarenessListener = () => {
+                // @ts-ignore
+                if (view.docView) {
+                    setMeta(view, yCursorPluginKey, { awarenessUpdated: true });
+                }
+            };
+            const updateCursorInfo = () => {
+                const ystate = ySyncPluginKey.getState(view.state);
+                // @note We make implicit checks when checking for the cursor property
+                const current = awareness.getLocalState() || {};
+                const selection = getSelection(view.state);
+                if (view.hasFocus()) {
+                    const selection = getSelection(view.state);
+                    /**
+                     * @type {Y.RelativePosition}
+                     */
+                    const anchor = absolutePositionToRelativePosition(selection.anchor, ystate.type, ystate.binding.mapping);
+                    /**
+                     * @type {Y.RelativePosition}
+                     */
+                    const head = absolutePositionToRelativePosition(selection.head, 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,
+                        });
+                        awareness.setLocalStateField('cm-cursor', null);
+                    }
+                }
+                else 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);
+                }
+            };
+            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);
+                },
+            };
+        },
+    });
+};

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@kerebron/extension-yjs",
+  "version": "0.0.1",
+  "license": "MIT",
+  "module": "./esm/ExtensionYjs.js",
+  "exports": {
+    ".": {
+      "import": "./esm/ExtensionYjs.js"
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.0"
+  },
+  "_generatedBy": "dnt@dev"
+}