Added table creation and insertion

[bookstack] / resources / js / editor / menu / index.js

diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js
index 1bdc718dc728595ca34e6673a531b455361cb69c..665d5f9ef654406d6a1e8f35a6c7c95d1d50ca3c 100644 (file)
--- a/resources/js/editor/menu/index.js
+++ b/resources/js/editor/menu/index.js
@@ -1,18 +1,17 @@
-/**
- * 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
+    MenuItem, Dropdown, DropdownSubmenu, renderGrouped, joinUpItem, liftItem, selectParentNodeItem,
+    undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem, insertBlockBeforeItem,
 } from "./menu"
-
+import {icons} from "./icons";
+import ColorPickerGrid from "./ColorPickerGrid";
+import TableCreatorGrid from "./TableCreatorGrid";
 import {toggleMark} from "prosemirror-commands";
 import {menuBar} from "./menubar"
 import schema from "../schema";
+import {removeMarks} from "../commands";
+
+import itemAnchorButtonItem from "./item-anchor-button";
+import itemHtmlSourceButton from "./item-html-source-button";
 
 
 function cmdItem(cmd, options) {
@@ -56,12 +55,16 @@ function markItem(markType, options) {
         passedOptions[prop] = options[prop];
     }
 
-    return cmdItem(toggleMark(markType), passedOptions)
+    return cmdItem(toggleMark(markType, passedOptions.attrs), passedOptions)
 }
 
 const inlineStyles = [
     markItem(schema.marks.strong, {title: "Bold", icon: icons.strong}),
     markItem(schema.marks.em, {title: "Italic", icon: icons.em}),
+    markItem(schema.marks.underline, {title: "Underline", icon: icons.underline}),
+    markItem(schema.marks.strike, {title: "Strikethrough", icon: icons.strike}),
+    markItem(schema.marks.superscript, {title: "Superscript", icon: icons.superscript}),
+    markItem(schema.marks.subscript, {title: "Subscript", icon: icons.subscript}),
 ];
 
 const formats = [
@@ -85,6 +88,10 @@ const formats = [
         label: "Paragraph",
         attrs: {}
     }),
+    markItem(schema.marks.code, {
+        label: "Inline Code",
+        attrs: {}
+    }),
     new DropdownSubmenu([
         blockTypeItem(schema.nodes.callout, {
             label: "Info Callout",
@@ -105,13 +112,75 @@ const formats = [
     ], { label: 'Callouts' }),
 ];
 
+const alignments = [
+    setAttrItem('align', 'left', {
+        icon: icons.align_left
+    }),
+    setAttrItem('align', 'center', {
+        icon: icons.align_center
+    }),
+    setAttrItem('align', 'right', {
+        icon: icons.align_right
+    }),
+    setAttrItem('align', 'justify', {
+        icon: icons.align_justify
+    }),
+];
+
+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"];
+
+const colors = [
+    new DropdownSubmenu([
+        new ColorPickerGrid(schema.marks.text_color, 'color', colorOptions),
+    ], {icon: icons.text_color}),
+    new DropdownSubmenu([
+        new ColorPickerGrid(schema.marks.background_color, 'color', colorOptions),
+    ], {icon: icons.background_color}),
+];
+
+const lists = [
+    wrapItem(schema.nodes.bullet_list, {
+        title: "Bullet List",
+        icon: icons.bullet_list,
+    }),
+    wrapItem(schema.nodes.ordered_list, {
+        title: "Ordered List",
+        icon: icons.ordered_list,
+    }),
+];
+
+const inserts = [
+    itemAnchorButtonItem(),
+    insertBlockBeforeItem(schema.nodes.horizontal_rule, {
+        title: "Horizontal Rule",
+        icon: icons.horizontal_rule,
+    }),
+    new DropdownSubmenu([
+        new TableCreatorGrid()
+    ], {icon: icons.table}),
+    itemHtmlSourceButton(),
+];
+
+const utilities = [
+    new MenuItem({
+        title: 'Clear Formatting',
+        icon: icons.format_clear,
+        run: removeMarks(),
+        enable: state => true,
+    }),
+];
+
 const menu = menuBar({
     floating: false,
     content: [
         [undoItem, redoItem],
-        inlineStyles,
         [new DropdownSubmenu(formats, { label: 'Formats' })],
-
+        inlineStyles,
+        colors,
+        alignments,
+        lists,
+        inserts,
+        utilities,
     ],
 });