@kerebron/extension-menu 0.4.27 → 0.4.28

package/esm/icons.js

@@ -0,0 +1,212 @@
+const SVG = 'http://www.w3.org/2000/svg';
+const XLINK = 'http://www.w3.org/1999/xlink';
+const prefix = 'kb-icon';
+function hashPath(path) {
+    let hash = 0;
+    for (let i = 0; i < path.length; i++) {
+        hash = (((hash << 5) - hash) + path.charCodeAt(i)) | 0;
+    }
+    return hash;
+}
+export function getIcon(root, icon) {
+    let doc = (root.nodeType == 9 ? root : root.ownerDocument) ||
+        document;
+    let node = doc.createElement('div');
+    node.className = prefix;
+    if (icon.path) {
+        let { path, width, height } = icon;
+        let name = 'pm-icon-' + hashPath(path).toString(16);
+        if (!doc.getElementById(name)) {
+            buildSVG(root, name, icon);
+        }
+        let svg = node.appendChild(doc.createElementNS(SVG, 'svg'));
+        svg.style.width = (width / height) + 'em';
+        let use = svg.appendChild(doc.createElementNS(SVG, 'use'));
+        use.setAttributeNS(XLINK, 'href', /([^#]*)/.exec(doc.location.toString())[1] + '#' + name);
+    }
+    else if (icon.dom) {
+        node.appendChild(icon.dom.cloneNode(true));
+    }
+    else {
+        let { text, css } = icon;
+        node.appendChild(doc.createElement('span')).textContent = text || '';
+        if (css)
+            node.firstChild.style.cssText = css;
+    }
+    return node;
+}
+function buildSVG(root, name, data) {
+    let [doc, top] = root.nodeType == 9
+        ? [root, root.body]
+        : [root.ownerDocument || document, root];
+    let collection = doc.getElementById(prefix + '-collection');
+    if (!collection) {
+        collection = doc.createElementNS(SVG, 'svg');
+        collection.id = prefix + '-collection';
+        collection.style.display = 'none';
+        top.insertBefore(collection, top.firstChild);
+    }
+    let sym = doc.createElementNS(SVG, 'symbol');
+    sym.id = name;
+    sym.setAttribute('viewBox', '0 0 ' + data.width + ' ' + data.height);
+    let path = sym.appendChild(doc.createElementNS(SVG, 'path'));
+    path.setAttribute('d', data.path);
+    collection.appendChild(sym);
+}
+/// A set of basic editor-related icons. Contains the properties
+/// `join`, `lift`, `selectParentNode`, `undo`, `redo`, `strong`, `em`,
+/// `code`, `link`, `bulletList`, `orderedList`, and `blockquote`, each
+/// holding an object that can be used as the `icon` option to
+/// `MenuItem`.
+export const icons = {
+    join: {
+        width: 800,
+        height: 900,
+        path: 'M0 75h800v125h-800z M0 825h800v-125h-800z M250 400h100v-100h100v100h100v100h-100v100h-100v-100h-100z',
+    },
+    lift: {
+        width: 1024,
+        height: 1024,
+        path: 'M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z',
+    },
+    selectParentNode: {
+        width: 24,
+        height: 24,
+        path: 'M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z',
+    },
+    undo: {
+        width: 24,
+        height: 24,
+        path: 'M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z',
+    },
+    redo: {
+        width: 24,
+        height: 24,
+        path: 'M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z',
+    },
+    strong: {
+        width: 805,
+        height: 1024,
+        path: 'M317 869q42 18 80 18 214 0 214-191 0-65-23-102-15-25-35-42t-38-26-46-14-48-6-54-1q-41 0-57 5 0 30-0 90t-0 90q0 4-0 38t-0 55 2 47 6 38zM309 442q24 4 62 4 46 0 81-7t62-25 42-51 14-81q0-40-16-70t-45-46-61-24-70-8q-28 0-74 7 0 28 2 86t2 86q0 15-0 45t-0 45q0 26 0 39zM0 950l1-53q8-2 48-9t60-15q4-6 7-15t4-19 3-18 1-21 0-19v-37q0-561-12-585-2-4-12-8t-25-6-28-4-27-2-17-1l-2-47q56-1 194-6t213-5q13 0 39 0t38 0q40 0 78 7t73 24 61 40 42 59 16 78q0 29-9 54t-22 41-36 32-41 25-48 22q88 20 146 76t58 141q0 57-20 102t-53 74-78 48-93 27-100 8q-25 0-75-1t-75-1q-60 0-175 6t-132 6z',
+    },
+    em: {
+        width: 585,
+        height: 1024,
+        path: 'M0 949l9-48q3-1 46-12t63-21q16-20 23-57 0-4 35-165t65-310 29-169v-14q-13-7-31-10t-39-4-33-3l10-58q18 1 68 3t85 4 68 1q27 0 56-1t69-4 56-3q-2 22-10 50-17 5-58 16t-62 19q-4 10-8 24t-5 22-4 26-3 24q-15 84-50 239t-44 203q-1 5-7 33t-11 51-9 47-3 32l0 10q9 2 105 17-1 25-9 56-6 0-18 0t-18 0q-16 0-49-5t-49-5q-78-1-117-1-29 0-81 5t-69 6z',
+    },
+    underline: {
+        width: 585,
+        height: 1024,
+        path: 'M0 908h1024v64H0Z',
+    },
+    code: {
+        width: 896,
+        height: 1024,
+        path: 'M608 192l-96 96 224 224-224 224 96 96 288-320-288-320zM288 192l-288 320 288 320 96-96-224-224 224-224-96-96z',
+    },
+    link: {
+        width: 951,
+        height: 1024,
+        path: 'M832 694q0-22-16-38l-118-118q-16-16-38-16-24 0-41 18 1 1 10 10t12 12 8 10 7 14 2 15q0 22-16 38t-38 16q-8 0-15-2t-14-7-10-8-12-12-10-10q-18 17-18 41 0 22 16 38l117 118q15 15 38 15 22 0 38-14l84-83q16-16 16-38zM430 292q0-22-16-38l-117-118q-16-16-38-16-22 0-38 15l-84 83q-16 16-16 38 0 22 16 38l118 118q15 15 38 15 24 0 41-17-1-1-10-10t-12-12-8-10-7-14-2-15q0-22 16-38t38-16q8 0 15 2t14 7 10 8 12 12 10 10q18-17 18-41zM941 694q0 68-48 116l-84 83q-47 47-116 47-69 0-116-48l-117-118q-47-47-47-116 0-70 50-119l-50-50q-49 50-118 50-68 0-116-48l-118-118q-48-48-48-116t48-116l84-83q47-47 116-47 69 0 116 48l117 118q47 47 47 116 0 70-50 119l50 50q49-50 118-50 68 0 116 48l118 118q48 48 48 116z',
+    },
+    bulletList: {
+        width: 768,
+        height: 896,
+        path: 'M0 512h128v-128h-128v128zM0 256h128v-128h-128v128zM0 768h128v-128h-128v128zM256 512h512v-128h-512v128zM256 256h512v-128h-512v128zM256 768h512v-128h-512v128z',
+    },
+    orderedList: {
+        width: 768,
+        height: 896,
+        path: 'M320 512h448v-128h-448v128zM320 768h448v-128h-448v128zM320 128v128h448v-128h-448zM79 384h78v-256h-36l-85 23v50l43-2v185zM189 590c0-36-12-78-96-78-33 0-64 6-83 16l1 66c21-10 42-15 67-15s32 11 32 28c0 26-30 58-110 112v50h192v-67l-91 2c49-30 87-66 87-113l1-1z',
+    },
+    taskList: {
+        width: 24,
+        height: 24,
+        path: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    },
+    blockquote: {
+        width: 640,
+        height: 896,
+        path: 'M0 448v256h256v-256h-128c0 0 0-128 128-128v-128c0 0-256 0-256 256zM640 320v-128c0 0-256 0-256 256v256h256v-256h-128c0 0 0-128 128-128z',
+    },
+    insert: {
+        width: 24,
+        height: 24,
+        path: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+    },
+    type: {
+        width: 20,
+        height: 22,
+        path: 'M2.5 3v3h5.5v13h4V6H17.5V3H2.5z',
+    },
+    table: {
+        width: 24,
+        height: 24,
+        path: 'M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z',
+    },
+    image: {
+        width: 24,
+        height: 24,
+        path: 'M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z',
+    },
+    horizontalRule: {
+        width: 24,
+        height: 24,
+        path: 'M4 11h16v2H4z',
+    },
+    heading: {
+        width: 18,
+        height: 23,
+        path: 'M2.5 3v17h3v-7h7v7h3V3h-3v8h-7V3h-3z',
+    },
+    strike: {
+        width: 24,
+        height: 24,
+        path: 'M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z',
+    },
+    highlight: {
+        width: 24,
+        height: 24,
+        path: 'M17.75 7L14 3.25l-10 10V17h3.75l10-10zm2.96-2.96a.996.996 0 0 0 0-1.41L18.37.29a.996.996 0 0 0-1.41 0L15 2.25 18.75 6l1.96-1.96zM2 20h20v4H2z',
+    },
+    indent: {
+        width: 24,
+        height: 24,
+        path: 'M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z',
+    },
+    outdent: {
+        width: 24,
+        height: 24,
+        path: 'M3 21h18v-2H3v2zM7 8v8l-4-4 4-4zm4 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z',
+    },
+    superscript: {
+        width: 24,
+        height: 24,
+        path: 'M22 7h-2v1h3v1h-4V7c0-.55.45-1 1-1h2V5h-3V4h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zM5.88 20h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 6h-2.68l-3.07 4.99h-.12L8.87 6H6.19l4.32 6.73L5.88 20z',
+    },
+    subscript: {
+        width: 24,
+        height: 24,
+        path: 'M22 18h-2v1h3v1h-4v-2c0-.55.45-1 1-1h2v-1h-3v-1h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zM5.88 18h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 4h-2.68l-3.07 4.99h-.12L8.87 4H6.19l4.32 6.73L5.88 18z',
+    },
+    alignLeft: {
+        width: 24,
+        height: 24,
+        path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z',
+    },
+    alignCenter: {
+        width: 24,
+        height: 24,
+        path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z',
+    },
+    alignRight: {
+        width: 24,
+        height: 24,
+        path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z',
+    },
+    alignJustify: {
+        width: 24,
+        height: 24,
+        path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z',
+    },
+};

package/esm/menu.d.ts

@@ -0,0 +1,83 @@
+import { EditorView } from 'prosemirror-view';
+import { EditorState, Transaction } from 'prosemirror-state';
+export interface MenuElement {
+    render(pm: EditorView): {
+        dom: HTMLElement;
+        update: (state: EditorState) => boolean;
+    };
+}
+export declare class MenuItem implements MenuElement {
+    readonly spec: MenuItemSpec;
+    CSS_PREFIX: string;
+    constructor(spec: MenuItemSpec);
+    render(view: EditorView): {
+        dom: HTMLElement | null;
+        update: (state: EditorState) => boolean;
+    };
+}
+export type IconSpec = {
+    path: string;
+    width: number;
+    height: number;
+} | {
+    text: string;
+    css?: string;
+} | {
+    dom: Node;
+};
+export interface MenuItemSpec {
+    run: (state: EditorState, dispatch: (tr: Transaction) => void) => boolean | Promise<boolean>;
+    select?: (state: EditorState) => boolean;
+    enable?: (state: EditorState) => boolean;
+    active?: (state: EditorState) => boolean;
+    render?: (view: EditorView) => HTMLElement;
+    icon?: IconSpec;
+    label?: string;
+    title?: string | ((state: EditorState) => string);
+    class?: string;
+    css?: string;
+}
+export declare class Dropdown implements MenuElement {
+    readonly options: {
+        label?: string;
+        icon?: IconSpec;
+        title?: string;
+        class?: string;
+        css?: string;
+    };
+    CSS_PREFIX: string;
+    content: readonly MenuElement[];
+    constructor(content: readonly MenuElement[] | MenuElement, options?: {
+        label?: string;
+        icon?: IconSpec;
+        title?: string;
+        class?: string;
+        css?: string;
+    });
+    render(view: EditorView): {
+        dom: any;
+        update: (state: EditorState) => boolean;
+    };
+    expand(dom: HTMLElement, items: readonly Node[]): {
+        close: () => boolean;
+        node: any;
+    };
+}
+export declare class DropdownSubmenu implements MenuElement {
+    readonly options: {
+        label?: string;
+    };
+    content: readonly MenuElement[];
+    constructor(content: readonly MenuElement[] | MenuElement, options?: {
+        label?: string;
+    });
+    render(view: EditorView): {
+        dom: any;
+        update: (state: EditorState) => boolean;
+    };
+}
+export declare function renderGrouped(view: EditorView, content: readonly (readonly MenuElement[])[]): {
+    dom: any;
+    update: (state: EditorState) => boolean;
+};
+//# sourceMappingURL=menu.d.ts.map

package/esm/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.ts"],"names":[],"mappings":"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"}

package/esm/menu.js

@@ -0,0 +1,333 @@
+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);
+        // Add icon if specified
+        if (this.options.icon) {
+            const icon = getIcon(view.root, this.options.icon);
+            label.appendChild(icon);
+        }
+        // Add text label (hidden by CSS in toolbar, visible in title/aria-label)
+        const labelText = translate(view, this.options.label || '');
+        if (labelText) {
+            const textSpan = document.createElement('span');
+            textSpan.classList.add(this.CSS_PREFIX + '__label-text');
+            textSpan.textContent = labelText;
+            label.appendChild(textSpan);
+        }
+        // Set title from explicit title option, or use label as fallback
+        const titleText = this.options.title
+            ? translate(view, this.options.title)
+            : labelText;
+        if (titleText) {
+            label.setAttribute('title', titleText);
+            label.setAttribute('aria-label', titleText);
+        }
+        // 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

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

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

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

package/esm/package.json

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

package/esm/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