@kerebron/extension-menu-legacy 0.4.0

package/esm/extension-menu-legacy/src/menu.js

@@ -0,0 +1,350 @@
+import { getIcon } from './icons.js';
+/// An icon or label that, when clicked, executes a command.
+export class MenuItem {
+    /// Create a menu item.
+    constructor(
+    /// The spec used to create this item.
+    spec) {
+        Object.defineProperty(this, "spec", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: spec
+        });
+        Object.defineProperty(this, "CSS_PREFIX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'kb-menu__button'
+        });
+    }
+    /// Renders the icon according to its [display
+    /// spec](#menu.MenuItemSpec.display), and adds an event handler which
+    /// executes the command when the representation is clicked.
+    render(view) {
+        let spec = this.spec;
+        let dom = spec.render ? spec.render(view) : null;
+        if (!dom) {
+            // Create a proper button element for better accessibility
+            dom = document.createElement('button');
+            dom.setAttribute('type', 'button');
+            // Add our new CSS classes while maintaining backward compatibility
+            dom.classList.add(this.CSS_PREFIX);
+            if (spec.icon) {
+                const icon = getIcon(view.root, spec.icon);
+                dom.appendChild(icon);
+                dom.classList.add(this.CSS_PREFIX + '--icon-only');
+            }
+            if (spec.label) {
+                const labelSpan = document.createElement('span');
+                labelSpan.appendChild(document.createTextNode(translate(view, spec.label)));
+                dom.appendChild(labelSpan);
+                if (spec.icon) {
+                    dom.classList.remove(this.CSS_PREFIX + '--icon-only');
+                }
+            }
+            if (!spec.icon && !spec.label) {
+                throw new RangeError('MenuItem without icon or label property');
+            }
+        }
+        if (spec.title) {
+            const title = typeof spec.title === 'function'
+                ? spec.title(view.state)
+                : spec.title;
+            dom.setAttribute('title', translate(view, title));
+            dom.setAttribute('aria-label', translate(view, title));
+        }
+        if (spec.class)
+            dom.classList.add(spec.class);
+        if (spec.css)
+            dom.style.cssText += spec.css;
+        dom.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            if (!dom.classList.contains(this.CSS_PREFIX + '--disabled')) {
+                spec.run(view.state, view.dispatch);
+            }
+        });
+        const update = (state) => {
+            if (spec.select) {
+                let selected = spec.select(state);
+                dom.style.display = selected ? '' : 'none';
+                if (!selected)
+                    return false;
+            }
+            let enabled = true;
+            if (spec.enable) {
+                enabled = spec.enable(state) || false;
+                setClass(dom, this.CSS_PREFIX + '--disabled', !enabled);
+                dom.setAttribute('aria-disabled', (!enabled).toString());
+            }
+            if (spec.active) {
+                let active = enabled && spec.active(state) || false;
+                setClass(dom, this.CSS_PREFIX + '--active', active);
+                dom.setAttribute('aria-pressed', active.toString());
+            }
+            return true;
+        };
+        return { dom, update };
+    }
+}
+function translate(view, text) {
+    return view._props.translate
+        ? view._props.translate(text)
+        : text;
+}
+let lastMenuEvent = {
+    time: 0,
+    node: null,
+};
+function markMenuEvent(e) {
+    lastMenuEvent.time = Date.now();
+    lastMenuEvent.node = e.target;
+}
+function isMenuEvent(wrapper) {
+    return Date.now() - 100 < lastMenuEvent.time &&
+        lastMenuEvent.node && wrapper.contains(lastMenuEvent.node);
+}
+/// A drop-down menu, displayed as a label with a downwards-pointing
+/// triangle to the right of it.
+export class Dropdown {
+    /// Create a dropdown wrapping the elements.
+    constructor(content, 
+    /// @internal
+    options = {}) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "CSS_PREFIX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'kb-dropdown'
+        });
+        /// @internal
+        Object.defineProperty(this, "content", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.options = options || {};
+        this.content = Array.isArray(content) ? content : [content];
+    }
+    /// Render the dropdown menu and sub-items.
+    render(view) {
+        let content = renderDropdownItems(this.content, view);
+        let win = view.dom.ownerDocument.defaultView;
+        // Create a button element instead of div for better accessibility
+        let label = document.createElement('button');
+        label.setAttribute('type', 'button');
+        label.classList.add(this.CSS_PREFIX + '__label');
+        if (this.options.class) {
+            label.classList.add(this.options.class);
+        }
+        if (this.options.css)
+            label.setAttribute('style', this.options.css);
+        label.appendChild(document.createTextNode(translate(view, this.options.label || '')));
+        if (this.options.title) {
+            const title = translate(view, this.options.title);
+            label.setAttribute('title', title);
+            label.setAttribute('aria-label', title);
+        }
+        // Set ARIA attributes for accessibility
+        label.setAttribute('aria-haspopup', 'true');
+        label.setAttribute('aria-expanded', 'false');
+        let wrap = document.createElement('div');
+        wrap.classList.add(this.CSS_PREFIX);
+        wrap.appendChild(label);
+        let open = null;
+        let listeningOnClose = null;
+        let close = () => {
+            if (open && open.close()) {
+                open = null;
+                win.removeEventListener('mousedown', listeningOnClose);
+            }
+        };
+        label.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            markMenuEvent(e);
+            if (open) {
+                close();
+                wrap.classList.remove('kb-dropdown--open');
+            }
+            else {
+                open = this.expand(wrap, content.dom);
+                wrap.classList.add('kb-dropdown--open');
+                win.addEventListener('mousedown', listeningOnClose = () => {
+                    if (!isMenuEvent(wrap))
+                        close();
+                });
+            }
+        });
+        function update(state) {
+            let inner = content.update(state);
+            wrap.style.display = inner ? '' : 'none';
+            return inner;
+        }
+        return { dom: wrap, update };
+    }
+    /// @internal
+    expand(dom, items) {
+        const menuDOM = document.createElement('div');
+        menuDOM.classList.add('kb-dropdown__menu');
+        menuDOM.setAttribute('role', 'menu');
+        if (this.options.class) {
+            menuDOM.classList.add(this.options.class);
+        }
+        items.forEach((item) => menuDOM.appendChild(item));
+        let done = false;
+        function close() {
+            if (done)
+                return false;
+            done = true;
+            dom.removeChild(menuDOM);
+            return true;
+        }
+        dom.appendChild(menuDOM);
+        return { close, node: menuDOM };
+    }
+}
+function renderDropdownItems(items, view) {
+    let rendered = [], updates = [];
+    for (let i = 0; i < items.length; i++) {
+        let { dom, update } = items[i].render(view);
+        const item = document.createElement('div');
+        item.classList.add('kb-dropdown__item');
+        item.appendChild(dom);
+        rendered.push(item);
+        updates.push(update);
+    }
+    return { dom: rendered, update: combineUpdates(updates, rendered) };
+}
+function combineUpdates(updates, nodes) {
+    return (state) => {
+        let something = false;
+        for (let i = 0; i < updates.length; i++) {
+            let up = updates[i](state);
+            nodes[i].style.display = up ? '' : 'none';
+            if (up)
+                something = true;
+        }
+        return something;
+    };
+}
+/// Represents a submenu wrapping a group of elements that start
+/// hidden and expand to the right when hovered over or tapped.
+export class DropdownSubmenu {
+    /// Creates a submenu for the given group of menu elements. The
+    /// following options are recognized:
+    constructor(content, 
+    /// @internal
+    options = {}) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        /// @internal
+        Object.defineProperty(this, "content", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.content = Array.isArray(content) ? content : [content];
+    }
+    /// Renders the submenu.
+    render(view) {
+        const CSS_PREFIX = 'kb-submenu';
+        const items = renderDropdownItems(this.content, view);
+        const win = view.dom.ownerDocument.defaultView;
+        const wrap = document.createElement('div');
+        wrap.classList.add(CSS_PREFIX);
+        const label = document.createElement('div');
+        label.classList.add(CSS_PREFIX + '__label');
+        label.appendChild(document.createTextNode(translate(view, this.options.label || '')));
+        wrap.appendChild(label);
+        const submenu = document.createElement('div');
+        submenu.classList.add(CSS_PREFIX + '__content');
+        items.dom.forEach((item) => submenu.appendChild(item));
+        wrap.appendChild(submenu);
+        let listeningOnClose = null;
+        label.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            markMenuEvent(e);
+            const isOpen = wrap.classList.contains(CSS_PREFIX + '--open');
+            setClass(wrap, CSS_PREFIX + '--open', !isOpen);
+            if (!isOpen && !listeningOnClose) {
+                win.addEventListener('mousedown', listeningOnClose = () => {
+                    if (!isMenuEvent(wrap)) {
+                        wrap.classList.remove(CSS_PREFIX + '--open');
+                        win.removeEventListener('mousedown', listeningOnClose);
+                        listeningOnClose = null;
+                    }
+                });
+            }
+        });
+        function update(state) {
+            let inner = items.update(state);
+            wrap.style.display = inner ? '' : 'none';
+            return inner;
+        }
+        return { dom: wrap, update };
+    }
+}
+/// Render the given, possibly nested, array of menu elements into a
+/// document fragment, placing separators between them (and ensuring no
+/// superfluous separators appear when some of the groups turn out to
+/// be empty).
+export function renderGrouped(view, content) {
+    let result = document.createDocumentFragment();
+    let updates = [], separators = [];
+    for (let i = 0; i < content.length; i++) {
+        let items = content[i], localUpdates = [], localNodes = [];
+        for (let j = 0; j < items.length; j++) {
+            let { dom, update } = items[j].render(view);
+            let span = document.createElement('span');
+            span.classList.add('kb-menu__item');
+            span.appendChild(dom);
+            result.appendChild(span);
+            localNodes.push(span);
+            localUpdates.push(update);
+        }
+        if (localUpdates.length) {
+            updates.push(combineUpdates(localUpdates, localNodes));
+            if (i < content.length - 1) {
+                separators.push(result.appendChild(separator()));
+            }
+        }
+    }
+    function update(state) {
+        let something = false, needSep = false;
+        for (let i = 0; i < updates.length; i++) {
+            let hasContent = updates[i](state);
+            if (i) {
+                separators[i - 1].style.display = needSep && hasContent ? '' : 'none';
+            }
+            needSep = hasContent;
+            if (hasContent)
+                something = true;
+        }
+        return something;
+    }
+    return { dom: result, update };
+}
+function separator() {
+    const elem = document.createElement('div');
+    elem.classList.add('kb-menu__separator');
+    return elem;
+}
+// Work around classList.toggle being broken in IE11
+function setClass(dom, cls, on) {
+    if (on)
+        dom.classList.add(cls);
+    else
+        dom.classList.remove(cls);
+}

