connect insert table tool

wax-prosemirror-components/index.js

@@ -15,3 +15,7 @@ export { default as CommentBubbleComponent } from './src/components/comments/Com
 export { default as RightArea } from './src/components/rightArea/RightArea';
 
 export { default as TrackChangeEnable } from './src/components/trackChanges/TrackChangeEnable';
+
+export { default as InsertTableTool } from './src/ui/tables/InsertTableTool';
+
+export { default as CreateTable } from './src/components/tables/CreateTable';

wax-prosemirror-components/src/components/tables/CreateTable.js

+/* eslint react/prop-types: 0 */
+import React, { useState, useContext } from 'react';
+import styled from 'styled-components';
+import { ButtonStyles } from 'wax-prosemirror-themes';
+import { WaxContext } from 'wax-prosemirror-core';
+import { Commands } from 'wax-prosemirror-utilities';
+import InsertTableTool from '../../ui/tables/InsertTableTool';
+
+const ButtonStyled = styled.button`
+  ${ButtonStyles};
+  opacity: ${props => (props.select ? 1 : 0.4)};
+  pointer-events: ${props => (props.select ? 'default' : 'none')};
+  color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
+  background-color: ${props =>
+    props.isActive ? props.theme.colorPrimary : 'transparent'};
+  &:hover {
+    background-color: ${props =>
+      props.isActive ? props.theme.colorPrimary : 'transparent'};
+  }
+`;
+
+const InsertTableToolContainer = styled.div`
+  top: 50px;
+  position: absolute;
+  height: auto;
+  width: 167px;
+  display: block !important;
+`;
+
+const CreateTable = ({ view = {}, item }) => {
+  const {
+    view: { main },
+    activeViewId,
+  } = useContext(WaxContext);
+  if (item.onlyOnMain) {
+    view = main;
+  }
+
+  const { state, dispatch } = view;
+
+  const [isTableToolDisplayed, setTableToolDisplay] = useState(false);
+
+  const showHideTable = () => {
+    setTableToolDisplay(!isTableToolDisplayed);
+  };
+
+  const CreateButton = (
+    <ButtonStyled
+      type="button"
+      isActive={item.active && item.active(view.state)}
+      title={item.title}
+      disabled={item.enable && !item.enable(view.state)}
+      onMouseDown={e => {
+        e.preventDefault();
+        showHideTable();
+      }}
+      select={item.select && item.select(view.state, activeViewId)}
+    >
+      {item.content}
+    </ButtonStyled>
+  );
+  return isTableToolDisplayed ? (
+    <>
+      {CreateButton}
+      <InsertTableToolContainer>
+        <InsertTableTool
+          onGridSelect={colRows => {
+            return Commands.createTable(colRows, state, dispatch);
+          }}
+        />
+      </InsertTableToolContainer>
+    </>
+  ) : (
+    <>{CreateButton}</>
+  );
+};
+
+export default CreateTable;

wax-prosemirror-components/src/ui/tables/InsertTableTool.js

@@ -226,8 +226,10 @@ class TableGridSizeEditor extends React.PureComponent {
     }
 
     const wrapperStyle = {
+      background: '#fff',
       border: '1px solid gray',
       boxSizing: 'border-box',
+      display: 'block',
       position: 'absolute',
       zIndex: 2,
     };

wax-prosemirror-services/src/TablesService/InsertTableService/InsertTableService.js

-import Service from "../../Service";
-import { tableNodes, goToNextCell } from "prosemirror-tables";
-import Table from "./Table";
+import Service from '../../Service';
+import { tableNodes, goToNextCell } from 'prosemirror-tables';
+import Table from './Table';
 
 class InsertTableService extends Service {
   boot() {
-    const shortCuts = this.container.get("ShortCuts");
+    const shortCuts = this.container.get('ShortCuts');
     shortCuts.addShortCut({
       Tab: goToNextCell(1),
-      "Shift-Tab": goToNextCell(-1)
+      'Shift-Tab': goToNextCell(-1),
     });
   }
 
   register() {
-    this.container.bind("Table").to(Table);
+    this.container.bind('Table').to(Table);
 
     const { table, table_row, table_cell, table_header } = tableNodes({
-      tableGroup: "block",
-      cellContent: "block+"
+      tableGroup: 'block',
+      cellContent: 'block+',
     });
-    const createNode = this.container.get("CreateNode");
+    const createNode = this.container.get('CreateNode');
 
     createNode({
-      table
+      table,
     });
     createNode({
-      table_row
+      table_row,
     });
     createNode({
-      table_cell
+      table_cell,
     });
     createNode({
-      table_header
+      table_header,
     });
   }
 }

wax-prosemirror-services/src/TablesService/InsertTableService/Table.js

+import React from 'react';
+import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
 import { Commands } from 'wax-prosemirror-utilities';
 import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+import { icons, CreateTable } from 'wax-prosemirror-components';
+
 import Tools from '../../lib/Tools';
 
 export default
@@ -11,9 +15,7 @@ class Table extends Tools {
   name = 'Table';
 
   get run() {
-    return (state, dispatch) => {
-      return Commands.createTable(state, dispatch);
-    };
+    return (state, dispatch) => {};
   }
 
   select = (state, activeViewId) => {
@@ -26,4 +28,12 @@ class Table extends Tools {
       return Commands.canInsert(state.config.schema.nodes.table)(state);
     };
   }
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+
+    return this._isDisplayed ? (
+      <CreateTable key={uuidv4()} item={this.toJSON()} view={view} />
+    ) : null;
+  }
 }

wax-prosemirror-utilities/src/commands/Commands.js

@@ -62,17 +62,14 @@ const canInsert = type => state => {
   return false;
 };
 
-const createTable = (state, dispatch) => {
-  let rowCount = window && window.prompt('How many rows?', 2);
-  let colCount = window && window.prompt('How many columns?', 2);
-
+const createTable = (colsRows, state, dispatch) => {
   const cells = [];
-  while (colCount--) {
+  while (colsRows.cols--) {
     cells.push(state.config.schema.nodes.table_cell.createAndFill());
   }
 
   const rows = [];
-  while (rowCount--) {
+  while (colsRows.rows--) {
     rows.push(state.config.schema.nodes.table_row.createAndFill(null, cells));
   }