BookStack/resources/js/editor/menu/index.js

/**
 * Much of this code originates from https://github.com/ProseMirror/prosemirror-menu
 * and is hence subject to the MIT license found here:
 * https://github.com/ProseMirror/prosemirror-menu/blob/master/LICENSE
 * @copyright Marijn Haverbeke and others
 */

import {
    MenuItem, Dropdown, DropdownSubmenu, renderGrouped, icons, joinUpItem, liftItem, selectParentNodeItem,
    undoItem, redoItem, wrapItem, blockTypeItem
} from "./menu"

import {toggleMark} from "prosemirror-commands";
import {menuBar} from "./menubar"
import schema from "../schema";


function cmdItem(cmd, options) {
    const passedOptions = {
        label: options.title,
        run: cmd
    };
    for (const prop in options) {
        passedOptions[prop] = options[prop];
    }
    if ((!options.enable || options.enable === true) && !options.select) {
        passedOptions[options.enable ? "enable" : "select"] = function (state) {
            return cmd(state);
        };
    }

    return new MenuItem(passedOptions)
}

function markActive(state, type) {
    const ref = state.selection;
    const from = ref.from;
    const $from = ref.$from;
    const to = ref.to;
    const empty = ref.empty;
    if (empty) {
        return type.isInSet(state.storedMarks || $from.marks())
    } else {
        return state.doc.rangeHasMark(from, to, type)
    }
}

function markItem(markType, options) {
    const passedOptions = {
        active: function active(state) {
            return markActive(state, markType)
        },
        enable: true
    };
    for (const prop in options) {
        passedOptions[prop] = options[prop];
    }

    return cmdItem(toggleMark(markType), passedOptions)
}

const inlineStyles = [
    markItem(schema.marks.strong, {title: "Bold", icon: icons.strong}),
    markItem(schema.marks.em, {title: "Italic", icon: icons.em}),
];

const formats = [
    blockTypeItem(schema.nodes.heading, {
        label: "Header Large",
        attrs: {level: 2}
    }),
    blockTypeItem(schema.nodes.heading, {
        label: "Header Medium",
        attrs: {level: 3}
    }),
    blockTypeItem(schema.nodes.heading, {
        label: "Header Small",
        attrs: {level: 4}
    }),
    blockTypeItem(schema.nodes.heading, {
        label: "Header Tiny",
        attrs: {level: 5}
    }),
    blockTypeItem(schema.nodes.paragraph, {
        label: "Paragraph",
        attrs: {}
    }),
    new DropdownSubmenu([
        blockTypeItem(schema.nodes.callout, {
            label: "Info Callout",
            attrs: {type: 'info'}
        }),
        blockTypeItem(schema.nodes.callout, {
            label: "Danger Callout",
            attrs: {type: 'danger'}
        }),
        blockTypeItem(schema.nodes.callout, {
            label: "Success Callout",
            attrs: {type: 'success'}
        }),
        blockTypeItem(schema.nodes.callout, {
            label: "Warning Callout",
            attrs: {type: 'warning'}
        })
    ], { label: 'Callouts' }),
];

const menu = menuBar({
    floating: false,
    content: [
        [undoItem, redoItem],
        inlineStyles,
        [new DropdownSubmenu(formats, { label: 'Formats' })],

    ],
});

export default menu;

// !! This module defines a number of building blocks for ProseMirror
// menus, along with a [menu bar](#menu.menuBar) implementation.

// MenuElement:: interface
// The types defined in this module aren't the only thing you can
// display in your menu. Anything that conforms to this interface can
// be put into a menu structure.
//
//   render:: (pm: EditorView) → {dom: dom.Node, update: (EditorState) → bool}
//   Render the element for display in the menu. Must return a DOM
//   element and a function that can be used to update the element to
//   a new state. The `update` function will return false if the
//   update hid the entire element.