package/esm/extension-menu-legacy/src/mod.d.ts

@@ -0,0 +1,3 @@
+export { Dropdown, DropdownSubmenu, type MenuElement, MenuItem, type MenuItemSpec, } from './menu.js';
+export * from './ExtensionMenuLegacy.js';
+//# sourceMappingURL=mod.d.ts.map

package/esm/extension-menu-legacy/src/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/extension-menu-legacy/src/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,KAAK,WAAW,EAChB,QAAQ,EACR,KAAK,YAAY,GAClB,MAAM,WAAW,CAAC;AAEnB,cAAc,0BAA0B,CAAC"}

package/esm/extension-menu-legacy/src/mod.js

@@ -0,0 +1,2 @@
+export { Dropdown, DropdownSubmenu, MenuItem, } from './menu.js';
+export * from './ExtensionMenuLegacy.js';

package/esm/extension-menu-legacy/src/prompt.d.ts

@@ -0,0 +1,36 @@
+import { Attrs } from 'prosemirror-model';
+export declare function openPrompt(options: {
+    title: string;
+    fields: {
+        [name: string]: Field;
+    };
+    callback: (attrs: Attrs) => void;
+}): void;
+export declare abstract class Field {
+    readonly options: {
+        value?: any;
+        label: string;
+        required?: boolean;
+        validate?: (value: any) => string | null;
+        clean?: (value: any) => any;
+    };
+    constructor(options: {
+        value?: any;
+        label: string;
+        required?: boolean;
+        validate?: (value: any) => string | null;
+        clean?: (value: any) => any;
+    });
+    abstract render(): HTMLElement;
+    read(dom: HTMLElement): any;
+    validateType(value: any): string | null;
+    validate(value: any): string | null;
+    clean(value: any): any;
+}
+export declare class TextField extends Field {
+    render(): any;
+}
+export declare class SelectField extends Field {
+    render(): any;
+}
+//# sourceMappingURL=prompt.d.ts.map

