Table actions

packages/slate-plugins/src/elements/table/components/ToolbarTable.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Editor } from 'slate';
+import { useSlate } from 'slate-react';
+import { ToolbarButton, ToolbarButtonProps } from '../../../common/components';
+import { isSelectionInTable } from '../queries';
+
+export interface ToolbarTableProps extends ToolbarButtonProps {
+  action: (editor: Editor) => void;
+}
+
+export const ToolbarTable = (props: ToolbarTableProps) => {
+  const editor = useSlate();
+  const isTableActive = isSelectionInTable(editor);
+
+  return (
+    <ToolbarButton
+      {...props}
+      active={isTableActive}
+      onMouseDown={(event: Event) => {
+        event.preventDefault();
+        props.action(editor);
+      }}
+    />
+  );
+};

packages/slate-plugins/src/elements/table/components/index.ts

@@ -0,0 +1 @@
+export * from './ToolbarTable';

packages/slate-plugins/src/elements/table/index.ts

@@ -1,3 +1,8 @@
+export * from './components';
+export * from './deserializeTable';
+export * from './queries';
 export * from './renderElementTable';
 export * from './TablePlugin';
+export * from './types';
+export * from './transforms';
 export * from './withTable';

packages/slate-plugins/src/elements/table/queries/index.ts

@@ -0,0 +1,4 @@
+export * from './isSelectionInTable';
+export * from './isTable';
+export * from './isTableCell';
+export * from './isTableRow';

packages/slate-plugins/src/elements/table/queries/isSelectionInTable.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'slate';
+import { isBlockActive } from '../../queries';
+import { TableType } from '../types';
+
+export const isSelectionInTable = (editor: Editor): boolean =>
+  isBlockActive(editor, TableType.TABLE);

packages/slate-plugins/src/elements/table/queries/isTable.ts

@@ -0,0 +1,4 @@
+import { Node } from 'slate';
+import { TableType } from '../types';
+
+export const isTable = (n: Node) => n.type === TableType.TABLE;

packages/slate-plugins/src/elements/table/queries/isTableCell.ts

@@ -0,0 +1,4 @@
+import { Node } from 'slate';
+import { TableType } from '../types';
+
+export const isTableCell = (n: Node) => n.type === TableType.CELL;

packages/slate-plugins/src/elements/table/queries/isTableRow.ts

@@ -0,0 +1,4 @@
+import { Node } from 'slate';
+import { TableType } from '../types';
+
+export const isTableRow = (n: Node) => n.type === TableType.ROW;

packages/slate-plugins/src/elements/table/renderElementTable.tsx

