@plone/volto-slate 18.0.0-alpha.4

package/src/widgets/ErrorBoundary.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // eslint-disable-next-line
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <pre className="slate error">{`ERROR: ${this.props.name}`}</pre>;
+    }
+
+    return this.props.children;
+  }
+}

package/src/widgets/HtmlSlateWidget.jsx

@@ -0,0 +1,138 @@
+/**
+ * HtmlSlateWidget, a slate widget variant that saves its data as HTML
+ */
+
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import configureStore from 'redux-mock-store';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider, useSelector } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { makeEditor } from '@plone/volto-slate/utils';
+import deserialize from '@plone/volto-slate/editor/deserialize';
+
+import {
+  createEmptyParagraph,
+  normalizeExternalData,
+} from '@plone/volto-slate/utils';
+import { ErrorBoundary } from './ErrorBoundary';
+
+import './style.css';
+
+const messages = defineMessages({
+  error: {
+    id: '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.',
+    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.',
+  },
+});
+
+const HtmlSlateWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    focus,
+    className,
+    block,
+    placeholder,
+    properties,
+    intl,
+  } = props;
+
+  const [selected, setSelected] = React.useState(focus);
+
+  const editor = React.useMemo(() => makeEditor(), []);
+
+  const token = useSelector((state) => state.userSession.token);
+
+  const toHtml = React.useCallback(
+    (value) => {
+      const mockStore = configureStore();
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <Provider store={mockStore({ userSession: { token } })}>
+          <MemoryRouter>{serializeNodes(value || [])}</MemoryRouter>
+        </Provider>,
+      );
+      // console.log('toHtml value', JSON.stringify(value));
+      // console.log('toHtml html', html);
+
+      return {
+        'content-type': value ? value['content-type'] : 'text/html',
+        encoding: value ? value.encoding : 'utf8',
+        data: html,
+      };
+    },
+    [token],
+  );
+
+  const fromHtml = React.useCallback(
+    (value) => {
+      const html = value?.data || '';
+
+      const parsed = new DOMParser().parseFromString(html, 'text/html');
+      const body =
+        parsed.getElementsByTagName('google-sheets-html-origin').length > 0
+          ? parsed.querySelector('google-sheets-html-origin > table')
+          : parsed.body;
+      let data = deserialize(editor, body, { collapseWhitespace: false });
+      data = normalizeExternalData(editor, data);
+
+      // editor.children = data;
+      // Editor.normalize(editor);
+      // TODO: need to add {text: ""} placeholders between elements
+      const res = data.length ? data : [createEmptyParagraph()];
+      // console.log('from html', { html: value?.data, res });
+      return res;
+    },
+    [editor],
+  );
+
+  const valueFromHtml = React.useMemo(() => {
+    return fromHtml(value);
+  }, [value, fromHtml]);
+
+  const handleChange = React.useCallback(
+    (newValue) => {
+      onChange(id, toHtml(newValue));
+    },
+    [onChange, toHtml, id],
+  );
+
+  const handleClick = React.useCallback(() => {
+    setSelected(true);
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box"
+        role="textbox"
+        tabIndex="-1"
+        style={{ boxSizing: 'initial' }}
+        onClick={handleClick}
+        onKeyDown={() => {}}
+      >
+        <ErrorBoundary name={intl.formatMessage(messages.error, { name: id })}>
+          <SlateEditor
+            className={className}
+            id={id}
+            name={id}
+            value={valueFromHtml}
+            onChange={handleChange}
+            block={block}
+            selected={selected}
+            properties={properties}
+            placeholder={placeholder}
+          />
+        </ErrorBoundary>
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default injectIntl(HtmlSlateWidget);

package/src/widgets/ObjectByTypeWidget.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Menu, Tab } from 'semantic-ui-react';
+import { Icon, ObjectWidget } from '@plone/volto/components';
+
+export const ObjectByTypeWidget = (props) => {
+  const { schemas, value = {}, onChange, errors = {}, id } = props;
+  const objectId = id;
+
+  const schemaIds = schemas.map(({ id }) => id);
+  const defaultActiveTab = value
+    ? schemaIds.indexOf(Object.keys(value)[0])
+    : null;
+
+  const [activeTab, setActiveTab] = React.useState(
+    defaultActiveTab > -1 ? defaultActiveTab : 0,
+  );
+  const createTab = ({ schema, id, icon }, index) => {
+    return {
+      menuItem: () => (
+        <Menu.Item
+          onClick={() => setActiveTab(index)}
+          active={activeTab === index}
+          key={id}
+        >
+          <Icon size="24px" name={icon} title={schema.title} />
+        </Menu.Item>
+      ),
+      render: () => {
+        return (
+          <Tab.Pane>
+            <ObjectWidget
+              schema={schema}
+              id={id}
+              errors={errors}
+              value={value[id] || {}}
+              onChange={(schemaId, v) => {
+                onChange(objectId, { [schemaId]: v });
+              }}
+            />
+          </Tab.Pane>
+        );
+      },
+    };
+  };
+
+  return <Tab panes={schemas.map(createTab)} activeIndex={activeTab} />;
+};
+
+export default ObjectByTypeWidget;

package/src/widgets/RichTextWidget.jsx

@@ -0,0 +1,72 @@
+/**
+ * A Slate widget that uses internal JSON representation as its value
+ *
+ */
+
+import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
+import { FormFieldWrapper } from '@plone/volto/components';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+
+import { createEmptyParagraph, createParagraph } from '../utils/blocks';
+
+import './style.css';
+
+const getValue = (value) => {
+  if (isUndefined(value) || !isUndefined(value?.data)) {
+    return [createEmptyParagraph()];
+  }
+  // Previously this was a text field
+  if (isString(value)) {
+    return [createParagraph(value)];
+  }
+  return value;
+};
+
+const SlateRichTextWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    focus,
+    className,
+    block,
+    placeholder,
+    properties,
+    readOnly = false,
+  } = props;
+  const [selected, setSelected] = React.useState(focus);
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box"
+        role="textbox"
+        tabIndex="-1"
+        style={{ boxSizing: 'initial' }}
+        onClick={() => {
+          setSelected(true);
+        }}
+        onKeyDown={() => {}}
+      >
+        <SlateEditor
+          className={className}
+          readOnly={readOnly}
+          id={id}
+          name={id}
+          value={getValue(value)}
+          onChange={(newValue) => {
+            onChange(id, newValue);
+          }}
+          block={block}
+          selected={selected}
+          properties={properties}
+          placeholder={placeholder}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default SlateRichTextWidget;

