Table editing

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rich-markdown-editor",
   "description": "A rich text editor with Markdown shortcuts built on Slate",
-  "version": "9.4.2",
+  "version": "9.5.0-4",
   "main": "lib/index.js",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -12,6 +12,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
+    "@domoinc/slate-edit-table": "^0.22.2",
     "@tommoor/slate-edit-list": "0.19.0-0",
     "@wikifactory/slate-edit-blockquote": "^0.7.1",
     "@wikifactory/slate-edit-code": "^0.16.0",
@@ -24,7 +25,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "golery-slate-prism": "0.6.0-golery.2",
     "lodash": "^4.17.11",
-    "outline-icons": "^1.6.0",
+    "outline-icons": "^1.9.0",
     "prismjs": "^1.16.0",
     "react-autosize-textarea": "^6.0.0",
     "react-keydown": "^1.9.7",
@@ -33,7 +34,7 @@
     "slate": "^0.45.0",
     "slate-collapse-on-escape": "^0.8.1",
     "slate-drop-or-paste-images": "^0.9.1",
-    "slate-md-serializer": "^5.3.3",
+    "slate-md-serializer": "^5.4.0-5",
     "slate-paste-linkify": "^0.7.0",
     "slate-react": "^0.21.20",
     "slate-schema-violations": "^0.1.39",

src/components/Table/Cell.js

@@ -0,0 +1,196 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import Toolbar from "./Toolbar";
+import Grip from "./Grip";
+
+class Cell extends React.Component<*> {
+  cell: ?HTMLElement;
+
+  render() {
+    const { children, editor, readOnly, attributes, node } = this.props;
+    const { document } = editor.value;
+
+    const position = editor.getPositionByKey(document, node.key);
+    const isFirstRow = position.isFirstRow();
+    const isFirstColumn = position.isFirstColumn();
+    const isLastRow = position.isLastRow();
+    const isLastColumn = position.isLastColumn();
+    const isSelected = node.data.get("selected");
+    const isTableSelected = position.table.data.get("selectedTable");
+    const isActive = editor.isSelectionInTable() && !isTableSelected;
+    const selectedRows = position.table.data.get("selectedRows");
+    const selectedColumns = position.table.data.get("selectedColumns");
+    const isRowSelected =
+      selectedRows && selectedRows.includes(position.getRowIndex());
+    const isColumnSelected =
+      selectedColumns && selectedColumns.includes(position.getColumnIndex());
+
+    return (
+      <StyledTd
+        ref={ref => (this.cell = ref)}
+        isFirstRow={isFirstRow}
+        isFirstColumn={isFirstColumn}
+        isSelected={isSelected}
+        onClick={() => editor.clearSelected(position.table)}
+        {...attributes}
+      >
+        {!readOnly && (
+          <React.Fragment>
+            {isFirstColumn && isFirstRow && (
+              <React.Fragment>
+                <GripTable
+                  contentEditable={false}
+                  isSelected={isTableSelected}
+                  onClick={ev => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+
+                    if (isTableSelected) {
+                      editor.clearSelected(position.table);
+                    } else {
+                      editor.selectAll().blur();
+                    }
+                  }}
+                />
+                <Toolbar
+                  editor={editor}
+                  cell={this.cell}
+                  active={isTableSelected}
+                  type="table"
+                />
+              </React.Fragment>
+            )}
+            {isFirstColumn && (
+              <React.Fragment>
+                <GripRow
+                  isFirstRow={isFirstRow}
+                  isLastRow={isLastRow}
+                  isSelected={isRowSelected}
+                  contentEditable={false}
+                  onClick={ev => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    editor.selectRow(!isSelected || isTableSelected).blur();
+                  }}
+                />
+                {isActive && (
+                  <Toolbar
+                    editor={editor}
+                    cell={this.cell}
+                    active={isRowSelected}
+                    type="row"
+                  />
+                )}
+              </React.Fragment>
+            )}
+            {isFirstRow && (
+              <React.Fragment>
+                <GripColumn
+                  isFirstColumn={isFirstColumn}
+                  isLastColumn={isLastColumn}
+                  isSelected={isColumnSelected}
+                  contentEditable={false}
+                  onClick={ev => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    editor.selectColumn(!isSelected || isTableSelected).blur();
+                  }}
+                />
+                {isActive && (
+                  <Toolbar
+                    editor={editor}
+                    cell={this.cell}
+                    active={isColumnSelected}
+                    type="column"
+                  />
+                )}
+              </React.Fragment>
+            )}
+          </React.Fragment>
+        )}
+
+        <RowContent align={node.data.get("align")}>{children}</RowContent>
+      </StyledTd>
+    );
+  }
+}
+
+export const GripTable = styled(Grip)`
+  width: 9px;
+  height: 9px;
+  border-radius: 9px;
+  border: 2px solid ${props => props.theme.background};
+
+  position: absolute;
+  top: -14px;
+  left: -14px;
+`;
+
+export const GripRow = styled(Grip)`
+  left: -12px;
+  top: 0.5px;
+  height: 100%;
+  width: 8px;
+  border-right: 3px solid ${props => props.theme.background};
+
+  ${props =>
+    props.isFirstRow &&
+    `
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  `}
+
+  ${props =>
+    props.isLastRow &&
+    `
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  `}
+`;
+
+export const GripColumn = styled(Grip)`
+  top: -12px;
+  left: -0.5px;
+  width: 100%;
+  height: 8px;
+  border-bottom: 3px solid ${props => props.theme.background};
+
+  ${props =>
+    props.isFirstColumn &&
+    `
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+`}
+
+  ${props =>
+    props.isLastColumn &&
+    `
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+`}
+`;
+
+const RowContent = styled.div`
+  padding: 4px 8px;
+  text-align: ${props => props.align};
+`;
+
+const StyledTd = styled.td`
+  vertical-align: top;
+  border-right: 1px solid ${props => props.theme.tableDivider};
+  position: relative;
+  background: ${props =>
+    props.isSelected
+      ? props.theme.tableSelectedBackground
+      : props.theme.background};
+
+  ${props =>
+    props.isFirstRow &&
+    `
+  box-shadow: 0 1px 1px ${props.theme.tableDivider};
+  min-width: 100px;
+  `}
+`;
+
+export default Cell;

