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 f29108849582b8cbf51bd9c186cb785930988f3b..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, setAttrItem,
+    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,16 +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.strike, {title: "Strikethrough", label: '-S-'}),
-    markItem(schema.marks.superscript, {title: "Superscript", label: 'sup'}),
-    markItem(schema.marks.subscript, {title: "Subscript", label: 'sub'}),
+    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 = [
@@ -82,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",
@@ -104,16 +114,59 @@ const formats = [
 
 const alignments = [
     setAttrItem('align', 'left', {
-        label: 'Align Left'
-    }),
-    setAttrItem('align', 'right', {
-        label: 'Align Right'
+        icon: icons.align_left
     }),
     setAttrItem('align', 'center', {
-        label: 'Align Center'
+        icon: icons.align_center
+    }),
+    setAttrItem('align', 'right', {
+        icon: icons.align_right
     }),
     setAttrItem('align', 'justify', {
-        label: '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,
     }),
 ];
 
@@ -123,7 +176,11 @@ const menu = menuBar({
         [undoItem, redoItem],
         [new DropdownSubmenu(formats, { label: 'Formats' })],
         inlineStyles,
+        colors,
         alignments,
+        lists,
+        inserts,
+        utilities,
     ],
 });