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 591878f7c6939b780763e1bf06ea47311de527cf..665d5f9ef654406d6a1e8f35a6c7c95d1d50ca3c 100644 (file)
--- a/resources/js/editor/menu/index.js
+++ b/resources/js/editor/menu/index.js
@@ -1,11 +1,17 @@
 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) {
@@ -49,13 +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", label: 'U'}),
+    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 = [
@@ -79,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",
@@ -99,12 +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],
         [new DropdownSubmenu(formats, { label: 'Formats' })],
         inlineStyles,
+        colors,
+        alignments,
+        lists,
+        inserts,
+        utilities,
     ],
 });