@plone/volto-slate 18.0.0-alpha.4

package/src/editor/plugins/Table/extensions.js

@@ -0,0 +1,87 @@
+import { blockTagDeserializer } from '@plone/volto-slate/editor/deserialize';
+import {
+  TABLE,
+  TR,
+  TD,
+  TFOOT,
+  THEAD,
+  TBODY,
+  TH,
+} from '@plone/volto-slate/constants';
+import { Editor, Point, Range } from 'slate';
+
+export const withTable = (editor) => {
+  const { deleteBackward, deleteForward, insertBreak } = editor;
+
+  // paste support
+  editor.htmlTagsToSlate = {
+    ...editor.htmlTagsToSlate,
+    TABLE: blockTagDeserializer(TABLE),
+    THEAD: blockTagDeserializer(THEAD),
+    TFOOT: blockTagDeserializer(TFOOT),
+    TBODY: blockTagDeserializer(TBODY),
+    TR: blockTagDeserializer(TR),
+    TH: blockTagDeserializer(TH),
+    TD: blockTagDeserializer(TD),
+  };
+
+  editor.deleteBackward = (unit) => {
+    const { selection } = editor;
+
+    if (selection && Range.isCollapsed(selection)) {
+      const [cell] = Editor.nodes(editor, {
+        match: (n) => n.type === TD,
+      });
+
+      if (cell) {
+        const [, cellPath] = cell;
+        const start = Editor.start(editor, cellPath);
+
+        if (Point.equals(selection.anchor, start)) {
+          return;
+        }
+      }
+    }
+
+    deleteBackward(unit);
+  };
+
+  editor.deleteForward = (unit) => {
+    const { selection } = editor;
+
+    if (selection && Range.isCollapsed(selection)) {
+      const [cell] = Editor.nodes(editor, {
+        match: (n) => n.type === TD,
+      });
+
+      if (cell) {
+        const [, cellPath] = cell;
+        const end = Editor.end(editor, cellPath);
+
+        if (Point.equals(selection.anchor, end)) {
+          return;
+        }
+      }
+    }
+
+    deleteForward(unit);
+  };
+
+  editor.insertBreak = () => {
+    const { selection } = editor;
+
+    if (selection) {
+      const [table] = Editor.nodes(editor, {
+        match: (n) => n.type === TABLE,
+      });
+
+      if (table) {
+        return;
+      }
+    }
+
+    insertBreak();
+  };
+
+  return editor;
+};

package/src/editor/plugins/Table/index.js

