@kerebron/extension-basic-editor 0.4.26 → 0.4.27

package/esm/NodeTaskItem.js

@@ -1,139 +0,0 @@
-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');
-            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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,25 +0,0 @@
-import { Node } from '@kerebron/editor';
-export class NodeTaskList extends Node {
-    name = 'task_list';
-    requires = ['doc'];
-    getNodeSpec() {
-        return {
-            content: 'list_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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/esm/NodeVideo.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,22 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,96 +0,0 @@
-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);
-            },
-        },
-    });
-};