@kerebron/extension-codemirror 0.0.1

package/esm/utils.js

@@ -0,0 +1,199 @@
+// From prosemirror guide
+import { Selection, TextSelection, } from 'prosemirror-state';
+import { setBlockType } from '@kerebron/editor/commands';
+export const CodeBlockNodeName = 'code_block';
+function nonEmpty(value) {
+    return value !== null && value !== undefined;
+}
+export function computeChange(oldVal, newVal) {
+    if (oldVal === newVal)
+        return null;
+    let start = 0;
+    let oldEnd = oldVal.length;
+    let newEnd = newVal.length;
+    while (start < oldEnd &&
+        oldVal.charCodeAt(start) === newVal.charCodeAt(start)) {
+        start += 1;
+    }
+    while (oldEnd > start &&
+        newEnd > start &&
+        oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
+        oldEnd -= 1;
+        newEnd -= 1;
+    }
+    return { from: start, to: oldEnd, text: newVal.slice(start, newEnd) };
+}
+export const asProseMirrorSelection = (pmDoc, cmView, getPos) => {
+    const offset = (typeof getPos === 'function' ? getPos() || 0 : 0) + 1;
+    const anchor = cmView.state.selection.main.from + offset;
+    const head = cmView.state.selection.main.to + offset;
+    return TextSelection.create(pmDoc, anchor, head);
+};
+export const forwardSelection = (cmView, pmView, getPos) => {
+    if (!cmView.hasFocus)
+        return;
+    const selection = asProseMirrorSelection(pmView.state.doc, cmView, getPos);
+    if (!selection.eq(pmView.state.selection)) {
+        pmView.dispatch(pmView.state.tr.setSelection(selection));
+    }
+};
+export const valueChanged = (textUpdate, node, getPos, view) => {
+    const change = computeChange(node.textContent, textUpdate);
+    if (change && typeof getPos === 'function') {
+        const start = getPos() + 1;
+        let pmTr = view.state.tr;
+        pmTr = pmTr.replaceWith(start + change.from, start + change.to, change.text ? view.state.schema.text(change.text) : []);
+        view.dispatch(pmTr);
+    }
+};
+export const maybeEscape = (unit, dir, cm, view, getPos) => {
+    const sel = cm.state.selection.main;
+    const line = cm.state.doc.lineAt(sel.from);
+    const lastLine = cm.state.doc.lines;
+    if (sel.to !== sel.from ||
+        line.number !== (dir < 0 ? 1 : lastLine) ||
+        (unit === 'char' && sel.from !== (dir < 0 ? 0 : line.to)) ||
+        typeof getPos !== 'function') {
+        return false;
+    }
+    view.focus();
+    const node = view.state.doc.nodeAt(getPos());
+    if (!node)
+        return false;
+    const targetPos = getPos() + (dir < 0 ? 0 : node.nodeSize);
+    const selection = Selection.near(view.state.doc.resolve(targetPos), dir);
+    view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
+    view.focus();
+    return true;
+};
+export const backspaceHandler = (pmView, view) => {
+    const { selection } = view.state;
+    if (selection.main.empty && selection.main.from === 0) {
+        setBlockType(pmView.state.schema.nodes.paragraph)(pmView.state, pmView.dispatch);
+        setTimeout(() => pmView.focus(), 20);
+        return true;
+    }
+    return false;
+};
+export const setMode = async (lang, cmView, settings, languageConf) => {
+    const support = await settings.languageLoaders?.[lang]?.();
+    if (support) {
+        cmView.dispatch({
+            effects: languageConf.reconfigure(support),
+        });
+    }
+};
+const isTheme = (theme) => {
+    if (!Array.isArray(theme)) {
+        return false;
+    }
+    return theme.every((item) => item !== undefined &&
+        typeof item.extension === 'object' && // or whatever type Extension is
+        typeof item.name === 'string');
+};
+export const setTheme = async (cmView, themeConfig, theme) => {
+    if (isTheme(theme)) {
+        cmView.dispatch({
+            effects: themeConfig.reconfigure(theme),
+        });
+    }
+};
+const arrowHandler = (dir) => (state, dispatch, view) => {
+    if (state.selection.empty && view?.endOfTextblock(dir)) {
+        const side = dir === 'left' || dir === 'up' ? -1 : 1;
+        const { $head } = state.selection;
+        const nextPos = Selection.near(state.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
+        if (nextPos.$head &&
+            nextPos.$head.parent.type.name === CodeBlockNodeName) {
+            dispatch?.(state.tr.setSelection(nextPos));
+            return true;
+        }
+    }
+    return false;
+};
+export const createCodeBlock = (state, dispatch, attributes) => {
+    const { $from, $to } = state.selection;
+    //if we are in a CodeBlock node we do nothing
+    const parentNode = $from.node($from.depth);
+    if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+        return false;
+    }
+    //if from and to in the same paragraph
+    if ($from.parentOffset === $to.parentOffset &&
+        $from.parent.type.name === 'paragraph') {
+        const text = $from.parent.textContent;
+        const tr = state.tr;
+        const newNode = state.schema.nodes[CodeBlockNodeName].createAndFill(attributes, text ? [state.schema.text($from.parent.textContent)] : []);
+        if (newNode && dispatch) {
+            const pos = $from.before($from.depth);
+            tr.delete(pos, pos + $from.parent.nodeSize - 1);
+            tr.insert(pos, newNode);
+            tr.setSelection(TextSelection.create(tr.doc, $from.pos));
+            dispatch(tr);
+        }
+        return true;
+    }
+    if (dispatch) {
+        const tr = state.tr;
+        const slice = state.doc.slice($from.before($from.depth), $to.after($to.depth), true);
+        const content = slice.content.textBetween(0, slice.content.size, '\n');
+        const newNode = state.schema.nodes[CodeBlockNodeName].createAndFill(attributes, state.schema.text(content));
+        if (newNode) {
+            tr.delete($from.before(slice.openStart + 1), $to.after(slice.openEnd + 1));
+            tr.insert($from.before(slice.openStart + 1), newNode);
+            tr.setSelection(TextSelection.create(tr.doc, $from.pos, $from.pos + newNode.nodeSize - 2));
+            dispatch(tr);
+        }
+    }
+    return true;
+};
+export const removeCodeBlock = (state, dispatch) => {
+    const { $from } = state.selection;
+    const parentNode = $from.node($from.depth);
+    if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+        const children = [];
+        parentNode.forEach((child) => {
+            children.push(child);
+        });
+        const childrenNodes = children
+            .map((child) => {
+            return state.schema.nodes.paragraph.createAndFill({}, [child]);
+        })
+            .filter(nonEmpty);
+        const tr = state.tr;
+        const pos = $from.before($from.depth);
+        tr.delete(pos, pos + parentNode.nodeSize - 1);
+        tr.insert(pos, childrenNodes);
+        tr.setSelection(TextSelection.create(tr.doc, $from.pos - 1));
+        if (dispatch) {
+            dispatch(tr.scrollIntoView());
+        }
+    }
+    return false;
+};
+export const toggleCodeBlock = (state, dispatch, attributes) => {
+    const { $from } = state.selection;
+    if ($from.pos === 0) {
+        return false;
+    }
+    const parentNode = $from.node($from.depth);
+    if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+        return removeCodeBlock(state, dispatch);
+    }
+    else {
+        return createCodeBlock(state, dispatch, attributes);
+    }
+};
+export const codeBlockArrowHandlers = {
+    ArrowLeft: arrowHandler('left'),
+    ArrowRight: arrowHandler('right'),
+    ArrowUp: arrowHandler('up'),
+    ArrowDown: arrowHandler('down'),
+};
+export const codeBlockToggleShortcut = {
+    'Mod-Alt-c': toggleCodeBlock,
+};
+export const codeBlockKeymap = {
+    ...codeBlockToggleShortcut,
+    ...codeBlockArrowHandlers,
+};

