@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.4

package/packages/volto-slate/src/blocks/Table/TableBlockEdit.test.js

@@ -1,40 +0,0 @@
-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/packages/volto-slate/src/blocks/Table/TableBlockView.jsx

@@ -1,150 +0,0 @@
-/**
- * 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/packages/volto-slate/src/blocks/Table/TableBlockView.test.js

@@ -1,49 +0,0 @@
-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/packages/volto-slate/src/blocks/Table/deconstruct.js

@@ -1,113 +0,0 @@
-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/packages/volto-slate/src/blocks/Table/extensions/normalizeTable.js

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

package/packages/volto-slate/src/blocks/Table/index.js

@@ -1,60 +0,0 @@
-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/packages/volto-slate/src/blocks/Table/schema.js

@@ -1,122 +0,0 @@
-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;