@plone/volto-slate 18.0.0-alpha.4

package/locales/volto.pot

@@ -0,0 +1,182 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2022-07-20T12:45:09.681Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#: editor/plugins/Link/index
+# defaultMessage: Add link
+msgid "Add link"
+msgstr ""
+
+#: widgets/HtmlSlateWidget
+# defaultMessage: An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.
+msgid "An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator."
+msgstr ""
+
+#: widgets/RichTextWidgetView
+# defaultMessage: An error has occurred while rendering "{name}" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator.
+msgid "An error has occurred while rendering "{name}" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator."
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Bottom
+msgid "Bottom"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Center
+msgid "Center"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Delete col
+msgid "Delete col"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Delete row
+msgid "Delete row"
+msgstr ""
+
+#: editor/plugins/Table/index
+# defaultMessage: Delete table
+msgid "Delete table"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Divide each row into separate cells
+msgid "Divide each row into separate cells"
+msgstr ""
+
+#: elementEditor/messages
+# defaultMessage: Edit element
+msgid "Edit element"
+msgstr ""
+
+#: editor/plugins/AdvancedLink/index
+#: editor/plugins/Link/index
+# defaultMessage: Edit link
+msgid "Edit link"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Fixed width table cells
+msgid "Fixed width table cells"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Hide headers
+msgid "Hide headers"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Insert col after
+msgid "Insert col after"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Insert col before
+msgid "Insert col before"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Insert row after
+msgid "Insert row after"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+#: editor/plugins/Table/index
+# defaultMessage: Insert row before
+msgid "Insert row before"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Left
+msgid "Left"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Make the table compact
+msgid "Make the table compact"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Make the table sortable
+msgid "Make the table sortable"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Middle
+msgid "Middle"
+msgstr ""
+
+#: blocks/Text/SlashMenu
+# defaultMessage: No matching blocks
+msgid "No matching blocks"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Reduce complexity
+msgid "Reduce complexity"
+msgstr ""
+
+#: elementEditor/messages
+# defaultMessage: Remove element
+msgid "Remove element"
+msgstr ""
+
+#: editor/plugins/AdvancedLink/index
+# defaultMessage: Remove link
+msgid "Remove link"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Right
+msgid "Right"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Stripe alternate rows with color
+msgid "Stripe alternate rows with color"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Table
+msgid "Table"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Table color inverted
+msgid "Table color inverted"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Top
+msgid "Top"
+msgstr ""
+
+#: blocks/Text/DefaultTextBlockEditor
+#: blocks/Text/DetachedTextBlockEditor
+# defaultMessage: Type text…
+msgid "Type text…"
+msgstr ""
+
+#: blocks/Table/TableBlockEdit
+# defaultMessage: Visible only in view mode
+msgid "Visible only in view mode"
+msgstr ""

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@plone/volto-slate",
+  "version": "18.0.0-alpha.4",
+  "description": "Slate.js integration with Volto",
+  "main": "src/index.js",
+  "author": "European Environment Agency: IDM2 A-Team",
+  "license": "MIT",
+  "keywords": [
+    "volto-core-addon",
+    "volto-addon",
+    "volto-slate",
+    "volto-slate-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "image-extensions": "1.1.0",
+    "is-url": "1.2.4",
+    "jsdom": "^16.6.0",
+    "react-intersection-observer": "^8.32.0",
+    "slate": "0.100.0",
+    "slate-history": "0.100.0",
+    "slate-hyperscript": "0.100.0",
+    "slate-react": "0.98.4",
+    "weak-key": "^1.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/react": "9.5.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "release-it": "^17.0.0"
+  },
+  "scripts": {
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  }
+}

package/src/actions/content.js

@@ -0,0 +1,30 @@
+import { nestContent } from '@plone/volto/helpers';
+import { UPLOAD_CONTENT } from '@plone/volto-slate/constants';
+
+// TODO: the PR has been merged into Volto, so this should be cleaned up
+
+/**
+ * @summary Upload content function.
+ *
+ * @description A custom version of Volto's `createContent` that can take an
+ * `origin` block ID. There is an issue on making this a builtin variant of the
+ * Volto's `createContent` action: https://github.com/plone/volto/issues/1654.
+ *
+ * @param {string} url Parent URL.
+ * @param {Object|Array} content Content data.
+ * @param {string} origin The ID of the block into which the content should be
+ * uploaded.
+ *
+ * @todo Clarify if the parameter `origin` is optional or remove this TODO.
+ *
+ * @returns {Object} Upload content action.
+ */
+export function uploadContent(url, content, origin) {
+  return {
+    type: UPLOAD_CONTENT,
+    origin,
+    request: Array.isArray(content)
+      ? content.map((item) => ({ op: 'post', path: url, data: item }))
+      : { op: 'post', path: url, data: nestContent(content) },
+  };
+}

