Added table creation and insertion

resources/js/editor/menu/TableCreatorGrid.js

@@ -0,0 +1,80 @@
+import crel from "crelt"
+import {prefix} from "./menu-utils";
+import {insertTable} from "../commands";
+
+class TableCreatorGrid {
+
+    constructor() {
+        this.gridItems = [];
+        this.size = 10;
+        this.label = null;
+    }
+
+    // :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
+    // Renders the submenu.
+    render(view) {
+
+        for (let y = 0; y < this.size; y++) {
+            for (let x = 0; x < this.size; x++) {
+                const elem = crel("div", {class: prefix + "-table-creator-grid-item"});
+                this.gridItems.push(elem);
+                elem.addEventListener('mouseenter', event => this.updateGridItemActiveStatus(elem));
+            }
+        }
+
+        const gridWrap = crel("div", {
+            class: prefix + "-table-creator-grid",
+            style: `grid-template-columns: repeat(${this.size}, 14px);`,
+        }, this.gridItems);
+
+        gridWrap.addEventListener('mouseleave', event => {
+            this.updateGridItemActiveStatus(null);
+        });
+        gridWrap.addEventListener('click', event => {
+            if (event.target.classList.contains(prefix + "-table-creator-grid-item")) {
+                const {x, y} = this.getPositionOfGridItem(event.target);
+                insertTable(y + 1, x + 1)(view.state, view.dispatch);
+            }
+        });
+
+        const gridLabel = crel("div", {class: prefix + "-table-creator-grid-label"});
+        this.label = gridLabel;
+        const wrap = crel("div", {class: prefix + "-table-creator-grid-container"}, [gridWrap, gridLabel]);
+
+        function update(state) {
+            return true;
+        }
+
+        return {dom: wrap, update}
+    }
+
+    /**
+     * @param {Element|null} newTarget
+     */
+    updateGridItemActiveStatus(newTarget) {
+        const {x: xPos, y: yPos} = this.getPositionOfGridItem(newTarget);
+
+        for (let y = 0; y < this.size; y++) {
+            for (let x = 0; x < this.size; x++) {
+                const active = x <= xPos && y <= yPos;
+                const index = (y * this.size) + x;
+                this.gridItems[index].classList.toggle(prefix + "-table-creator-grid-item-active", active);
+            }
+        }
+
+        this.label.textContent = (xPos + yPos < 0) ? '' : `${xPos + 1} x ${yPos + 1}`;
+    }
+
+    /**
+     * @param {Element} gridItem
+     * @return {{x: number, y: number}}
+     */
+    getPositionOfGridItem(gridItem) {
+        const index = this.gridItems.indexOf(gridItem);
+        const y = Math.floor(index / this.size);
+        const x = index % this.size;
+        return {x, y};
+    }
+}
+
+export default TableCreatorGrid;

resources/js/editor/menu/icons.js

@@ -99,6 +99,10 @@ export const icons = {
   source_code: {
     width: 24, height: 24,
     path: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",
+  },
+  table: {
+    width: 24, height: 24,
+    path: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z",
   }
 };
 

resources/js/editor/menu/index.js

@@ -4,13 +4,11 @@ import {
 } from "./menu"
 import {icons} from "./icons";
 import ColorPickerGrid from "./ColorPickerGrid";
-import DialogBox from "./DialogBox";
+import TableCreatorGrid from "./TableCreatorGrid";
 import {toggleMark} from "prosemirror-commands";
 import {menuBar} from "./menubar"
 import schema from "../schema";
 import {removeMarks} from "../commands";
-import DialogForm from "./DialogForm";
-import DialogInput from "./DialogInput";
 
 import itemAnchorButtonItem from "./item-anchor-button";
 import itemHtmlSourceButton from "./item-html-source-button";
@@ -157,6 +155,9 @@ const inserts = [
         title: "Horizontal Rule",
         icon: icons.horizontal_rule,
     }),
+    new DropdownSubmenu([
+        new TableCreatorGrid()
+    ], {icon: icons.table}),
     itemHtmlSourceButton(),
 ];