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 ed6a1c25b875acab87e86b3a61b3bbdc17474d70..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) {
@@ -55,10 +61,10 @@ function markItem(markType, options) {
 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,22 +114,60 @@ 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 = [
-    markItem(schema.marks.text_color, {title: "Green", label: "Green", attrs: {color: '#00FF00'}}),
-    markItem(schema.marks.text_color, {title: "Blue", label: "Blue", attrs: {color: '#0000FF'}}),
+    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({
@@ -127,9 +175,12 @@ const menu = menuBar({
     content: [
         [undoItem, redoItem],
         [new DropdownSubmenu(formats, { label: 'Formats' })],
-        colors,
         inlineStyles,
+        colors,
         alignments,
+        lists,
+        inserts,
+        utilities,
     ],
 });