@plone/volto-slate 18.0.0-alpha.4

package/src/blocks/Table/TableBlockEdit.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Edit from './TableBlockEdit';
+
+const mockStore = configureStore();
+
+global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
+
+test('renders an edit table block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        data={{ table: { rows: [] } }}
+        selected={false}
+        block="1234"
+        onAddBlock={() => {}}
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onInsertBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        onMutateBlock={() => {}}
+        index={1}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/blocks/Table/TableBlockView.jsx

@@ -0,0 +1,150 @@
+/**
+ * Slate Table block's View component.
+ * @module volto-slate/blocks/Table/View
+ */
+
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
+import { map } from 'lodash';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import { Node } from 'slate';
+
+// TODO: loading LESS files with `volto-slate/...` paths does not work currently
+import '../../editor/plugins/Table/less/public.less';
+
+/**
+ * Slate Table block's View class.
+ * @class View
+ * @extends Component
+ * @param {object} data The table data to render as a table.
+ */
+const View = ({ data }) => {
+  const [state, setState] = useState({
+    column: null,
+    direction: null,
+  });
+
+  const headers = useMemo(() => {
+    return data.table.rows?.[0]?.cells;
+  }, [data.table.rows]);
+
+  const rows = useMemo(() => {
+    const items = [];
+    if (!data.table.rows) return [];
+    data.table.rows.forEach((row, index) => {
+      if (index > 0) {
+        items[index] = [];
+        row.cells.forEach((cell, cellIndex) => {
+          items[index][cellIndex] = {
+            ...cell,
+            value:
+              cell.value && Node.string({ children: cell.value }).length > 0
+                ? serializeNodes(cell.value)
+                : '\u00A0',
+            valueText:
+              cell.value && Node.string({ children: cell.value }).length > 0
+                ? serializeNodesToText(cell.value)
+                : '\u00A0',
+          };
+        });
+      }
+    });
+    return items;
+  }, [data.table.rows]);
+
+  const sortedRows = useMemo(() => {
+    if (state.column === null) return Object.keys(rows);
+    return Object.keys(rows).sort((a, b) => {
+      const a_text = rows[a][state.column].valueText;
+      const b_text = rows[b][state.column].valueText;
+      if (state.direction === 'ascending' ? a_text < b_text : a_text > b_text) {
+        return -1;
+      }
+      if (state.direction === 'ascending' ? a_text > b_text : a_text < b_text) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [state, rows]);
+
+  return (
+    <>
+      {data && data.table && (
+        <Table
+          fixed={data.table.fixed}
+          compact={data.table.compact}
+          basic={data.table.basic ? 'very' : false}
+          celled={data.table.celled}
+          inverted={data.table.inverted}
+          striped={data.table.striped}
+          sortable={data.table.sortable}
+          className="slate-table-block"
+        >
+          {!data.table.hideHeaders ? (
+            <Table.Header>
+              <Table.Row>
+                {headers.map((cell, index) => (
+                  <Table.HeaderCell
+                    key={cell.key}
+                    textAlign="left"
+                    verticalAlign="middle"
+                    sorted={state.column === index ? state.direction : null}
+                    onClick={() => {
+                      if (!data.table.sortable) return;
+                      setState({
+                        column: index,
+                        direction:
+                          state.column !== index
+                            ? 'ascending'
+                            : state.direction === 'ascending'
+                            ? 'descending'
+                            : 'ascending',
+                      });
+                    }}
+                  >
+                    {cell.value &&
+                    Node.string({ children: cell.value }).length > 0
+                      ? serializeNodes(cell.value)
+                      : '\u00A0'}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : (
+            ''
+          )}
+          <Table.Body>
+            {map(sortedRows, (row) => (
+              <Table.Row key={row}>
+                {map(rows[row], (cell) => (
+                  <Table.Cell
+                    key={cell.key}
+                    textAlign="left"
+                    verticalAlign="middle"
+                  >
+                    {cell.value}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;

package/src/blocks/Table/TableBlockView.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import View from './TableBlockView';
+import config from '@plone/volto/registry';
+
+beforeAll(() => {
+  config.settings = {
+    slate: {
+      elements: {
+        default: ({ attributes, children }) => (
+          <p {...attributes}>{children}</p>
+        ),
+        h2: ({ attributes, children }) => <h2 {...attributes}>{children}</h2>,
+      },
+      leafs: {},
+    },
+  };
+});
+
+test('renders a view table component', () => {
+  const component = renderer.create(
+    <View
+      data={{
+        table: {
+          rows: [
+            {
+              key: 'a',
+              cells: [
+                {
+                  type: 'data',
+                  key: 'b',
+                  value: [
+                    {
+                      type: 'h2',
+                      children: [{ text: 'My header' }],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          hideHeaders: false,
+        },
+      }}
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/blocks/Table/__snapshots__/Cell.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a cell component 1`] = `null`;

package/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders an edit table block component 1`] = `
+<div
+  className="block table"
+>
+  <table
+    className="ui table slate-table-block"
+  >
+    <thead
+      className=""
+    >
+      <tr
+        className="left aligned"
+      />
+    </thead>
+    <tbody
+      className=""
+    />
+  </table>
+</div>
+`;

package/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a view table component 1`] = `
+<table
+  className="ui table slate-table-block"
+>
+  <thead
+    className=""
+  >
+    <tr
+      className=""
+    >
+      <th
+        className="left aligned middle aligned"
+        onClick={[Function]}
+      >
+        <h2>
+          My header
+        </h2>
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    className=""
+  />
+</table>
+`;

package/src/blocks/Table/deconstruct.js

@@ -0,0 +1,113 @@
+import { v4 as uuid } from 'uuid';
+import { Editor, Transforms } from 'slate';
+import {
+  TABLE,
+  THEAD,
+  TBODY,
+  TFOOT,
+  TD,
+  TH,
+  TR,
+} from '@plone/volto-slate/constants';
+
+/**
+ * @param {Array} rows The array of rows that almost completely defines a
+ * `table`-typed block.
+ * @returns {Array} A tuple `[id, block]` where `id` is the new block's ID and
+ * the `block` is all the block's data.
+ */
+export function syncCreateTableBlock(rows) {
+  const id = uuid();
+  const block = {
+    '@type': 'table',
+    table: {
+      rows,
+    },
+  };
+  return [id, block];
+}
+
+/**
+ * @param {Editor} editor The Slate Editor from which to extract tables.
+ * @param {PathRef} pathRef Has the current value a `Path` so that the search is
+ * done just inside nodes in that `Path`.
+ * @returns Extracts tables from a Slate `Editor` into an array of detached
+ * `table` blocks.
+ */
+export const extractTables = (editor, pathRef) => {
+  const tableNodes = Array.from(
+    Editor.nodes(editor, {
+      at: pathRef.current,
+      match: (node) => node.type === TABLE,
+    }),
+  );
+  const tables = tableNodes.map(([node]) => extractVoltoTable(node));
+
+  Transforms.removeNodes(editor, {
+    at: pathRef.current,
+    match: (node) => node.type === TABLE,
+  });
+
+  return tables.map((el) => syncCreateTableBlock(el));
+};
+
+/**
+ * @param {Node[]} fragment A Slate document fragment.
+ * @returns {Array} An array of rows in the format requested by `table`
+ * blocks.
+ */
+function collectRowsFrom(fragment) {
+  let rows = [];
+  fragment.children.forEach((y) => {
+    if (y.type === TR) {
+      let row = { key: uuid(), cells: [] };
+
+      y.children.forEach((z) => {
+        let val = JSON.parse(JSON.stringify(z.children));
+        if (z.type === TD) {
+          row.cells.push({
+            key: uuid(),
+            type: 'data',
+            value: val,
+          });
+        } else if (z.type === TH) {
+          row.cells.push({
+            key: uuid(),
+            type: 'header',
+            value: val,
+          });
+        }
+      });
+
+      rows.push(row);
+    }
+  });
+  return rows;
+}
+
+/**
+ * @param {HTMLElement} el The <table> element from which to extract rows.
+ * @returns {Array} A rows array that contains rows in the format required by
+ * `table` blocks.
+ */
+function extractVoltoTable(el) {
+  let thead = [],
+    tfoot = [],
+    tbody = [];
+
+  el.children.forEach((fragment) => {
+    if (fragment.type === THEAD) {
+      // not supported by View fully, so prepend this to tbody below
+      thead = collectRowsFrom(fragment);
+    } else if (fragment.type === TBODY) {
+      tbody = collectRowsFrom(fragment);
+    } else if (fragment.type === TFOOT) {
+      // not supported by View fully, so append this to tbody below
+      tfoot = collectRowsFrom(fragment);
+    }
+  });
+
+  const rows = [...thead, ...tbody, ...tfoot];
+
+  return rows;
+}

package/src/blocks/Table/extensions/normalizeTable.js

@@ -0,0 +1,5 @@
+export const normalizeTable = (editor) => {
+  // Normalization rules for table cells
+
+  return editor;
+};

package/src/blocks/Table/index.js

@@ -0,0 +1,60 @@
+import TableBlockEdit from './TableBlockEdit';
+import TableBlockView from './TableBlockView';
+import { extractTables } from './deconstruct';
+import { normalizeTable } from './extensions/normalizeTable';
+import { normalizeExternalData } from '../Text/extensions';
+
+import tableSVG from '@plone/volto/icons/table.svg';
+
+/**
+ * @summary Called from Volto to configure new or existing Volto block types.
+ * @param {object} config The object received from Volto containing the
+ * configuration for all the blocks.
+ */
+export default function install(config) {
+  config.settings.slate = {
+    ...config.settings.slate,
+    voltoBlockEmiters: [
+      ...(config.settings.slate.voltoBlockEmiters || []),
+      extractTables,
+    ],
+    tableblockExtensions: [
+      // First here gets executed last
+      // withLists,
+      // withSplitBlocksOnBreak,
+      // withDeleteSelectionOnEnter,
+      // withDeserializers,
+      // breakList,
+      normalizeTable,
+      normalizeExternalData,
+    ],
+  };
+
+  const tableBlockConfig = {
+    id: 'table',
+    title: 'Table',
+    icon: tableSVG,
+    group: 'common',
+    view: TableBlockView,
+    edit: TableBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    // blockHasValue: (data) => {
+    //   return true;
+    // },
+  };
+
+  config.blocks.blocksConfig.table.restricted = true;
+  config.blocks.blocksConfig.slateTable = {
+    ...tableBlockConfig,
+    id: 'slateTable',
+  };
+
+  return config;
+}

package/src/blocks/Table/schema.js

@@ -0,0 +1,122 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  hideHeaders: {
+    id: 'Hide headers',
+    defaultMessage: 'Hide headers',
+  },
+  sortable: {
+    id: 'Make the table sortable',
+    defaultMessage: 'Make the table sortable',
+  },
+  sortableDescription: {
+    id: 'Visible only in view mode',
+    defaultMessage: 'Visible only in view mode',
+  },
+  fixed: {
+    id: 'Fixed width table cells',
+    defaultMessage: 'Fixed width table cells',
+  },
+  compact: {
+    id: 'Make the table compact',
+    defaultMessage: 'Make the table compact',
+  },
+  basic: {
+    id: 'Reduce complexity',
+    defaultMessage: 'Reduce complexity',
+  },
+  celled: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Divide each row into separate cells',
+  },
+  inverted: {
+    id: 'Table color inverted',
+    defaultMessage: 'Table color inverted',
+  },
+  striped: {
+    id: 'Stripe alternate rows with color',
+    defaultMessage: 'Stripe alternate rows with color',
+  },
+});
+
+function TableSchema(props) {
+  const { intl } = props;
+  return {
+    title: 'Table block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'hideHeaders',
+          'sortable',
+          'fixed',
+          'celled',
+          'striped',
+          'compact',
+          'basic',
+          'inverted',
+        ],
+      },
+    ],
+    properties: {
+      hideHeaders: {
+        title: intl.formatMessage(messages.hideHeaders),
+        type: 'boolean',
+      },
+      sortable: {
+        title: intl.formatMessage(messages.sortable),
+        type: 'boolean',
+      },
+      fixed: {
+        title: intl.formatMessage(messages.fixed),
+        type: 'boolean',
+      },
+      celled: {
+        title: intl.formatMessage(messages.celled),
+        type: 'boolean',
+      },
+      striped: {
+        title: intl.formatMessage(messages.striped),
+        type: 'boolean',
+      },
+      compact: {
+        title: intl.formatMessage(messages.compact),
+        type: 'boolean',
+      },
+      basic: {
+        title: intl.formatMessage(messages.basic),
+        type: 'boolean',
+      },
+      inverted: {
+        title: intl.formatMessage(messages.inverted),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}
+
+export function TableBlockSchema(props) {
+  return {
+    title: 'Table block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['table'],
+      },
+    ],
+    properties: {
+      table: {
+        title: 'Table block',
+        widget: 'object',
+        schema: TableSchema(props),
+      },
+    },
+
+    required: [],
+  };
+}
+
+export default TableBlockSchema;