@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/manage/Widgets/WysiwygWidget.jsx

@@ -1,350 +1,2 @@
-/**
- * WysiwygWidget container.
- * @module components/manage/WysiwygWidget/WysiwygWidget
- */
-
-import React, { Component } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import PropTypes from 'prop-types';
-import { connect, Provider } from 'react-redux';
-import { compose } from 'redux';
-import redraft from 'redraft';
-import { Form, Label, TextArea } from 'semantic-ui-react';
-import { map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
-import configureStore from 'redux-mock-store';
-import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
-
-import { FormFieldWrapper } from '@plone/volto/components';
-
-import loadable from '@loadable/component';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-
-const Editor = loadable(() => import('draft-js-plugins-editor'));
-
-const messages = defineMessages({
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  idTitle: {
-    id: 'Short Name',
-    defaultMessage: 'Short Name',
-  },
-  idDescription: {
-    id: 'Used for programmatic access to the fieldset.',
-    defaultMessage: 'Used for programmatic access to the fieldset.',
-  },
-  title: {
-    id: 'Title',
-    defaultMessage: 'Title',
-  },
-  description: {
-    id: 'Description',
-    defaultMessage: 'Description',
-  },
-  required: {
-    id: 'Required',
-    defaultMessage: 'Required',
-  },
-  delete: {
-    id: 'Delete',
-    defaultMessage: 'Delete',
-  },
-});
-
-/**
- * WysiwygWidget HTML richtext editing widget
- *
- * To use it, in schema properties, declare a field like:
- *
- * ```jsx
- * {
- *  title: "Rich text",
- *  widget: 'richtext',
- * }
- * ```
- *
- */
-class WysiwygWidgetComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    /**
-     * Id of the field
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * Title of the field
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Description of the field
-     */
-    description: PropTypes.string,
-    /**
-     * True if field is required
-     */
-    required: PropTypes.bool,
-    /**
-     * Value of the field
-     */
-    value: PropTypes.shape({
-      /**
-       * Content type of the value
-       */
-      'content-type': PropTypes.string,
-      /**
-       * Data of the value
-       */
-      data: PropTypes.string,
-      /**
-       * Encoding of the value
-       */
-      encoding: PropTypes.string,
-    }),
-    /**
-     * Placeholder for the editor
-     */
-    placeholder: PropTypes.string,
-    /**
-     * List of error messages
-     */
-    error: PropTypes.arrayOf(PropTypes.string),
-    /**
-     * On change handler
-     */
-    onChange: PropTypes.func,
-    /**
-     * On delete handler
-     */
-    onDelete: PropTypes.func,
-    /**
-     * On edit handler
-     */
-    onEdit: PropTypes.func,
-    /**
-     * Wrapped form component
-     */
-    wrapped: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    value: {
-      'content-type': 'text/html',
-      data: '',
-      encoding: 'utf8',
-    },
-    error: [],
-    onEdit: null,
-    onDelete: null,
-    onChange: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygWidget
-   */
-  constructor(props) {
-    super(props);
-
-    const { stateFromHTML } = props.draftJsImportHtml;
-    const { EditorState } = props.draftJs;
-    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
-
-    this.draftConfig = config.settings.richtextEditorSettings(props);
-
-    if (!__SERVER__) {
-      let editorState;
-      if (props.value && props.value.data) {
-        const contentState = stateFromHTML(props.value.data, {
-          customBlockFn: this.draftConfig.FromHTMLCustomBlockFn,
-        });
-        editorState = EditorState.createWithContent(contentState);
-      } else {
-        editorState = EditorState.createEmpty();
-      }
-
-      const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
-      });
-
-      this.state = { editorState, inlineToolbarPlugin };
-    }
-
-    this.schema = {
-      fieldsets: [
-        {
-          id: 'default',
-          title: props.intl.formatMessage(messages.default),
-          fields: ['title', 'id', 'description', 'required'],
-        },
-      ],
-      properties: {
-        id: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.idTitle),
-          description: props.intl.formatMessage(messages.idDescription),
-        },
-        title: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.title),
-        },
-        description: {
-          type: 'string',
-          widget: 'textarea',
-          title: props.intl.formatMessage(messages.description),
-        },
-        required: {
-          type: 'boolean',
-          title: props.intl.formatMessage(messages.required),
-        },
-      },
-      required: ['id', 'title'],
-    };
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(editorState) {
-    const { convertToRaw } = this.props.draftJs;
-    this.setState({ editorState });
-    const mockStore = configureStore();
-
-    this.props.onChange(this.props.id, {
-      'content-type': this.props.value
-        ? this.props.value['content-type']
-        : 'text/html',
-      encoding: this.props.value ? this.props.value.encoding : 'utf8',
-      data: ReactDOMServer.renderToStaticMarkup(
-        <Provider
-          store={mockStore({
-            userSession: {
-              token: this.props.token,
-            },
-          })}
-        >
-          <MemoryRouter>
-            {redraft(
-              convertToRaw(editorState.getCurrentContent()),
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </MemoryRouter>
-        </Provider>,
-      ),
-    });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { id, title, description, required, value, error, fieldSet } =
-      this.props;
-
-    if (__SERVER__) {
-      return (
-        <Form.Field
-          inline
-          required={required}
-          error={error.length > 0}
-          className={description ? 'help' : ''}
-          id={`${fieldSet || 'field'}-${id}`}
-        >
-          <div className="wrapper">
-            <label htmlFor={`field-${id}`}>{title}</label>
-            <TextArea id={id} name={id} value={value ? value.data : ''} />
-            {description && <p className="help">{description}</p>}
-            {map(error, (message) => (
-              <Label key={message} basic color="red" pointing>
-                {message}
-              </Label>
-            ))}
-          </div>
-        </Form.Field>
-      );
-    }
-    const { InlineToolbar } = this.state.inlineToolbarPlugin;
-
-    return (
-      <FormFieldWrapper {...this.props} className="wysiwyg">
-        <div style={{ boxSizing: 'initial' }}>
-          {this.props.onChange ? (
-            <>
-              <Editor
-                id={`field-${id}`}
-                readOnly={this.props.isDisabled}
-                onChange={this.onChange}
-                editorState={this.state.editorState}
-                plugins={[
-                  this.state.inlineToolbarPlugin,
-                  ...this.draftConfig.richTextEditorPlugins,
-                ]}
-                placeholder={this.props.placeholder}
-                blockRenderMap={this.draftConfig.extendedBlockRenderMap}
-                blockStyleFn={this.draftConfig.blockStyleFn}
-                customStyleMap={this.draftConfig.customStyleMap}
-              />
-              {this.props.onChange && <InlineToolbar />}
-            </>
-          ) : (
-            <div className="DraftEditor-root" />
-          )}
-        </div>
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export const WysiwygWidget = compose(
-  injectIntl,
-  injectLazyLibs([
-    'draftJs',
-    'draftJsBlockBreakoutPlugin',
-    'draftJsCreateBlockStyleButton',
-    'draftJsCreateInlineStyleButton',
-    'draftJsFilters',
-    'draftJsImportHtml',
-    'draftJsInlineToolbarPlugin',
-    'draftJsLibIsSoftNewlineEvent',
-    'immutableLib',
-  ]),
-  connect(
-    (state, props) => ({
-      token: state.userSession.token,
-    }),
-    {},
-  ),
-)(WysiwygWidgetComponent);
-
-const Preloader = (props) => {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    Editor.load().then(() => setLoaded(true));
-  }, []);
-  return loaded ? <WysiwygWidget {...props} /> : null;
-};
-
-export default Preloader;
+import HtmlSlateWidget from '@plone/volto-slate/widgets/HtmlSlateWidget';
+export default HtmlSlateWidget;

package/src/components/manage/Widgets/__mocks__/index.tsx

@@ -0,0 +1,43 @@
+export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = jest.fn(() => <div id="FileWidget" />);
+export const IdWidget = jest.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = jest.fn(() => <div id="TextWidget" />);
+export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = jest.fn(() => (
+  <div id="RegistryImageWidget" />
+));
+export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = jest.fn(() => (
+  <div id="ObjectBrowserWidget" />
+));
+export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = jest.fn(() => (
+  <div id="VocabularyTermsWidget" />
+));
+export const SelectMetadataWidget = jest.fn(() => (
+  <div id="SelectMetadataWidget" />
+));
+export const SelectAutoComplete = jest.fn(() => (
+  <div id="SelectAutoComplete" />
+));
+export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);

package/src/components/manage/Widgets/index.tsx

@@ -0,0 +1,232 @@
+import loadable from '@loadable/component';
+
+export const AlignWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/AlignWidget'
+    ),
+);
+
+export const ButtonsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ButtonsWidget'
+    ),
+);
+
+export const ArrayWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ArrayWidget'
+    ),
+);
+
+export const CheckboxWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/CheckboxWidget'
+    ),
+);
+
+export const FileWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FileWidget'
+    ),
+);
+
+export const IdWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/IdWidget'
+    ),
+);
+
+export const PasswordWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/PasswordWidget'
+    ),
+);
+
+export const QueryWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QueryWidget'
+    ),
+);
+
+export const QuerySortOnWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerySortOnWidget'
+    ),
+);
+
+export const QuerystringWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerystringWidget'
+    ),
+);
+
+export const SchemaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SchemaWidget'
+    ),
+);
+
+export const SelectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectWidget'
+    ),
+);
+
+export const TextareaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextareaWidget'
+    ),
+);
+
+export const TextWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextWidget'
+    ),
+);
+
+export const TokenWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TokenWidget'
+    ),
+);
+
+export const WysiwygWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget'
+    ),
+);
+
+export const UrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
+    ),
+);
+
+export const InternalUrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
+    ),
+);
+
+export const EmailWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/EmailWidget'
+    ),
+);
+
+export const NumberWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/NumberWidget'
+    ),
+);
+
+export const ImageSizeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ImageSizeWidget'
+    ),
+);
+
+export const RegistryImageWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RegistryImageWidget'
+    ),
+);
+
+export const ReferenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ReferenceWidget'
+    ),
+);
+
+export const ObjectBrowserWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectBrowserWidget'
+    ),
+);
+
+export const ObjectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectWidget'
+    ),
+);
+
+export const ObjectListWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectListWidget'
+    ),
+);
+
+export const VocabularyTermsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/VocabularyTermsWidget'
+    ),
+);
+
+export const SelectMetadataWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField'
+    ),
+);
+
+export const SelectAutoComplete = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectAutoComplete'
+    ),
+);
+
+export const ColorPickerWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ColorPickerWidget'
+    ),
+);
+
+export const DatetimeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/DatetimeWidget'
+    ),
+);
+
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
+);
+
+export const FormFieldWrapper = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
+    ),
+);

package/src/components/manage/Workflow/Workflow.jsx

@@ -6,7 +6,8 @@ import { uniqBy } from 'lodash';
 import { toast } from 'react-toastify';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import {
   flattenToAppURL,
   getWorkflowOptions,
@@ -145,8 +146,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/components/manage/Workflow/Workflow.test.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor, render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import config from '@plone/volto/registry';
 
 import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
@@ -46,7 +47,6 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    await waitFor(() => screen.getByText(/Published/));
     expect(container).toMatchSnapshot();
   });
 
@@ -70,7 +70,6 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    await waitFor(() => screen.getByText('Private'));
     expect(container).toMatchSnapshot();
   });
 });