@@ -0,0 +1,390 @@
+import React from 'react';
+import { withTable } from './extensions';
+import TableButton from './TableButton';
+import { tableElements } from './render';
+import './less/public.less';
+
+import clearSVG from '@plone/volto/icons/delete.svg';
+import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
+import rowAfterSVG from '@plone/volto/icons/row-after.svg';
+import colBeforeSVG from '@plone/volto/icons/column-before.svg';
+import colAfterSVG from '@plone/volto/icons/column-after.svg';
+import rowDeleteSVG from '@plone/volto/icons/row-delete.svg';
+import colDeleteSVG from '@plone/volto/icons/column-delete.svg';
+
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+import { Range, Transforms, Editor, Path } from 'slate';
+import { defineMessages, useIntl } from 'react-intl';
+import { TABLE, TR, P, TD, TH } from '@plone/volto-slate/constants';
+
+const messages = defineMessages({
+  deleteTable: {
+    id: 'Delete table',
+    defaultMessage: 'Delete table',
+  },
+  insertRowBefore: {
+    id: 'Insert row before',
+    defaultMessage: 'Insert row before',
+  },
+  insertRowAfter: {
+    id: 'Insert row after',
+    defaultMessage: 'Insert row after',
+  },
+  deleteRow: {
+    id: 'Delete row',
+    defaultMessage: 'Delete row',
+  },
+  insertColBefore: {
+    id: 'Insert col before',
+    defaultMessage: 'Insert col before',
+  },
+  insertColAfter: {
+    id: 'Insert col after',
+    defaultMessage: 'Insert col after',
+  },
+  deleteCol: {
+    id: 'Delete col',
+    defaultMessage: 'Delete col',
+  },
+});
+
+const unhangRange = (editor, options = {}) => {
+  const { at = editor.selection, voids, unhang = true } = options;
+
+  if (Range.isRange(at) && unhang) {
+    options.at = Editor.unhangRange(editor, at, { voids });
+  }
+};
+
+const getNodes = (editor, options = {}) => {
+  unhangRange(editor, options);
+
+  return Editor.nodes(editor, options);
+};
+
+const findNode = (editor, options = {}) => {
+  try {
+    const nodeEntries = getNodes(editor, {
+      at: editor.selection || editor.getSavedSelection() || [],
+    });
+
+    for (const [node, path] of nodeEntries) {
+      return [node, path];
+    }
+  } catch (error) {
+    return undefined;
+  }
+};
+
+const someNode = (editor, options) => {
+  return !!findNode(editor, options);
+};
+
+const getEmptyCellNode = (editor, { header }) => {
+  return {
+    type: header ? TH : TD,
+    children: [{ type: P, children: [{ text: '' }] }],
+  };
+};
+
+const getEmptyRowNode = (editor, { header, colCount }) => {
+  return {
+    type: TR,
+    children: Array(colCount)
+      .fill(colCount)
+      .map(() => getEmptyCellNode(editor, { header })),
+  };
+};
+
+const addRowBefore = (editor, { header } = {}) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentRowItem = Editor.above(editor, {
+      match: (n) => n.type === TR,
+    });
+    if (currentRowItem) {
+      const [currentRowElem, currentRowPath] = currentRowItem;
+      Transforms.insertNodes(
+        editor,
+        getEmptyRowNode(editor, {
+          header,
+          colCount: currentRowElem.children.length,
+        }),
+        {
+          at: currentRowPath,
+          select: true, // TODO: this and similar lines in the Table plugin do nothing currently, why?
+        },
+      );
+    }
+  }
+};
+
+const addRowAfter = (editor, { header } = {}) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentRowItem = Editor.above(editor, {
+      match: (n) => n.type === TR,
+    });
+    if (currentRowItem) {
+      const [currentRowElem, currentRowPath] = currentRowItem;
+      Transforms.insertNodes(
+        editor,
+        getEmptyRowNode(editor, {
+          header,
+          colCount: currentRowElem.children.length,
+        }),
+        {
+          at: Path.next(currentRowPath),
+          select: true,
+        },
+      );
+    }
+  }
+};
+
+const deleteRow = (editor) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentTableItem = Editor.above(editor, {
+      match: (n) => n.type === TABLE,
+    });
+    const currentRowItem = Editor.above(editor, {
+      match: (n) => n.type === TR,
+    });
+    if (
+      currentRowItem &&
+      currentTableItem &&
+      // Cannot delete the last row
+      // TODO: handle tfoot and thead Element types here:
+      currentTableItem[0].children[0].children.length > 1
+    ) {
+      Transforms.removeNodes(editor, { at: currentRowItem[1] });
+    }
+  }
+};
+
+const addColBefore = (editor, { header } = {}) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentCellItem = Editor.above(editor, {
+      match: (n) => n.type === TH || n.type === TD,
+    });
+    const currentTableItem = Editor.above(editor, {
+      match: (n) => n.type === TABLE,
+    });
+
+    if (currentCellItem && currentTableItem) {
+      const nextCellPath = currentCellItem[1];
+      const newCellPath = nextCellPath.slice();
+      const replacePathPos = newCellPath.length - 2;
+      const currentRowIdx = nextCellPath[replacePathPos];
+
+      // TODO: handle tfoot and thead too:
+      currentTableItem[0].children[0].children.forEach((row, rowIdx) => {
+        newCellPath[replacePathPos] = rowIdx;
+        const isHeaderRow =
+          header === undefined ? row.children[0].type === TH : header;
+
+        Transforms.insertNodes(
+          editor,
+          getEmptyCellNode(editor, { header: isHeaderRow }),
+          {
+            at: newCellPath,
+            select: rowIdx === currentRowIdx,
+          },
+        );
+      });
+    }
+  }
+};
+
+const addColAfter = (editor, { header } = {}) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentCellItem = Editor.above(editor, {
+      match: (n) => n.type === TH || n.type === TD,
+    });
+    const currentTableItem = Editor.above(editor, {
+      match: (n) => n.type === TABLE,
+    });
+
+    if (currentCellItem && currentTableItem) {
+      const nextCellPath = Path.next(currentCellItem[1]);
+      const newCellPath = nextCellPath.slice();
+      const replacePathPos = newCellPath.length - 2;
+      const currentRowIdx = nextCellPath[replacePathPos];
+
+      // TODO: handle tfoot and thead too:
+      currentTableItem[0].children[0].children.forEach((row, rowIdx) => {
+        newCellPath[replacePathPos] = rowIdx;
+        const isHeaderRow =
+          header === undefined ? row.children[0].type === TH : header;
+
+        Transforms.insertNodes(
+          editor,
+          getEmptyCellNode(editor, { header: isHeaderRow }),
+          {
+            at: newCellPath,
+            select: rowIdx === currentRowIdx,
+          },
+        );
+      });
+    }
+  }
+};
+
+const deleteCol = (editor) => {
+  if (someNode(editor, { match: (n) => n.type === TABLE })) {
+    const currentCellItem = Editor.above(editor, {
+      match: (n) => n.type === TD || n.type === TH,
+    });
+    const currentRowItem = Editor.above(editor, {
+      match: (n) => n.type === TR,
+    });
+    const currentTableItem = Editor.above(editor, {
+      match: (n) => n.type === TABLE,
+    });
+
+    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;
+
+      // TODO: handle tfoot and thead too:
+      currentTableItem[0].children[0].children.forEach((row, rowIdx) => {
+        pathToDelete[replacePathPos] = rowIdx;
+
+        Transforms.removeNodes(editor, {
+          at: pathToDelete,
+        });
+      });
+    }
+  }
+};
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.extensions = [...(slate.extensions || []), withTable];
+  slate.elements = {
+    ...slate.elements,
+    ...tableElements,
+  };
+  slate.elementToolbarButtons[TABLE] = [
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.deleteTable)}
+          icon={clearSVG}
+          aria-label={intl.formatMessage(messages.deleteTable)}
+          onMouseDown={() => {
+            Transforms.removeNodes(editor, {
+              at: editor.selection || editor.getSavedSelection(),
+              match: (n) => n.type === TABLE,
+            });
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.insertRowBefore)}
+          icon={rowBeforeSVG}
+          aria-label={intl.formatMessage(messages.insertRowBefore)}
+          onMouseDown={() => {
+            addRowBefore(editor);
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.insertRowAfter)}
+          icon={rowAfterSVG}
+          aria-label={intl.formatMessage(messages.insertRowAfter)}
+          onMouseDown={() => {
+            addRowAfter(editor, { header: false });
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.deleteRow)}
+          icon={rowDeleteSVG}
+          aria-label={intl.formatMessage(messages.deleteRow)}
+          onMouseDown={() => {
+            deleteRow(editor);
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.insertColBefore)}
+          icon={colBeforeSVG}
+          aria-label={intl.formatMessage(messages.insertColBefore)}
+          onMouseDown={() => {
+            addColBefore(editor);
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.insertColAfter)}
+          icon={colAfterSVG}
+          aria-label={intl.formatMessage(messages.insertColAfter)}
+          onMouseDown={() => {
+            addColAfter(editor);
+          }}
+        />
+      );
+    },
+    ({ editor }) => {
+      const intl = useIntl();
+
+      return (
+        <ToolbarButton
+          title={intl.formatMessage(messages.deleteCol)}
+          icon={colDeleteSVG}
+          aria-label={intl.formatMessage(messages.deleteCol)}
+          onMouseDown={() => {
+            deleteCol(editor);
+          }}
+        />
+      );
+    },
+  ];
+
+  return config;
+}
+
+export const installTableButton = (config) => {
+  const { slate } = config.settings;
+  slate.buttons.table = (props) => <TableButton {...props} title="Table" />;
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), 'table'];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    'table',
+  ];
+  return config;
+};

