@kerebron/extension-menu 0.2.0 → 0.2.1

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

@@ -0,0 +1,318 @@
+import { NodeSelection } from 'prosemirror-state';
+import { Extension } from '../../editor/src/mod.js';
+import { toggleMark, wrapInList } from '../../editor/src/commands/mod.js';
+import { blockTypeItem, Dropdown, DropdownSubmenu, MenuItem, wrapItem, } from './menu.js';
+import { MenuPlugin } from './MenuPlugin.js';
+import { icons } from './icons.js';
+import { openPrompt, TextField } from './prompt.js';
+export { blockTypeItem, Dropdown, DropdownSubmenu, 
+// MenuElement,
+MenuItem, 
+// MenuItemSpec,
+wrapItem, } from './menu.js';
+function canInsert(state, nodeType) {
+    let $from = state.selection.$from;
+    for (let d = $from.depth; d >= 0; d--) {
+        let index = $from.index(d);
+        if ($from.node(d).canReplaceWith(index, index, nodeType))
+            return true;
+    }
+    return false;
+}
+function cmdItem(cmd, options) {
+    let passedOptions = {
+        label: options.title,
+        run: cmd,
+    };
+    for (let prop in options) {
+        passedOptions[prop] = options[prop];
+    }
+    if (!options.enable && !options.select) {
+        passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state);
+    }
+    return new MenuItem(passedOptions);
+}
+function markActive(state, type) {
+    let { from, $from, to, empty } = state.selection;
+    if (empty)
+        return !!type.isInSet(state.storedMarks || $from.marks());
+    else
+        return state.doc.rangeHasMark(from, to, type);
+}
+function markItem(markType, options) {
+    let passedOptions = {
+        active(state) {
+            return markActive(state, markType);
+        },
+    };
+    for (let prop in options) {
+        passedOptions[prop] = options[prop];
+    }
+    return cmdItem(toggleMark(markType), passedOptions);
+}
+function wrapListItem(nodeType, options) {
+    return cmdItem(wrapInList(nodeType, options.attrs), options);
+}
+const cut = (arr) => arr.filter((x) => x);
+export function buildMenu(editor, schema) {
+    const menu = [];
+    if (schema.marks.strong) {
+        menu.push(new MenuItem({
+            title: 'Toggle strong assets',
+            run: () => editor.chain().toggleStrong().run(),
+            enable: (state) => editor.can().toggleStrong().run(),
+            icon: icons.strong,
+        }));
+    }
+    if (schema.marks.em) {
+        menu.push(new MenuItem({
+            title: 'Toggle emphasis',
+            run: () => editor.chain().toggleItalic().run(),
+            enable: (state) => editor.can().toggleItalic().run(),
+            icon: icons.em,
+        }));
+    }
+    if (schema.marks.underline) {
+        menu.push(new MenuItem({
+            title: 'Toggle underline',
+            label: '_',
+            run: () => editor.chain().toggleUnderline().run(),
+            enable: (state) => editor.can().toggleUnderline().run(),
+            // icon: icons.underline
+        }));
+    }
+    if (schema.marks.code) {
+        menu.push(markItem(schema.marks.code, {
+            title: 'Toggle code font',
+            icon: icons.code,
+        }));
+    }
+    if (schema.marks.link) {
+        const markType = schema.marks.link;
+        menu.push(new MenuItem({
+            title: 'Add or remove link',
+            icon: icons.link,
+            active(state) {
+                return markActive(state, markType);
+            },
+            enable(state) {
+                return !state.selection.empty;
+            },
+            run(state, dispatch, view) {
+                if (markActive(state, markType)) {
+                    toggleMark(markType)(state, dispatch);
+                    return true;
+                }
+                openPrompt({
+                    title: 'Create a link',
+                    fields: {
+                        href: new TextField({
+                            label: 'Link target',
+                            required: true,
+                        }),
+                        title: new TextField({ label: 'Title' }),
+                    },
+                    callback(attrs) {
+                        toggleMark(markType, attrs)(view.state, view.dispatch);
+                        view.focus();
+                    },
+                });
+            },
+        }));
+    }
+    const blockMenu = [];
+    const insertMenu = [];
+    const typeMenu = [];
+    if (schema.nodes.bullet_list) {
+        blockMenu.push(wrapListItem(schema.nodes.bullet_list, {
+            title: 'Wrap in bullet list',
+            icon: icons.bulletList,
+        }));
+    }
+    if (schema.nodes.ordered_list) {
+        blockMenu.push(wrapListItem(schema.nodes.ordered_list, {
+            title: 'Wrap in ordered list',
+            icon: icons.orderedList,
+        }));
+    }
+    if (schema.nodes.blockquote) {
+        blockMenu.push(wrapItem(schema.nodes.blockquote, {
+            title: 'Wrap in block quote',
+            icon: icons.blockquote,
+        }));
+    }
+    if (schema.nodes.paragraph) {
+        typeMenu.push(blockTypeItem(schema.nodes.paragraph, {
+            title: 'Change to paragraph',
+            label: 'Plain',
+        }));
+    }
+    if (schema.nodes.code_block) {
+        typeMenu.push(blockTypeItem(schema.nodes.code_block, {
+            title: 'Change to code block',
+            label: 'Code',
+        }));
+    }
+    if (schema.nodes.heading) {
+        const makeHeadMenu = [];
+        for (let i = 1; i <= 6; i++) {
+            makeHeadMenu.push(blockTypeItem(schema.nodes.heading, {
+                title: 'Change to heading ' + i,
+                label: 'Level ' + i,
+                attrs: { level: i },
+            }));
+        }
+        typeMenu.push(new DropdownSubmenu(makeHeadMenu, { label: 'Heading' }));
+    }
+    blockMenu.push(new MenuItem({
+        title: 'Join with above block',
+        run: () => editor.chain().joinUp().run(),
+        select: () => editor.can().joinUp().run(),
+        icon: icons.join,
+    }));
+    blockMenu.push(new MenuItem({
+        title: 'Lift out of enclosing block',
+        run: () => editor.chain().lift().run(),
+        select: () => editor.can().lift().run(),
+        icon: icons.lift,
+    }));
+    blockMenu.push(new MenuItem({
+        title: 'Select parent node',
+        run: () => editor.chain().selectParentNode().run(),
+        select: () => editor.can().selectParentNode().run(),
+        icon: icons.selectParentNode,
+    }));
+    if (schema.nodes.image) {
+        const nodeType = schema.nodes.image;
+        insertMenu.push(new MenuItem({
+            title: 'Insert image',
+            label: 'Image',
+            // enable: (state) => editor.can().setHorizontalRule().run(),
+            enable: (state) => canInsert(state, nodeType),
+            run(state, _, view) {
+                let { from, to } = state.selection, attrs = null;
+                if (state.selection instanceof NodeSelection &&
+                    state.selection.node.type == nodeType) {
+                    attrs = state.selection.node.attrs;
+                }
+                openPrompt({
+                    title: 'Insert image',
+                    fields: {
+                        src: new TextField({
+                            label: 'Location',
+                            required: true,
+                            value: attrs && attrs.src,
+                        }),
+                        title: new TextField({
+                            label: 'Title',
+                            value: attrs && attrs.title,
+                        }),
+                        alt: new TextField({
+                            label: 'Description',
+                            value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' '),
+                        }),
+                    },
+                    callback(attrs) {
+                        view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)));
+                        view.focus();
+                    },
+                });
+            },
+        }));
+    }
+    if (schema.nodes.hr) {
+        insertMenu.push(new MenuItem({
+            title: 'Insert horizontal rule',
+            label: 'Horizontal rule',
+            run: () => editor.chain().setHorizontalRule().run(),
+            enable: (state) => editor.can().setHorizontalRule().run(),
+        }));
+    }
+    menu.push(new Dropdown(cut(insertMenu), {
+        label: 'Insert',
+    }));
+    menu.push(new Dropdown(cut(typeMenu), {
+        label: 'Type...',
+    }));
+    /*
+    r.blockMenu = [
+      cut([
+        r.wrapBulletList,
+        r.wrapOrderedList,
+        r.wrapBlockQuote,
+        joinUpItem,
+        liftItem,
+        selectParentNodeItem,
+      ]),
+    ];
+    */
+    menu.push(new MenuItem({
+        title: 'Undo last change',
+        run: () => editor.chain().undo().run(),
+        enable: () => editor.can().undo().run(),
+        icon: icons.undo,
+    }));
+    menu.push(new MenuItem({
+        title: 'Redo last undone change',
+        run: () => editor.chain().redo().run(),
+        enable: () => editor.can().redo().run(),
+        icon: icons.redo,
+    }));
+    if (schema.nodes.table) {
+        const item = (label, cmdName) => {
+            return new MenuItem({
+                label,
+                enable: () => editor.can()[cmdName]().run(),
+                run: () => editor.chain()[cmdName]().run(),
+            });
+        };
+        const tableMenu = [
+            item('Insert table', 'insertTable'),
+            item('Insert column before', 'addColumnBefore'),
+            item('Insert column after', 'addColumnAfter'),
+            item('Delete column', 'deleteColumn'),
+            item('Insert row before', 'addRowBefore'),
+            item('Insert row after', 'addRowAfter'),
+            item('Delete row', 'deleteRow'),
+            item('Delete table', 'deleteTable'),
+            item('Merge cells', 'mergeCells'),
+            item('Split cell', 'splitCell'),
+            item('Toggle header column', 'toggleHeaderColumn'),
+            item('Toggle header row', 'toggleHeaderRow'),
+            item('Toggle header cells', 'toggleHeaderCell'),
+            // item('Make cell green', setCellAttr('background', '#dfd')),
+            // item('Make cell not-green', setCellAttr('background', null)),
+        ];
+        menu.push(new Dropdown(tableMenu, { label: 'Table' }));
+    }
+    return [menu, blockMenu];
+}
+export class ExtensionMenu extends Extension {
+    constructor(config = { floating: true }) {
+        super(config);
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: config
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'menu'
+        });
+    }
+    getProseMirrorPlugins(editor, schema) {
+        const plugins = [];
+        let content = buildMenu(editor, schema);
+        if (this.config.modifyMenu) {
+            content = this.config.modifyMenu(content);
+        }
+        plugins.push(new MenuPlugin({
+            content,
+            floating: this.config.floating,
+        }));
+        return plugins;
+    }
+}