package/src/widgets/RichTextWidgetView.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+import { ErrorBoundary } from './ErrorBoundary';
+import { defineMessages, injectIntl } from 'react-intl';
+import './style.css';
+
+const messages = defineMessages({
+  error: {
+    id: '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.',
+    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.',
+  },
+});
+
+export const SlateRichTextWidgetView = ({
+  value,
+  children,
+  className,
+  intl,
+}) => {
+  const Block = config.blocks.blocksConfig.slate.view;
+  return value ? (
+    <ErrorBoundary
+      name={intl.formatMessage(messages.error, { name: className })}
+    >
+      <div className={cx(className, 'slate', 'widget')}>
+        <Block data={{ value: value }}>{children}</Block>
+      </div>
+    </ErrorBoundary>
+  ) : (
+    ''
+  );
+};
+
+export default injectIntl(SlateRichTextWidgetView);

package/src/widgets/style.css

@@ -0,0 +1,21 @@
+.slate_wysiwyg_box {
+  padding: 2px 3px;
+  border-bottom: 1px solid #c7d5d8;
+}
+
+.metadata.mention.slate.widget {
+  display: inline;
+}
+
+.metadata.mention.slate.widget > :first-child {
+  display: inline;
+}
+
+.metadata.mention.slate.widget > :last-child {
+  display: inline;
+}
+
+.slate.error {
+  color: #f00;
+  white-space: normal;
+}