package/src/editor/plugins/Table/less/public.less

@@ -0,0 +1,29 @@
+@brown: #826a6a;
+
+table.slate-table {
+  width: 100%;
+  border: 0.025rem solid @brown;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+  border-spacing: 30px;
+
+  th,
+  td {
+    padding: 0.5rem;
+    border: 0.05rem solid @brown;
+    vertical-align: middle;
+  }
+
+  th {
+    border-bottom: 0.15rem solid @brown;
+  }
+}
+
+table.slate-table-block.sortable {
+  tr th > * {
+    // Header will contain both the slate and an icon when sorted
+    // so this will keep them on the same line.
+    display: inline-block;
+  }
+}

package/src/editor/plugins/Table/less/table.less

@@ -0,0 +1,28 @@
+@brown: #826a6a;
+
+.slate-table-dropdown-button {
+}
+
+.slate-table-dropdown-menu {
+  p {
+    margin-top: 1rem;
+    font-size: small;
+  }
+
+  td {
+    border: 0.1rem solid #bbbbbb55;
+    border-radius: 0.1rem;
+    cursor: pointer;
+
+    & > button {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+    }
+
+    &.active {
+      background-color: @brown;
+    }
+  }
+}

package/src/editor/plugins/Table/render.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  TABLE,
+  THEAD,
+  TFOOT,
+  TBODY,
+  TR,
+  TD,
+  TH,
+} from '@plone/volto-slate/constants';
+
+export const tableElements = {
+  [TABLE]: ({ attributes, children }) => (
+    <table {...attributes} className="slate-table">
+      {children}
+    </table>
+  ),
+  [THEAD]: ({ attributes, children }) => (
+    <thead {...attributes}>{children}</thead>
+  ),
+  [TFOOT]: ({ attributes, children }) => (
+    <tfoot {...attributes}>{children}</tfoot>
+  ),
+  [TBODY]: ({ attributes, children }) => (
+    <tbody {...attributes}>{children}</tbody>
+  ),
+  [TR]: ({ attributes, children }) => <tr {...attributes}>{children}</tr>,
+  [TD]: ({ attributes, children }) => <td {...attributes}>{children}</td>,
+  [TH]: ({ attributes, children }) => <th {...attributes}>{children}</th>,
+};

package/src/editor/plugins/index.js

@@ -0,0 +1,19 @@
+import installBlockQuotePlugin from './Blockquote';
+import installCallout from './Callout';
+import installImage from './Image';
+import installLinkPlugin from './Link';
+import installMarkdown from './Markdown';
+import installTable from './Table';
+import installStyleMenu from './StyleMenu';
+
+export default function install(config) {
+  return [
+    installBlockQuotePlugin,
+    installCallout,
+    installLinkPlugin,
+    installMarkdown,
+    installImage,
+    installTable,
+    installStyleMenu,
+  ].reduce((acc, apply) => apply(acc), config);
+}