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

package/src/components/manage/Add/Add.jsx

@@ -11,20 +11,25 @@ import { compose } from 'redux';
 import { keys, isEmpty } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { v4 as uuid } from 'uuid';
 import qs from 'query-string';
 import { toast } from 'react-toastify';
 
-import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
 import {
-  Form,
+  createContent,
+  getSchema,
+  changeLanguage,
+  setFormData,
+} from '@plone/volto/actions';
+import {
   Icon,
   Toolbar,
   Sidebar,
   Toast,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getBaseUrl,
   hasBlocksData,
@@ -34,9 +39,12 @@ import {
   getLanguageIndependentFields,
   langmap,
   toGettextLang,
+  getSimpleDefaultBlocks,
+  getDefaultBlocks,
 } from '@plone/volto/helpers';
 
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
+import { tryParseJSON } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
@@ -64,6 +72,10 @@ const messages = defineMessages({
     id: 'Translate to {lang}',
     defaultMessage: 'Translate to {lang}',
   },
+  someErrors: {
+    id: 'There are some errors.',
+    defaultMessage: 'There are some errors.',
+  },
 });
 
 /**
@@ -123,18 +135,6 @@ class Add extends Component {
     this.onCancel = this.onCancel.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
 
-    if (config.blocks?.initialBlocks[props.type]) {
-      this.initialBlocksLayout = config.blocks.initialBlocks[props.type].map(
-        (item) => uuid(),
-      );
-      this.initialBlocks = this.initialBlocksLayout.reduce(
-        (acc, value, index) => ({
-          ...acc,
-          [value]: { '@type': config.blocks.initialBlocks[props.type][index] },
-        }),
-        {},
-      );
-    }
     this.state = {
       isClient: false,
       error: null,
@@ -164,6 +164,7 @@ class Add extends Component {
       nextProps.createRequest.loaded &&
       nextProps.content['@type'] === this.props.type
     ) {
+      this.props.setFormData({});
       this.props.history.push(
         this.props.returnUrl || flattenToAppURL(nextProps.content['@id']),
       );
@@ -178,13 +179,30 @@ class Add extends Component {
         new DOMParser().parseFromString(message, 'text/html')?.all[0]
           ?.textContent || message;
 
+      const errorsList = tryParseJSON(error);
+      let erroMessage;
+      if (Array.isArray(errorsList)) {
+        const invariantErrors = errorsList
+          .filter((errorItem) => !('field' in errorItem))
+          .map((errorItem) => errorItem['message']);
+        if (invariantErrors.length > 0) {
+          // Plone invariant validation message.
+          erroMessage = invariantErrors.join(' - ');
+        } else {
+          // Error in specific field.
+          erroMessage = this.props.intl.formatMessage(messages.someErrors);
+        }
+      } else {
+        erroMessage = errorsList.error?.message || error;
+      }
+
       this.setState({ error: error });
 
       toast.error(
         <Toast
           error
           title={this.props.intl.formatMessage(messages.error)}
-          content={`${nextProps.createRequest.error.status}:  ${error}`}
+          content={erroMessage}
         />,
       );
     }
@@ -217,10 +235,13 @@ class Add extends Component {
    * @returns {undefined}
    */
   onCancel() {
+    this.props.setFormData({});
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
       const langFileName = toGettextLang(language);
-      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      import(
+        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+      ).then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });
       this.props.history.push(this.props.location?.state?.translationOf);
@@ -249,13 +270,28 @@ class Add extends Component {
         ? langmap?.[this.props.location?.state?.language]?.nativeName
         : null;
 
-      // Lookup initialBlocks and initialBlocksLayout within schema
+      // Get initial blocks from local config, if any
+      let initialBlocks, initialBlocksLayout;
+      const initialContentTypeBlocks =
+        config.blocks?.initialBlocks[this.props.type];
+      if (initialContentTypeBlocks) {
+        if (typeof initialContentTypeBlocks?.[0] === 'string') {
+          // Simple (legacy) default blocks definition
+          [initialBlocks, initialBlocksLayout] = getSimpleDefaultBlocks(
+            initialContentTypeBlocks,
+          );
+        } else {
+          [initialBlocks, initialBlocksLayout] = getDefaultBlocks(
+            initialContentTypeBlocks,
+          );
+        }
+      }
+
+      // Lookup initialBlocks and initialBlocksLayout within schema, if any
       const schemaBlocks =
         this.props.schema.properties[blocksFieldname]?.default;
       const schemaBlocksLayout =
         this.props.schema.properties[blocksLayoutFieldname]?.default?.items;
-      let initialBlocks = this.initialBlocks;
-      let initialBlocksLayout = this.initialBlocksLayout;
 
       if (!isEmpty(schemaBlocksLayout) && !isEmpty(schemaBlocks)) {
         initialBlocks = {};
@@ -272,6 +308,7 @@ class Add extends Component {
           }
         });
       }
