@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/constants/{Languages.js → Languages.cjs}

@@ -11,6 +11,7 @@ module.exports = {
   eu: 'Euskara',
   fi: 'Suomi',
   fr: 'Français',
+  hi: 'Hindi',
   it: 'Italiano',
   nl: 'Nederlands',
   ro: 'Română',
@@ -19,3 +20,5 @@ module.exports = {
   pt_BR: 'Português (Brasil)',
   zh_CN: '中文',
 };
+
+// export default languages;

package/src/express-middleware/files.js

@@ -9,6 +9,7 @@ const HEADERS = [
   'content-type',
   'x-sendfile',
   'x-accel-redirect',
+  'x-robots-tag',
 ];
 
 function filesMiddlewareFn(req, res, next) {

package/src/express-middleware/images.js

@@ -7,6 +7,7 @@ const HEADERS = [
   'cache-control',
   'x-sendfile',
   'x-accel-redirect',
+  'x-robots-tag',
 ];
 
 function imageMiddlewareFn(req, res, next) {

package/src/express-middleware/static.js

@@ -1,28 +1,46 @@
 import express from 'express';
 import path from 'path';
+import { AddonRegistry } from '@plone/registry/addon-registry';
 import config from '@plone/volto/registry';
 
-const staticMiddlewareFn = express.static(
-  process.env.BUILD_DIR
-    ? path.join(process.env.BUILD_DIR, 'public')
-    : process.env.RAZZLE_PUBLIC_DIR,
-  {
-    setHeaders: function (res, path) {
-      const pathLib = require('path');
-      const base = pathLib.resolve(process.env.RAZZLE_PUBLIC_DIR);
-      const relpath = path.substr(base.length);
-      config.settings.serverConfig.staticFiles.some((elem) => {
-        if (relpath.match(elem.match)) {
-          for (const name in elem.headers) {
-            res.setHeader(name, elem.headers[name] || 'undefined');
-          }
-          return true;
+const projectRootPath = path.resolve('.');
+const { registry } = AddonRegistry.init(projectRootPath);
+
+const staticDirectory = () => {
+  if (process.env.BUILD_DIR) {
+    return path.join(process.env.BUILD_DIR, 'public');
+  }
+  // Only for development, when Volto detects that it's working on itself (not an
+  // old fashioned Volto project), there are add-ons (so it's the new setup) then
+  // point to the public folder in the root of the setup, instead of the inner Volto
+  // public folder.
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    !registry.isVoltoProject &&
+    registry.addonNames.length > 0
+  ) {
+    return path.join(projectRootPath, '../../../public');
+  }
+  // Is always set (Razzle does it)
+  return process.env.RAZZLE_PUBLIC_DIR;
+};
+
+const staticMiddlewareFn = express.static(staticDirectory(), {
+  setHeaders: function (res, path) {
+    const pathLib = require('path');
+    const base = pathLib.resolve(process.env.RAZZLE_PUBLIC_DIR);
+    const relpath = path.substr(base.length);
+    config.settings.serverConfig.staticFiles.some((elem) => {
+      if (relpath.match(elem.match)) {
+        for (const name in elem.headers) {
+          res.setHeader(name, elem.headers[name] || 'undefined');
         }
-        return false;
-      });
-    },
+        return true;
+      }
+      return false;
+    });
   },
-);
+});
 
 export default function staticsMiddleware() {
   const middleware = express.Router();

package/src/helpers/Api/Api.js

@@ -50,7 +50,14 @@ class Api {
     methods.forEach((method) => {
       this[method] = (
         path,
-        { params, data, type, headers = {}, checkUrl = false } = {},
+        {
+          params,
+          data,
+          type,
+          headers = {},
+          checkUrl = false,
+          attach = [],
+        } = {},
       ) => {
         let request;
         let promise = new Promise((resolve, reject) => {
@@ -80,10 +87,18 @@ class Api {
 
           Object.keys(headers).forEach((key) => request.set(key, headers[key]));
 
+          if (__SERVER__ && checkUrl && ['get', 'head'].includes(method)) {
+            request.redirects(0);
+          }
+
           if (data) {
             request.send(data);
           }
 
+          attach.forEach((attachment) => {
+            request.attach.apply(request, attachment);
+          });
+
           request.end((err, response) => {
             if (
               checkUrl &&
@@ -104,6 +119,14 @@ class Api {
                 url: request.xhr.responseURL,
               });
             }
+
+            if ([301, 302].includes(err?.status)) {
+              return reject({
+                code: err.status,
+                url: err.response.headers.location,
+              });
+            }
+
             return err ? reject(err) : resolve(response.body || response.text);
           });
         });

package/src/helpers/Api/Api.plone.rest.test.js

@@ -18,6 +18,7 @@ beforeAll(() => {
 
 const api = new Api();
 const { settings } = config;
+global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 test('get request', () => {});
 

package/src/helpers/Api/Api.test.js

@@ -24,6 +24,7 @@ beforeAll(() => {
 
 const api = new Api();
 const { settings } = config;
+global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 test('get request', () => {});
 

package/src/helpers/AsyncConnect/AsyncConnect.test.js

@@ -12,8 +12,6 @@ import { AsyncConnectWithContext, AsyncConnect } from './AsyncConnect'; // , Asy
 import { asyncConnect, loadOnServer } from './';
 import { matchAllRoutes } from './utils';
 
-import '@testing-library/jest-dom/extend-expect';
-
 describe('<ReduxAsyncConnect />', () => {
   const initialEmptyState = {
     router: {

package/src/helpers/AsyncConnect/index.js

@@ -90,6 +90,16 @@ const applyExtenders = (asyncItems, pathname) => {
  * with the "object promises" and that's our "object promises" (which it calls
  * internally "asyncItems").
  */
+/**
+ * Higher-order function that enhances a React component with asynchronous data fetching and Redux integration.
+ *
+ * @param {Array} asyncItems - An array of async items to fetch.
+ * @param {Function} [mapStateToProps] - A function that maps the Redux state to component props.
+ * @param {Function} [mapDispatchToProps] - A function that maps Redux dispatch to component props.
+ * @param {Function} [mergeProps] - A function that merges the props from mapStateToProps, mapDispatchToProps, and the component's own props.
+ * @param {Object} [options] - Additional options for configuring the async connect behavior.
+ * @returns {Function} - A function that takes a React component and returns an enhanced component with async connect functionality.
+ */
 export function asyncConnect(
   asyncItems,
   mapStateToProps,

package/src/helpers/AuthToken/AuthToken.js

@@ -102,7 +102,7 @@ export function persistAuthToken(store, req) {
   handleChange(true);
 }
 
-if (module.hot) {
+if (module?.hot) {
   module.hot.dispose((data) => {
     data.reloaded = true;
   });

package/src/helpers/Blocks/Blocks.js

@@ -7,7 +7,11 @@ import { omit, without, endsWith, find, isObject, keys, merge } from 'lodash';
 import move from 'lodash-move';
 import { v4 as uuid } from 'uuid';
 import config from '@plone/volto/registry';
-import { applySchemaEnhancer } from '@plone/volto/helpers';
+import {
+  applySchemaEnhancer,
+  insertInArray,
+  removeFromArray,
+} from '@plone/volto/helpers';
 
 /**
  * Get blocks field.
@@ -157,7 +161,7 @@ export function addBlock(formData, type, index, blocksConfig) {
 
   return [
     id,
-    _applyBlockInitialValue({
+    applyBlockInitialValue({
       id,
       value,
       blocksConfig,
@@ -193,8 +197,12 @@ export function addBlock(formData, type, index, blocksConfig) {
  * to call `onChangeBlock` at their creation time, as this is prone to racing
  * issue on block data storage.
  */
-const _applyBlockInitialValue = ({ id, value, blocksConfig, formData }) => {
-  const blocksFieldname = getBlocksFieldname(formData);
+export const applyBlockInitialValue = ({
+  id,
+  value,
+  blocksConfig,
+  formData,
+}) => {
   const type = value['@type'];
   blocksConfig = blocksConfig || config.blocks.blocksConfig;
 
@@ -204,6 +212,7 @@ const _applyBlockInitialValue = ({ id, value, blocksConfig, formData }) => {
       value,
       formData,
     });
+    const blocksFieldname = getBlocksFieldname(formData);
     formData[blocksFieldname][id] = value;
   }
 
@@ -234,7 +243,7 @@ export function mutateBlock(formData, id, value, blocksConfig) {
   const trailId = formData[blocksLayoutFieldname].items[index];
   if (trailId) {
     const block = formData[blocksFieldname][trailId];
-    newFormData = _applyBlockInitialValue({
+    newFormData = applyBlockInitialValue({
       id,
       value,
       blocksConfig,
@@ -252,7 +261,7 @@ export function mutateBlock(formData, id, value, blocksConfig) {
   }
 
   const idTrailingBlock = uuid();
-  newFormData = _applyBlockInitialValue({
+  newFormData = applyBlockInitialValue({
     id,
     value,
     blocksConfig,
@@ -303,8 +312,8 @@ export function insertBlock(
   });
 
   const newBlockId = uuid();
-  const newFormData = _applyBlockInitialValue({
-    id,
+  const newFormData = applyBlockInitialValue({
+    id: newBlockId,
     value,
     blocksConfig,
     formData: {
@@ -414,7 +423,7 @@ export function emptyBlocksForm() {
  * (could be empty, if not type given) and the number of blocks
  * @function blocksFormGenerator
  * @param {number} number How many blocks to generate of the type (could be "empty", if no type provided)
- * @param {number} type The type of the blocks
+ * @param {string} type The type of the blocks
  * @return {Object} blocks/blocks_layout pair filled with the generated blocks
  */
 export function blocksFormGenerator(number, type) {
@@ -483,26 +492,26 @@ export function applySchemaDefaults({ data = {}, schema, intl }) {
             [currentField]: schema.properties[currentField].default,
           }
         : intl &&
-          schema.properties[currentField].schema &&
-          !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
-        ? {
-            ...accumulator,
-            [currentField]: {
-              ...applySchemaDefaults({
-                data: { ...data[currentField], ...accumulator[currentField] },
-                schema:
-                  typeof schema.properties[currentField].schema === 'function'
-                    ? schema.properties[currentField].schema({
-                        data: accumulator[currentField],
-                        formData: accumulator[currentField],
-                        intl,
-                      })
-                    : schema.properties[currentField].schema,
-                intl,
-              }),
-            },
-          }
-        : accumulator;
+            schema.properties[currentField].schema &&
+            !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
+          ? {
+              ...accumulator,
+              [currentField]: {
+                ...applySchemaDefaults({
+                  data: { ...data[currentField], ...accumulator[currentField] },
+                  schema:
+                    typeof schema.properties[currentField].schema === 'function'
+                      ? schema.properties[currentField].schema({
+                          data: accumulator[currentField],
+                          formData: accumulator[currentField],
+                          intl,
+                        })
+                      : schema.properties[currentField].schema,
+                  intl,
+                }),
+              },
+            }
+          : accumulator;
     }, {}),
     data,
   );
@@ -620,11 +629,11 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * Generate styles object from data
  *
  * @function buildStyleObjectFromData
- * @param {Object} obj A style wrapper object data
+ * @param {Object} data A block data object
  * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
  * @return {Object} The style object ready to be passed as prop
  */
-export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
+export const buildStyleObjectFromData = (data = {}, prefix = '') => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
@@ -632,39 +641,79 @@ export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
   // }
   // Returns: {'--background-color: '#AABBCC'}
 
-  return Object.fromEntries(
-    Object.entries(obj)
-      .filter(([k, v]) => k.startsWith('--') || isObject(v))
-      .reduce(
-        (acc, [k, v]) => [
-          ...acc,
-          // Kept for easy debugging
-          // ...(() => {
-          //   if (isObject(v)) {
-          //     return Object.entries(
-          //       buildStyleObjectFromData(
-          //         v,
-          //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
-          //       ),
-          //     );
-          //   }
-          //   return [styleDataToStyleObject(k, v, prefix)];
-          // })(),
-          ...(isObject(v)
-            ? Object.entries(
-                buildStyleObjectFromData(
-                  v,
-                  `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
-                ),
-              )
-            : [styleDataToStyleObject(k, v, prefix)]),
-        ],
-        [],
-      )
-      .filter((v) => !!v),
-  );
+  function recursiveBuildStyleObjectFromData(obj, prefix) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([k, v]) => k.startsWith('--') || isObject(v))
+        .reduce(
+          (acc, [k, v]) => [
+            ...acc,
+            // Kept for easy debugging
+            // ...(() => {
+            //   if (isObject(v)) {
+            //     return Object.entries(
+            //       buildStyleObjectFromData(
+            //         v,
+            //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
+            //       ),
+            //     );
+            //   }
+            //   return [styleDataToStyleObject(k, v, prefix)];
+            // })(),
+            ...(isObject(v)
+              ? Object.entries(
+                  recursiveBuildStyleObjectFromData(
+                    v,
+                    `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
+                  ),
+                )
+              : [styleDataToStyleObject(k, v, prefix)]),
+          ],
+          [],
+        )
+        .filter((v) => !!v),
+    );
+  }
+
+  // If the block has a `@type`, it's a full data block object
+  // Then apply the style enhancers
+  if (data['@type']) {
+    const styleObj = data.styles || {};
+    const stylesFromCSSproperties = recursiveBuildStyleObjectFromData(
+      styleObj,
+      prefix,
+    );
+
+    let stylesFromObjectStyleEnhancers = {};
+    const enhancers = config.getUtilities({
+      type: 'styleWrapperStyleObjectEnhancer',
+    });
+
+    enhancers.forEach(({ method }) => {
+      stylesFromObjectStyleEnhancers = {
+        ...stylesFromObjectStyleEnhancers,
+        ...method(data),
+      };
+    });
+
+    return { ...stylesFromCSSproperties, ...stylesFromObjectStyleEnhancers };
+  } else {
+    return recursiveBuildStyleObjectFromData(data, prefix);
+  }
 };
 
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions, name) {
+  return styleDefinitions.find((color) => color.name === name)?.style;
+}
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *
@@ -689,6 +738,19 @@ export const getPreviousNextBlock = ({ content, block }) => {
   return [previousBlock, nextBlock];
 };
 
+/**
+ * Check if a block is a container block
+ * check blocks from data as well since some add-ons use that
+ * such as @eeacms/volto-tabs-block
+ */
+export function isBlockContainer(block) {
+  return (
+    block &&
+    (hasBlocksData(block) ||
+      (block.hasOwnProperty('data') && hasBlocksData(block.data)))
+  );
+}
+
 /**
  * Given a `block` object and a list of block types, return a list of block ids matching the types
  *
@@ -696,21 +758,201 @@ export const getPreviousNextBlock = ({ content, block }) => {
  * @param {Object} types A list with the list of types to be matched
  * @return {Array} An array of block ids
  */
-export function findBlocks(blocks, types, result = []) {
-  const containerBlockTypes = config.settings.containerBlockTypes;
-
+export function findBlocks(blocks = {}, types, result = []) {
   Object.keys(blocks).forEach((blockId) => {
     const block = blocks[blockId];
+    // check blocks from data as well since some add-ons use that
+    // such as @eeacms/volto-tabs-block
+    const child_blocks = block.blocks || block.data?.blocks;
     if (types.includes(block['@type'])) {
       result.push(blockId);
-    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
-      findBlocks(block.blocks, types, result);
+    } else if (isBlockContainer(block)) {
+      findBlocks(child_blocks, types, result);
     }
   });
 
   return result;
 }
 
+/**
+ * Build a block's hierarchy that the order tab can understand and uses
+ */
+export const getBlocksHierarchy = (properties) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  return properties[blocksLayoutFieldname]?.items?.map((n) => ({
+    id: n,
+    title: properties[blocksFieldName][n]?.['@type'],
+    data: properties[blocksFieldName][n],
+    children: isBlockContainer(properties[blocksFieldName][n])
+      ? getBlocksHierarchy(properties[blocksFieldName][n])
+      : [],
+  }));
+};
+
+/**
+ * Move block to different location index within blocks_layout
+ * @function moveBlock
+ * @param {Object} formData Form data
+ * @param {number} source index within form blocks_layout items
+ * @param {number} destination index within form blocks_layout items
+ * @return {Object} New form data
+ */
+export function moveBlockEnhanced(formData, { source, destination }) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const blocksFieldName = getBlocksFieldname(formData);
+
+  // If either one of source and destination are present
+  // (Moves intra-container or container <-> main container)
+  if (source.parent || destination.parent) {
+    // Move from a container to the main container
+    if (source.parent && !destination.parent) {
+      let clonedFormData = { ...formData };
+
+      clonedFormData[blocksFieldName][source.id] =
+        formData[blocksFieldName][source.parent][blocksFieldName][source.id];
+
+      clonedFormData[blocksLayoutFieldname].items = insertInArray(
+        formData[blocksLayoutFieldname].items,
+        source.id,
+        destination.position,
+      );
+
+      // Remove the source block from the source parent
+      const sourceContainer = findContainer(clonedFormData, {
+        containerId: source.parent,
+      });
+      delete sourceContainer[blocksFieldName][source.id];
+      sourceContainer[blocksLayoutFieldname].items = removeFromArray(
+        sourceContainer[blocksLayoutFieldname].items,
+        source.position,
+      );
+
+      return clonedFormData;
+    }
+
+    // Move from the main container to an inner container
+    if (!source.parent && destination.parent) {
+      let clonedFormData = { ...formData };
+
+      const destinationContainer = findContainer(clonedFormData, {
+        containerId: destination.parent,
+      });
+      destinationContainer[blocksFieldName][source.id] =
+        clonedFormData[blocksFieldName][source.id];
+      destinationContainer[blocksLayoutFieldname].items = insertInArray(
+        destinationContainer[blocksLayoutFieldname].items,
+        source.id,
+        destination.position,
+      );
+
+      // Remove the source block from the source parent
+      delete clonedFormData[blocksFieldName][source.id];
+      clonedFormData[blocksLayoutFieldname].items = removeFromArray(
+        clonedFormData[blocksLayoutFieldname].items,
+        source.position,
+      );
+
+      return clonedFormData;
+    }
+
+    // Move within the same container (except moves within the main container)
+    if (source.parent === destination.parent) {
+      let clonedFormData = { ...formData };
+
+      const destinationContainer = findContainer(clonedFormData, {
+        containerId: destination.parent,
+      });
+
+      destinationContainer[blocksLayoutFieldname].items = move(
+        destinationContainer[blocksLayoutFieldname].items,
+        source.position,
+        destination.position,
+      );
+      return clonedFormData;
+    }
+
+    // Move between containers
+    if (source.parent !== destination.parent) {
+      let clonedFormData = { ...formData };
+
+      const destinationContainer = findContainer(clonedFormData, {
+        containerId: destination.parent,
+      });
+      destinationContainer[blocksFieldName][source.id] =
+        formData[blocksFieldName][source.parent][blocksFieldName][source.id];
+
+      destinationContainer[blocksLayoutFieldname].items = insertInArray(
+        destinationContainer[blocksLayoutFieldname].items,
+        source.id,
+        destination.position,
+      );
+
+      // Remove the source block from the source parent
+      const sourceContainer = findContainer(clonedFormData, {
+        containerId: source.parent,
+      });
+      delete sourceContainer[blocksFieldName][source.id];
+      sourceContainer[blocksLayoutFieldname].items = removeFromArray(
+        sourceContainer[blocksLayoutFieldname].items,
+        source.position,
+      );
+
+      return clonedFormData;
+    }
+  }
+
+  // Default catch all, no source/destination parent specified
+  // Move within the main container
+  return {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: move(
+        formData[blocksLayoutFieldname].items,
+        source.position,
+        destination.position,
+      ),
+    },
+  };
+}
+
+/**
+ * Finds the container with the specified containerId in the given formData.
+ *
+ * @param {object} formData - The form data object.
+ * @param {object} options - The options object.
+ * @param {string} options.containerId - The ID of the container to find.
+ * @returns {object|undefined} - The container object if found, otherwise undefined.
+ */
+export const findContainer = (formData, { containerId }) => {
+  if (
+    formData.blocks[containerId] &&
+    Object.keys(formData.blocks[containerId]).includes('blocks') &&
+    Object.keys(formData.blocks[containerId]).includes('blocks_layout')
+  ) {
+    return formData.blocks[containerId];
+  }
+
+  let container;
+  Object.keys(formData.blocks).every((blockId) => {
+    const block = formData.blocks[blockId];
+    if (
+      formData.blocks[blockId] &&
+      Object.keys(formData.blocks[blockId]).includes('blocks') &&
+      Object.keys(formData.blocks[blockId]).includes('blocks_layout')
+    ) {
+      container = findContainer(block, { containerId });
+    }
+    if (container) {
+      return false;
+    } else {
+      return true;
+    }
+  });
+
+  return container;
+};
+
 const _dummyIntl = {
   formatMessage() {},
 };