@kerebron/extension-basic-editor 0.4.27 → 0.4.28

package/esm/NodeOrderedList.js

@@ -0,0 +1,52 @@
+import { Node } from '@kerebron/editor';
+import { getHtmlAttributes, setHtmlAttributes, } from '@kerebron/editor/utilities';
+import { wrappingInputRule, } from '@kerebron/editor/plugins/input-rules';
+export class NodeOrderedList extends Node {
+    name = 'ordered_list';
+    requires = ['doc'];
+    attributes = {
+        type: {
+            default: '1',
+            fromDom(element) {
+                return element.hasAttribute('type')
+                    ? element.getAttribute('type')
+                    : '1';
+            },
+        },
+        start: {
+            default: 1,
+            fromDom(element) {
+                return element.hasAttribute('start')
+                    ? +element.getAttribute('start')
+                    : 1;
+            },
+        },
+    };
+    getNodeSpec() {
+        return {
+            group: 'block',
+            content: 'list_item+',
+            parseDOM: [
+                { tag: 'ol', getAttrs: (element) => setHtmlAttributes(this, element) },
+            ],
+            toDOM: (node) => ['ol', getHtmlAttributes(this, node), 0],
+        };
+    }
+    getInputRules(type) {
+        return [
+            /// Given a list node type, returns an input rule that turns a number
+            /// followed by a dot at the start of a textblock into an ordered list.
+            wrappingInputRule(/^(\d+)\.\s$/, type, (match) => ({ order: +match[1] }), (match, node) => node.childCount + node.attrs.order == +match[1]),
+        ];
+    }
+    getCommandFactories(editor, type) {
+        return {
+            'toggleOrderedList': () => editor.commandFactories.wrapInList(type),
+        };
+    }
+    getKeyboardShortcuts() {
+        return {
+            'Shift-Ctrl-7': 'toggleOrderedList',
+        };
+    }
+}

package/esm/NodeParagraph.d.ts

@@ -0,0 +1,11 @@
+import { type NodeSpec, type NodeType } from 'prosemirror-model';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import { type CommandFactories, type CommandShortcuts } from '@kerebron/editor/commands';
+export declare class NodeParagraph extends Node {
+    name: string;
+    requires: string[];
+    getNodeSpec(): NodeSpec;
+    getCommandFactories(editor: CoreEditor, type: NodeType): Partial<CommandFactories>;
+    getKeyboardShortcuts(): Partial<CommandShortcuts>;
+}
+//# sourceMappingURL=NodeParagraph.d.ts.map

package/esm/NodeParagraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeParagraph.d.ts","sourceRoot":"","sources":["../src/NodeParagraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,IAAI;IAC5B,IAAI,SAAe;IAC5B,QAAQ,WAAW;IAEV,WAAW,IAAI,QAAQ;IAgCvB,mBAAmB,CAC1B,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,GACb,OAAO,CAAC,gBAAgB,CAAC;IAMnB,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,CAAC;CAK3D"}

package/esm/NodeParagraph.js

@@ -0,0 +1,44 @@
+import { Node } from '@kerebron/editor';
+export class NodeParagraph extends Node {
+    name = 'paragraph';
+    requires = ['doc'];
+    getNodeSpec() {
+        return {
+            content: 'inline*',
+            group: 'block',
+            attrs: {
+                textAlign: { default: null },
+            },
+            parseDOM: [
+                {
+                    tag: 'p',
+                    getAttrs(dom) {
+                        const element = dom;
+                        const style = element.style.textAlign;
+                        if (style === 'center' || style === 'right' || style === 'justify') {
+                            return { textAlign: style };
+                        }
+                        return { textAlign: null };
+                    },
+                },
+            ],
+            toDOM(node) {
+                const align = node.attrs.textAlign;
+                if (align && align !== 'left') {
+                    return ['p', { style: `text-align: ${align}` }, 0];
+                }
+                return ['p', 0];
+            },
+        };
+    }
+    getCommandFactories(editor, type) {
+        return {
+            'setParagraph': () => editor.commandFactories.setBlockType(type),
+        };
+    }
+    getKeyboardShortcuts() {
+        return {
+            'Shift-Ctrl-0': 'setParagraph',
+        };
+    }
+}

