Added in a custom menubar

This is a copy of the ProseMirror/prosemirror-menu repo files
which suggest working from a fork of this.

These changes include the ability to select callouts
from the menubar.

resources/js/editor/menu/index.js

@@ -0,0 +1,132 @@
+/**
+ * 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.