+
       //copy blocks from translationObject
       if (translationObject && blocksFieldname && blocksLayoutFieldname) {
         initialBlocks = {};
@@ -315,6 +352,9 @@ class Add extends Component {
           <Form
             ref={this.form}
             key="translated-or-new-content-form"
+            navRoot={
+              this.props.content?.['@components']?.navroot?.navroot || {}
+            }
             schema={this.props.schema}
             type={this.props.type}
             formData={{
@@ -334,6 +374,9 @@ class Add extends Component {
               // Copy the Language Independent Fields values from the to-be translated content
               // into the default values of the translated content Add form.
               ...lifData(),
+              parent: {
+                '@id': this.props.content?.['@id'] || '',
+              },
             }}
             requestError={this.state.error}
             onSubmit={this.onSubmit}
@@ -352,9 +395,14 @@ class Add extends Component {
             onSelectForm={() => {
               this.setState({ formSelected: 'addForm' });
             }}
+            global
+            // Properties to pass to the BlocksForm to match the View ones
+            history={this.props.history}
+            location={this.props.location}
+            token={this.props.token}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -387,14 +435,12 @@ class Add extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
-          {visual && this.state.isClient && (
-            <Portal node={document.getElementById('sidebar')}>
-              <Sidebar />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
+          {visual &&
+            this.state.isClient &&
+            createPortal(<Sidebar />, document.getElementById('sidebar'))}
         </div>
       );
 
@@ -457,7 +503,7 @@ export default compose(
       returnUrl: qs.parse(props.location.search).return_url,
       type: qs.parse(props.location.search).type,
     }),
-    { createContent, getSchema, changeLanguage },
+    { createContent, getSchema, changeLanguage, setFormData },
   ),
   preloadLazyLibs('cms'),
 )(Add);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
@@ -16,9 +16,8 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
 describe('Add', () => {
@@ -39,13 +38,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component', () => {
@@ -67,13 +65,13 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component with schema', () => {
@@ -106,12 +104,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Aliases/Aliases.jsx

@@ -8,7 +8,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -20,7 +20,12 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
+import {
+  removeAliases,
+  addAliases,
+  getAliases,
+  getContent,
+} from '@plone/volto/actions';
 
 import { Icon, Toolbar } from '@plone/volto/components';
 
@@ -96,6 +101,7 @@ class Aliases extends Component {
       datetime: '',
       batchSize: '',
     });
+    this.props.getContent(getBaseUrl(this.props.pathname));
     this.setState({ isClient: true });
   }
 
@@ -317,8 +323,8 @@ class Aliases extends Component {
             </Segment>
           </Form>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -335,9 +341,9 @@ class Aliases extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }
@@ -351,6 +357,6 @@ export default compose(
       pathname: props.location.pathname,
       title: state.content.data?.title || '',
     }),
-    { addAliases, getAliases, removeAliases },
+    { addAliases, getAliases, removeAliases, getContent },
   ),
 )(Aliases);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,8 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
 
 describe('Aliases', () => {
@@ -45,12 +44,13 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Aliases location={{ pathname: '/blog/aliases' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -23,6 +23,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
 
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { withRouter } from 'react-router';
@@ -34,6 +35,18 @@ const messages = defineMessages({
     id: 'Enter URL or select an item',
     defaultMessage: 'Enter URL or select an item',
   },
+  clear: {
+    id: 'Clear',
+    defaultMessage: 'Clear',
+  },
+  openObjectBrowser: {
+    id: 'Open object browser',
+    defaultMessage: 'Open object browser',
+  },
+  submit: {
+    id: 'Submit',
+    defaultMessage: 'Submit',
+  },
 });
 
 /**
@@ -51,6 +64,7 @@ class AddLinkForm extends Component {
   };
 
   static defaultProps = {
+    objectBrowserPickerType: 'link',
     placeholder: 'Enter URL or select an item',
   };
 
@@ -228,88 +242,80 @@ class AddLinkForm extends Component {
 
     return (
       <div className="link-form-container" ref={this.linkFormContainer}>
-        <div
-          style={{ marginLeft: '5px', display: 'flex', alignItems: 'center' }}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 36 36"
-            fill="#B8B2C8"
-          >
-            <g fillRule="evenodd">
-              <path d="M27.1318,7.333 C24.4028,4.604 19.9618,4.604 17.2328,7.333 L12.9898,11.576 C11.8428,12.723 11.1288,14.248 10.9778,15.871 C10.8228,17.541 11.2708,19.211 12.2378,20.576 C12.4818,20.919 12.7278,21.213 12.9888,21.475 C13.7848,22.271 14.7778,22.868 15.8608,23.202 C16.5498,23.415 17.2548,23.519 17.9518,23.518 C19.7808,23.518 21.5598,22.804 22.8888,21.475 L23.9498,20.414 L22.5358,19 L21.4748,20.061 C20.1648,21.371 18.2388,21.842 16.4498,21.291 C15.6668,21.049 14.9778,20.635 14.4038,20.061 C14.2218,19.879 14.0478,19.668 13.8698,19.418 C13.1778,18.443 12.8588,17.249 12.9688,16.056 C13.0768,14.896 13.5868,13.808 14.4038,12.99 L18.6468,8.747 C20.5958,6.798 23.7688,6.798 25.7178,8.747 C26.6568,9.687 27.1748,10.942 27.1748,12.283 C27.1748,13.623 26.6568,14.878 25.7178,15.818 L27.1318,17.232 C28.4488,15.915 29.1748,14.157 29.1748,12.283 C29.1748,10.408 28.4488,8.65 27.1318,7.333" />
-              <path d="M25.0107,16.5254 C24.2147,15.7294 23.2217,15.1324 22.1387,14.7984 C19.6417,14.0284 16.9477,14.6894 15.1107,16.5254 L14.0507,17.5864 L15.4647,19.0004 L16.5247,17.9394 C17.8357,16.6294 19.7587,16.1554 21.5497,16.7094 C22.3337,16.9514 23.0217,17.3644 23.5957,17.9394 C23.7777,18.1214 23.9527,18.3314 24.1307,18.5824 C24.8217,19.5564 25.1417,20.7514 25.0317,21.9444 C24.9237,23.1034 24.4137,24.1924 23.5957,25.0104 L19.3537,29.2534 C17.4047,31.2024 14.2317,31.2024 12.2817,29.2534 C11.3427,28.3134 10.8247,27.0574 10.8247,25.7174 C10.8247,24.3774 11.3427,23.1214 12.2817,22.1824 L10.8677,20.7684 C9.5507,22.0854 8.8247,23.8424 8.8247,25.7174 C8.8247,27.5924 9.5507,29.3504 10.8677,30.6674 C12.2327,32.0314 14.0257,32.7134 15.8177,32.7134 C17.6107,32.7134 19.4027,32.0314 20.7677,30.6674 L25.0107,26.4244 C26.1567,25.2774 26.8717,23.7524 27.0227,22.1294 C27.1777,20.4594 26.7297,18.7894 25.7617,17.4244 C25.5177,17.0814 25.2717,16.7874 25.0107,16.5254" />
-            </g>
-          </svg>
-          <Form.Field inline>
-            <div className="wrapper">
-              <Input
-                className={className}
-                id={`field-link`}
-                name="link"
-                value={value || ''}
-                onChange={({ target }) => this.onChange(target.value)}
-                placeholder={this.props.intl.formatMessage(
-                  messages.placeholder,
-                )}
-                onKeyDown={this.onKeyDown}
-                ref={this.onRef}
-              />
-              {value.length > 0 ? (
-                <Button.Group>
-                  <Button
-                    basic
-                    className="cancel"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.clear();
-                    }}
-                  >
-                    <Icon name={clearSVG} size="24px" />
-                  </Button>
-                </Button.Group>
-              ) : (
-                <Button.Group>
-                  <Button
-                    basic
-                    icon
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.props.openObjectBrowser({
-                        mode: 'link',
-                        overlay: true,
-                        onSelectItem: (url) => {
-                          this.onChange(url);
-                          this.onSubmit();
-                        },
-                      });
-                    }}
-                  >
-                    <Icon name={navTreeSVG} size="24px" />
-                  </Button>
-                </Button.Group>
-              )}
+        <Icon name={linkSVG} color="#B8B2C8" size="20px" />
+        <Form.Field inline>
+          <div className="wrapper">
+            <Input
+              className={className}
+              name="link"
+              value={value || ''}
+              onChange={({ target }) => this.onChange(target.value)}
+              placeholder={
+                this.props.placeholder ||
+                this.props.intl.formatMessage(messages.placeholder)
+              }
+              onKeyDown={this.onKeyDown}
+              ref={this.onRef}
+            />
+            {value.length > 0 ? (
+              <Button.Group>
+                <Button
+                  basic
+                  className="cancel"
+                  aria-label={this.props.intl.formatMessage(messages.clear)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.clear();
+                    this.input.focus();
+                  }}
+                >
+                  <Icon name={clearSVG} size="24px" />
+                </Button>
+              </Button.Group>
+            ) : this.props.objectBrowserPickerType === 'link' ? (
               <Button.Group>
                 <Button
                   basic
-                  primary
-                  disabled={!value.length > 0}
+                  icon
+                  aria-label={this.props.intl.formatMessage(
+                    messages.openObjectBrowser,
+                  )}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    this.onSubmit();
+                    this.props.openObjectBrowser({
+                      mode: this.props.objectBrowserPickerType,
+                      overlay: true,
+                      onSelectItem: (url) => {
+                        this.onChange(url);
+                        this.onSubmit();
+                      },
+                    });
                   }}
                 >
-                  <Icon name={aheadSVG} size="24px" />
+                  <Icon name={navTreeSVG} size="24px" />
                 </Button>
               </Button.Group>
-            </div>
-          </Form.Field>
-        </div>
+            ) : null}
+
+            <Button.Group>
+              <Button
+                basic
+                primary
+                disabled={!value.length > 0}
+                aria-label={this.props.intl.formatMessage(messages.submit)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  this.onSubmit();
+                }}
+              >
+                <Icon name={aheadSVG} size="24px" />
+              </Button>
+            </Button.Group>
+          </div>
+        </Form.Field>
       </div>
     );
   }

package/src/components/manage/AnchorPlugin/useLinkEditor.jsx

@@ -0,0 +1,79 @@
+/***
+ * A hook that makes it easy to use the AddLinkForm link editing component.
+ *
+ * To use it, in your component, do something like:
+ *
+ * const linkEditor = useLinkEditor();
+ *
+ * return (<>
+ * <button ref={linkEditor.anchorNode} onClick={() => linkEditor.show()}>btn</button>
+ * {linkEditor.anchorNode && <linkEditor.LinkEditor value={value} id={id} onChange={onChange} />}
+ * </>);
+ *
+ */
+
+import React from 'react';
+import { PositionedToolbar } from '@plone/volto-slate/editor/ui';
+import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
+
+function getPositionStyle(position) {
+  return (
+    position || {
+      style: {
+        opacity: 1,
+        top: -5,
+        left: 55,
+      },
+    }
+  );
+}
+
+const useLinkEditor = () => {
+  const [showLinkEditor, setShowLinkEditor] = React.useState(false);
+  const show = React.useCallback(() => setShowLinkEditor(true), []);
+  const anchorNode = React.useRef();
+
+  const LinkEditor = React.useCallback(
+    (props) => {
+      const {
+        id,
+        value,
+        onChange,
+        placeholder,
+        objectBrowserPickerType,
+        position,
+      } = props;
+      return showLinkEditor && anchorNode.current ? (
+        <PositionedToolbar
+          className="add-link"
+          toggleButton={anchorNode.current}
+          position={getPositionStyle(position)}
+        >
+          <AddLinkForm
+            placeholder={placeholder}
+            data={{ url: value || '' }}
+            theme={{}}
+            objectBrowserPickerType={objectBrowserPickerType}
+            onChangeValue={(url) => {
+              setShowLinkEditor(false);
+              onChange(id, url);
+            }}
+            onClear={() => {}}
+            onOverrideContent={(c) => {
+              setShowLinkEditor(false);
+            }}
+          />
+        </PositionedToolbar>
+      ) : null;
+    },
+    [showLinkEditor],
+  );
+
+  return {
+    anchorNode,
+    show,
+    LinkEditor,
+  };
+};
+
+export default useLinkEditor;

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -31,6 +31,8 @@ const BlockChooser = ({
   blocksConfig = config.blocks.blocksConfig,
   blockChooserRef,
   properties = {},
+  navRoot,
+  contentType,
 }) => {
   const intl = useIntl();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
@@ -55,7 +57,7 @@ const BlockChooser = ({
         // depending on this function, given properties (current present blocks) and the
         // block being evaluated
         return typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
+          ? !item.restricted({ properties, block: item, navRoot, contentType })
           : !item.restricted;
       }
     }