package/esm/extension-menu/src/MenuPlugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'prosemirror-state';
+import { MenuElement } from './menu.js';
+export declare class MenuPlugin extends Plugin {
+    constructor(options: {
+        content: readonly (readonly MenuElement[])[];
+        floating?: boolean;
+    });
+}
+//# sourceMappingURL=MenuPlugin.d.ts.map

package/esm/extension-menu/src/MenuPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/MenuPlugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,MAAM,EAAa,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAiB,MAAM,WAAW,CAAC;AAyLvD,qBAAa,UAAW,SAAQ,MAAM;gBACxB,OAAO,EAAE;QAGnB,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;QAK7C,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;CAOF"}

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

@@ -0,0 +1,245 @@
+import { Plugin } from 'prosemirror-state';
+import { renderGrouped } from './menu.js';
+const CSS_PREFIX = 'kb-menu';
+function isIOS() {
+    if (typeof navigator == 'undefined')
+        return false;
+    let agent = navigator.userAgent;
+    return !/Edge\/\d/.test(agent) && /AppleWebKit/.test(agent) &&
+        /Mobile\/\w+/.test(agent);
+}
+class MenuBarView {
+    constructor(editorView, options) {
+        Object.defineProperty(this, "editorView", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: editorView
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "menu", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "spacer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "maxHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "widthForMaxHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "floating", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "contentUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scrollHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.root = editorView.root;
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add(CSS_PREFIX + '__wrapper');
+        this.menu = document.createElement('div');
+        this.menu.classList.add(CSS_PREFIX);
+        this.wrapper.appendChild(this.menu);
+        this.menu.className = CSS_PREFIX;
+        if (editorView.dom.parentNode) {
+            editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom);
+        }
+        this.wrapper.appendChild(editorView.dom);
+        let { dom, update } = renderGrouped(this.editorView, this.options.content);
+        this.contentUpdate = update;
+        this.menu.appendChild(dom);
+        this.update();
+        if (options.floating && !isIOS()) {
+            this.updateFloat();
+            let potentialScrollers = getAllWrapping(this.wrapper);
+            this.scrollHandler = (e) => {
+                let root = this.editorView.root;
+                if (!(root.body || root).contains(this.wrapper)) {
+                    potentialScrollers.forEach((el) => el.removeEventListener('scroll', this.scrollHandler));
+                }
+                else {
+                    this.updateFloat(e.target.getBoundingClientRect
+                        ? e.target
+                        : undefined);
+                }
+            };
+            potentialScrollers.forEach((el) => el.addEventListener('scroll', this.scrollHandler));
+        }
+    }
+    update() {
+        if (this.editorView.root != this.root) {
+            let { dom, update } = renderGrouped(this.editorView, this.options.content);
+            this.contentUpdate = update;
+            this.menu.replaceChild(dom, this.menu.firstChild);
+            this.root = this.editorView.root;
+        }
+        // this.contentUpdate(this.editorView.state);
+        if (this.floating) {
+            this.updateScrollCursor();
+        }
+        else {
+            if (this.menu.offsetWidth != this.widthForMaxHeight) {
+                this.widthForMaxHeight = this.menu.offsetWidth;
+                this.maxHeight = 0;
+            }
+            if (this.menu.offsetHeight > this.maxHeight) {
+                this.maxHeight = this.menu.offsetHeight;
+            }
+        }
+    }
+    updateScrollCursor() {
+        let selection = this.editorView.root.getSelection();
+        if (!selection.focusNode)
+            return;
+        let rects = selection.getRangeAt(0).getClientRects();
+        let selRect = rects[selectionIsInverted(selection) ? 0 : rects.length - 1];
+        if (!selRect)
+            return;
+        let menuRect = this.menu.getBoundingClientRect();
+        if (selRect.top < menuRect.bottom && selRect.bottom > menuRect.top) {
+            let scrollable = findWrappingScrollable(this.wrapper);
+            if (scrollable)
+                scrollable.scrollTop -= menuRect.bottom - selRect.top;
+        }
+    }
+    updateFloat(scrollAncestor) {
+        let parent = this.wrapper, editorRect = parent.getBoundingClientRect(), top = scrollAncestor
+            ? Math.max(0, scrollAncestor.getBoundingClientRect().top)
+            : 0;
+        if (this.floating) {
+            if (editorRect.top >= top || editorRect.bottom < this.menu.offsetHeight + 10) {
+                this.floating = false;
+                this.menu.style.position =
+                    this.menu.style.left =
+                        this.menu.style.top =
+                            this.menu.style.width =
+                                '';
+                this.menu.style.display = '';
+                this.spacer.parentNode.removeChild(this.spacer);
+                this.spacer = null;
+            }
+            else {
+                let border = (parent.offsetWidth - parent.clientWidth) / 2;
+                this.menu.style.left = (editorRect.left + border) + 'px';
+                this.menu.style.display = editorRect.top >
+                    this.editorView.dom.ownerDocument.defaultView
+                        .innerHeight
+                    ? 'none'
+                    : '';
+                if (scrollAncestor)
+                    this.menu.style.top = top + 'px';
+            }
+        }
+        else {
+            if (editorRect.top < top && editorRect.bottom >= this.menu.offsetHeight + 10) {
+                this.floating = true;
+                let menuRect = this.menu.getBoundingClientRect();
+                this.menu.style.left = menuRect.left + 'px';
+                this.menu.style.width = menuRect.width + 'px';
+                if (scrollAncestor)
+                    this.menu.style.top = top + 'px';
+                this.menu.style.position = 'fixed';
+                this.spacer = document.createElement('div');
+                this.spacer.classList.add(CSS_PREFIX + '__spacer');
+                this.spacer.style.height = `${menuRect.height}px`;
+                parent.insertBefore(this.spacer, this.menu);
+            }
+        }
+    }
+    destroy() {
+        if (this.wrapper.parentNode) {
+            this.wrapper.parentNode.replaceChild(this.editorView.dom, this.wrapper);
+        }
+    }
+}
+// Not precise, but close enough
+function selectionIsInverted(selection) {
+    if (selection.anchorNode == selection.focusNode) {
+        return selection.anchorOffset > selection.focusOffset;
+    }
+    return selection.anchorNode.compareDocumentPosition(selection.focusNode) ==
+        Node.DOCUMENT_POSITION_FOLLOWING;
+}
+function findWrappingScrollable(node) {
+    for (let cur = node.parentNode; cur; cur = cur.parentNode) {
+        if (cur.scrollHeight > cur.clientHeight) {
+            return cur;
+        }
+    }
+}
+function getAllWrapping(node) {
+    let res = [node.ownerDocument.defaultView];
+    for (let cur = node.parentNode; cur; cur = cur.parentNode) {
+        res.push(cur);
+    }
+    return res;
+}
+export class MenuPlugin extends Plugin {
+    constructor(options) {
+        super({
+            view(editorView) {
+                return new MenuBarView(editorView, options);
+            },
+        });
+    }
+}
+/*
+/// A plugin that will place a menu bar above the editor. Note that
+/// this involves wrapping the editor in an additional `<div>`.
+export function menuBar(options: {
+    /// Provides the content of the menu, as a nested array to be
+    /// passed to `renderGrouped`.
+    content: readonly (readonly MenuElement[])[]
+
+    /// Determines whether the menu floats, i.e. whether it sticks to
+    /// the top of the viewport when the editor is partially scrolled
+    /// out of view.
+    floating?: boolean
+}): Plugin {
+    return new Plugin({
+        view(editorView) { return new MenuBarView(editorView, options) }
+    })
+}
+*/

package/esm/extension-menu/src/icons.d.ts

@@ -0,0 +1,15 @@
+import { IconSpec } from './menu.js';
+export declare function getIcon(root: Document | ShadowRoot, icon: {
+    path: string;
+    width: number;
+    height: number;
+} | {
+    text: string;
+    css?: string;
+} | {
+    dom: Node;
+}): HTMLElement;
+export declare const icons: {
+    [name: string]: IconSpec;
+};
+//# sourceMappingURL=icons.d.ts.map

package/esm/extension-menu/src/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAerC,wBAAgB,OAAO,CACrB,IAAI,EAAE,QAAQ,GAAG,UAAU,EAC3B,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG;IAAE,GAAG,EAAE,IAAI,CAAA;CAAE,GAChB,WAAW,CAmCb;AA8BD,eAAO,MAAM,KAAK,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CAoE7C,CAAC"}