package/esm/y-remote-selections.d.ts

@@ -0,0 +1,14 @@
+import * as cmView from '@codemirror/view';
+import { YSyncConfig } from './y-sync.js';
+export declare const yRemoteSelectionsTheme: any;
+export declare class YRemoteSelectionsPluginValue {
+    conf: YSyncConfig;
+    private _listener;
+    private _awareness;
+    decorations: cmView.DecorationSet;
+    constructor(view: cmView.EditorView);
+    destroy(): void;
+    update(update: cmView.ViewUpdate): void;
+}
+export declare const yRemoteSelections: any;
+//# sourceMappingURL=y-remote-selections.d.ts.map

package/esm/y-remote-selections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"y-remote-selections.d.ts","sourceRoot":"","sources":["../src/y-remote-selections.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,sBAAsB,KAuDjC,CAAC;AA8CH,qBAAa,4BAA4B;IACvC,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,SAAS,CAQP;IACV,OAAO,CAAC,UAAU,CAA8B;IAChD,WAAW,EAAE,MAAM,CAAC,aAAa,CAAC;gBAEtB,IAAI,EAAE,MAAM,CAAC,UAAU;IAiBnC,OAAO;IAIP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU;CA8HjC;AAED,eAAO,MAAM,iBAAiB,KAK7B,CAAC"}

package/esm/y-remote-selections.js

@@ -0,0 +1,270 @@
+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', 'ProseMirror-yjs-cursor ProseMirror-widget'),
+            pair.create('style', `border-color: ${this.color}; position: fixed;`),
+        ], [
+            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 }, s, t) => {
+            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;
+            }
+            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/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/y-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"y-sync.d.ts","sourceRoot":"","sources":["../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/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/package.json

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