move tables

editors/demo/package.json

@@ -6,7 +6,6 @@
     "@guardian/prosemirror-invisibles": "^1.2.0",
     "@pubsweet/ui-toolkit": "^2.3.1",
     "fontsource-merriweather": "^3.0.9",
-    "prosemirror-tables": "^1.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-panelgroup": "^1.0.10",

wax-prosemirror-components/index.js

@@ -3,12 +3,10 @@ export { default as UndoRedoButton } from './src/components/UndoRedoButton';
 export { default as MenuButton } from './src/ui/buttons/MenuButton';
 export { default as icons } from './src/icons/icons';
 export { default as Icon } from './src/helpers/Icon';
-export { default as TableDropDown } from './src/components/tables/TableDropDown';
 export { default as TitleButton } from './src/components/TitleButton';
 export { default as ToolGroupComponent } from './src/components/ToolGroupComponent';
 export { default as ToolGroups } from './src/components/ToolGroups';
 
-export { default as CreateTable } from './src/components/tables/CreateTable';
 export { default as Tabs } from './src/ui/tabs/Tabs';
 export { default as BlockLevelTools } from './src/ui/tabs/BlockLevelTools';
 export { default as EditorInfoTool } from './src/components/EditorInfo/CounterInfo/EditorInfoTool';

wax-prosemirror-components/src/helpers/useOnClickOutside.js

-import { useEffect } from 'react';
-
-// Hook
-const useOnClickOutside = (ref, handler) => {
-  useEffect(() => {
-    const listener = event => {
-      /* Do nothing if clicking ref's element or descendent elements */
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler]);
-};
-
-export default useOnClickOutside;

wax-prosemirror-services/package.json

@@ -37,7 +37,8 @@
     "wax-prosemirror-components": "^0.6.5",
     "wax-prosemirror-core": "^0.6.5",
      "@pubsweet/ui-toolkit": "^2.3.1",
-     "prop-types": "^15.7.2"
+     "prop-types": "^15.7.2",
+     "prosemirror-tables": "^1.1.1"
   },
   "peerDependencies": {
     "react": "^16.13.1",

wax-prosemirror-services/src/TablesService/EditTableService/TableDropDownOptions.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { injectable } from 'inversify';
 import { isEmpty } from 'lodash';
-import { TableDropDown } from 'wax-prosemirror-components';
 import { Commands, Tools } from 'wax-prosemirror-core';
+import TableDropDown from '../components/TableDropDown';
 
 @injectable()
 export default class TableDropDownOptions extends Tools {
@@ -31,7 +31,7 @@ export default class TableDropDownOptions extends Tools {
   renderTool(view) {
     if (isEmpty(view)) return null;
     return this._isDisplayed ? (
-      <TableDropDown key={uuidv4()} item={this.toJSON()} view={view} />
+      <TableDropDown item={this.toJSON()} key={uuidv4()} view={view} />
     ) : null;
   }
 }

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { isEmpty } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { injectable } from 'inversify';
-import { CreateTable } from 'wax-prosemirror-components';
 import { Commands, Tools } from 'wax-prosemirror-core';
+import CreateTable from '../components/CreateTable';
 
 @injectable()
 export default class Table extends Tools {
@@ -36,8 +36,9 @@ export default class Table extends Tools {
   renderTool(view) {
     if (isEmpty(view)) return null;
 
+    // eslint-disable-next-line no-underscore-dangle
     return this._isDisplayed ? (
-      <CreateTable key={uuidv4()} item={this.toJSON()} view={view} />
+      <CreateTable item={this.toJSON()} key={uuidv4()} view={view} />
     ) : null;
   }
 }

wax-prosemirror-components/src/components/tables/CreateTable.js → wax-prosemirror-services/src/TablesService/components/CreateTable.js

@@ -3,8 +3,8 @@ import React, { useState, useContext, useMemo, useRef } from 'react';
 import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
-import MenuButton from '../../ui/buttons/MenuButton';
-import InsertTableTool from '../../ui/tables/InsertTableTool';
+import { MenuButton } from 'wax-prosemirror-components';
+import InsertTableTool from './InsertTableTool';
 
 const Wrapper = styled.div`
   font-size: 0;