package/src/actions/index.js

@@ -0,0 +1,3 @@
+export { default as saveSlateBlockSelection } from './selection';
+export * from './content';
+export * from './plugins';

package/src/actions/plugins.js

@@ -0,0 +1,9 @@
+import { SLATE_PLUGINS } from '@plone/volto-slate/constants';
+
+export function setPluginOptions(pluginId, values = {}) {
+  return {
+    type: SLATE_PLUGINS,
+    pluginId,
+    ...values,
+  };
+}

package/src/actions/selection.js

@@ -0,0 +1,22 @@
+import { SAVE_SLATE_BLOCK_SELECTION } from '@plone/volto-slate/constants';
+
+/**
+ * Action creator for the action to save the selection of a Slate block. The
+ * selection is saved into the form's data for later usage.
+ *
+ * @param {string} blockid The ID of the block that should have its selection
+ * saved.
+ * @param {object} selection An object implementing the Slate's `Range`
+ * interface or a string: 'start', 'end'.
+ *
+ * @todo Clarify here if the `selection` parameter can be `null` or `undefined`.
+ *
+ * @returns The action object.
+ */
+export default function saveSlateBlockSelection(blockid, selection) {
+  return {
+    type: SAVE_SLATE_BLOCK_SELECTION,
+    blockid,
+    selection,
+  };
+}

package/src/blocks/Table/Cell.jsx

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { EditorReference, SlateEditor } from '@plone/volto-slate/editor';
+import { ReactEditor } from 'slate-react';
+import config from '@plone/volto/registry';
+
+class Cell extends Component {
+  static propTypes = {
+    onSelectCell: PropTypes.func.isRequired,
+    row: PropTypes.number,
+    cell: PropTypes.number,
+    value: PropTypes.array,
+    selected: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    isTableBlockSelected: PropTypes.bool,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.handleContainerFocus = this.handleContainerFocus.bind(this);
+    this.state = { editor: null };
+    this.tableblockExtensions = config.settings.slate.tableblockExtensions;
+  }
+
+  componentWillUnmount() {
+    this.isUnmounted = true;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isTableBlockSelected !== this.props.isTableBlockSelected &&
+      this.props.isTableBlockSelected &&
+      this.props.cell === 0 &&
+      this.props.row === 0 &&
+      (!this.props.selectedCell ||
+        (this.props.selectedCell.row === 0 &&
+          this.props.selectedCell.cell === 0))
+    ) {
+      this.props.onSelectCell(this.props.row, this.props.cell);
+
+      // Wait for Slate to initialize before asking it to focus
+      if (this.state.editor) {
+        setTimeout(
+          () => !this.isUnmounted && ReactEditor.focus(this.state.editor),
+          0,
+        );
+      }
+    }
+  }
+
+  onChange(val) {
+    this.props.onChange(this.props.row, this.props.cell, [...val]);
+  }
+
+  handleContainerFocus() {
+    this.props.onSelectCell(this.props.row, this.props.cell);
+  }
+
+  render() {
+    return (
+      __CLIENT__ && (
+        <SlateEditor
+          tabIndex={0}
+          onChange={this.onChange}
+          extensions={this.tableblockExtensions}
+          value={this.props.value}
+          selected={this.props.selected}
+          onFocus={this.handleContainerFocus}
+          onClick={this.handleContainerFocus}
+          debug={false}
+        >
+          <EditorReference
+            onHasEditor={(editor) =>
+              !this.state.editor && this.setState({ editor })
+            }
+          />
+        </SlateEditor>
+      )
+    );
+  }
+}
+
+export default Cell;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Cell from './Cell';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+const mockStore = configureStore();
+
+global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
+global.__CLIENT__ = false; // eslint-disable-line no-underscore-dangle
+
+beforeAll(() => {
+  const createEmptyParagraph = () => {
+    return {
+      type: 'p',
+      children: [{ text: '' }],
+    };
+  };
+
+  config.settings = {
+    supportedLanguages: [],
+    slate: {
+      elements: {
+        default: ({ attributes, children }) => (
+          <p {...attributes}>{children}</p>
+        ),
+      },
+      leafs: {},
+      defaultBlockType: 'p',
+      textblockExtensions: [],
+      extensions: [],
+      defaultValue: () => {
+        return [createEmptyParagraph()];
+      },
+    },
+  };
+});
+
+test('renders a cell component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <Cell onChange={() => {}} onSelectCell={() => {}} />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});