@@ -7,6 +7,7 @@ import { RenderElementTableOptions, TableType } from './types';
 const StyledTable = styled.table`
   margin: 10px 0;
   border-collapse: collapse;
+  width: 100%;
 `;
 
 const Td = styled.td`

packages/slate-plugins/src/elements/table/transforms/addColumn.ts

@@ -0,0 +1,29 @@
+import { Editor, Path, Transforms } from 'slate';
+import { isSelectionInTable, isTable, isTableCell } from '../queries';
+import { emptyCell } from '../types';
+
+export const addColumn = (editor: Editor) => {
+  if (isSelectionInTable(editor)) {
+    const currentCellItem = Editor.above(editor, {
+      match: isTableCell,
+    });
+    const currentTableItem = Editor.above(editor, {
+      match: isTable,
+    });
+    if (currentCellItem && currentTableItem) {
+      const nextCellPath = Path.next(currentCellItem[1]);
+      const newCellPath = nextCellPath.slice();
+      const replacePathPos = newCellPath.length - 2;
+      const currentRowIdx = nextCellPath[replacePathPos];
+
+      currentTableItem[0].children.forEach((row, rowIdx) => {
+        newCellPath[replacePathPos] = rowIdx;
+
+        Transforms.insertNodes(editor, emptyCell(), {
+          at: newCellPath,
+          select: rowIdx === currentRowIdx,
+        });
+      });
+    }
+  }
+};

packages/slate-plugins/src/elements/table/transforms/addRow.ts

@@ -0,0 +1,18 @@
+import { Editor, Path, Transforms } from 'slate';
+import { isSelectionInTable, isTableRow } from '../queries';
+import { emptyRow } from '../types';
+
+export const addRow = (editor: Editor) => {
+  if (isSelectionInTable(editor)) {
+    const currentRowItem = Editor.above(editor, {
+      match: isTableRow,
+    });
+    if (currentRowItem) {
+      const [currentRowElem, currentRowPath] = currentRowItem;
+      Transforms.insertNodes(editor, emptyRow(currentRowElem.children.length), {
+        at: Path.next(currentRowPath),
+        select: true,
+      });
+    }
+  }
+};

packages/slate-plugins/src/elements/table/transforms/deleteColumn.ts

@@ -0,0 +1,40 @@
+import { Editor, Transforms } from 'slate';
+import {
+  isSelectionInTable,
+  isTable,
+  isTableCell,
+  isTableRow,
+} from '../queries';
+
+export const deleteColumn = (editor: Editor) => {
+  if (isSelectionInTable(editor)) {
+    const currentCellItem = Editor.above(editor, {
+      match: isTableCell,
+    });
+    const currentRowItem = Editor.above(editor, {
+      match: isTableRow,
+    });
+    const currentTableItem = Editor.above(editor, {
+      match: isTable,
+    });
+    if (
+      currentCellItem &&
+      currentRowItem &&
+      currentTableItem &&
+      // Cannot delete the last cell
+      currentRowItem[0].children.length > 1
+    ) {
+      const currentCellPath = currentCellItem[1];
+      const pathToDelete = currentCellPath.slice();
+      const replacePathPos = pathToDelete.length - 2;
+
+      currentTableItem[0].children.forEach((row, rowIdx) => {
+        pathToDelete[replacePathPos] = rowIdx;
+
+        Transforms.removeNodes(editor, {
+          at: pathToDelete,
+        });
+      });
+    }
+  }
+};

packages/slate-plugins/src/elements/table/transforms/deleteRow.ts

@@ -0,0 +1,23 @@
+import { Editor, Transforms } from 'slate';
+import { isSelectionInTable, isTable, isTableRow } from '../queries';
+
+export const deleteRow = (editor: Editor) => {
+  if (isSelectionInTable(editor)) {
+    const currentTableItem = Editor.above(editor, {
+      match: isTable,
+    });
+    const currentRowItem = Editor.above(editor, {
+      match: isTableRow,
+    });
+    if (
+      currentRowItem &&
+      currentTableItem &&
+      // Cannot delete the last row
+      currentTableItem[0].children.length > 1
+    ) {
+      Transforms.removeNodes(editor, {
+        at: currentRowItem[1],
+      });
+    }
+  }
+};

packages/slate-plugins/src/elements/table/transforms/deleteTable.ts

@@ -0,0 +1,15 @@
+import { Editor, Transforms } from 'slate';
+import { isSelectionInTable, isTable } from '../queries';
+
+export const deleteTable = (editor: Editor) => {
+  if (isSelectionInTable(editor)) {
+    const tableItem = Editor.above(editor, {
+      match: isTable,
+    });
+    if (tableItem) {
+      Transforms.removeNodes(editor, {
+        at: tableItem[1],
+      });
+    }
+  }
+};

packages/slate-plugins/src/elements/table/transforms/index.ts

@@ -0,0 +1,6 @@
+export * from './addColumn';
+export * from './addRow';
+export * from './deleteColumn';
+export * from './deleteRow';
+export * from './deleteTable';
+export * from './insertTable';

packages/slate-plugins/src/elements/table/transforms/insertTable.ts

@@ -0,0 +1,9 @@
+import { Editor, Transforms } from 'slate';
+import { isSelectionInTable } from '../queries';
+import { emptyTable } from '../types';
+
+export const insertTable = (editor: Editor) => {
+  if (!isSelectionInTable(editor)) {
+    Transforms.insertNodes(editor, emptyTable());
+  }
+};

packages/slate-plugins/src/elements/table/types.ts

@@ -9,3 +9,20 @@ export interface RenderElementTableOptions {
   Row?: any;
   Cell?: any;
 }
+
+export const emptyCell = () => ({
+  type: TableType.CELL,
+  children: [{ text: '' }],
+});
+
+export const emptyRow = (colCount: number) => ({
+  type: TableType.ROW,
+  children: Array(colCount)
+    .fill(colCount)
+    .map(() => emptyCell()),
+});
+
+export const emptyTable = () => ({
+  type: TableType.TABLE,
+  children: [emptyRow(2), emptyRow(2)],
+});

stories/plugins/tables.stories.tsx

@@ -3,12 +3,33 @@ import { boolean } from '@storybook/addon-knobs';
 import { createEditor } from 'slate';
 import { withHistory } from 'slate-history';
 import { Slate, withReact } from 'slate-react';
+
+import {
+  BorderAll,
+  BorderClear,
+  BorderBottom,
+  BorderTop,
+  BorderLeft,
+  BorderRight,
+  FormatBold
+} from '@material-ui/icons';
+
 import {
   BoldPlugin,
   EditablePlugins,
   renderElementTable,
   TablePlugin,
+  HeadingToolbar,
   withTable,
+  ToolbarMark,
+  ToolbarTable,
+  MARK_BOLD,
+  addColumn,
+  addRow,
+  deleteColumn,
+  deleteRow,
+  insertTable,
+  deleteTable,
 } from '../../packages/slate-plugins/src';
 import { initialValueTables } from '../config/initialValues';
 
@@ -36,6 +57,15 @@ export const Example = () => {
         value={value}
         onChange={newValue => setValue(newValue)}
       >
+        <HeadingToolbar>
+          <ToolbarMark format={MARK_BOLD} icon={<FormatBold />} />
+          <ToolbarTable action={insertTable} icon={<BorderAll />} />
+          <ToolbarTable action={deleteTable} icon={<BorderClear />} />
+          <ToolbarTable action={addRow} icon={<BorderBottom />} />
+          <ToolbarTable action={deleteRow} icon={<BorderTop />} />
+          <ToolbarTable action={addColumn} icon={<BorderLeft />} />
+          <ToolbarTable action={deleteColumn} icon={<BorderRight />} />
+        </HeadingToolbar>
         <EditablePlugins plugins={plugins} />
       </Slate>
     );