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

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

@@ -9,11 +9,14 @@ 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,
   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 +31,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 +76,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,7 +103,7 @@ 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();
@@ -109,16 +123,34 @@ 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);
 
@@ -170,6 +202,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 +287,20 @@ 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" />
+      ) : (
+        <img
+          className={props.className}
+          src={
+            isInternalURL(imageValue)
+              ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+              : imageValue
+          }
+          alt=""
+        />
+      )}
     </div>
   ) : (
     <div
@@ -242,15 +356,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 +434,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 +455,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 +465,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;

package/src/components/manage/Widgets/RegistryImageWidget.test.jsx

@@ -82,10 +82,11 @@ describe('RegistryImageWidget', () => {
         const dropzone = container.querySelector('.file-widget-dropzone');
         const preview = container.querySelector('.image-preview');
         const filename = container.querySelector('.field-file-name');
+        const img = container.querySelector('img[src*="logo"]');
 
-        return dropzone && preview && filename;
+        return dropzone && preview && filename && img && img.complete;
       },
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     expect(container).toMatchSnapshot();

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

@@ -105,6 +105,7 @@ class SelectAutoComplete extends Component {
     error: [],
     choices: [],
     value: null,
+    isMulti: true,
   };
 
   /**
@@ -127,10 +128,16 @@ class SelectAutoComplete extends Component {
   componentDidMount() {
     const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
-      const tokensQuery = convertValueToVocabQuery(
-        normalizeValue(choices, value, this.props.intl),
-      );
-
+      let tokensQuery;
+      if (typeof value === 'string') {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, [value], this.props.intl),
+        );
+      } else {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, value, this.props.intl),
+        );
+      }
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
         subrequest: `widget-${id}-${lang}`,
@@ -160,13 +167,22 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
-      selectedOption ? selectedOption.map((item) => item.value) : null,
-    );
-    this.setState((state) => ({
-      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
-    }));
+    if (!Array.isArray(selectedOption)) {
+      this.props.onChange(this.props.id, selectedOption?.value || null);
+      if (selectedOption) {
+        this.setState((state) => ({
+          termsPairsCache: [...state.termsPairsCache, selectedOption],
+        }));
+      }
+    } else {
+      this.props.onChange(
+        this.props.id,
+        selectedOption ? selectedOption.map((item) => item.value) : null,
+      );
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+      }));
+    }
   }
 
   timeoutRef = React.createRef();
@@ -251,7 +267,8 @@ class SelectAutoComplete extends Component {
             this.props.intl.formatMessage(messages.select)
           }
           onChange={this.handleChange}
-          isMulti
+          isMulti={this.props.isMulti}
+          isClearable={!this.props.isMulti}
         />
       </FormFieldWrapper>
     );

package/src/config/ControlPanels.js

@@ -77,6 +77,7 @@ export const unwantedControlPanelsFields = {
     'exposeDCMetaTags',
     'enable_sitemap',
     'webstats_js',
+    'webstats_head_js',
   ],
   editing: ['available_editors', 'default_editor', 'ext_editor'],
   imaging: [

package/src/config/index.js

@@ -141,7 +141,7 @@ let config = {
     serverConfig,
     storeExtenders: [],
     showTags: true,
-    showRelatedItems: false,
+    showRelatedItems: true,
     controlpanels: [],
     controlPanelsIcons,
     filterControlPanels,

package/src/express-middleware/devproxy.js

@@ -10,8 +10,13 @@ import querystring from 'querystring';
 import { parse as parseUrl } from 'url';
 
 const filter = function (pathname, req) {
-  // This is the proxy to the API in case the accept header is 'application/json'
-  return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+  // Check if pathname is defined, there are some corner cases that pathname is null
+  if (pathname) {
+    // This is the proxy to the API in case the accept header is 'application/json'
+    return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+  } else {
+    return false;
+  }
 };
 
 let _env = null;

package/src/helpers/Html/Html.jsx

@@ -11,6 +11,7 @@ import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
+import { bulkFlattenToAppURL } from '../Url/bulkFlattenToAppURL';
 
 const CRITICAL_CSS_TEMPLATE = `function alter() {
   document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
@@ -189,7 +190,14 @@ class Html extends Component {
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(
-                loadReducers(store.getState()),
+                loadReducers({
+                  ...store.getState(),
+                  // Flatten the content URLs in initial request in SSR
+                  // it normalizes the URLs in case the INTERNAL_API_PATH is set
+                  // and prevents unwanted leaks of INTERNAL_API_PATH in the client
+                  // (only in the first request)
+                  content: bulkFlattenToAppURL(store.getState().content),
+                }),
               )};`,
             }}
             charSet="UTF-8"

package/src/helpers/Url/bulkFlattenToAppURL.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import config from '@plone/registry';
+import { bulkFlattenToAppURL } from './bulkFlattenToAppURL';
+
+const API_PATH = 'http://example.com/api';
+const INTERNAL_API_PATH = 'http://backend/api';
+
+describe('bulkFlattenToAppURL', () => {
+  afterEach(() => {
+    config.settings = {};
+  });
+
+  it('should flatten URLs correctly with API_PATH', () => {
+    config.settings.apiPath = API_PATH;
+
+    const input = {
+      '@id': `${API_PATH}/path/to/resource`,
+      anotherField: `${API_PATH}/another/path`,
+      nested: {
+        '@id': `${API_PATH}/nested/resource`,
+        anotherNestedField: `${API_PATH}/nested/another/path`,
+      },
+      arrayField: [
+        {
+          '@id': `${API_PATH}/array/resource/1`,
+          anotherArrayField: `${API_PATH}/array/another/path/1`,
+        },
+        {
+          '@id': `${API_PATH}/array/resource/2`,
+          anotherArrayField: `${API_PATH}/array/another/path/2`,
+        },
+      ],
+      stringField: 'This is a string',
+      numberField: 42,
+      booleanField: true,
+      nullField: null,
+      undefinedField: undefined,
+    };
+
+    const expectedOutput = {
+      '@id': '/path/to/resource',
+      anotherField: '/another/path',
+      nested: {
+        '@id': '/nested/resource',
+        anotherNestedField: '/nested/another/path',
+      },
+      arrayField: [
+        {
+          '@id': '/array/resource/1',
+          anotherArrayField: '/array/another/path/1',
+        },
+        {
+          '@id': '/array/resource/2',
+          anotherArrayField: '/array/another/path/2',
+        },
+      ],
+      stringField: 'This is a string',
+      numberField: 42,
+      booleanField: true,
+      nullField: null,
+      undefinedField: undefined,
+    };
+
+    const result = bulkFlattenToAppURL(input as any);
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it('should flatten URLs correctly with INTERNAL_API_PATH', () => {
+    config.settings.internalApiPath = INTERNAL_API_PATH;
+
+    const input = {
+      '@id': `${INTERNAL_API_PATH}/path/to/resource`,
+      anotherField: `${INTERNAL_API_PATH}/another/path`,
+      nested: {
+        '@id': `${INTERNAL_API_PATH}/nested/resource`,
+        anotherNestedField: `${INTERNAL_API_PATH}/nested/another/path`,
+      },
+      arrayField: [
+        {
+          '@id': `${INTERNAL_API_PATH}/array/resource/1`,
+          anotherArrayField: `${INTERNAL_API_PATH}/array/another/path/1`,
+        },
+        {
+          '@id': `${INTERNAL_API_PATH}/array/resource/2`,
+          anotherArrayField: `${INTERNAL_API_PATH}/array/another/path/2`,
+        },
+      ],
+      stringField: 'This is a string',
+      numberField: 42,
+      booleanField: true,
+      nullField: null,
+      undefinedField: undefined,
+    };
+
+    const expectedOutput = {
+      '@id': '/path/to/resource',
+      anotherField: '/another/path',
+      nested: {
+        '@id': '/nested/resource',
+        anotherNestedField: '/nested/another/path',
+      },
+      arrayField: [
+        {
+          '@id': '/array/resource/1',
+          anotherArrayField: '/array/another/path/1',
+        },
+        {
+          '@id': '/array/resource/2',
+          anotherArrayField: '/array/another/path/2',
+        },
+      ],
+      stringField: 'This is a string',
+      numberField: 42,
+      booleanField: true,
+      nullField: null,
+      undefinedField: undefined,
+    };
+
+    const result = bulkFlattenToAppURL(input as any);
+    expect(result).toEqual(expectedOutput);
+  });
+});

package/src/helpers/Url/bulkFlattenToAppURL.ts

@@ -0,0 +1,24 @@
+import config from '@plone/registry';
+
+/**
+ * The definitive flattenToAppURL function
+ * Flattens all the URLs in the response to the current app URL (or internalApiPath if set).
+ */
+export function bulkFlattenToAppURL<T>(data: T) {
+  // Convert data to string to perform replacements
+  let stringData = JSON.stringify(data);
+
+  // Replace all occurrences of backend URLs
+  stringData = stringData.replaceAll(`${config.settings.apiPath}/`, '/');
+  stringData = stringData.replaceAll(config.settings.apiPath, '/');
+  if (config.settings.internalApiPath) {
+    stringData = stringData.replaceAll(
+      `${config.settings.internalApiPath}/`,
+      '/',
+    );
+    stringData = stringData.replaceAll(config.settings.internalApiPath, '/');
+  }
+
+  // Parse back to object
+  return JSON.parse(stringData) as T;
+}

package/src/middleware/storeProtectLoadUtils.test.js

@@ -445,9 +445,9 @@ describe('storeProtectLoadUtils', () => {
           isCounting: false,
         });
       };
-      test('pending', expectPass({ type: 'ANY_PENDING' }), 2);
-      test('success', expectPass({ type: 'ANY_SUCCESS' }), 2);
-      test('failure', expectPass({ type: 'ANY_FAIL' }), 2);
+      test('pending', expectPass({ type: 'ANY_PENDING' }, 2));
+      test('success', expectPass({ type: 'ANY_SUCCESS' }, 2));
+      test('failure', expectPass({ type: 'ANY_FAIL' }, 2));
     });
     describe('counting', () => {
       const expectCount = (action, from, to) => () => {

package/theme/themes/pastanaga/extras/blocks.less

@@ -434,10 +434,18 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   top: 1em;
   right: 1em;
 
+  .sidebar-container & .ui.icon.button:hover {
+    background: transparent !important;
+  }
+
   .icon.circled {
     border: 1px solid #e4e8ec;
     background: #f3f5f7;
     box-shadow: inset 0 0 0 0.14285714rem transparent !important;
+
+    &:hover {
+      background-color: #e4e8ec;
+    }
   }
 }
 
@@ -990,6 +998,17 @@ div.image-upload-widget-image {
   }
 }
 
+// In the sidebar, the height is forced on all .ui.input T_T
+.ui.form .ui.input.input-anchorlink-theme,
+.ui.form
+  .inline.field
+  .link-form-container
+  .wrapper
+  .ui.input.input-anchorlink-theme
+  input {
+  height: 34px;
+}
+
 .block.image.align.left,
 .block.image.align.right {
   img {

package/types/components/manage/Widgets/ImageWidget.d.ts

@@ -5,6 +5,46 @@ export function ImageToolbar({ className, data, id, onChange, selected }: {
     onChange: any;
     selected: any;
 }): import("react/jsx-runtime").JSX.Element;
-export const ImageInput: any;
+export const ImageInput: {
+    new (): {
+        state: {
+            isObjectBrowserOpen: boolean;
+        };
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+            mode: string;
+            dataName: string;
+            onSelectItem: string;
+            overlay: string;
+        }) => void;
+        closeObjectBrowser: () => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    defaultProps: {
+        onChangeBlock: () => void;
+        data: {};
+        block: string;
+    };
+    contextType?: React.Context<any> | undefined;
+};
 export default ImageUploadWidget;
+import React from 'react';
 declare function ImageUploadWidget(props: any): import("react/jsx-runtime").JSX.Element;