package/esm/NodeTaskItem.d.ts

@@ -0,0 +1,24 @@
+import { Node as PmNode, NodeSpec, type NodeType } from 'prosemirror-model';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import { type CommandFactories, type CommandShortcuts } from '@kerebron/editor/commands';
+import { NodeViewConstructor } from '@kerebron/editor/DummyEditorView';
+/**
+ * Matches a task item to a - [ ] on input.
+ */
+export declare const inputRegex: RegExp;
+export interface TaskItemOptions {
+    onReadOnlyChecked?: (node: PmNode, checked: boolean) => boolean;
+    nested: boolean;
+}
+export declare class NodeTaskItem extends Node {
+    protected config: Partial<TaskItemOptions>;
+    name: string;
+    requires: string[];
+    constructor(config?: Partial<TaskItemOptions>);
+    getNodeSpec(): NodeSpec;
+    getCommandFactories(editor: CoreEditor, type: NodeType): Partial<CommandFactories>;
+    getNodeView(editor: CoreEditor): NodeViewConstructor;
+    getKeyboardShortcuts(): Partial<CommandShortcuts>;
+    getInputRules(type: NodeType): any[];
+}
+//# sourceMappingURL=NodeTaskItem.d.ts.map

package/esm/NodeTaskItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTaskItem.d.ts","sourceRoot":"","sources":["../src/NodeTaskItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvE;;GAEG;AACH,eAAO,MAAM,UAAU,QAA2B,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAChE,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,qBAAa,YAAa,SAAQ,IAAI;cAIE,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC;IAH7D,IAAI,SAAe;IAC5B,QAAQ,WAAW;gBAEmB,MAAM,GAAE,OAAO,CAAC,eAAe,CAAM;IAIlE,WAAW,IAAI,QAAQ;IAyCvB,mBAAmB,CAC1B,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,GACb,OAAO,CAAC,gBAAgB,CAAC;IAQnB,WAAW,CAAC,MAAM,EAAE,UAAU,GAAG,mBAAmB;IAoFpD,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,CAAC;IAQjD,aAAa,CAAC,IAAI,EAAE,QAAQ;CAWtC"}

package/esm/NodeTaskItem.js

