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

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -4,7 +4,7 @@ import schemaHero from './schema.js';
 import { BlockDataForm } from '@plone/volto/components';
 
 const HeroImageLeftBlockData = (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { block, data, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = schemaHero({ ...props, intl });
   return (
@@ -20,6 +20,8 @@ const HeroImageLeftBlockData = (props) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -9,7 +9,8 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock } = props;
+  const { blocksConfig, data, block, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -94,6 +95,8 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
       />
     </>
   );

package/src/components/manage/Blocks/Listing/ListingData.jsx

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock } = props;
+  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -25,6 +26,8 @@ const ListingData = (props) => {
       formData={data}
       blocksConfig={blocksConfig}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const MapsSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -26,6 +26,8 @@ const SearchBlockEdit = (props) => {
     data,
     selected,
     intl,
+    navRoot,
+    contentType,
     onTriggerSearch,
     querystring = {},
   } = props;
@@ -83,6 +85,8 @@ const SearchBlockEdit = (props) => {
           }}
           onChangeBlock={onChangeBlock}
           formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       </SidebarPortal>
     </>

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -14,7 +14,8 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const reset = () => {
@@ -64,6 +65,8 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

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

@@ -27,6 +27,8 @@ class Edit extends Component {
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
             block={this.props.block}
+            navRoot={this.props.navRoot}
+            contentType={this.props.contentType}
           />
         </SidebarPortal>
       </>

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const VideoSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx

@@ -3,7 +3,7 @@
  * TODO Enrich with features of user control panel. Then replace user control panel.
  */
 import React, { useEffect } from 'react';
-import { find, toNumber } from 'lodash';
+import { find } from 'lodash';
 import { Portal } from 'react-portal';
 import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
@@ -38,7 +38,7 @@ const UserGroupMembershipPanel = () => {
     (state) => state.controlpanels.systeminformation,
   );
   const can_use_group_membership_panel = systeminformation
-    ? toNumber(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
+    ? parseFloat(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
     : false;
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {

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

@@ -286,6 +286,7 @@ class Edit extends Component {
       <Form
         isEditForm
         ref={this.form}
+        navRoot={this.props.content?.['@components']?.navroot?.navroot || {}}
         schema={this.props.schema}
         type={this.props.content?.['@type']}
         formData={this.props.content}

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

@@ -148,7 +148,10 @@ class Form extends Component {
         ...formData,
       };
     }
-    // defaults for block editor; should be moved to schema on server side
+
+    // We initialize the formData snapshot in here, before the initial data checks
+    const initialFormData = cloneDeep(formData);
+
     // Adding fallback in case the fields are empty, so we are sure that the edit form
     // shows at least the default blocks
     if (
@@ -200,7 +203,7 @@ class Form extends Component {
 
     this.state = {
       formData,
-      initialFormData: cloneDeep(formData),
+      initialFormData,
       errors: {},
       selected: selectedBlock,
       multiSelected: [],
@@ -541,7 +544,13 @@ class Form extends Component {
    */
   render() {
     const { settings } = config;
-    const { schema: originalSchema, onCancel, onSubmit } = this.props;
+    const {
+      schema: originalSchema,
+      onCancel,
+      onSubmit,
+      navRoot,
+      type,
+    } = this.props;
     const { formData } = this.state;
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
@@ -590,6 +599,8 @@ class Form extends Component {
             onChangeField={this.onChangeField}
             onSelectBlock={this.onSelectBlock}
             properties={formData}
+            navRoot={navRoot}
+            type={type}
             pathname={this.props.pathname}
             selectedBlock={this.state.selected}
             multiSelected={this.state.multiSelected}

package/src/components/theme/Image/Image.jsx

@@ -45,8 +45,10 @@ export default function Image({
     if (!image) return null;
 
     const isSvg = image['content-type'] === 'image/svg+xml';
+    // In case `base_path` is present (`preview_image_link`) use it as base path
+    const basePath = image.base_path || item['@id'];
 
-    attrs.src = `${flattenToAppURL(item['@id'])}/${image.download}`;
+    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
     attrs.className = cx(className, { responsive });
@@ -61,7 +63,7 @@ export default function Image({
       attrs.srcSet = sortedScales
         .map(
           (scale) =>
-            `${flattenToAppURL(item['@id'])}/${scale.download} ${scale.width}w`,
+            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
         )
         .join(', ');
     }

package/src/components/theme/Image/Image.test.jsx

@@ -113,6 +113,38 @@ test('renders an image component from a catalog brain', () => {
   expect(json).toMatchSnapshot();
 });
 
+test('renders an image component from a catalog brain using `preview_image_link`', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/blog/blog-post',
+        image_field: 'preview_image_link',
+        image_scales: {
+          preview_image_link: [
+            {
+              base_path: '/image.png',
+              download: '@@images/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="preview_image_link"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
 test('renders an image component from a string src', () => {
   const component = renderer.create(
     <Image

package/src/config/index.js

@@ -1,7 +1,3 @@
-/**
- * Config.
- * @module config
- */
 import { parse as parseUrl } from 'url';
 import { defaultWidget, widgetMapping } from './Widgets';
 import {

package/src/helpers/Blocks/Blocks.js

@@ -517,7 +517,10 @@ export function applySchemaDefaults({ data = {}, schema, intl }) {
  * @param {Object} params An object with data, intl and anything else
  * @return {Object} Derived data, with the defaults extracted from the schema
  */
-export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
+export function applyBlockDefaults(
+  { data, intl, navRoot, contentType, ...rest },
+  blocksConfig,
+) {
   // We pay attention to not break on a missing (invalid) block.
   const block_type = data?.['@type'];
   const { blockSchema } =
@@ -528,7 +531,13 @@ export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
     typeof blockSchema === 'function'
       ? blockSchema({ data, intl, ...rest })
       : blockSchema;
-  schema = applySchemaEnhancer({ schema, formData: data, intl });
+  schema = applySchemaEnhancer({
+    schema,
+    formData: data,
+    intl,
+    navRoot,
+    contentType,
+  });
 
   return applySchemaDefaults({ data, schema, intl });
 }

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -199,6 +199,8 @@ export const applySchemaEnhancer = ({
   formData,
   intl,
   blocksConfig = config.blocks.blocksConfig,
+  navRoot,
+  contentType,
 }) => {
   let schema, schemaEnhancer;
 
@@ -215,6 +217,8 @@ export const applySchemaEnhancer = ({
         schema: cloneDeepSchema(originalSchema),
         formData,
         intl,
+        navRoot,
+        contentType,
       });
     return schema || originalSchema;
   }
@@ -230,12 +234,15 @@ export const applySchemaEnhancer = ({
         schema: cloneDeepSchema(originalSchema),
         formData,
         intl,
+        navRoot,
+        contentType,
       })
     : cloneDeepSchema(originalSchema);
 
   // Finalize the schema with a schemaEnhancer in the block config;
   schemaEnhancer = blocksConfig?.[blockType]?.schemaEnhancer;
-  if (schemaEnhancer) schema = schemaEnhancer({ schema, formData, intl });
+  if (schemaEnhancer)
+    schema = schemaEnhancer({ schema, formData, intl, navRoot, contentType });
 
   return schema || originalSchema;
 };
@@ -248,7 +255,7 @@ export const applySchemaEnhancer = ({
  * - adds the variation selection input (as a choice widget)
  */
 export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
-  const { formData, schema: originalSchema } = props;
+  const { formData, schema: originalSchema, navRoot, contentType } = props;
   const intl = useIntl();
 
   const blocksConfig = getBlocksConfig(props);
@@ -256,15 +263,10 @@ export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
   const blockType = formData['@type'];
   const variations = blocksConfig[blockType]?.variations || [];
 
-  let schema = applySchemaEnhancer({
-    schema: originalSchema,
-    formData,
-    intl,
-    blocksConfig,
-  });
+  let schema = cloneDeepSchema(originalSchema);
 
   if (variations.length > 1) {
-    addExtensionFieldToSchema({
+    schema = addExtensionFieldToSchema({
       schema,
       name: 'variation',
       items: variations,
@@ -274,6 +276,15 @@ export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
     });
   }
 
+  schema = applySchemaEnhancer({
+    schema,
+    formData,
+    intl,
+    blocksConfig,
+    navRoot,
+    contentType,
+  });
+
   return <FormComponent {...props} schema={schema} />;
 };
 

package/src/helpers/Url/Url.js

@@ -366,19 +366,20 @@ export const URLUtils = {
  * @returns {object} New object with the flattened scale URLs
  */
 export function flattenScales(path, image) {
-  function removeObjectIdFromURL(path, scale) {
-    return scale.replace(`${path}/`, '');
+  function removeObjectIdFromURL(basePath, scale) {
+    return scale.replace(`${basePath}/`, '');
   }
   if (!image) return;
 
+  const basePath = image.base_path || path;
   const imageInfo = {
     ...image,
-    download: flattenToAppURL(removeObjectIdFromURL(path, image.download)),
+    download: flattenToAppURL(removeObjectIdFromURL(basePath, image.download)),
   };
 
   Object.keys(imageInfo.scales).forEach((key) => {
     imageInfo.scales[key].download = flattenToAppURL(
-      removeObjectIdFromURL(path, image.scales[key].download),
+      removeObjectIdFromURL(basePath, image.scales[key].download),
     );
   });
 

package/src/helpers/Url/Url.test.js

@@ -351,6 +351,7 @@ describe('Url', () => {
       );
     });
   });
+
   describe('flattenScales', () => {
     it('flattenScales image is not set', () => {
       const id = '/halfdome2022-2.jpg';
@@ -405,6 +406,57 @@ describe('Url', () => {
         width: 1182,
       });
     });
+
+    it('[preview_image_link] flattenScales test from the catalog', () => {
+      const id = '/halfdome2022-2.jpg';
+      const image = {
+        base_path: '/broccoli.jpg',
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      };
+      expect(flattenScales(id, image)).toStrictEqual({
+        base_path: '/broccoli.jpg',
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      });
+    });
+
     it('flattenScales test from serialization', () => {
       const id = 'http://localhost:3000/halfdome2022-2.jpg';
       const image = {

package/src/middleware/api.js

@@ -230,7 +230,7 @@ const apiMiddlewareFactory =
               config.settings.supportedLanguages.includes(lang)
             ) {
               const langFileName = toGettextLang(lang);
-              import('~/../locales/' + langFileName + '.json').then(
+              import('@root/../locales/' + langFileName + '.json').then(
                 (locale) => {
                   dispatch(changeLanguage(lang, locale.default));
                 },

package/tsconfig.json

@@ -17,10 +17,7 @@
     "jsx": "react-jsx",
     "paths": {
       "@plone/volto/*": ["./src/*"],
-      "@plone/volto-slate/*": ["./packages/volto-slate/src/*"],
-      "@plone/registry/*": ["./packages/registry/src/*"],
-      "@plone/registry": ["./packages/registry/src"],
-      "@plone/types/*": ["./packages/types/*"],
+      "@plone/volto-slate/*": ["../volto-slate/src/*"],
       "@root/*": ["./src/*"]
     }
   },

package/types/config/RichTextEditor/index.d.ts

@@ -1,16 +1,13 @@
 export function richtextEditorSettings(props: any): {
     extendedBlockRenderMap: any;
-    blockStyleFn: (contentBlock: any) => string;
-    listBlockTypes: string[];
-    richTextEditorPlugins: any[];
-    richTextEditorInlineToolbarButtons: any[];
-    FromHTMLCustomBlockFn: typeof FromHTMLCustomBlockFn;
+    blockStyleFn: any;
+    listBlockTypes: any;
+    richTextEditorPlugins: any;
+    richTextEditorInlineToolbarButtons: any;
+    FromHTMLCustomBlockFn: any;
     customStyleMap: any;
 };
 export namespace richtextViewSettings {
     export { ToHTMLRenderers };
     export { ToHTMLOptions };
 }
-import FromHTMLCustomBlockFn from './FromHTML';
-import ToHTMLRenderers from './ToHTML';
-import { options as ToHTMLOptions } from './ToHTML';

package/types/helpers/AsyncConnect/index.d.ts

@@ -14,6 +14,6 @@
  * with the "object promises" and that's our "object promises" (which it calls
  * internally "asyncItems").
  */
-export function asyncConnect(asyncItems: any, mapStateToProps: any, mapDispatchToProps: any, mergeProps: any, options: any): (Component: any) => import("react-redux").ConnectedComponent<any, any>;
-export const ReduxAsyncConnect: import("react-redux").ConnectedComponent<any, any>;
+export function asyncConnect(asyncItems: any, mapStateToProps: any, mapDispatchToProps: any, mergeProps: any, options: any): (Component: any) => any;
+export const ReduxAsyncConnect: any;
 export { loadOnServer, loadAsyncConnect } from "./ssr";

package/types/helpers/Extensions/withBlockSchemaEnhancer.d.ts

@@ -21,11 +21,13 @@ export function addExtensionFieldToSchema({ schema, name, items, intl, title, de
 export function withBlockSchemaEnhancer(FormComponent: any, extensionName?: string, insertFieldToOrder?: typeof _addField): ({ ...props }: {
     [x: string]: any;
 }) => JSX.Element;
-export function applySchemaEnhancer({ schema: originalSchema, formData, intl, blocksConfig, }: {
+export function applySchemaEnhancer({ schema: originalSchema, formData, intl, blocksConfig, navRoot, contentType, }: {
     schema: any;
     formData: any;
     intl: any;
     blocksConfig?: any;
+    navRoot: any;
+    contentType: any;
 }): any;
 export function withVariationSchemaEnhancer(FormComponent: any): (props: any) => JSX.Element;
 export namespace EMPTY_STYLES_SCHEMA {

package/types/helpers/Url/Url.d.ts

@@ -118,21 +118,21 @@ export function flattenScales(path: string, image: object): object;
  * @param {string} url Url to be parsed.
  * @return {string} Base url of content object.
  */
-export const getBaseUrl: ((url: any) => any) & import("lodash").MemoizedFunction;
+export const getBaseUrl: any;
 /**
  * Get parent url.
  * @function getParentUrl
  * @param {string} url Url to be parsed.
  * @return {string} Parent url of content object.
  */
-export const getParentUrl: ((url: any) => any) & import("lodash").MemoizedFunction;
+export const getParentUrl: any;
 /**
  * Returns true if the current view is a cms ui view
  * @method isCmsUi
  * @param {string} currentPathname pathname of the current view
  * @returns {boolean} true if the current view is a cms ui view
  */
-export const isCmsUi: ((currentPathname: any) => any) & import("lodash").MemoizedFunction;
+export const isCmsUi: any;
 export function getFieldURL(data: object): string | any;
 export namespace URLUtils {
     export { normalizeTelephone };

package/types/icons/load-icons.d.ts

@@ -1,2 +1,2 @@
 export default icons;
-declare const icons: {};
+declare const icons: any;

package/webpack-plugins/webpack-less-plugin.js

@@ -140,6 +140,7 @@ module.exports = (userOptions = {}) => ({
           path.resolve('./theme'),
           path.resolve('./src'),
           /node_modules\/@plone\/volto\/theme/,
+          /packages\/volto\/theme/,
           /plone\.volto\/theme/,
           /node_modules\/semantic-ui-less/,
           ...Object.values(registry.getResolveAliases()),