@kerebron/extension-menu 0.4.25 → 0.4.27

package/esm/menu.js

@@ -1,318 +0,0 @@
-import { getIcon } from './icons.js';
-/// An icon or label that, when clicked, executes a command.
-export class MenuItem {
-    spec;
-    CSS_PREFIX = 'kb-menu__button';
-    /// Create a menu item.
-    constructor(
-    /// The spec used to create this item.
-    spec) {
-        this.spec = spec;
-    }
-    /// 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 {
-    options;
-    CSS_PREFIX = 'kb-dropdown';
-    /// @internal
-    content;
-    /// Create a dropdown wrapping the elements.
-    constructor(content, 
-    /// @internal
-    options = {}) {
-        this.options = options;
-        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 {
-    options;
-    /// @internal
-    content;
-    /// Creates a submenu for the given group of menu elements. The
-    /// following options are recognized:
-    constructor(content, 
-    /// @internal
-    options = {}) {
-        this.options = options;
-        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/mod.d.ts

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

package/esm/mod.d.ts.map

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

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

package/esm/package.json

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

package/esm/prompt.d.ts

@@ -1,36 +0,0 @@
-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/prompt.d.ts.map

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

@@ -1,154 +0,0 @@
-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 {
-    options;
-    /// Create a field with the given options. Options support by all
-    /// field types are:
-    constructor(
-    /// @internal
-    options) {
-        this.options = 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;
-    }
-}