@@ -0,0 +1,146 @@
+import { Node } from '@kerebron/editor';
+import { wrappingInputRule } from '@kerebron/editor/plugins/input-rules';
+import { liftListItem, sinkListItem, splitListItem, } from './NodeListItem.js';
+/**
+ * Matches a task item to a - [ ] on input.
+ */
+export const inputRegex = /^\s*(\[([( |x])?\])\s$/;
+export class NodeTaskItem extends Node {
+    config;
+    name = 'task_item';
+    requires = ['doc'];
+    constructor(config = {}) {
+        super(config);
+        this.config = config;
+    }
+    getNodeSpec() {
+        return {
+            attrs: {
+                checked: {
+                    default: false,
+                },
+            },
+            content: this.config.nested ? 'paragraph block*' : 'paragraph+',
+            parseDOM: [{
+                    tag: 'li[data-checked]',
+                    getAttrs(node) {
+                        return {
+                            checked: node.getAttribute('data-checked') === 'true',
+                        };
+                    },
+                }],
+            defining: true,
+            toDOM(node) {
+                return [
+                    'li',
+                    {
+                        'data-type': this.name,
+                        'data-checked': node.attrs.checked,
+                    },
+                    [
+                        'label',
+                        [
+                            'input',
+                            {
+                                type: 'checkbox',
+                                checked: node.attrs.checked ? 'checked' : null,
+                            },
+                        ],
+                        ['span'],
+                    ],
+                    ['div', 0],
+                ];
+            },
+        };
+    }
+    getCommandFactories(editor, type) {
+        return {
+            'splitListItem': () => splitListItem(type),
+            'liftListItem': () => liftListItem(type),
+            'sinkListItem': () => sinkListItem(type),
+        };
+    }
+    getNodeView(editor) {
+        return (node, view, getPos) => {
+            const listItem = document.createElement('li');
+            const checkboxWrapper = document.createElement('label');
+            const checkboxStyler = document.createElement('span');
+            const checkbox = document.createElement('input');
+            const content = document.createElement('div');
+            // Style for inline checkbox and text
+            listItem.style.display = 'flex';
+            listItem.style.alignItems = 'flex-start';
+            listItem.style.gap = '0.5em';
+            checkboxWrapper.style.flexShrink = '0';
+            checkboxWrapper.style.marginTop = '0.25em';
+            content.style.flex = '1';
+            checkboxWrapper.contentEditable = 'false';
+            checkbox.type = 'checkbox';
+            checkbox.addEventListener('mousedown', (event) => event.preventDefault());
+            checkbox.addEventListener('change', (event) => {
+                const isEditable = true; // TODO editor.isEditable
+                // if the editor isn’t editable and we don't have a handler for
+                // readonly checks we have to undo the latest change
+                if (!isEditable && !this.config.onReadOnlyChecked) {
+                    checkbox.checked = !checkbox.checked;
+                    return;
+                }
+                const { checked } = event.target;
+                if (isEditable && typeof getPos === 'function') {
+                    editor
+                        .chain()
+                        .focus(undefined, { scrollIntoView: false })
+                        .command(({ tr }) => {
+                        const position = getPos();
+                        if (typeof position !== 'number') {
+                            return false;
+                        }
+                        const currentNode = tr.doc.nodeAt(position);
+                        tr.setNodeMarkup(position, undefined, {
+                            ...currentNode?.attrs,
+                            checked,
+                        });
+                        return true;
+                    })
+                        .run();
+                }
+                if (!isEditable && this.config.onReadOnlyChecked) {
+                    // Reset state if onReadOnlyChecked returns false
+                    if (!this.config.onReadOnlyChecked(node, checked)) {
+                        checkbox.checked = !checkbox.checked;
+                    }
+                }
+            });
+            listItem.dataset.checked = node.attrs.checked;
+            checkbox.checked = node.attrs.checked;
+            checkboxWrapper.append(checkbox, checkboxStyler);
+            listItem.append(checkboxWrapper, content);
+            return {
+                dom: listItem,
+                contentDOM: content,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== this.type) {
+                        return false;
+                    }
+                    listItem.dataset.checked = updatedNode.attrs.checked;
+                    checkbox.checked = updatedNode.attrs.checked;
+                    return true;
+                },
+            };
+        };
+    }
+    getKeyboardShortcuts() {
+        return {
+            'Enter': 'splitListItem',
+            'Tab': 'sinkListItem',
+            'Shift-Tab': 'liftListItem',
+        };
+    }
+    getInputRules(type) {
+        return [
+            wrappingInputRule(inputRegex, type, (match) => ({
+                checked: match[match.length - 1] === 'x',
+            })),
+        ];
+    }
+}

package/esm/NodeTaskList.d.ts

@@ -0,0 +1,11 @@
+import type { NodeSpec, NodeType } from 'prosemirror-model';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import { type CommandFactories, type CommandShortcuts } from '@kerebron/editor/commands';
+export declare class NodeTaskList extends Node {
+    name: string;
+    requires: string[];
+    getNodeSpec(): NodeSpec;
+    getCommandFactories(editor: CoreEditor, type: NodeType): Partial<CommandFactories>;
+    getKeyboardShortcuts(): Partial<CommandShortcuts>;
+}
+//# sourceMappingURL=NodeTaskList.d.ts.map

