@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,178 +31,156 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component class.
- * @class FormFieldWrapper
- * @extends Component
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
  */
-class FormFieldWrapper extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    wrapped: PropTypes.bool,
-    columns: PropTypes.number,
-    draggable: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    onEdit: PropTypes.func,
-    className: PropTypes.string,
-    onDelete: PropTypes.func,
-    intl: PropTypes.object,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    wrapped: true,
-    columns: 2,
-    onDelete: null,
-    intl: null,
-    isDisabled: null,
-    draggable: null,
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      title,
-      description,
-      fieldSet,
-      required,
-      error,
-      wrapped,
-      columns,
-      draggable,
-      onEdit,
-      className,
-      isDisabled,
-      onDelete,
-      intl,
-      noForInFieldLabel,
-      multilingual_options,
-    } = this.props;
-
-    const languageIndependent = multilingual_options?.language_independent;
+const FormFieldWrapper = ({
+  id,
+  title,
+  description = null,
+  fieldSet,
+  required = false,
+  error = [],
+  wrapped = true,
+  columns = 2,
+  draggable = null,
+  onEdit,
+  className,
+  isDisabled = null,
+  onDelete = null,
+  noForInFieldLabel,
+  multilingual_options,
+  children,
+}) => {
+  const intl = useIntl();
+  const languageIndependent = multilingual_options?.language_independent;
 
-    const wdg = (
-      <>
-        {this.props.children}
+  const wdg = (
+    <>
+      {children}
 
-        {map(error, (message) => (
-          <Label key={message} basic color="red" className="form-error-label">
-            {message}
-          </Label>
-        ))}
-      </>
-    );
+      {map(error, (message) => (
+        <Label key={message} basic color="red" className="form-error-label">
+          {message}
+        </Label>
+      ))}
+    </>
+  );
 
-    return wrapped ? (
-      <Form.Field
-        inline
-        required={required}
-        error={error && error.length > 0}
-        className={cx(
-          description ? 'help' : '',
-          className,
-          `field-wrapper-${id}`,
-          languageIndependent ? 'language-independent-field' : null,
-        )}
-      >
-        <Grid>
-          <Grid.Row stretched>
-            {columns === 2 && (
-              <Grid.Column width="4">
-                <div className="wrapper">
-                  <label
-                    id={`fieldset-${fieldSet}-field-label-${id}`}
-                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                  >
-                    {draggable && onEdit && (
-                      <i
-                        aria-hidden="true"
-                        className="grey bars icon drag handle"
+  return wrapped ? (
+    <Form.Field
+      inline
+      required={required}
+      error={error && error.length > 0}
+      className={cx(
+        description ? 'help' : '',
+        className,
+        `field-wrapper-${id}`,
+        languageIndependent ? 'language-independent-field' : null,
+      )}
+    >
+      <Grid>
+        <Grid.Row stretched>
+          {columns === 2 && (
+            <Grid.Column width="4">
+              <div className="wrapper">
+                <label
+                  id={`fieldset-${fieldSet}-field-label-${id}`}
+                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                >
+                  {draggable && onEdit && (
+                    <i
+                      aria-hidden="true"
+                      className="grey bars icon drag handle"
+                    />
+                  )}
+                  {title}
+                  {languageIndependent && (
+                    <div className="languageIndependent-icon">
+                      <Icon
+                        title={intl.formatMessage(
+                          messages.language_independent_icon_title,
+                        )}
+                        name={LanguageSVG}
+                        size="24px"
+                        color="#555"
                       />
-                    )}
-                    {title}
-                    {languageIndependent && (
-                      <div className="languageIndependent-icon">
-                        <Icon
-                          title={intl.formatMessage(
-                            messages.language_independent_icon_title,
-                          )}
-                          name={LanguageSVG}
-                          size="24px"
-                          color="#555"
-                        />
-                      </div>
-                    )}
-                  </label>
-                </div>
-              </Grid.Column>
+                    </div>
+                  )}
+                </label>
+              </div>
+            </Grid.Column>
+          )}
+          <Grid.Column width={columns === 2 ? 8 : 12}>
+            {onEdit && !isDisabled && (
+              <div className="toolbar" style={{ zIndex: '2' }}>
+                <button
+                  aria-label={intl.formatMessage(messages.edit)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onEdit(id);
+                  }}
+                >
+                  <IconOld name="write square" size="large" color="blue" />
+                </button>
+                <button
+                  aria-label={intl.formatMessage(messages.delete)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onDelete(id);
+                  }}
+                >
+                  <IconOld name="close" size="large" color="red" />
+                </button>
+              </div>
             )}
-            <Grid.Column width={columns === 2 ? 8 : 12}>
-              {onEdit && !isDisabled && (
-                <div className="toolbar" style={{ zIndex: '2' }}>
-                  <button
-                    aria-label={intl.formatMessage(messages.edit)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onEdit(id);
-                    }}
-                  >
-                    <IconOld name="write square" size="large" color="blue" />
-                  </button>
-                  <button
-                    aria-label={intl.formatMessage(messages.delete)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onDelete(id);
-                    }}
-                  >
-                    <IconOld name="close" size="large" color="red" />
-                  </button>
-                </div>
-              )}
-              {wdg}
+            {wdg}
+          </Grid.Column>
+        </Grid.Row>
+        {description && (
+          <Grid.Row stretched>
+            <Grid.Column stretched width="12">
+              <p className="help">
+                {multilingual_options
+                  ? `${intl.formatMessage(messages.language_independent)} `
+                  : null}
+                {description}
+              </p>
             </Grid.Column>
           </Grid.Row>
-          {description && (
-            <Grid.Row stretched>
-              <Grid.Column stretched width="12">
-                <p className="help">
-                  {this.props.multilingual_options
-                    ? `${intl.formatMessage(messages.language_independent)} `
-                    : null}
-                  {description}
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          )}
-        </Grid>
-      </Form.Field>
-    ) : (
-      <>{wdg}</>
-    );
-  }
-}
+        )}
+      </Grid>
+    </Form.Field>
+  ) : (
+    <>{wdg}</>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ */
+FormFieldWrapper.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  wrapped: PropTypes.bool,
+  columns: PropTypes.number,
+  draggable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func,
+  className: PropTypes.string,
+  onDelete: PropTypes.func,
+  fieldSet: PropTypes.string,
+  noForInFieldLabel: PropTypes.bool,
+  multilingual_options: PropTypes.object,
+  children: PropTypes.node,
+};
 
