table options

wax-prosemirror-components/src/components/TableDropDown.js

@@ -5,10 +5,16 @@ import Dropdown from "react-dropdown";
 import "react-dropdown/style.css";
 
 const DropdownStyled = styled(Dropdown)`
-  display: ${props => (props.select ? "inline-flex" : "none")};
+  display: inline-flex;
+  cursor: not-allowed;
+  opacity: ${props => (props.select ? 1 : 0.4)};
+  pointer-events: ${props => (props.select ? "default" : "none")};
   .Dropdown-control {
     border: none;
   }
+  .Dropdown-arrow {
+    top: 21px;
+  }
 `;
 
 const dropDownOptions = [

wax-prosemirror-components/src/components/button/Button.js

@@ -4,7 +4,8 @@ import classnames from "classnames";
 import classes from "./Button.module.css";
 
 const ButtonStyled = styled.button`
-  display: ${props => (props.select ? "inline" : "none")};
+  opacity: ${props => (props.select ? 1 : 0.4)};
+  pointer-events: ${props => (props.select ? "default" : "none")};
 `;
 
 const Button = ({ dispatch, state, item }) => (

wax-prosemirror-components/src/mainMenuBar/MainMenuBarItems.js

@@ -118,19 +118,6 @@ export default {
     select: state => true,
     menu: props => <Button key={uuid()} {...props} />
   },
-  source: {
-    title: "Toggle Source",
-    content: icons.source,
-    active: state => {
-      return markActive(state.config.schema.marks.source)(state);
-    },
-    run(state, dispatch) {
-      toggleMark(state.config.schema.marks.source)(state, dispatch);
-    },
-
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
   small_caps: {
     title: "Toggle Small Caps",
     content: icons.small_caps,
@@ -214,18 +201,6 @@ export default {
     select: state => true,
     menu: props => <Button key={uuid()} {...props} />
   },
-  codeBlock: {
-    title: "Change to code block",
-    content: icons.code_block,
-    // active: blockActive(schema.nodes.code_block),
-    // enable: setBlockType(schema.nodes.code_block),
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.codeBlock)(state, dispatch);
-    },
-
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
   blockquote: {
     title: "Wrap in block quote",
     content: icons.blockquote,
@@ -283,5 +258,39 @@ export default {
     select: state => true,
     run: option => true,
     menu: props => <ImageUpload key={uuid()} {...props} />
+  },
+  table: {
+    title: "Insert table",
+    content: icons.table,
+    // enable: canInsert(schema.nodes.table),
+    run: (state, dispatch) => {
+      // const { from } = state.selection
+      let rowCount = window && window.prompt("How many rows?", 2);
+      let colCount = window && window.prompt("How many columns?", 2);
+
+      const cells = [];
+      while (colCount--) {
+        cells.push(state.config.schema.nodes.table_cell.createAndFill());
+      }
+
+      const rows = [];
+      while (rowCount--) {
+        rows.push(
+          state.config.schema.nodes.table_row.createAndFill(null, cells)
+        );
+      }
+
+      const table = state.config.schema.nodes.table.createAndFill(null, rows);
+      dispatch(state.tr.replaceSelectionWith(table));
+    },
+    select: state => true,
+    menu: props => <Button key={uuid()} {...props} />
+  },
+  tableDropDownOptions: {
+    content: "table",
+    run: option => true,
+    title: "Select Options",
+    select: state => addColumnBefore(state),
+    menu: props => <TableDropDown key={uuid()} {...props} />
   }
 };

wax-prosemirror-layouts/layouts/editoria-layout.css

@@ -26,7 +26,7 @@
   background: #fff;
   /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);*/
   /*box-sizing: border-box;*/
-  overflow: hidden;
+  /*overflow: hidden;*/
   padding: 2px 2px 2px 0;
   position: relative;
 }

wax-prosemirror-themes/themes/editoria-theme.css

@@ -42,7 +42,7 @@
 .wax-t-editoria table {
   border-spacing: 0px;
   table-layout: fixed;
-  width: 100%;
+  width: 50%;
   overflow: hidden;
 }