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

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.
@@ -414,7 +418,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 +487,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,
   );
@@ -517,7 +521,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 +535,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 });
 }
@@ -554,7 +567,7 @@ export const styleToClassName = (key, value, prefix = '') => {
 };
 
 export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
-  // styles has the form:
+  // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
   //   backgroundColor: '#AABBCC',
@@ -562,6 +575,7 @@ export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
   // Returns: ['has--color--red', 'has--backgroundColor--AABBCC']
 
   return Object.entries(obj)
+    .filter(([k, v]) => !k.startsWith('--'))
     .reduce(
       (acc, [k, v]) => [
         ...acc,
@@ -593,6 +607,68 @@ export const buildStyleClassNamesExtenders = ({
   );
 };
 
+/**
+ * Converts a name+value style pair (ex: color/red) to a pair of [k, v],
+ * such as ["color", "red"] so it can be converted back to an object.
+ * For now, only covering the 'CSSProperty' use case.
+ */
+export const styleDataToStyleObject = (key, value, prefix = '') => {
+  if (prefix) {
+    return [`--${prefix}${key.replace('--', '')}`, value];
+  } else {
+    return [key, value];
+  }
+};
+
+/**
+ * Generate styles object from data
+ *
+ * @function buildStyleObjectFromData
+ * @param {Object} obj A style wrapper object data
+ * @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 = '') => {
+  // style wrapper object has the form:
+  // const styles = {
+  //   color: 'red',
+  //   '--background-color': '#AABBCC',
+  // }
+  // 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),
+  );
+};
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *
@@ -617,6 +693,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
  *
@@ -625,20 +714,200 @@ export const getPreviousNextBlock = ({ content, block }) => {
  * @return {Array} An array of block ids
  */
 export function findBlocks(blocks, types, result = []) {
-  const containerBlockTypes = config.settings.containerBlockTypes;
-
   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() {},
 };

package/src/helpers/Blocks/Blocks.test.js

@@ -18,9 +18,12 @@ import {
   applySchemaDefaults,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   blocksFormGenerator,
   findBlocks,
+  findContainer,
+  isBlockContainer,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1066,6 +1069,82 @@ describe('Blocks', () => {
       };
       expect(buildStyleClassNamesFromData(styles)).toEqual([]);
     });
+
+    it('It does not output any className for style converter values', () => {
+      const styles = {
+        color: 'red',
+        '--background-color': '#FFF',
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual(['has--color--red']);
+    });
+
+    it.skip('It does not output any className for unknown converter values', () => {
+      const styles = {
+        color: 'red',
+        'backgroundColor:style': '#FFF',
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual(['has--color--red']);
+    });
+  });
+
+  describe('buildStyleObjectFromData', () => {
+    it('Understands style converter for style values, no styles found', () => {
+      const styles = {
+        color: 'red',
+        backgroundColor: '#FFF',
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({});
+    });
+
+    it('Understands style converter for style values', () => {
+      const styles = {
+        color: 'red',
+        '--background-color': '#FFF',
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({
+        '--background-color': '#FFF',
+      });
+    });
+
+    it('Supports multiple nested levels', () => {
+      const styles = {
+        '--color': 'red',
+        backgroundColor: '#AABBCC',
+        nested: {
+          l1: 'white',
+          '--foo': 'white',
+          level2: {
+            '--foo': '#fff',
+            bar: '#000',
+          },
+        },
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({
+        '--color': 'red',
+        '--nested--foo': 'white',
+        '--nested--level2--foo': '#fff',
+      });
+    });
+
+    it('Supports multiple nested levels and optional inclusion of the name of the level', () => {
+      const styles = {
+        '--color': 'red',
+        backgroundColor: '#AABBCC',
+        'nested:noprefix': {
+          l1: 'white',
+          '--foo': 'white',
+          level2: {
+            '--foo': '#fff',
+            bar: '#000',
+          },
+        },
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({
+        '--color': 'red',
+        '--foo': 'white',
+        '--level2--foo': '#fff',
+      });
+    });
   });
 
   describe('getPreviousNextBlock', () => {
@@ -1430,3 +1509,192 @@ describe('findBlocks', () => {
     expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '8', '9']);
   });
 });
+
+describe('findContainer', () => {
+  const blocksData = { blocks: {}, blocks_layout: { items: [] } };
+
+  it('Get a container in the first level (main block container)', () => {
+    const formData = {
+      title: 'Example',
+      blocks: {
+        1: { title: 'title', '@type': 'title' },
+        2: { title: 'an image', '@type': 'image' },
+        3: { title: 'description', '@type': 'description' },
+        4: { title: 'a container', '@type': 'container', ...blocksData },
+      },
+      blocks_layout: {
+        items: ['1', '2', '3', '4'],
+      },
+    };
+
+    expect(findContainer(formData, { containerId: '4' })).toStrictEqual({
+      title: 'a container',
+      '@type': 'container',
+      ...blocksData,
+    });
+  });
+
+  it('Get a container in the second level', () => {
+    const formData = {
+      title: 'Example',
+      blocks: {
+        1: { title: 'title', '@type': 'title' },
+        2: { title: 'an image', '@type': 'image' },
+        3: { title: 'description', '@type': 'description' },
+        4: {
+          title: 'a container',
+          '@type': 'container',
+          blocks: {
+            1: { title: 'title', '@type': 'title' },
+            2: { title: 'an image', '@type': 'image' },
+            'second-level': {
+              title: 'a container',
+              '@type': 'container',
+              blocks: {},
+              blocks_layout: { items: [] },
+            },
+          },
+          blocks_layout: { items: [1, 2, 'second-level'] },
+        },
+      },
+      blocks_layout: {
+        items: ['1', '2', '3', '4'],
+      },
+    };
+
+    expect(
+      findContainer(formData, { containerId: 'second-level' }),
+    ).toStrictEqual({
+      title: 'a container',
+      '@type': 'container',
+      blocks: {},
+      blocks_layout: { items: [] },
+    });
+  });
+
+  it('Get a container in the third level', () => {
+    const formData = {
+      title: 'Example',
+      blocks: {
+        1: { title: 'title', '@type': 'title' },
+        2: { title: 'an image', '@type': 'image' },
+        3: { title: 'description', '@type': 'description' },
+        4: {
+          title: 'a container',
+          '@type': 'container',
+          blocks: {
+            1: { title: 'title', '@type': 'title' },
+            2: { title: 'an image', '@type': 'image' },
+            'second-level': {
+              title: 'a second level container',
+              '@type': 'container',
+              blocks: {
+                'third-level': {
+                  title: 'a third level container',
+                  '@type': 'container',
+                  blocks: {},
+                  blocks_layout: { items: [] },
+                },
+              },
+              blocks_layout: { items: ['third-level'] },
+            },
+          },
+          blocks_layout: { items: [1, 2, 'second-level'] },
+        },
+      },
+      blocks_layout: {
+        items: ['1', '2', '3', '4'],
+      },
+    };
+
+    expect(
+      findContainer(formData, { containerId: 'third-level' }),
+    ).toStrictEqual({
+      title: 'a third level container',
+      '@type': 'container',
+      blocks: {},
+      blocks_layout: { items: [] },
+    });
+  });
+
+  describe('findContainer then modify it', () => {
+    const blocksData = { blocks: {}, blocks_layout: { items: [] } };
+
+    it('Get and modifies a container in the first level (main block container)', () => {
+      const formData = {
+        title: 'Example',
+        blocks: {
+          1: { title: 'title', '@type': 'title' },
+          2: { title: 'an image', '@type': 'image' },
+          3: { title: 'description', '@type': 'description' },
+          4: { title: 'a container', '@type': 'container', ...blocksData },
+        },
+        blocks_layout: {
+          items: ['1', '2', '3', '4'],
+        },
+      };
+
+      const container = findContainer(formData, { containerId: '4' });
+      container.title = 'Modified the title of the container';
+      expect(findContainer(formData, { containerId: '4' })).toStrictEqual({
+        title: 'Modified the title of the container',
+        '@type': 'container',
+        ...blocksData,
+      });
+    });
+  });
+
+  describe('isBlockContainer', () => {
+    const blocksData = { blocks: {}, blocks_layout: { items: [] } };
+
+    it('basic test', () => {
+      const formData = {
+        title: 'Example',
+        blocks: {
+          1: { title: 'title', '@type': 'title' },
+          2: { title: 'an image', '@type': 'image' },
+          3: { title: 'description', '@type': 'description' },
+          4: { title: 'a container', '@type': 'container', ...blocksData },
+        },
+        blocks_layout: {
+          items: ['1', '2', '3', '4'],
+        },
+      };
+
+      const container = isBlockContainer(formData);
+      expect(container).toBeTruthy();
+    });
+
+    it('in data key (EEA add-ons)', () => {
+      const formData = {
+        title: 'Example',
+        data: {
+          blocks: {
+            1: { title: 'title', '@type': 'title' },
+            2: { title: 'an image', '@type': 'image' },
+            3: { title: 'description', '@type': 'description' },
+            4: { title: 'a container', '@type': 'container', ...blocksData },
+          },
+          blocks_layout: {
+            items: ['1', '2', '3', '4'],
+          },
+        },
+      };
+
+      const container = isBlockContainer(formData);
+      expect(container).toBeTruthy();
+    });
+
+    it('not a container', () => {
+      const formData = {
+        title: 'Example',
+        styles: {
+          color: 'red',
+        },
+      };
+
+      const container = isBlockContainer(formData);
+      expect(container).toBeFalsy();
+    });
+  });
+});