package/esm/NodeTaskList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTaskList.d.ts","sourceRoot":"","sources":["../src/NodeTaskList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAEnC,qBAAa,YAAa,SAAQ,IAAI;IAC3B,IAAI,SAAe;IAC5B,QAAQ,WAAW;IAEV,WAAW,IAAI,QAAQ;IAWvB,mBAAmB,CAC1B,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,GACb,OAAO,CAAC,gBAAgB,CAAC;IAMnB,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,CAAC;CAK3D"}

package/esm/NodeTaskList.js

@@ -0,0 +1,25 @@
+import { Node } from '@kerebron/editor';
+export class NodeTaskList extends Node {
+    name = 'task_list';
+    requires = ['doc'];
+    getNodeSpec() {
+        return {
+            content: 'task_item+',
+            group: 'block',
+            parseDOM: [{ tag: `ul[data-type="${this.name}"]` }],
+            toDOM() {
+                return ['ul', { 'data-type': this.name }, 0];
+            },
+        };
+    }
+    getCommandFactories(editor, type) {
+        return {
+            'toggleTaskList': () => editor.commandFactories.wrapInList(type),
+        };
+    }
+    getKeyboardShortcuts() {
+        return {
+            'Shift-Ctrl-9': 'toggleTaskList',
+        };
+    }
+}

package/esm/NodeText.d.ts