-export default injectIntl(FormFieldWrapper);
+export default FormFieldWrapper;

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import loadable from '@loadable/component';
 import { connect } from 'react-redux';
@@ -9,11 +9,15 @@ import { compose } from 'redux';
 import { toast } from 'react-toastify';
 import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import config from '@plone/volto/registry';
 
 import {
   flattenToAppURL,
   getBaseUrl,
+  getParentUrl,
   isInternalURL,
+  normalizeUrl,
+  removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
@@ -28,6 +32,9 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
+import Image from '../../theme/Image/Image';
+import { urlValidator } from '@plone/volto/helpers/FormValidation/validators';
+import { searchContent } from '@plone/volto/actions/search/search';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -70,6 +77,14 @@ const messages = defineMessages({
     id: 'imageUploadErrorMessage',
     defaultMessage: 'Please upload an image instead.',
   },
+  externalURLsNotAllowed: {
+    id: 'externalURLsNotAllowed',
+    defaultMessage: 'External URLs are not allowed in this field.',
+  },
+  internalImageNotFoundErrorMessage: {
+    id: 'internalImageNotFoundErrorMessage',
+    defaultMessage: 'No image was found in the internal path you provided.',
+  },
 });
 
 const UnconnectedImageInput = (props) => {
@@ -89,12 +104,15 @@ const UnconnectedImageInput = (props) => {
     placeholderLinkInput = '',
     onSelectItem,
   } = props;
-  const imageValue = value?.[0]?.['@id'] || value;
+  const imageValue = value?.[0]?.['@id'] || value?.['@id'] || value;
 
   const intl = useIntl();
   const linkEditor = useLinkEditor();
   const location = useLocation();
   const dispatch = useDispatch();
+  const isFolderish = useSelector(
+    (state) => state?.content?.data?.is_folderish,
+  );
   const contextUrl = location.pathname;
 
   const [uploading, setUploading] = React.useState(false);
@@ -109,21 +127,41 @@ const UnconnectedImageInput = (props) => {
   const imageId = content?.['@id'];
   const image = content?.image;
   let loading = false;
+  const isRelationChoice = props.factory === 'Relation Choice';
 
   useEffect(() => {
     if (uploading && loading && loaded) {
       setUploading(false);
-      onChange(id, imageId, {
-        image_field: 'image',
-        image_scales: { image: [image] },
-      });
+      if (isRelationChoice) {
+        onChange(id, content, {
+          image_field: 'image',
+          image_scales: { image: [image] },
+        });
+      } else {
+        onChange(id, imageId, {
+          image_field: 'image',
+          image_scales: { image: [image] },
+        });
+      }
     }
-  }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
+  }, [
+    loading,
+    loaded,
+    uploading,
+    imageId,
+    image,
+    id,
+    content,
+    isRelationChoice,
+    onChange,
+  ]);
 
   loading = usePrevious(props.request?.loading);
 
   const handleUpload = React.useCallback(
     (eventOrFile) => {
+      let uploadUrl = getBaseUrl(contextUrl);
+      if (!isFolderish) uploadUrl = getParentUrl(uploadUrl);
       if (restrictFileUpload === true) return;
       eventOrFile.target && eventOrFile.stopPropagation();
 
@@ -139,7 +177,7 @@ const UnconnectedImageInput = (props) => {
         const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
         dispatch(
           createContent(
-            getBaseUrl(contextUrl),
+            uploadUrl,
             {
               '@type': 'Image',
               title: file.name,
@@ -156,11 +194,12 @@ const UnconnectedImageInput = (props) => {
       });
     },
     [
+      contextUrl,
+      isFolderish,
       restrictFileUpload,
       intl.formatMessage,
       dispatch,
-      props,
-      contextUrl,
+      props.block,
       requestId,
     ],
   );
@@ -170,6 +209,83 @@ const UnconnectedImageInput = (props) => {
   }, [restrictFileUpload]);
   const onDragLeave = React.useCallback(() => setDragging(false), []);
 
+  const validateManualLink = React.useCallback(
+    (url) => {
+      if (!url.startsWith('/')) {
+        const error = urlValidator({
+          value: url,
+          formatMessage: intl.formatMessage,
+        });
+        // if (error && url !== '') {
+        //   this.setState({ errors: [error] });
+        // } else {
+        //   this.setState({ errors: [] });
+        // }
+        return !Boolean(error);
+      } else {
+        return isInternalURL(url);
+      }
+    },
+    [intl.formatMessage],
+  );
+
+  const onSubmitURL = React.useCallback(
+    (url) => {
+      if (validateManualLink(url)) {
+        if (isInternalURL(url)) {
+          // convert it into an internal on if possible
+          props
+            .searchContent(
+              '/',
+              {
+                portal_type: config.settings.imageObjects,
+                'path.query': flattenToAppURL(url),
+                'path.depth': '0',
+                sort_on: 'getObjPositionInParent',
+                metadata_fields: '_all',
+                b_size: 1000,
+              },
+              `${props.block}-${props.mode}`,
+            )
+            .then((resp) => {
+              if (resp.items?.length > 0) {
+                onChange(props.id, resp.items[0], {});
+              } else {
+                toast.error(
+                  <Toast
+                    error
+                    title={intl.formatMessage(messages.Error)}
+                    content={intl.formatMessage(
+                      messages.internalImageNotFoundErrorMessage,
+                    )}
+                  />,
+                );
+              }
+            });
+        } else {
+          if (isRelationChoice) {
+            toast.error(
+              <Toast
+                error
+                title={intl.formatMessage(messages.Error)}
+                content={intl.formatMessage(messages.imageUploadErrorMessage)}
+              />,
+            );
+          } else {
+            // if it's an external link, we save it as is
+            onChange(props.id, [
+              {
+                '@id': normalizeUrl(url),
+                title: removeProtocol(url),
+              },
+            ]);
+          }
+        }
+      }
+    },
+    [validateManualLink, props, intl, isRelationChoice, onChange],
+  );
+
   return imageValue ? (
     <div
       className="image-upload-widget-image"
@@ -178,15 +294,26 @@ const UnconnectedImageInput = (props) => {
       role="toolbar"
     >
       {selected && <ImageToolbar {...props} />}
-      <img
-        className={props.className}
-        src={
-          isInternalURL(imageValue)
-            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
-            : imageValue
-        }
-        alt=""
-      />
+      {/* If it's relation choice (preview_image_link) */}
+      {isRelationChoice ? (
+        <Image
+          item={value}
+          width="fit-content"
+          height="auto"
+          loading="lazy"
+          sizes="320px"
+        />
+      ) : (
+        <Image
+          className={props.className}
+          src={
+            isInternalURL(imageValue)
+              ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+              : imageValue
+          }
+          alt=""
+        />
+      )}
     </div>
   ) : (
     <div
@@ -227,7 +354,7 @@ const UnconnectedImageInput = (props) => {
                   </Loader>
                 </Dimmer>
               )}
-              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <Image src={imageBlockSVG} alt="" className="placeholder" />
               <p>{description || intl.formatMessage(messages.addImage)}</p>
               <div className="toolbar-wrapper">
                 <div className="toolbar-inner" ref={linkEditor.anchorNode}>
@@ -242,15 +369,24 @@ const UnconnectedImageInput = (props) => {
                           e.preventDefault();
                           openObjectBrowser({
                             mode: objectBrowserPickerType,
-                            onSelectItem: onSelectItem
-                              ? onSelectItem
-                              : (url, { title, image_field, image_scales }) => {
-                                  onChange(props.id, flattenToAppURL(url), {
-                                    title,
-                                    image_field,
-                                    image_scales,
-                                  });
-                                },
+                            onSelectItem: isRelationChoice
+                              ? (url, item) => {
+                                  // we save the whole item if it's a relation choice
+                                  onChange(props.id, item);
+                                }
+                              : onSelectItem
+                                ? onSelectItem
+                                : // else we save the url along with the image field and scales
+                                  (
+                                    url,
+                                    { title, image_field, image_scales },
+                                  ) => {
+                                    onChange(props.id, flattenToAppURL(url), {
+                                      title,
+                                      image_field,
+                                      image_scales,
+                                    });
+                                  },
                             currentPath: contextUrl,
                           });
                         }}
@@ -311,13 +447,14 @@ const UnconnectedImageInput = (props) => {
                       intl.formatMessage(messages.linkAnImage)
                     }
                     objectBrowserPickerType={objectBrowserPickerType}
-                    onChange={(_, e) =>
-                      onChange(
-                        props.id,
-                        isInternalURL(e) ? flattenToAppURL(e) : e,
-                        {},
-                      )
-                    }
+                    onChange={(_, e) => {
+                      onSubmitURL(e);
+                      // onChange(
+                      //   props.id,
+                      //   isInternalURL(e) ? flattenToAppURL(e) : e,
+                      //   {},
+                      // );
+                    }}
                     id={id}
                   />
                 )}
@@ -331,6 +468,8 @@ const UnconnectedImageInput = (props) => {
 };
 
 export const ImageInput = compose(
+  // This HOC goes first because it injects block in case that it's not present (not a block, but a DX field)
+  withObjectBrowser,
   connect(
     (state, ownProps) => {
       const requestId = `image-upload-${ownProps.id}`;
@@ -339,9 +478,9 @@ export const ImageInput = compose(
         content: state.content.subrequests[ownProps.block || requestId]?.data,
       };
     },
-    { createContent },
+    { createContent, searchContent },
   ),
-)(withObjectBrowser(UnconnectedImageInput));
+)(UnconnectedImageInput);
 
 const ImageUploadWidget = (props) => {
   const { fieldSet, id, title } = props;