@plone/volto 19.0.0-alpha.9 → 19.0.0

package/src/helpers/MessageLabels/MessageLabels.js

@@ -25,6 +25,11 @@ export const messages = defineMessages({
     id: 'Maximum value is {len}.',
     defaultMessage: 'Maximum value is {len}.',
   },
+  maxSize: {
+    id: 'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+    defaultMessage:
+      'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+  },
   uniqueItems: {
     id: 'Items must be unique.',
     defaultMessage: 'Items must be unique.',

package/src/helpers/Robots/Robots.js

@@ -24,7 +24,7 @@ export const generateRobots = (req) =>
       request.set('Authorization', `Bearer ${authToken}`);
     }
     request.use(addHeadersFactory(req));
-    request.end((error, { text, body }) => {
+    request.end((error, { text, body } = {}) => {
       if (error) {
         resolve(text || error);
       } else {

package/src/helpers/Robots/Robots.test.js

@@ -0,0 +1,34 @@
+import { generateRobots } from './Robots';
+
+const request = {
+  set: vi.fn(() => request),
+  use: vi.fn(() => request),
+  end: vi.fn(),
+};
+
+vi.mock('superagent', () => ({
+  default: {
+    get: vi.fn(() => request),
+  },
+}));
+
+vi.mock('@plone/volto/helpers/Proxy/Proxy', () => ({
+  addHeadersFactory: vi.fn(() => vi.fn()),
+}));
+
+describe('generateRobots', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('resolves the original error when superagent does not provide a response', async () => {
+    const error = new Error('network error');
+    request.end.mockImplementationOnce((callback) => callback(error));
+
+    await expect(
+      generateRobots({
+        universalCookies: { get: vi.fn(() => null) },
+      }),
+    ).resolves.toBe(error);
+  });
+});

package/src/helpers/Url/Url.js

@@ -411,6 +411,7 @@ export function flattenScales(path, image) {
   const basePath = image.base_path || path;
   const imageInfo = {
     ...image,
+    scales: image.scales || {},
     download: flattenToAppURL(removeObjectIdFromURL(basePath, image.download)),
   };
 

package/src/helpers/Utils/Date.js

@@ -5,6 +5,21 @@ const DAY = HOUR * 24;
 const MONTH = DAY * 30;
 const YEAR = DAY * 365; // ? is this safe or should it be more accurate
 
+// moment-style format tokens → Intl.DateTimeFormat options (for backward compat)
+const MOMENT_FORMAT_MAP = {
+  ll: { year: 'numeric', month: 'short', day: 'numeric' },
+  lll: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  LLLL: { dateStyle: 'full', timeStyle: 'short' },
+  L: { year: 'numeric', month: '2-digit', day: '2-digit' },
+  LT: { timeStyle: 'short' },
+};
+
 export const short_date_format = {
   // 12/9/2021
   year: 'numeric',
@@ -32,13 +47,23 @@ export const toDate = (d) =>
  */
 export function formatDate({
   date, // Date() or  '2022-01-03T19:26:08.999Z'
-  format, // format object, see https://tc39.es/ecma402/#datetimeformat-objects
+  format, // format object (Intl.DateTimeFormat options) or moment-style token string (e.g. 'll', 'lll', 'LLLL', 'L', 'LT')
   locale = 'en',
   long, // true if format should be in long readable form.
   includeTime, // true if short date format should include time
   formatToParts = false,
 }) {
   date = toDate(date);
+  // Resolve moment-style token strings to Intl format options
+  if (typeof format === 'string') {
+    if (process.env.NODE_ENV !== 'production' && !MOMENT_FORMAT_MAP[format]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[formatDate] Unknown format token "${format}". Supported tokens: ${Object.keys(MOMENT_FORMAT_MAP).join(', ')}. Falling back to short_date_format.`,
+      );
+    }
+    format = MOMENT_FORMAT_MAP[format] || short_date_format;
+  }
   format = format
     ? format
     : long && !includeTime

package/src/helpers/Utils/Date.test.js

@@ -79,6 +79,243 @@ describe('formatDate helper', () => {
       }),
     ).toBe('J 03, 2022');
   });
+
+  describe('moment-style format tokens', () => {
+    it('formats with "ll" token (short date)', () => {
+      expect(formatDate({ date, format: 'll' })).toBe('Jan 3, 2022');
+    });
+
+    it('formats with "lll" token (short date + time)', () => {
+      expect(formatDate({ date, format: 'lll' })).toBe('Jan 3, 2022, 7:26 PM');
+    });
+
+    it('formats with "LLLL" token (full date + time)', () => {
+      expect(formatDate({ date, format: 'LLLL' })).toBe(
+        'Monday, January 3, 2022 at 7:26 PM',
+      );
+    });
+
+    it('formats with "L" token (numeric short date)', () => {
+      expect(formatDate({ date, format: 'L' })).toBe('01/03/2022');
+    });
+
+    it('formats with "LT" token (time only)', () => {
+      expect(formatDate({ date, format: 'LT' })).toBe('7:26 PM');
+    });
+
+    it('moment token works with other locales', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('unknown string format falls back to short_date_format', () => {
+      expect(formatDate({ date, format: 'unknown' })).toBe('1/3/2022');
+    });
+  });
+
+  describe('Italian locale (it)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'it' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'it', includeTime: true })).toBe(
+        '03/01/22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'it', long: true })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'it' })).toBe(
+        '3 gen 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'it' })).toBe(
+        '3 gen 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'it' })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'it' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'it' })).toBe('19:26');
+    });
+  });
+
+  describe('German locale (de)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+        '03.01.22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'de', long: true })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'de' })).toBe(
+        '3. Jan. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'de' })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'de' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'de' })).toBe('19:26');
+    });
+  });
+
+  describe('Brazilian Portuguese locale (pt-BR)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'pt-BR' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'pt-BR', includeTime: true })).toBe(
+        '03/01/2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'pt-BR', long: true })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'pt-BR' })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'pt-BR' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'pt-BR' })).toBe('19:26');
+    });
+  });
+
+  describe('Romanian locale (ro)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'ro' })).toBe('03.01.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'ro', includeTime: true })).toBe(
+        '03.01.2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'ro', long: true })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'ro' })).toBe(
+        '3 ian. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'ro' })).toBe(
+        '3 ian. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'ro' })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'ro' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'ro' })).toBe('19:26');
+    });
+  });
+
+  // moment vs Intl comparison
+  // This section documents known differences between the former moment.js output
+  // and our Intl-based formatDate implementation. Reference values are hardcoded
+  // from moment@2.29.4 to avoid a runtime dependency on the library we are removing.
+  //
+  // Tokens that match moment exactly: ll, L, LT (most locales), LLLL (pt-BR only)
+  //
+  // Known differences from moment@2.29.4:
+  //   - lll (all locales): Intl inserts a comma between date and time;
+  //     moment did not (e.g. "Jan 3, 2022, 7:26 PM" vs "Jan 3, 2022 7:26 PM")
+  //   - LLLL (en, it, de, ro): Intl inserts a locale-specific preposition before
+  //     the time; moment did not
+  //       en: "...at 7:26 PM"  vs "...7:26 PM"
+  //       it: "...alle ore 19:26" vs "...19:26"
+  //       de: "...um 19:26"      vs "...19:26"
+  //       ro: "...la 19:26"      vs "...19:26"
+  //   - ll/lll (pt-BR): Intl adds a period after abbreviated month ("jan.");
+  //     moment did not ("jan")
 });
 
 describe('formatRelativeDate helper', () => {

package/src/helpers/Utils/Utils.jsx

@@ -37,6 +37,23 @@ export const safeWrapper = (func) => (config) => {
   return res;
 };
 
+/**
+ * Extract a readable error message from several possible error shapes
+ * @param {object} error
+ * @returns {string} message
+ */
+export const getErrorMessage = (error) => {
+  const respBody = error?.response?.body;
+  if (respBody?.error?.message) return respBody.error.message;
+  if (respBody?.message) return respBody.message;
+  if (error?.message) return error.message;
+  try {
+    return JSON.stringify(error);
+  } catch (e) {
+    return String(error);
+  }
+};
+
 /**
  * A helper to pipe a configuration object through configuration loaders
  *

package/src/helpers/Utils/Utils.test.jsx

@@ -3,6 +3,7 @@ import config from '@plone/volto/registry';
 import {
   applyConfig,
   difference,
+  getErrorMessage,
   getColor,
   getInitials,
   hasApiExpander,
@@ -246,6 +247,44 @@ describe('Utils tests', () => {
     });
   });
 
+  describe('getErrorMessage', () => {
+    it('returns nested backend error message', () => {
+      const error = {
+        response: {
+          body: {
+            error: {
+              message: 'Backend nested message',
+            },
+          },
+        },
+      };
+
+      expect(getErrorMessage(error)).toEqual('Backend nested message');
+    });
+
+    it('returns body message when present', () => {
+      const error = {
+        response: {
+          body: {
+            message: 'Backend body message',
+          },
+        },
+      };
+
+      expect(getErrorMessage(error)).toEqual('Backend body message');
+    });
+
+    it('returns generic error.message fallback', () => {
+      expect(getErrorMessage(new Error('Generic message'))).toEqual(
+        'Generic message',
+      );
+    });
+
+    it('returns stringified object as final fallback', () => {
+      expect(getErrorMessage({ foo: 'bar' })).toEqual('{"foo":"bar"}');
+    });
+  });
+
   describe('safeWrapper', () => {
     it('calls the function with config', () => {
       expect(

package/src/helpers/Utils/withSaveAsDraft.jsx

@@ -9,6 +9,7 @@ import checkSVG from '@plone/volto/icons/check.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { useIntl, defineMessages } from 'react-intl';
 import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   autoSaveFound: {
@@ -227,15 +228,38 @@ export default function withSaveAsDraft(options) {
       WrappedComponent,
     )})`;
 
-    if (forwardRef) {
-      return hoistNonReactStatics(
-        React.forwardRef((props, ref) => (
-          <WithSaveAsDraft {...props} forwardedRef={ref} />
-        )),
-        WrappedComponent,
-      );
-    }
+    const DraftWrappedComponent = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => (
+            <WithSaveAsDraft {...props} forwardedRef={ref} />
+          )),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+
+    const WithExperimentalSaveAsDraft = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => {
+            const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+              ? DraftWrappedComponent
+              : WrappedComponent;
+
+            return <ComponentToRender {...props} ref={ref} />;
+          }),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics((props) => {
+          const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+            ? DraftWrappedComponent
+            : WrappedComponent;
+
+          return <ComponentToRender {...props} />;
+        }, WrappedComponent);
+
+    WithExperimentalSaveAsDraft.displayName = `WithExperimentalSaveAsDraft(${getDisplayName(
+      WrappedComponent,
+    )})`;
 
-    return hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+    return WithExperimentalSaveAsDraft;
   };
 }

package/src/helpers/index.js

@@ -112,6 +112,7 @@ export {
   normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
+export { formatMessageWithFallback } from './I18n/I18n';
 export {
   withBlockSchemaEnhancer,
   withVariationSchemaEnhancer,

package/src/hooks/user/useUser.js

@@ -12,7 +12,7 @@ const useUser = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!user?.id && users?.get.loading === false) {
+    if (userId && !user?.id && users?.get.loading === false) {
       dispatch(getUser(userId));
     }
   }, [dispatch, userId, user, users?.get.loading]);

package/src/internalChecks.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import packageJson from '../package.json';
+
+describe('internal checks', () => {
+  it('keeps prettier listed as a runtime dependency', () => {
+    const dependencies = packageJson.dependencies ?? {};
+
+    expect(dependencies).toHaveProperty('prettier');
+    expect(typeof dependencies.prettier).toBe('string');
+  });
+});

package/src/middleware/api.js

@@ -287,9 +287,13 @@ const apiMiddlewareFactory =
               const langFileName = toGettextLang(lang);
               import(
                 /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-              ).then((locale) => {
-                dispatch(changeLanguage(lang, locale.default));
-              });
+              )
+                .then((locale) => {
+                  dispatch(changeLanguage(lang, locale.default));
+                })
+                .catch(() => {
+                  dispatch(changeLanguage(lang, {}));
+                });
             }
           }
 
@@ -341,8 +345,13 @@ const apiMiddlewareFactory =
         (error) => {
           // Make sure an error during hydration
           // (for example when serving an archived page)
-          // doesn't hide the SSR content.
-          if (isHydrating && !hasExistingError) {
+          // doesn't hide the SSR content. Only suppress GET_CONTENT failures;
+          // user-initiated actions (LOGIN, etc.) must always dispatch _FAIL so
+          // loaders stop and errors surface.
+          const shouldIgnoreHydrationError =
+            isHydrating && !hasExistingError && type === GET_CONTENT;
+
+          if (shouldIgnoreHydrationError) {
             isHydrating = false;
             return;
           }

package/src/reducers/blockTypes/blockTypes.js

@@ -0,0 +1,38 @@
+import { GET_BLOCKTYPES_INDEX } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: {},
+  loaded: false,
+  loading: false,
+};
+
+export default function blockTypes(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_BLOCKTYPES_INDEX}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_BLOCKTYPES_INDEX}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        items: action.result,
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_BLOCKTYPES_INDEX}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: {},
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/content/content.js

@@ -3,11 +3,10 @@
  * @module reducers/content/content
  */
 
-import map from 'lodash/map';
-import mapKeys from 'lodash/mapKeys';
 import omit from 'lodash/omit';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 import {
   CREATE_CONTENT,
@@ -131,14 +130,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${CREATE_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
       const data = action.subrequest
         ? Array.isArray(result)
           ? result.map((item) => ({
@@ -188,14 +180,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${GET_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
 
       const transforms = config.getUtilities({
         type: 'transform',

package/src/reducers/diff/diff.js

@@ -4,6 +4,7 @@
  */
 
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 const initialState = {
   error: null,
@@ -29,10 +30,13 @@ export default function diff(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_DIFF}_SUCCESS`:
+      const first_result = flattenStaticBehaviors(action.result[0]);
+      const second_result = flattenStaticBehaviors(action.result[1]);
+
       return {
         ...state,
         error: null,
-        data: action.result,
+        data: [first_result, second_result],
         loaded: true,
         loading: false,
       };