@@ -0,0 +1,7 @@
+import { NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+export declare class NodeText extends Node {
+    name: string;
+    getNodeSpec(): NodeSpec;
+}
+//# sourceMappingURL=NodeText.d.ts.map

package/esm/NodeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeText.d.ts","sourceRoot":"","sources":["../src/NodeText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,qBAAa,QAAS,SAAQ,IAAI;IACvB,IAAI,SAAU;IAEd,WAAW,IAAI,QAAQ;CAKjC"}

package/esm/NodeText.js

@@ -0,0 +1,9 @@
+import { Node } from '@kerebron/editor';
+export class NodeText extends Node {
+    name = 'text';
+    getNodeSpec() {
+        return {
+            group: 'inline',
+        };
+    }
+}

package/esm/NodeVideo.d.ts

@@ -0,0 +1,8 @@
+import { type NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+export declare class NodeVideo extends Node {
+    name: string;
+    requires: string[];
+    getNodeSpec(): NodeSpec;
+}
+//# sourceMappingURL=NodeVideo.d.ts.map

package/esm/NodeVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeVideo.d.ts","sourceRoot":"","sources":["../src/NodeVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,qBAAa,SAAU,SAAQ,IAAI;IACxB,IAAI,SAAW;IACxB,QAAQ,WAAW;IAEV,WAAW,IAAI,QAAQ;CAoCjC"}

package/esm/NodeVideo.js

@@ -0,0 +1,45 @@
+import { Node } from '@kerebron/editor';
+export class NodeVideo extends Node {
+    name = 'video';
+    requires = ['doc'];
+    getNodeSpec() {
+        return {
+            attrs: {
+                src: {},
+                title: { default: null },
+                controls: { default: true },
+                width: { default: null },
+                height: { default: null },
+            },
+            group: 'block',
+            draggable: true,
+            parseDOM: [
+                {
+                    tag: 'video[src]',
+                    getAttrs(dom) {
+                        return {
+                            src: dom.getAttribute('src'),
+                            title: dom.getAttribute('title'),
+                            controls: dom.hasAttribute('controls'),
+                            width: dom.getAttribute('width'),
+                            height: dom.getAttribute('height'),
+                        };
+                    },
+                },
+            ],
+            toDOM(node) {
+                const { src, title, controls, width, height } = node.attrs;
+                const attrs = { src };
+                if (title)
+                    attrs.title = title;
+                if (controls)
+                    attrs.controls = ''; // Boolean attribute - just needs to be present
+                if (width)
+                    attrs.width = width;
+                if (height)
+                    attrs.height = height;
+                return ['video', attrs];
+            },
+        };
+    }
+}

package/esm/package.json

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

package/esm/remote-selection/ExtensionRemoteSelection.d.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'prosemirror-state';
+import { Extension } from '@kerebron/editor';
+type Color = string;
+export interface SelectionState {
+    clientId: number;
+    user: {
+        name: string;
+        color: Color;
+        colorLight: Color;
+    };
+    cursor?: {
+        anchor: number;
+        head: number;
+    };
+}
+export { remoteSelectionPluginKey } from './remoteSelectionPlugin.js';
+export declare class ExtensionRemoteSelection extends Extension {
+    name: string;
+    private remoteStates;
+    getProseMirrorPlugins(): Plugin[];
+    getRemoteStates(): SelectionState[];
+    setRemoteStates(states: SelectionState[]): void;
+}
+//# sourceMappingURL=ExtensionRemoteSelection.d.ts.map

package/esm/remote-selection/ExtensionRemoteSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionRemoteSelection.d.ts","sourceRoot":"","sources":["../../src/remote-selection/ExtensionRemoteSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAI9D,KAAK,KAAK,GAAG,MAAM,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,KAAK,CAAC;QACb,UAAU,EAAE,KAAK,CAAC;KACnB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,qBAAa,wBAAyB,SAAQ,SAAS;IAC5C,IAAI,SAAsB;IAEnC,OAAO,CAAC,YAAY,CAAwB;IAEnC,qBAAqB,IAAI,MAAM,EAAE;IAM1C,eAAe,IAAI,cAAc,EAAE;IAInC,eAAe,CAAC,MAAM,EAAE,cAAc,EAAE;CAOzC"}

package/esm/remote-selection/ExtensionRemoteSelection.js

@@ -0,0 +1,22 @@
+import { Extension } from '@kerebron/editor';
+import { remoteSelectionPlugin } from './remoteSelectionPlugin.js';
+export { remoteSelectionPluginKey } from './remoteSelectionPlugin.js';
+export class ExtensionRemoteSelection extends Extension {
+    name = 'remote-selection';
+    remoteStates = [];
+    getProseMirrorPlugins() {
+        return [
+            remoteSelectionPlugin(this, this.editor),
+        ];
+    }
+    getRemoteStates() {
+        return this.remoteStates;
+    }
+    setRemoteStates(states) {
+        this.remoteStates = states;
+        const event = new CustomEvent('remoteSelectionChange', {
+            detail: {},
+        });
+        this.editor.dispatchEvent(event);
+    }
+}

package/esm/remote-selection/remoteSelectionPlugin.d.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { type DecorationAttrs } from 'prosemirror-view';
+import type { CoreEditor } from '@kerebron/editor';
+import type { ExtensionRemoteSelection } from './ExtensionRemoteSelection.js';
+export declare const remoteSelectionPluginKey: PluginKey<any>;
+/**
+ * Default generator for a cursor element
+ */
+export declare const defaultCursorBuilder: (user: any) => HTMLElement;
+/**
+ * Default generator for the selection attributes
+ */
+export declare const defaultSelectionBuilder: (user: any) => DecorationAttrs;
+export declare const createDecorations: (state: any, extension: ExtensionRemoteSelection, createCursor: (user: {
+    name: string;
+    color: string;
+}, clientId: number) => Element, createSelection: (user: {
+    name: string;
+    color: string;
+}, clientId: number) => DecorationAttrs) => any;
+export declare const remoteSelectionPlugin: (extension: ExtensionRemoteSelection, editor: CoreEditor, { cursorBuilder, selectionBuilder, }?: {
+    cursorBuilder?: (user: any, clientId: number) => HTMLElement;
+    selectionBuilder?: (user: any, clientId: number) => DecorationAttrs;
+}) => Plugin<any>;
+//# sourceMappingURL=remoteSelectionPlugin.d.ts.map

package/esm/remote-selection/remoteSelectionPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remoteSelectionPlugin.d.ts","sourceRoot":"","sources":["../../src/remote-selection/remoteSelectionPlugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,eAAO,MAAM,wBAAwB,gBAAoC,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,GAAG,KAAG,WAahD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,MAAM,GAAG,KAAG,eAKnD,CAAC;AAIF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,GAAG,EACV,WAAW,wBAAwB,EACnC,cAAc,CACZ,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EACrC,QAAQ,EAAE,MAAM,KACb,OAAO,EACZ,iBAAiB,CACf,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EACrC,QAAQ,EAAE,MAAM,KACb,eAAe,KACnB,GAwDF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,WAAW,wBAAwB,EACnC,QAAQ,UAAU,EAClB,uCAGG;IACD,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;CAChE,gBAsCP,CAAC"}

package/esm/remote-selection/remoteSelectionPlugin.js

@@ -0,0 +1,96 @@
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey } from 'prosemirror-state';
+export const remoteSelectionPluginKey = new PluginKey('remote-selection');
+/**
+ * Default generator for a cursor element
+ */
+export const defaultCursorBuilder = (user) => {
+    const cursor = document.createElement('span');
+    cursor.classList.add('kb-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
+ */
+export const defaultSelectionBuilder = (user) => {
+    return {
+        style: `background-color: ${user.color}70`,
+        class: 'kb-yjs__selection',
+    };
+};
+const rxValidColor = /^#[0-9a-fA-F]{6}$/;
+export const createDecorations = (state, extension, createCursor, createSelection) => {
+    const decorations = [];
+    const remoteStates = extension.getRemoteStates();
+    if (remoteStates.length === 0) {
+        return DecorationSet.create(state.doc, []);
+    }
+    for (const remoteState of remoteStates) {
+        if (remoteState.cursor != null) {
+            const user = remoteState.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: ${remoteState.clientId}`;
+            }
+            const cursor = remoteState.cursor;
+            let anchor = cursor.anchor || null;
+            let head = cursor.head || null;
+            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, remoteState.clientId), {
+                    key: remoteState.clientId + '',
+                    side: 10,
+                }));
+                const from = Math.min(anchor, head);
+                const to = Math.max(anchor, head);
+                decorations.push(Decoration.inline(from, to, createSelection(user, remoteState.clientId), {
+                    inclusiveEnd: true,
+                    inclusiveStart: false,
+                }));
+            }
+        }
+    }
+    return DecorationSet.create(state.doc, decorations);
+};
+export const remoteSelectionPlugin = (extension, editor, { cursorBuilder = defaultCursorBuilder, selectionBuilder = defaultSelectionBuilder, } = {}) => {
+    return new Plugin({
+        key: remoteSelectionPluginKey,
+        state: {
+            init(_, state) {
+                return createDecorations(state, extension, cursorBuilder, selectionBuilder);
+            },
+            apply(tr, prevState, _oldState, newState) {
+                const remoteCursorState = tr.getMeta(remoteSelectionPluginKey);
+                // TODO validate: isChangeOrigin
+                // const state = remoteSelectionPluginKey.getState(newState);
+                if ((remoteCursorState?.isChangeOrigin) ||
+                    (remoteCursorState?.remotePositionUpdated)) {
+                    return createDecorations(newState, extension, cursorBuilder, selectionBuilder);
+                }
+                return prevState.map(tr.mapping, tr.doc);
+            },
+        },
+        props: {
+            decorations: (state) => {
+                return remoteSelectionPluginKey.getState(state);
+            },
+        },
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/extension-basic-editor",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "license": "MIT",
   "module": "./esm/ExtensionBasicEditor.js",
   "exports": {
@@ -111,9 +111,8 @@
     }
   },
   "scripts": {},
-  "files": [],
   "dependencies": {
-    "@kerebron/editor": "0.4.27",
+    "@kerebron/editor": "0.4.28",
     "prosemirror-history": "1.4.1",
     "prosemirror-model": "1.25.3",
     "prosemirror-state": "1.4.3",