@plone/volto 19.0.0-alpha.9 → 19.1.0

package/src/helpers/Blocks/Blocks.js

@@ -80,6 +80,14 @@ export function blockHasValue(data) {
   return check(data);
 }
 
+/**
+ * Block id is valid (not undefined/null or the string "undefined" from object[undefined])
+ * @param {*} id Block id
+ * @return {boolean}
+ */
+const isValidBlockId = (id) =>
+  id != null && id !== 'undefined' && (typeof id !== 'string' || id.length > 0);
+
 /**
  * Get block pairs of [id, block] from content properties
  * @function getBlocks
@@ -89,12 +97,26 @@ export function blockHasValue(data) {
 export const getBlocks = (properties) => {
   const blocksFieldName = getBlocksFieldname(properties);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-  return (
-    properties[blocksLayoutFieldname]?.items?.map((n) => [
-      n,
-      properties[blocksFieldName][n],
-    ]) || []
-  );
+  const blocks = properties?.[blocksFieldName];
+  const items = properties?.[blocksLayoutFieldname]?.items;
+  if (!items) return [];
+  return items
+    .filter((n) => isValidBlockId(n))
+    .map((n) => [n, blocks?.[n]])
+    .filter(([, block]) => block != null);
+};
+
+/**
+ * Get layout item IDs that are valid but have no block data (orphaned refs).
+ * @param {Object} properties Content form properties
+ * @return {string[]} IDs that should be removed from layout
+ */
+export const getInvalidBlockLayoutIds = (properties) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldName = getBlocksLayoutFieldname(properties);
+  const blocks = properties?.[blocksFieldName] ?? {};
+  const layoutItems = properties?.[blocksLayoutFieldName]?.items ?? [];
+  return layoutItems.filter((id) => isValidBlockId(id) && blocks[id] == null);
 };
 
 /**
@@ -129,12 +151,28 @@ export function deleteBlock(formData, blockId, intl) {
 
   let newFormData = {
     ...formData,
-    [blocksLayoutFieldname]: {
-      items: without(formData[blocksLayoutFieldname].items, blockId),
-    },
-    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
   };
 
+  let container = findParent(newFormData, {
+    blockId,
+  });
+
+  if (container) {
+    container[blocksLayoutFieldname].items = without(
+      container[blocksLayoutFieldname].items,
+      blockId,
+    );
+    container[blocksFieldname] = omit(container[blocksFieldname], [blockId]);
+  } else {
+    newFormData[blocksLayoutFieldname].items = without(
+      newFormData[blocksLayoutFieldname].items,
+      blockId,
+    );
+    newFormData[blocksFieldname] = omit(newFormData[blocksFieldname], [
+      blockId,
+    ]);
+  }
+
   if (newFormData[blocksLayoutFieldname].items.length === 0) {
     newFormData = addBlock(
       newFormData,
@@ -812,12 +850,14 @@ export function findBlocks(blocks = {}, types, result = []) {
 export const getBlocksHierarchy = (properties) => {
   const blocksFieldName = getBlocksFieldname(properties);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-  return properties[blocksLayoutFieldname]?.items?.map((n) => ({
+  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])
+    title: properties?.[blocksFieldName]?.[n]?.['@type'],
+    data: properties?.[blocksFieldName]?.[n],
+    children: isBlockContainer(properties?.[blocksFieldName]?.[n])
+      ? properties?.[blocksFieldName]?.[n]?.data
+        ? getBlocksHierarchy(properties?.[blocksFieldName]?.[n]?.data)
+        : getBlocksHierarchy(properties?.[blocksFieldName]?.[n])
       : [],
   }));
 };
@@ -911,8 +951,13 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       const destinationContainer = findContainer(clonedFormData, {
         containerId: destination.parent,
       });
+      const sourceContainer = findContainer(clonedFormData, {
+        containerId: source.parent,
+      });
+
       destinationContainer[blocksFieldName][source.id] =
-        formData[blocksFieldName][source.parent][blocksFieldName][source.id];
+        sourceContainer[blocksFieldName]?.[source.id] ||
+        sourceContainer.data?.[blocksFieldName][source.id];
 
       destinationContainer[blocksLayoutFieldname].items = insertInArray(
         destinationContainer[blocksLayoutFieldname].items,
@@ -921,9 +966,6 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       );
 
       // 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,
@@ -957,23 +999,25 @@ export function moveBlockEnhanced(formData, { source, destination }) {
  * @returns {object|undefined} - The container object if found, otherwise undefined.
  */
 export const findContainer = (formData, { containerId }) => {
+  const block =
+    formData.blocks[containerId]?.data || formData.blocks[containerId];
   if (
-    formData.blocks[containerId] &&
-    Object.keys(formData.blocks[containerId]).includes('blocks') &&
-    Object.keys(formData.blocks[containerId]).includes('blocks_layout')
+    block &&
+    Object.keys(block).includes('blocks') &&
+    Object.keys(block).includes('blocks_layout')
   ) {
-    return formData.blocks[containerId];
+    return block;
   }
 
   let container;
   Object.keys(formData.blocks).every((blockId) => {
-    const block = formData.blocks[blockId];
+    const subBlock = formData.blocks[blockId].data || formData.blocks[blockId];
     if (
-      formData.blocks[blockId] &&
-      Object.keys(formData.blocks[blockId]).includes('blocks') &&
-      Object.keys(formData.blocks[blockId]).includes('blocks_layout')
+      subBlock &&
+      Object.keys(subBlock).includes('blocks') &&
+      Object.keys(subBlock).includes('blocks_layout')
     ) {
-      container = findContainer(block, { containerId });
+      container = findContainer(subBlock, { containerId });
     }
     if (container) {
       return false;
@@ -985,6 +1029,47 @@ export const findContainer = (formData, { containerId }) => {
   return container;
 };
 
+/**
+ * Finds parent container of the specified blockId in the given formData.
+ *
+ * @param {object} formData - The form data object.
+ * @param {object} options - The options object.
+ * @param {string} options.blockId - The ID of the block to find.
+ * @returns {object|undefined} - The container object if found, otherwise undefined.
+ */
+export const findParent = (formData, { blockId }) => {
+  const block = formData.data || formData;
+
+  if (block && block.blocks && Object.keys(block.blocks).includes(blockId)) {
+    return block;
+  }
+
+  let found = false;
+
+  if (block && block.blocks) {
+    Object.keys(block.blocks).every((subBlockId) => {
+      const subBlock =
+        block.blocks[subBlockId].data || block.blocks[subBlockId];
+      if (subBlock && subBlock.blocks) {
+        if (Object.keys(subBlock.blocks).includes(blockId)) {
+          found = subBlock;
+        }
+        const parent = findParent(subBlock, { blockId });
+        if (parent) {
+          found = parent;
+        }
+      }
+      if (found) {
+        return false;
+      } else {
+        return true;
+      }
+    });
+  }
+
+  return found;
+};
+
 const _dummyIntl = {
   formatMessage() {},
 };

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

@@ -7,6 +7,7 @@ import {
   getBlocks,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
+  getInvalidBlockLayoutIds,
   hasBlocksData,
   insertBlock,
   moveBlock,
@@ -482,6 +483,105 @@ describe('Blocks', () => {
         ['a', { value: 1 }],
       ]);
     });
+
+    it('filters out invalid block IDs (null, undefined, string "undefined")', () => {
+      const validBlock = { '@type': 'search', value: 'test' };
+      const result = getBlocks({
+        blocks: {
+          'valid-id-123': validBlock,
+          // These shouldn't exist but test edge case
+          [null]: { '@type': 'invalid' },
+          [undefined]: { '@type': 'invalid' },
+          undefined: { '@type': 'invalid' },
+        },
+        blocks_layout: {
+          items: [
+            'valid-id-123',
+            null, // Invalid: null ID
+            undefined, // Invalid: undefined ID
+            'undefined', // Invalid: string "undefined"
+            'missing-block', // Valid ID but block doesn't exist (filtered by block !== undefined)
+          ],
+        },
+      });
+
+      // Should only return the valid block, filtering out:
+      // - null ID
+      // - undefined ID
+      // - string "undefined" ID
+      // - missing block (block is undefined)
+      expect(result).toStrictEqual([['valid-id-123', validBlock]]);
+      expect(result.length).toBe(1);
+
+      // Verify no invalid IDs in the result
+      const ids = result.map(([id]) => id);
+      expect(ids).not.toContain(null);
+      expect(ids).not.toContain(undefined);
+      expect(ids).not.toContain('undefined');
+    });
+
+    it('filters out invalid block IDs even when blocks object has invalid keys', () => {
+      // Simulate edge case where blocks object has invalid keys
+      const blocks = {
+        'valid-id': { '@type': 'search' },
+      };
+      // JavaScript allows this, creating string keys
+      blocks[null] = { '@type': 'invalid' };
+      blocks[undefined] = { '@type': 'invalid' };
+
+      const result = getBlocks({
+        blocks,
+        blocks_layout: {
+          items: ['valid-id', null, undefined, 'undefined'],
+        },
+      });
+
+      // Should only return valid block
+      expect(result).toStrictEqual([['valid-id', { '@type': 'search' }]]);
+      expect(result.length).toBe(1);
+    });
+  });
+
+  describe('getInvalidBlockLayoutIds', () => {
+    it('returns layout IDs that are valid but have no block data', () => {
+      const result = getInvalidBlockLayoutIds({
+        blocks: {
+          a: { '@type': 'custom', text: 'a' },
+          b: { '@type': 'custom', text: 'b' },
+        },
+        blocks_layout: {
+          items: ['a', 'b', 'MISSING-1', 'MISSING-2'],
+        },
+      });
+      expect(result).toStrictEqual(['MISSING-1', 'MISSING-2']);
+    });
+
+    it('returns empty when all layout items have block data', () => {
+      const result = getInvalidBlockLayoutIds({
+        blocks: { a: { '@type': 'custom' }, b: { '@type': 'custom' } },
+        blocks_layout: { items: ['a', 'b'] },
+      });
+      expect(result).toStrictEqual([]);
+    });
+
+    it('filters out invalid IDs (null, undefined, "undefined")', () => {
+      const result = getInvalidBlockLayoutIds({
+        blocks: {},
+        blocks_layout: {
+          items: [null, undefined, 'undefined', 'valid-missing'],
+        },
+      });
+      expect(result).toStrictEqual(['valid-missing']);
+    });
+
+    it('returns empty when items is missing or empty', () => {
+      expect(
+        getInvalidBlockLayoutIds({ blocks: {}, blocks_layout: {} }),
+      ).toStrictEqual([]);
+      expect(
+        getInvalidBlockLayoutIds({ blocks: {}, blocks_layout: { items: [] } }),
+      ).toStrictEqual([]);
+    });
   });
 
   describe('addBlock', () => {

package/src/helpers/Content/Content.js

@@ -11,6 +11,7 @@ import keys from 'lodash/keys';
 import endsWith from 'lodash/endsWith';
 import find from 'lodash/find';
 import config from '@plone/volto/registry';
+import omit from 'lodash/omit';
 
 /**
  * Nest content.
@@ -85,3 +86,25 @@ export function getLanguageIndependentFields(schema) {
       properties[field]['multilingual_options']?.['language_independent'],
   );
 }
+
+/**
+ * Flattens static behaviors into the parent object with dot-notation keys.
+ * @function flattenStaticBehaviors
+ * @param {Object} result The result object containing static behaviors.
+ * @returns {Object} Result object with flattened static behaviors.
+ */
+export function flattenStaticBehaviors(result) {
+  if (!result['@static_behaviors']) {
+    return result;
+  }
+
+  let flattened = Object.assign({}, result);
+  map(result['@static_behaviors'], (behavior) => {
+    flattened = {
+      ...omit(flattened, behavior),
+      ...mapKeys(flattened[behavior], (value, key) => `${behavior}.${key}`),
+    };
+  });
+
+  return flattened;
+}

package/src/helpers/Content/Content.test.js

@@ -2,6 +2,7 @@ import {
   nestContent,
   getContentIcon,
   getLanguageIndependentFields,
+  flattenStaticBehaviors,
 } from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -96,4 +97,42 @@ describe('Content', () => {
       expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
     });
   });
+
+  describe('flattenStaticBehaviors', () => {
+    it('returns object unchanged when no @static_behaviors', () => {
+      const input = {
+        title: 'Example',
+        creator: 'admin',
+      };
+      expect(flattenStaticBehaviors(input)).toEqual(input);
+    });
+
+    it('flattens static behaviors into dot-notation keys', () => {
+      const input = {
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks': {
+          blocks: 'blocks',
+          blocks_layout: 'blocks_layout',
+        },
+        'guillotina_cms.interfaces.dublin_core.IDublinCore': {
+          creator: 'creator',
+        },
+      };
+      expect(flattenStaticBehaviors(input)).toEqual({
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks': 'blocks',
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks_layout':
+          'blocks_layout',
+        'guillotina_cms.interfaces.dublin_core.IDublinCore.creator': 'creator',
+      });
+    });
+  });
 });