package/esm/extension-menu-legacy/src/prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt.d.ts","sourceRoot":"","sources":["../../../src/extension-menu-legacy/src/prompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,wBAAgB,UAAU,CAAC,OAAO,EAAE;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAA;KAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,QA0EA;AA+BD,8BAAsB,KAAK;IAKvB,QAAQ,CAAC,OAAO,EAAE;QAEhB,KAAK,CAAC,EAAE,GAAG,CAAC;QAGZ,KAAK,EAAE,MAAM,CAAC;QAGd,QAAQ,CAAC,EAAE,OAAO,CAAC;QAInB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;QAGzC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;KAC7B;gBAhBQ,OAAO,EAAE;QAEhB,KAAK,CAAC,EAAE,GAAG,CAAC;QAGZ,KAAK,EAAE,MAAM,CAAC;QAGd,QAAQ,CAAC,EAAE,OAAO,CAAC;QAInB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;QAGzC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;KAC7B;IAIH,QAAQ,CAAC,MAAM,IAAI,WAAW;IAG9B,IAAI,CAAC,GAAG,EAAE,WAAW;IAKrB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI;IAKvC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI;IAQnC,KAAK,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG;CAGvB;AAGD,qBAAa,SAAU,SAAQ,KAAK;IAClC,MAAM;CAQP;AAMD,qBAAa,WAAY,SAAQ,KAAK;IACpC,MAAM;CAWP"}

