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

package/packages/volto-slate/src/widgets/ErrorBoundary.jsx

@@ -1,27 +0,0 @@
-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/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx

@@ -1,139 +0,0 @@
-/**
- * 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/packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx

@@ -1,49 +0,0 @@
-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/packages/volto-slate/src/widgets/RichTextWidget.jsx

@@ -1,72 +0,0 @@
-/**
- * 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/packages/volto-slate/src/widgets/RichTextWidgetView.jsx

@@ -1,37 +0,0 @@
-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/packages/volto-slate/src/widgets/style.css

@@ -1,21 +0,0 @@
-.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;
-}