package/src/helpers/Extensions/withBlockSchemaEnhancer.jsx

@@ -305,8 +305,11 @@ export const EMPTY_STYLES_SCHEMA = {
 
 /**
  * Adds the `styles` field and 'styling' fieldset in a given schema
+ * @param {object} params Helper params
+ * @param {import('@plone/types').JSONSchema} params.schema Schema to enhance
+ * @param {import('react-intl').IntlShape} params.intl intl helper for translations
  */
-export const addStyling = ({ schema, formData, intl }) => {
+export const addStyling = ({ schema, intl }) => {
   if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
     schema.fieldsets.push({
       id: 'styling',

package/src/helpers/FormValidation/FormValidation.test.js

@@ -8,6 +8,12 @@ const schema = {
     username: { title: 'Username', type: 'string', description: '' },
     email: { title: 'Email', type: 'string', widget: 'email', description: '' },
     url: { title: 'url', type: 'string', widget: 'url', description: '' },
+    file: {
+      title: 'file',
+      type: 'object',
+      description: '',
+      size: 5,
+    },
   },
   fieldsets: [
     { id: 'default', title: 'FIXME: User Data', fields: ['username'] },
@@ -181,6 +187,31 @@ describe('FormValidation', () => {
       ).toEqual({});
     });
 
+    it('file - validates invalid size', () => {
+      const validationErrorMessages = [messages.maxSize.defaultMessage];
+      validationErrorMessages.title = 'file';
+
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData: { ...formData, file: { size: 10 } },
+          formatMessage,
+        }),
+      ).toEqual({
+        file: validationErrorMessages,
+      });
+    });
+
+    it('file - validates size', () => {
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData: { ...formData, file: { size: 1 } },
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+
     it('widget - validator from block - Fails', () => {
       let newSchema = {
         properties: {

package/src/helpers/FormValidation/validators.ts

@@ -1,5 +1,6 @@
 import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import config from '@plone/volto/registry';
 
 type MinMaxValidator = {
   value: string | number;
@@ -15,6 +16,24 @@ type Validator = {
   formatMessage: Function;
 };
 
+type Choice = {
+  token: string;
+  label: string;
+};
+type ChoiceValidator = {
+  value: string | Choice;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
+type FileValidator = {
+  value: Record<string, any>;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
 export const isMaxPropertyValid = ({
   value,
   fieldSpec,
@@ -134,6 +153,15 @@ export const hasUniqueItemsValidator = ({
   return !isValid ? formatMessage(messages.uniqueItems) : null;
 };
 
+const formatDateValue = (isoString: string) => {
+  const date = new Date(isoString);
+  if (isNaN(date.getTime())) return isoString;
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+};
+
 export const startEventDateRangeValidator = ({
   value,
   field,
@@ -144,7 +172,9 @@ export const startEventDateRangeValidator = ({
     value && formData.end && new Date(value) < new Date(formData.end);
   return !isValid
     ? formatMessage(messages.startEventRange, {
-        endDateValueOrEndFieldName: formData.end || 'end',
+        endDateValueOrEndFieldName: formData.end
+          ? formatDateValue(formData.end)
+          : 'end',
       })
     : null;
 };
@@ -159,7 +189,9 @@ export const endEventDateRangeValidator = ({
     value && formData.start && new Date(value) > new Date(formData.start);
   return !isValid
     ? formatMessage(messages.endEventRange, {
-        startDateValueOrStartFieldName: formData.start || 'start',
+        startDateValueOrStartFieldName: formData.start
+          ? formatDateValue(formData.start)
+          : 'start',
       })
     : null;
 };
@@ -211,12 +243,26 @@ export const defaultLanguageControlPanelValidator = ({
   value,
   formData,
   formatMessage,
-}: Validator) => {
+}: ChoiceValidator) => {
+  const token = typeof value === 'object' ? value.token : value;
   const isValid =
-    value &&
+    token &&
     (formData.available_languages.find(
-      (lang: { token: string }) => lang.token === value,
+      (lang: { token: string }) => lang.token === token,
     ) ||
-      formData.available_languages.includes(value));
+      formData.available_languages.includes(token));
   return !isValid ? formatMessage(messages.defaultLanguage) : null;
 };
+
+export const sizeValidator = ({
+  value,
+  field,
+  formatMessage,
+}: FileValidator) => {
+  const maxSize = field.size
+    ? parseInt(field.size, 10)
+    : config.settings.maxFileUploadSize;
+  return maxSize && value.size > maxSize
+    ? formatMessage(messages.maxSize, { maxSize, size: value.size })
+    : null;
+};

package/src/helpers/I18n/I18n.test.ts

@@ -0,0 +1,44 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import { formatMessageWithFallback } from './I18n';
+
+const buildIntl = (
+  locale: string,
+  messages: Record<string, string>,
+): IntlShape => createIntl({ locale, messages }, createIntlCache());
+
+describe('formatMessageWithFallback', () => {
+  it('returns the translated string when the locale catalog has an entry', () => {
+    const intl = buildIntl('pt-BR', { Image: 'Imagem' });
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Imagem');
+  });
+
+  it('falls back to the input message when no translation is registered', () => {
+    const intl = buildIntl('pt-BR', {});
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Image');
+  });
+
+  it('returns undefined unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, undefined)).toBeUndefined();
+  });
+
+  it('returns null unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, null)).toBeNull();
+  });
+
+  it('returns an empty string unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, '')).toBe('');
+  });
+
+  it('does not call intl.formatMessage when the message is falsy', () => {
+    const intl = buildIntl('en', {});
+    const spy = vi.spyOn(intl, 'formatMessage');
+    formatMessageWithFallback(intl, undefined);
+    formatMessageWithFallback(intl, null);
+    formatMessageWithFallback(intl, '');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/I18n/I18n.ts

@@ -0,0 +1,31 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+
+import type { IntlShape } from 'react-intl';
+
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export function formatMessageWithFallback<T extends string | undefined | null>(
+  intl: IntlShape,
+  message: T,
+): T extends string ? string : T {
+  if (!message) return message as T extends string ? string : T;
+  return intl.formatMessage({
+    id: message,
+    defaultMessage: message,
+  }) as T extends string ? string : T;
+}

package/src/helpers/Loadable/__mocks__/Loadable.jsx

@@ -1,19 +1,4 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
-
-Finally, remove this comment.
-*/
-
+import React from 'react';
 import config from '@plone/volto/registry';
 const loadables = config.settings.loadables;
 
@@ -33,21 +18,21 @@ export const __setLoadables = async () => {
 };
 
 // TODO: filter mockAllLoadables
-export const injectLazyLibs = jest.fn().mockImplementation(function ([
+export const injectLazyLibs = vi.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return jest.fn((WrappedComponent) =>
-    jest.fn((props) => {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
       return <WrappedComponent {...props} {...mockAllLoadables} />;
     }),
   );
 });
 
-export const preloadLazyLibs = jest.fn().mockImplementation(function ([
+export const preloadLazyLibs = vi.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return jest.fn((WrappedComponent) =>
-    jest.fn((props) => {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
       return <WrappedComponent {...props} />;
     }),
   );