diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 97207281e623a90de64ee687d5f519eb768cbf16..5b4c55391e5c6ea670272dadbcf8b315472d239c 100644
--- a/wax-prosemirror-components/index.js
+++ b/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';
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
new file mode 100644
index 0000000000000000000000000000000000000000..d60a4e00f88ffae3a0dbd79b75de761c3d1f10bd
--- /dev/null
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -0,0 +1,78 @@
+/* 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;
diff --git a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
index 1493875832e618a06d0d9773ce0d1dda38103a7d..1d29da5b3cfb101848554bb1355a6073f1ff4d53 100644
--- a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
+++ b/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,
};
diff --git a/wax-prosemirror-services/src/TablesService/InsertTableService/InsertTableService.js b/wax-prosemirror-services/src/TablesService/InsertTableService/InsertTableService.js
index 98cce559eea634b4aea192413fd78f4a37b565f1..d2214f8cdd9f2f022a10d8b1a9d41d7c45724aba 100644
--- a/wax-prosemirror-services/src/TablesService/InsertTableService/InsertTableService.js
+++ b/wax-prosemirror-services/src/TablesService/InsertTableService/InsertTableService.js
@@ -1,36 +1,36 @@
-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,
});
}
}
diff --git a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
index 00ae9ee39ccfc93ae4375254b669c2e1c48a648d..a49047d1d9980fc0bdcea0c52e0e64aa5eda261d 100644
--- a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
+++ b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
@@ -1,6 +1,10 @@
+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;
+ }
}
diff --git a/wax-prosemirror-utilities/src/commands/Commands.js b/wax-prosemirror-utilities/src/commands/Commands.js
index b5ba6a3822c151d081e2ad0e4690040591748917..b4cc52255654bea57bf04a7166e661c5c60adea8 100644
--- a/wax-prosemirror-utilities/src/commands/Commands.js
+++ b/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));
}