package/esm/extension-menu-legacy/src/prompt.js

@@ -0,0 +1,158 @@
+const CSS_PREFIX = 'kb-prompt';
+export function openPrompt(options) {
+    let wrapper = document.body.appendChild(document.createElement('div'));
+    wrapper.className = CSS_PREFIX;
+    let mouseOutside = (e) => {
+        if (!wrapper.contains(e.target))
+            close();
+    };
+    setTimeout(() => globalThis.addEventListener('mousedown', mouseOutside), 50);
+    let close = () => {
+        globalThis.removeEventListener('mousedown', mouseOutside);
+        if (wrapper.parentNode)
+            wrapper.parentNode.removeChild(wrapper);
+    };
+    let domFields = [];
+    for (let name in options.fields) {
+        domFields.push(options.fields[name].render());
+    }
+    let submitButton = document.createElement('button');
+    submitButton.type = 'submit';
+    submitButton.className = CSS_PREFIX + '--submit';
+    submitButton.textContent = 'OK';
+    let cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = CSS_PREFIX + '--cancel';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.addEventListener('click', close);
+    let form = wrapper.appendChild(document.createElement('form'));
+    if (options.title) {
+        form.appendChild(document.createElement('h5')).textContent = options.title;
+    }
+    domFields.forEach((field) => {
+        form.appendChild(document.createElement('div')).appendChild(field);
+    });
+    let buttons = form.appendChild(document.createElement('div'));
+    buttons.className = CSS_PREFIX + '__buttons';
+    buttons.appendChild(submitButton);
+    buttons.appendChild(document.createTextNode(' '));
+    buttons.appendChild(cancelButton);
+    let box = wrapper.getBoundingClientRect();
+    wrapper.style.top = ((globalThis.innerHeight - box.height) / 2) + 'px';
+    wrapper.style.left = ((globalThis.innerWidth - box.width) / 2) + 'px';
+    let submit = () => {
+        let params = getValues(options.fields, domFields);
+        if (params) {
+            close();
+            options.callback(params);
+        }
+    };
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        submit();
+    });
+    form.addEventListener('keydown', (e) => {
+        if (e.keyCode == 27) {
+            e.preventDefault();
+            close();
+        }
+        else if (e.keyCode == 13 && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+            e.preventDefault();
+            submit();
+        }
+        else if (e.keyCode == 9) {
+            globalThis.setTimeout(() => {
+                if (!wrapper.contains(document.activeElement))
+                    close();
+            }, 500);
+        }
+    });
+    let input = form.elements[0];
+    if (input)
+        input.focus();
+}
+function getValues(fields, domFields) {
+    let result = Object.create(null), i = 0;
+    for (let name in fields) {
+        let field = fields[name], dom = domFields[i++];
+        let value = field.read(dom), bad = field.validate(value);
+        if (bad) {
+            reportInvalid(dom, bad);
+            return null;
+        }
+        result[name] = field.clean(value);
+    }
+    return result;
+}
+function reportInvalid(dom, message) {
+    // FIXME this is awful and needs a lot more work
+    let parent = dom.parentNode;
+    let msg = parent.appendChild(document.createElement('div'));
+    msg.style.left = (dom.offsetLeft + dom.offsetWidth + 2) + 'px';
+    msg.style.top = (dom.offsetTop - 5) + 'px';
+    msg.className = 'kb-invalid';
+    msg.textContent = message;
+    setTimeout(() => parent.removeChild(msg), 1500);
+}
+/// The type of field that `openPrompt` expects to be passed to it.
+export class Field {
+    /// Create a field with the given options. Options support by all
+    /// field types are:
+    constructor(
+    /// @internal
+    options) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+    }
+    /// Read the field's value from its DOM node.
+    read(dom) {
+        return dom.value;
+    }
+    /// A field-type-specific validation function.
+    validateType(value) {
+        return null;
+    }
+    /// @internal
+    validate(value) {
+        if (!value && this.options.required) {
+            return 'Required field';
+        }
+        return this.validateType(value) ||
+            (this.options.validate ? this.options.validate(value) : null);
+    }
+    clean(value) {
+        return this.options.clean ? this.options.clean(value) : value;
+    }
+}
+/// A field class for single-line text fields.
+export class TextField extends Field {
+    render() {
+        let input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = this.options.label;
+        input.value = this.options.value || '';
+        input.autocomplete = 'off';
+        return input;
+    }
+}
+/// A field class for dropdown fields based on a plain `<select>`
+/// tag. Expects an option `options`, which should be an array of
+/// `{value: string, label: string}` objects, or a function taking a
+/// `ProseMirror` instance and returning such an array.
+export class SelectField extends Field {
+    render() {
+        let select = document.createElement('select');
+        this.options.options
+            .forEach((o) => {
+            let opt = select.appendChild(document.createElement('option'));
+            opt.value = o.value;
+            opt.selected = o.value == this.options.value;
+            opt.label = o.label;
+        });
+        return select;
+    }
+}

package/esm/package.json

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

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@kerebron/extension-menu-legacy",
+  "version": "0.4.0",
+  "license": "MIT",
+  "module": "./esm/extension-menu-legacy/src/mod.js",
+  "exports": {
+    ".": {
+      "import": "./esm/extension-menu-legacy/src/mod.js"
+    }
+  },
+  "scripts": {},
+  "dependencies": {
+    "prosemirror-model": "1.25.3",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-transform": "1.10.4",
+    "prosemirror-view": "1.40.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.0"
+  },
+  "_generatedBy": "dnt@dev"
+}