@kerebron/extension-codemirror 0.2.0 → 0.3.0

package/esm/extension-codemirror/src/y-remote-selections.js

@@ -0,0 +1,273 @@
+import * as cmView from '@codemirror/view';
+import * as cmState from '@codemirror/state';
+import * as dom from 'lib0/dom';
+import * as pair from 'lib0/pair';
+import * as math from 'lib0/math';
+import { ySyncFacet } from './y-sync.js';
+export const yRemoteSelectionsTheme = cmView.EditorView.baseTheme({
+    '.cm-ySelection': {},
+    '.cm-yLineSelection': {
+        padding: 0,
+        margin: '0px 2px 0px 4px',
+    },
+    '.cm-ySelectionCaret': {
+        position: 'relative',
+        borderLeft: '1px solid black',
+        borderRight: '1px solid black',
+        marginLeft: '-1px',
+        marginRight: '-1px',
+        boxSizing: 'border-box',
+        display: 'inline',
+    },
+    '.cm-ySelectionCaretDot': {
+        borderRadius: '50%',
+        position: 'absolute',
+        width: '.4em',
+        height: '.4em',
+        top: '-.2em',
+        left: '-.2em',
+        backgroundColor: 'inherit',
+        transition: 'transform .3s ease-in-out',
+        boxSizing: 'border-box',
+    },
+    '.cm-ySelectionCaret:hover > .cm-ySelectionCaretDot': {
+        transformOrigin: 'bottom center',
+        transform: 'scale(0)',
+    },
+    '.cm-ySelectionInfo': {
+        position: 'absolute',
+        top: '-1.05em',
+        left: '-1px',
+        fontSize: '.75em',
+        fontFamily: 'serif',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        lineHeight: 'normal',
+        userSelect: 'none',
+        color: 'white',
+        paddingLeft: '2px',
+        paddingRight: '2px',
+        zIndex: 101,
+        transition: 'opacity .3s ease-in-out',
+        backgroundColor: 'inherit',
+        // these should be separate
+        opacity: 0,
+        transitionDelay: '0s',
+        whiteSpace: 'nowrap',
+    },
+    '.cm-ySelectionCaret:hover > .cm-ySelectionInfo': {
+        opacity: 1,
+        transitionDelay: '0s',
+    },
+});
+const yRemoteSelectionsAnnotation = cmState.Annotation.define();
+class YRemoteCaretWidget extends cmView.WidgetType {
+    constructor(color, name) {
+        super();
+        Object.defineProperty(this, "color", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: color
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: name
+        });
+    }
+    toDOM() {
+        return (dom.element('span', [
+            pair.create('class', 'kb-yjs__cursor kb-widget'),
+            pair.create('style', `border-color: ${this.color};`),
+        ], [
+            dom.text('\u2060'),
+            dom.element('div', [
+                pair.create('style', `background-color: ${this.color}`),
+            ], [
+                dom.text(this.name),
+            ]),
+            dom.text('\u2060'),
+        ]));
+    }
+    eq(widget) {
+        return widget.color === this.color;
+    }
+    compare(widget) {
+        return widget.color === this.color;
+    }
+    updateDOM() {
+        return false;
+    }
+    get estimatedHeight() {
+        return -1;
+    }
+    ignoreEvent() {
+        return true;
+    }
+}
+export class YRemoteSelectionsPluginValue {
+    constructor(view) {
+        Object.defineProperty(this, "conf", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_listener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_awareness", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "decorations", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.conf = view.state.facet(ySyncFacet);
+        this._listener = ({ added, updated, removed }) => {
+            const clients = added.concat(updated).concat(removed);
+            if (clients.findIndex((id) => id !== this.conf.awareness.doc.clientID) >= 0) {
+                view.dispatch({ annotations: [yRemoteSelectionsAnnotation.of([])] });
+            }
+        };
+        this._awareness = this.conf.awareness;
+        this._awareness.on('change', this._listener);
+        this.decorations = cmState.RangeSet.of([]);
+    }
+    destroy() {
+        this._awareness.off('change', this._listener);
+    }
+    update(update) {
+        const awareness = this.conf.awareness;
+        const decorations = [];
+        const localAwarenessState = this.conf.awareness.getLocalState();
+        // set local awareness state (update cursors)
+        if (localAwarenessState != null) {
+            const hasFocus = update.view.hasFocus &&
+                update.view.dom.ownerDocument.hasFocus();
+            const sel = hasFocus ? update.state.selection.main : null;
+            if (sel != null && 'function' === typeof this.conf.getPmPos) {
+                const nodePos = this.conf.getPmPos();
+                const currentAnchor = localAwarenessState['cm-cursor'] == null
+                    ? -1
+                    : localAwarenessState['cm-cursor'].anchor - nodePos;
+                const currentHead = localAwarenessState['cm-cursor'] == null
+                    ? -1
+                    : localAwarenessState['cm-cursor'].head - nodePos;
+                const anchor = nodePos + sel.anchor;
+                const head = nodePos + sel.head;
+                if (localAwarenessState['cm-cursor'] == null ||
+                    (currentAnchor != anchor) || (currentHead != head)) {
+                    awareness.setLocalStateField('cm-cursor', {
+                        anchor,
+                        head,
+                    });
+                }
+            }
+            else if (localAwarenessState['cm-cursor'] != null && hasFocus) {
+                awareness.setLocalStateField('cm-cursor', null);
+            }
+        }
+        // update decorations (remote selections)
+        awareness.getStates().forEach((state, clientId) => {
+            if (clientId === awareness.doc.clientID) {
+                return;
+            }
+            if (!state.user) {
+                return;
+            }
+            const cursor = state['cm-cursor'];
+            if (cursor == null || cursor.anchor == null || cursor.head == null) {
+                return;
+            }
+            if ('function' === typeof this.conf.getPmPos) {
+                const nodeAnchor = this.conf.getPmPos();
+                const nodeHead = this.conf.getPmPos() + this.conf.getNode().nodeSize;
+                if (cursor.anchor >= nodeAnchor && cursor.anchor <= nodeHead) {
+                    const anchor = { index: cursor.anchor - nodeAnchor };
+                    const head = { index: cursor.head - nodeAnchor };
+                    try {
+                        const { color = '#ffa500', name = `User: ${clientId}` } = state.user || {};
+                        const colorLight = (state.user && state.user.colorLight) ||
+                            color + '33';
+                        const start = math.min(anchor.index, head.index);
+                        const end = math.max(anchor.index, head.index);
+                        const startLine = update.view.state.doc.lineAt(start);
+                        const endLine = update.view.state.doc.lineAt(end);
+                        if (startLine.number === endLine.number) {
+                            // selected content in a single line.
+                            decorations.push({
+                                from: start,
+                                to: end,
+                                value: cmView.Decoration.mark({
+                                    attributes: { style: `background-color: ${colorLight}` },
+                                    class: 'cm-ySelection',
+                                }),
+                            });
+                        }
+                        else {
+                            // selected content in multiple lines
+                            // first, render text-selection in the first line
+                            decorations.push({
+                                from: start,
+                                to: startLine.from + startLine.length,
+                                value: cmView.Decoration.mark({
+                                    attributes: { style: `background-color: ${colorLight}` },
+                                    class: 'cm-ySelection',
+                                }),
+                            });
+                            // render text-selection in the last line
+                            decorations.push({
+                                from: endLine.from,
+                                to: end,
+                                value: cmView.Decoration.mark({
+                                    attributes: { style: `background-color: ${colorLight}` },
+                                    class: 'cm-ySelection',
+                                }),
+                            });
+                            for (let i = startLine.number + 1; i < endLine.number; i++) {
+                                const linePos = update.view.state.doc.line(i).from;
+                                decorations.push({
+                                    from: linePos,
+                                    to: linePos,
+                                    value: cmView.Decoration.line({
+                                        attributes: {
+                                            style: `background-color: ${colorLight}`,
+                                            class: 'cm-yLineSelection',
+                                        },
+                                    }),
+                                });
+                            }
+                        }
+                        decorations.push({
+                            from: head.index,
+                            to: head.index,
+                            value: cmView.Decoration.widget({
+                                side: head.index - anchor.index > 0 ? -1 : 1, // the local cursor should be rendered outside the remote selection
+                                block: false,
+                                widget: new YRemoteCaretWidget(color, name),
+                            }),
+                        });
+                    }
+                    catch (err) {
+                        console.warn(err, `User: ${clientId}`);
+                    }
+                }
+            }
+        });
+        this.decorations = cmView.Decoration.set(decorations, true);
+    }
+}
+export const yRemoteSelections = cmView.ViewPlugin.fromClass(YRemoteSelectionsPluginValue, {
+    decorations: (v) => v.decorations,
+});

package/esm/extension-codemirror/src/y-sync.d.ts

@@ -0,0 +1,11 @@
+import * as cmState from '@codemirror/state';
+import { Node } from 'prosemirror-model';
+import * as awarenessProtocol from 'y-protocols/awareness';
+export declare class YSyncConfig {
+    getNode: () => Node;
+    getPmPos: boolean | (() => number);
+    awareness: awarenessProtocol.Awareness;
+    constructor(getNode: () => Node, getPmPos: boolean | (() => number), awareness: awarenessProtocol.Awareness);
+}
+export declare const ySyncFacet: cmState.Facet<YSyncConfig, YSyncConfig>;
+//# sourceMappingURL=y-sync.d.ts.map

package/esm/extension-codemirror/src/y-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"y-sync.d.ts","sourceRoot":"","sources":["../../../src/extension-codemirror/src/y-sync.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,qBAAa,WAAW;IAEb,OAAO,EAAE,MAAM,IAAI;IACnB,QAAQ,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC;IAClC,SAAS,EAAE,iBAAiB,CAAC,SAAS;gBAFtC,OAAO,EAAE,MAAM,IAAI,EACnB,QAAQ,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAClC,SAAS,EAAE,iBAAiB,CAAC,SAAS;CAGhD;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAK3D,CAAC"}

package/esm/extension-codemirror/src/y-sync.js

@@ -0,0 +1,29 @@
+import * as cmState from '@codemirror/state'; // eslint-disable-line
+export class YSyncConfig {
+    constructor(getNode, getPmPos, awareness) {
+        Object.defineProperty(this, "getNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: getNode
+        });
+        Object.defineProperty(this, "getPmPos", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: getPmPos
+        });
+        Object.defineProperty(this, "awareness", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: awareness
+        });
+    }
+}
+export const ySyncFacet = cmState.Facet
+    .define({
+    combine(inputs) {
+        return inputs[inputs.length - 1];
+    },
+});

package/esm/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/extension-codemirror",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "module": "./esm/extension-codemirror/src/ExtensionCodeMirror.js",
   "exports": {
@@ -12,9 +12,6 @@
     }
   },
   "scripts": {},
-  "files": [
-    "assets/*.css"
-  ],
   "dependencies": {
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
@@ -36,8 +33,7 @@
     "@codemirror/search": "6.5.10",
     "@codemirror/state": "6.5.2",
     "@codemirror/view": "6.38.1",
-    "prosemirror-keymap": "1.2.2",
-    "prosemirror-model": "1.25.1",
+    "prosemirror-model": "1.25.2",
     "prosemirror-state": "1.4.3",
     "prosemirror-transform": "1.10.4",
     "prosemirror-view": "1.40.0"