@plone/volto 14.0.0 → 14.1.1

package/src/components/manage/Blocks/Text/Edit.jsx

@@ -136,6 +136,25 @@ class Edit extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      !isEqual(this.props.data, prevProps.data) &&
+      !isEqual(
+        convertToRaw(this.state.editorState.getCurrentContent()),
+        this.props.data.text,
+      )
+    ) {
+      const editorState =
+        this.props.data && this.props.data.text
+          ? EditorState.createWithContent(convertFromRaw(this.props.data.text))
+          : EditorState.createEmpty();
+
+      this.setState({
+        editorState: editorState,
+      });
+    }
+  }
+
   /**
    * @param {*} nextProps
    * @param {*} nextState

package/src/components/manage/Form/Form.jsx

@@ -39,7 +39,7 @@ import {
 } from 'semantic-ui-react';
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
-import { BlocksToolbar } from '@plone/volto/components';
+import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
 import { setSidebarTab } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
@@ -221,6 +221,7 @@ class Form extends Component {
 
     if (this.props.onChangeFormData) {
       if (
+        // TODO: use fast-deep-equal
         JSON.stringify(prevState?.formData) !==
         JSON.stringify(this.state.formData)
       ) {
@@ -526,6 +527,15 @@ class Form extends Component {
             }
             onSelectBlock={this.onSelectBlock}
           />
+          <UndoToolbar
+            state={{
+              formData: this.state.formData,
+              selected: this.state.selected,
+              multiSelected: this.state.multiSelected,
+            }}
+            enableHotKeys
+            onUndoRedo={({ state }) => this.setState(state)}
+          />
           <BlocksForm
             onChangeFormData={(newFormData) =>
               this.setState({

package/src/components/manage/Form/UndoToolbar.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import { useUndoManager } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import undoSVG from '@plone/volto/icons/undo.svg';
+import redoSVG from '@plone/volto/icons/redo.svg';
+
+const messages = defineMessages({
+  undo: {
+    id: 'Undo',
+    defaultMessage: 'Undo',
+  },
+  redo: {
+    id: 'Redo',
+    defaultMessage: 'Redo',
+  },
+});
+
+const UndoToolbar = ({ state, onUndoRedo, maxUndoLevels, enableHotKeys }) => {
+  const intl = useIntl();
+  const undoLevels = maxUndoLevels ?? config.settings.maxUndoLevels;
+  const { doUndo, doRedo, canUndo, canRedo } = useUndoManager(
+    state,
+    onUndoRedo,
+    {
+      maxUndoLevels: undoLevels,
+    },
+  );
+
+  return (
+    <>
+      <Plug
+        pluggable="main.toolbar.bottom"
+        id="undo-btn"
+        dependencies={[canUndo, canRedo]}
+      >
+        <Button
+          className="undo"
+          onClick={() => doUndo()}
+          aria-label={intl.formatMessage(messages.undo)}
+          disabled={!canUndo}
+        >
+          <Icon
+            name={undoSVG}
+            className="circled"
+            size="30px"
+            title={intl.formatMessage(messages.undo)}
+          />
+        </Button>
+      </Plug>
+      <Plug
+        pluggable="main.toolbar.bottom"
+        id="redo-btn"
+        dependencies={[canUndo, canRedo]}
+      >
+        <Button
+          className="redo"
+          onClick={() => doRedo()}
+          aria-label={intl.formatMessage(messages.redo)}
+          disabled={!canRedo}
+        >
+          <Icon
+            name={redoSVG}
+            className="circled"
+            size="30px"
+            title={intl.formatMessage(messages.redo)}
+          />
+        </Button>
+      </Plug>
+    </>
+  );
+};
+
+export default UndoToolbar;

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -1,27 +1,11 @@
 import React from 'react';
 import AlignWidget from './AlignWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const AlignWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState([]);
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <AlignWidget
-          {...args}
-          id="alignWidgetItem"
-          title="Align"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-export const Align = AlignWidgetComponent.bind({});
+export const Align = WidgetStory.bind({
+  props: { id: 'align', title: 'Align' },
+  widget: AlignWidget,
+});
 
 export default {
   title: 'Widgets/Align',

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

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { find, isObject, isArray } from 'lodash';
+import { find, isObject } from 'lodash';
 
 import {
   getVocabFromHint,
@@ -56,10 +56,79 @@ function arrayMove(array, from, to) {
   return slicedArray;
 }
 
+function normalizeArrayValue(choices, value) {
+  if (!value || !Array.isArray(value)) return [];
+  if (value.length === 0) return value;
+
+  if (typeof value[0] === 'string') {
+    // raw value like ['foo', 'bar']
+    return value.map((v) => {
+      return {
+        label: find(choices, (c) => c.value === v)?.label || v,
+        value: v,
+      };
+    });
+  }
+
+  if (
+    isObject(value[0]) &&
+    Object.keys(value[0]).includes('token') // Array of objects, w/ label+value
+  ) {
+    return value
+      .map((v) => {
+        const item = find(choices, (c) => c.value === v.token);
+        return item
+          ? {
+              label: item.label || item.title || item.token,
+              value: v.token,
+            }
+          : {
+              // avoid a crash if choices doesn't include this item
+              label: v.label,
+              value: v.token,
+            };
+      })
+      .filter((f) => !!f);
+  }
+
+  return [];
+}
+
+function normalizeChoices(choices) {
+  if (Array.isArray(choices) && choices.length && Array.isArray(choices[0])) {
+    return choices.map((option) => ({
+      value: option[0],
+      label:
+        // Fix "None" on the serializer, to remove when fixed in p.restapi
+        option[1] !== 'None' && option[1] ? option[1] : option[0],
+    }));
+  }
+
+  return choices;
+}
+
 /**
  * ArrayWidget component class.
  * @class ArrayWidget
  * @extends Component
+ *
+ * A createable select array widget will be rendered if the named vocabulary is
+ * in the widget definition (hint) like:
+ *
+ * ```
+ * list_field_voc_unconstrained = schema.List(
+ *     title=u"List field with values from vocabulary but not constrained to them.",
+ *     description=u"zope.schema.List",
+ *     value_type=schema.TextLine(),
+ *     required=False,
+ *     missing_value=[],
+ * )
+ * directives.widget(
+ *     "list_field_voc_unconstrained",
+ *     AjaxSelectFieldWidget,
+ *     vocabulary="plone.app.vocabularies.PortalTypes",
+ * )
+ * ```
  */
 class ArrayWidget extends Component {
   /**
@@ -119,18 +188,6 @@ class ArrayWidget extends Component {
     super(props);
 
     this.handleChange = this.handleChange.bind(this);
-
-    this.state = {
-      selectedOption: this.props.vocabBaseUrl
-        ? []
-        : props.value
-        ? props.value.map((item) =>
-            isObject(item)
-              ? { label: item.title || item.token, value: item.token }
-              : { label: item, value: item },
-          )
-        : [],
-    };
   }
 
   /**
@@ -150,64 +207,8 @@ class ArrayWidget extends Component {
         subrequest: this.props.intl.locale,
       });
     }
-    this.setDefaultValues();
-  }
-
-  componentDidUpdate() {
-    this.setDefaultValues();
   }
 
-  normalizeArrayValue = (choices, value) => {
-    // Array of tokens (on add, and on change tab in Tab component)
-    if (
-      value &&
-      isArray(value) &&
-      value.length > 0 &&
-      typeof value[0] === 'string'
-    ) {
-      return value.map((v) => {
-        return {
-          label: find(choices, (c) => c.value === v)?.label || v,
-          value: v,
-        };
-      });
-    }
-    // Array of objects, containing label,value
-    if (
-      value &&
-      isArray(value) &&
-      value.length > 0 &&
-      isObject(value[0]) &&
-      Object.keys(value[0]).includes('token')
-    ) {
-      return value.map((v) => {
-        return {
-          label: find(choices, (c) => c.value === v.token).label,
-          value: v.token,
-        };
-      });
-    }
-    return null;
-  };
-
-  setDefaultValues = () => {
-    if (
-      (this.state.selectedOption || []).length === 0 &&
-      this.props.value &&
-      this.props.choices?.length > 0
-    ) {
-      const normalizedValue = this.normalizeArrayValue(
-        this.props.choices,
-        this.props.value,
-      );
-      if (normalizedValue !== null) {
-        this.setState({
-          selectedOption: normalizedValue,
-        });
-      }
-    }
-  };
-
   /**
    * Handle the field change, store it in the local state and back to simple
    * array of tokens for correct serialization
@@ -216,75 +217,56 @@ class ArrayWidget extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.setState({ selectedOption });
-
     this.props.onChange(
       this.props.id,
       selectedOption ? selectedOption.map((item) => item.value) : null,
     );
   }
 
+  onSortEnd = (selectedOption, { oldIndex, newIndex }) => {
+    const newValue = arrayMove(selectedOption, oldIndex, newIndex);
+
+    this.handleChange(newValue);
+  };
+
   /**
    * Render method.
    * @method render
    * @returns {string} Markup for the component.
    */
   render() {
-    const { selectedOption } = this.state;
+    const choices = normalizeChoices(this.props?.choices || []);
+    const selectedOption = normalizeArrayValue(choices, this.props.value);
+
     const CreatableSelect = this.props.reactSelectCreateable.default;
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      // It will be only createable if the named vocabulary is in the widget definition
-      // (hint) like:
-      // list_field_voc_unconstrained = schema.List(
-      //     title=u"List field with values from vocabulary but not constrained to them.",
-      //     description=u"zope.schema.List",
-      //     value_type=schema.TextLine(),
-      //     required=False,
-      //     missing_value=[],
-      // )
-      // directives.widget(
-      //     "list_field_voc_unconstrained",
-      //     AjaxSelectFieldWidget,
-      //     vocabulary="plone.app.vocabularies.PortalTypes",
-      // )
       this.props?.choices && !getVocabFromHint(this.props)
         ? SortableContainer(Select)
         : SortableContainer(CreatableSelect);
 
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-      const newValue = arrayMove(this.state.selectedOption, oldIndex, newIndex);
-
-      this.setState({ selectedOption: newValue });
-    };
-
     return (
       <FormFieldWrapper {...this.props}>
         <SortableSelect
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={onSortEnd}
+          onSortEnd={this.onSortEnd}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
           key={this.props.id}
-          isDisabled={this.props.isDisabled}
+          isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"
           options={
             this.props.vocabBaseUrl
-              ? this.props.choices
+              ? choices
               : this.props.choices
               ? [
-                  ...this.props.choices.map((option) => ({
-                    value: option[0],
-                    label:
-                      // Fix "None" on the serializer, to remove when fixed in p.restapi
-                      option[1] !== 'None' && option[1] ? option[1] : option[0],
-                  })),
+                  ...choices,
                   ...(this.props.noValueOption && !this.props.default
                     ? [
                         {

package/src/components/manage/Widgets/ArrayWidget.stories.jsx

@@ -1,70 +1,47 @@
 import React from 'react';
-import { ArrayWidgetComponent } from './ArrayWidget';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import ArrayWidget, { ArrayWidgetComponent } from './ArrayWidget';
+import WidgetStory from './story';
 
-const ArrayComponent = injectLazyLibs([
-  'reactSelectCreateable',
-  'reactSortableHOC',
-])(ArrayWidgetComponent);
+const choices = [
+  ['foo', 'Foo'],
+  ['bar', 'Bar'],
+  ['fooBar', 'FooBar'],
+];
 
-const Array = (args) => {
-  const [value, setValue] = React.useState(args.value ?? '');
-  const onChange = (block, value) => {
-    // args.onChange({ value });
-    setValue(value);
-  };
-
-  return (
-    <Wrapper>
-      <ArrayComponent {...args} onChange={onChange} value={value} />
-    </Wrapper>
-  );
-};
-
-export const Default = Array.bind({});
+export const Default = WidgetStory.bind({ widget: ArrayWidget });
 Default.args = {
   id: 'field-empty',
   title: 'field 1 title',
   description: 'Optional help text',
   placeholder: 'Type something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
 };
 
-export const Required = Array.bind({});
+export const Required = WidgetStory.bind({ widget: ArrayWidget });
 Required.args = {
   id: 'field-empty',
   title: 'field 1 title',
   description: 'Optional help text',
   placeholder: 'Type something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
 };
 
-export const Filled = Array.bind({});
+export const Filled = WidgetStory.bind({
+  widget: ArrayWidget,
+  props: { value: ['foo'] },
+});
 Filled.args = {
   id: 'field-filled',
   title: 'Filled field title',
   description: 'Optional help text',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
-  value: ['Foo'],
+  choices,
+  value: ['foo'],
   placeholder: 'Type something…',
   required: true,
 };
 
-export const Errored = Array.bind({});
+export const Errored = WidgetStory.bind({ widget: ArrayWidget });
 Errored.args = {
   id: 'field-errored',
   title: 'Errored field title',
@@ -81,45 +58,33 @@ Errored.args = {
   //     required=False,
   //     default=None,
   // )
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   value: ['Foo'],
   error: ['This is the error'],
   required: true,
 };
 
-export const NoPlaceholder = Array.bind({});
+export const NoPlaceholder = WidgetStory.bind({ widget: ArrayWidget });
 NoPlaceholder.args = {
   id: 'field-without-novalue',
   title: 'Field title',
   description: 'This field has no value option',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
 };
 
-export const WithoutNoValueOption = Array.bind({});
+export const WithoutNoValueOption = WidgetStory.bind({ widget: ArrayWidget });
 WithoutNoValueOption.args = {
   id: 'field-without-novalue',
   title: 'Field title',
   description: 'This field has no value option',
   placeholder: 'something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
   noValueOption: false,
 };
 
-export const VocabularyBased = Array.bind({});
+export const VocabularyBased = WidgetStory.bind({ widget: ArrayWidget });
 VocabularyBased.args = {
   id: 'field-vocab-based',
   title: 'field title',
@@ -146,7 +111,7 @@ VocabularyBased.args = {
   vocabBaseUrl: 'https://anapivocabularyURL',
 };
 
-export const Disabled = Array.bind({});
+export const Disabled = WidgetStory.bind({ widget: ArrayWidget });
 Disabled.args = {
   id: 'field-disabled',
   title: 'Disabled field title',
@@ -157,12 +122,12 @@ Disabled.args = {
 const getOptionsGenerator = (count) => {
   const options = [];
   for (let i = 0; i < count; i = i + 1) {
-    options.push([i, `Option ${i}`]);
+    options.push([i.toString(), `Option ${i}`]);
   }
   return options;
 };
 
-export const ManyOptions1000 = Array.bind({});
+export const ManyOptions1000 = WidgetStory.bind({ widget: ArrayWidget });
 ManyOptions1000.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -171,7 +136,7 @@ ManyOptions1000.args = {
   choices: getOptionsGenerator(1000),
 };
 
-export const ManyOptions500 = Array.bind({});
+export const ManyOptions500 = WidgetStory.bind({ widget: ArrayWidget });
 ManyOptions500.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -182,7 +147,7 @@ ManyOptions500.args = {
 
 export default {
   title: 'Widgets/Array',
-  component: ArrayComponent,
+  component: ArrayWidgetComponent,
   decorators: [
     (Story) => (
       <div style={{ width: '400px' }}>

package/src/components/manage/Widgets/CheckboxWidget.stories.jsx

@@ -1,28 +1,11 @@
 import React from 'react';
 import CheckboxWidget from './CheckboxWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const CheckboxWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState(false);
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <CheckboxWidget
-          {...args}
-          id="field"
-          title="Checkbox"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Checkbox = CheckboxWidgetComponent.bind({});
+export const Checkbox = WidgetStory.bind({
+  props: { id: 'field', title: 'Checkbox', block: 'block' },
+  widget: CheckboxWidget,
+});
 
 export default {
   title: 'Widgets/Checkbox',