src/components/Table/Grip.js

@@ -0,0 +1,20 @@
+// @flow
+import styled from "styled-components";
+
+const Grip = styled.a`
+  position: absolute;
+  cursor: pointer;
+  background: ${props =>
+    props.isSelected ? props.theme.tableSelected : props.theme.tableDivider};
+
+  ${props => props.isSelected && "opacity: 1 !important;"}
+
+  &:hover {
+    background: ${props =>
+      props.isSelected
+        ? props.theme.tableSelected
+        : props.theme.toolbarBackground};
+  }
+`;
+
+export default Grip;

src/components/Table/Row.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+const StyledTr = styled.tr`
+  position: relative;
+  border-bottom: 1px solid ${props => props.theme.tableDivider};
+`;
+
+const Row = ({ children, attributes }: *) => {
+  return <StyledTr {...attributes}>{children}</StyledTr>;
+};
+
+export default Row;

src/components/Table/Scrollable.js

@@ -0,0 +1,105 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = { children: React.Node };
+
+type State = {
+  shadowLeft: boolean,
+  shadowRight: boolean,
+};
+
+class Scrollable extends React.Component<Props, State> {
+  element: ?HTMLElement;
+
+  state = {
+    shadowLeft: false,
+    shadowRight: false,
+  };
+
+  componentDidMount() {
+    this.updateRightShadow();
+  }
+
+  componentDidUpdate() {
+    this.updateRightShadow();
+  }
+
+  updateRightShadow() {
+    const shadowRight = !!(
+      this.element && this.element.scrollWidth > this.element.clientWidth
+    );
+
+    if (this.state.shadowRight !== shadowRight) {
+      this.setState({ shadowRight });
+    }
+  }
+
+  handleScroll = (ev: SyntheticMouseEvent<*>) => {
+    const shadowLeft = ev.currentTarget.scrollLeft > 0;
+
+    if (this.state.shadowLeft !== shadowLeft) {
+      this.setState({ shadowLeft });
+    }
+  };
+
+  render() {
+    const { children, ...rest } = this.props;
+    return (
+      <Wrapper>
+        <Scrolling
+          ref={ref => (this.element = ref)}
+          onScroll={this.handleScroll}
+          {...rest}
+        >
+          {children}
+        </Scrolling>
+        <Shadow left={this.state.shadowLeft} />
+        <Shadow right={this.state.shadowRight} />
+      </Wrapper>
+    );
+  }
+}
+
+const Wrapper = styled.div`
+  position: relative;
+  margin: 0.5em 0;
+`;
+
+const Scrolling = styled.div`
+  overflow-y: hidden;
+  overflow-x: scroll;
+  padding-left: 1em;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  transition: border 250ms ease-in-out;
+  margin-left: -1em;
+`;
+
+const Shadow = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1em;
+  width: 16px;
+  transition: box-shadow 250ms ease-in-out;
+  border: 0px solid transparent;
+  border-left-width: 1em;
+  pointer-events: none;
+
+  ${props =>
+    props.left &&
+    `
+     box-shadow: 16px 0 16px -16px inset rgba(0,0,0,0.25);
+     border-left: 1em solid ${props.theme.background};
+  `}
+
+  ${props =>
+    props.right &&
+    `right: 0;
+     left: auto;
+     box-shadow: -16px 0 16px -16px inset rgba(0,0,0,0.25);
+  `}
+`;
+
+export default Scrollable;