BookStack Code Mirror - bookstack/blob - resources/js/editor/menu/index.js

   1 import {
   2     MenuItem, Dropdown, DropdownSubmenu, renderGrouped, joinUpItem, liftItem, selectParentNodeItem,
   3     undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem, insertBlockBeforeItem,
   4 } from "./menu"
   5 import {icons} from "./icons";
   6 import ColorPickerGrid from "./ColorPickerGrid";
   7 import {toggleMark} from "prosemirror-commands";
   8 import {menuBar} from "./menubar"
   9 import schema from "../schema";
  10 import {removeMarks} from "../commands";
  11
  12
  13 function cmdItem(cmd, options) {
  14     const passedOptions = {
  15         label: options.title,
  16         run: cmd
  17     };
  18     for (const prop in options) {
  19         passedOptions[prop] = options[prop];
  20     }
  21     if ((!options.enable || options.enable === true) && !options.select) {
  22         passedOptions[options.enable ? "enable" : "select"] = function (state) {
  23             return cmd(state);
  24         };
  25     }
  26
  27     return new MenuItem(passedOptions)
  28 }
  29
  30 function markActive(state, type) {
  31     const ref = state.selection;
  32     const from = ref.from;
  33     const $from = ref.$from;
  34     const to = ref.to;
  35     const empty = ref.empty;
  36     if (empty) {
  37         return type.isInSet(state.storedMarks || $from.marks())
  38     } else {
  39         return state.doc.rangeHasMark(from, to, type)
  40     }
  41 }
  42
  43 function markItem(markType, options) {
  44     const passedOptions = {
  45         active: function active(state) {
  46             return markActive(state, markType)
  47         },
  48         enable: true
  49     };
  50     for (const prop in options) {
  51         passedOptions[prop] = options[prop];
  52     }
  53
  54     return cmdItem(toggleMark(markType, passedOptions.attrs), passedOptions)
  55 }
  56
  57 const inlineStyles = [
  58     markItem(schema.marks.strong, {title: "Bold", icon: icons.strong}),
  59     markItem(schema.marks.em, {title: "Italic", icon: icons.em}),
  60     markItem(schema.marks.underline, {title: "Underline", icon: icons.underline}),
  61     markItem(schema.marks.strike, {title: "Strikethrough", icon: icons.strike}),
  62     markItem(schema.marks.superscript, {title: "Superscript", icon: icons.superscript}),
  63     markItem(schema.marks.subscript, {title: "Subscript", icon: icons.subscript}),
  64 ];
  65
  66 const formats = [
  67     blockTypeItem(schema.nodes.heading, {
  68         label: "Header Large",
  69         attrs: {level: 2}
  70     }),
  71     blockTypeItem(schema.nodes.heading, {
  72         label: "Header Medium",
  73         attrs: {level: 3}
  74     }),
  75     blockTypeItem(schema.nodes.heading, {
  76         label: "Header Small",
  77         attrs: {level: 4}
  78     }),
  79     blockTypeItem(schema.nodes.heading, {
  80         label: "Header Tiny",
  81         attrs: {level: 5}
  82     }),
  83     blockTypeItem(schema.nodes.paragraph, {
  84         label: "Paragraph",
  85         attrs: {}
  86     }),
  87     markItem(schema.marks.code, {
  88         label: "Inline Code",
  89         attrs: {}
  90     }),
  91     new DropdownSubmenu([
  92         blockTypeItem(schema.nodes.callout, {
  93             label: "Info Callout",
  94             attrs: {type: 'info'}
  95         }),
  96         blockTypeItem(schema.nodes.callout, {
  97             label: "Danger Callout",
  98             attrs: {type: 'danger'}
  99         }),
 100         blockTypeItem(schema.nodes.callout, {
 101             label: "Success Callout",
 102             attrs: {type: 'success'}
 103         }),
 104         blockTypeItem(schema.nodes.callout, {
 105             label: "Warning Callout",
 106             attrs: {type: 'warning'}
 107         })
 108     ], { label: 'Callouts' }),
 109 ];
 110
 111 const alignments = [
 112     setAttrItem('align', 'left', {
 113         icon: icons.align_left
 114     }),
 115     setAttrItem('align', 'center', {
 116         icon: icons.align_center
 117     }),
 118     setAttrItem('align', 'right', {
 119         icon: icons.align_right
 120     }),
 121     setAttrItem('align', 'justify', {
 122         icon: icons.align_justify
 123     }),
 124 ];
 125
 126 const colorOptions = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#FFFFFF","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF"];
 127
 128 const colors = [
 129     new DropdownSubmenu([
 130         new ColorPickerGrid(schema.marks.text_color, 'color', colorOptions),
 131     ], {icon: icons.text_color}),
 132     new DropdownSubmenu([
 133         new ColorPickerGrid(schema.marks.background_color, 'color', colorOptions),
 134     ], {icon: icons.background_color}),
 135 ];
 136
 137 const lists = [
 138     wrapItem(schema.nodes.bullet_list, {
 139         title: "Bullet List",
 140         icon: icons.bullet_list,
 141     }),
 142     wrapItem(schema.nodes.ordered_list, {
 143         title: "Ordered List",
 144         icon: icons.ordered_list,
 145     }),
 146 ];
 147
 148 const inserts = [
 149     insertBlockBeforeItem(schema.nodes.horizontal_rule, {
 150         title: "Horizontal Rule",
 151         icon: icons.horizontal_rule,
 152     }),
 153 ];
 154
 155 const utilities = [
 156     new MenuItem({
 157         title: 'Clear Formatting',
 158         icon: icons.format_clear,
 159         run: removeMarks(),
 160         enable: state => true,
 161     }),
 162 ];
 163
 164 const menu = menuBar({
 165     floating: false,
 166     content: [
 167         [undoItem, redoItem],
 168         [new DropdownSubmenu(formats, { label: 'Formats' })],
 169         inlineStyles,
 170         colors,
 171         alignments,
 172         lists,
 173         inserts,
 174         utilities,
 175     ],
 176 });
 177
 178 export default menu;
 179
 180 // !! This module defines a number of building blocks for ProseMirror
 181 // menus, along with a [menu bar](#menu.menuBar) implementation.
 182
 183 // MenuElement:: interface
 184 // The types defined in this module aren't the only thing you can
 185 // display in your menu. Anything that conforms to this interface can
 186 // be put into a menu structure.
 187 //
 188 //   render:: (pm: EditorView) → {dom: dom.Node, update: (EditorState) → bool}
 189 //   Render the element for display in the menu. Must return a DOM
 190 //   element and a function that can be used to update the element to
 191 //   a new state. The `update` function will return false if the
 192 //   update hid the entire element.