@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.21

package/src/config/Widgets.jsx

@@ -18,7 +18,6 @@ import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
 import TokenWidget from '@plone/volto/components/manage/Widgets/TokenWidget';
-import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
 import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
 import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUrlWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
@@ -55,13 +54,14 @@ import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
 
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
+export const DatetimeWidget = loadable(
+  () => import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
 );
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
 );
 
 // Widgets mapping
@@ -76,7 +76,6 @@ export const widgetMapping = {
     site_logo: RegistryImageWidget,
   },
   widget: {
-    richtext: WysiwygWidget,
     textarea: TextareaWidget,
     datetime: DatetimeWidget,
     date: DatetimeWidget,

package/src/config/index.js

@@ -1,7 +1,3 @@
-/**
- * Config.
- * @module config
- */
 import { parse as parseUrl } from 'url';
 import { defaultWidget, widgetMapping } from './Widgets';
 import {
@@ -31,8 +27,6 @@ import {
   filterControlPanelsSchema,
 } from './ControlPanels';
 
-import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
-
 import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
@@ -79,7 +73,7 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
-      // Added here for documentation purposes, addded at the end because it
+      // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
@@ -116,8 +110,6 @@ let config = {
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
     nonContentRoutes,
-    richtextEditorSettings, // Part of draftjs support, to be removed
-    richtextViewSettings, // Part of draftjs support, to be removed
     imageObjects: ['Image'],
     reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
@@ -149,15 +141,6 @@ let config = {
         'reactBeautifulDnd',
         // 'diffLib',
       ],
-      draftEditor: [
-        'immutableLib',
-        'draftJs',
-        'draftJsLibIsSoftNewlineEvent',
-        'draftJsFilters',
-        'draftJsInlineToolbarPlugin',
-        'draftJsImportHtml',
-        'draftJsBlockBreakoutPlugin',
-      ],
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
@@ -227,6 +210,7 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
+  slots: {},
   components,
 };
 
@@ -254,5 +238,6 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
+ConfigRegistry.slots = config.slots;
 
 applyAddonConfiguration(ConfigRegistry);

package/src/constants/ActionTypes.js

@@ -82,6 +82,9 @@ export const REVERT_HISTORY = 'REVERT_HISTORY';
 export const REVERT_TRANSACTIONS = 'REVERT_TRANSACTIONS';
 export const SEARCH_CONTENT = 'SEARCH_CONTENT';
 export const SET_SIDEBAR_TAB = 'SET_SIDEBAR_TAB';
+export const SET_METADATA_FIELDSETS = 'SET_METADATA_FIELDSETS';
+export const SET_METADATA_FOCUS = 'SET_METADATA_FOCUS';
+export const RESET_METADATA_FOCUS = 'RESET_METADATA_FOCUS';
 export const TRANSITION_WORKFLOW = 'TRANSITION_WORKFLOW';
 export const UNINSTALL_ADDON = 'UNINSTALL_ADDON';
 export const UPDATE_CONTENT = 'UPDATE_CONTENT';
@@ -141,3 +144,4 @@ export const POST_UPGRADE = 'POST_UPGRADE';
 export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
 export const GET_SITE = 'GET_SITE';
 export const GET_NAVROOT = 'GET_NAVROOT';
+export const SET_FORM_DATA = 'SET_FORM_DATA';

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/Blocks/Blocks.js

@@ -483,26 +483,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 +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 });
 }
@@ -554,7 +563,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 +571,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 +603,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
  *
@@ -629,10 +701,13 @@ 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 (containerBlockTypes.includes(block['@type']) || child_blocks) {
+      findBlocks(child_blocks, types, result);
     }
   });
 

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

@@ -18,6 +18,7 @@ import {
   applySchemaDefaults,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   blocksFormGenerator,
   findBlocks,
@@ -1066,6 +1067,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', () => {

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

@@ -0,0 +1,39 @@
+import { getSimpleDefaultBlocks, getDefaultBlocks } from './defaultBlocks';
+
+describe('Initial Blocks helpers', () => {
+  describe('getSimpleDefaultBlocks', () => {
+    it('Get the simple (legacy) default blocks from the local config', () => {
+      const initialBlocksConfig = {
+        Document: ['leadImage', 'title', 'slate'],
+      };
+      const [blocks, blocks_layout] = getSimpleDefaultBlocks(
+        initialBlocksConfig['Document'],
+      );
+
+      expect(blocks[blocks_layout[0]]['@type']).toBe('leadImage');
+      expect(blocks[blocks_layout[1]]['@type']).toBe('title');
+      expect(blocks[blocks_layout[2]]['@type']).toBe('slate');
+    });
+  });
+
+  describe('getDefaultBlocks', () => {
+    it('Get the default blocks from the local config', () => {
+      const initialBlocksConfig = {
+        Document: [
+          { '@type': 'leadImage', fixed: true, required: true },
+          { '@type': 'title' },
+          { '@type': 'slate' },
+        ],
+      };
+      const [blocks, blocks_layout] = getDefaultBlocks(
+        initialBlocksConfig['Document'],
+      );
+
+      expect(blocks[blocks_layout[0]]['@type']).toBe('leadImage');
+      expect(blocks[blocks_layout[0]].fixed).toBe(true);
+      expect(blocks[blocks_layout[0]].required).toBe(true);
+      expect(blocks[blocks_layout[1]]['@type']).toBe('title');
+      expect(blocks[blocks_layout[2]]['@type']).toBe('slate');
+    });
+  });
+});

package/src/helpers/Blocks/defaultBlocks.ts

@@ -0,0 +1,39 @@
+import { v4 as uuid } from 'uuid';
+
+export function getSimpleDefaultBlocks(initialBlocksConfig: string[]) {
+  let initialBlocksLayout;
+  let initialBlocks;
+  if (initialBlocksConfig) {
+    initialBlocksLayout = initialBlocksConfig.map(() => uuid());
+    initialBlocks = initialBlocksLayout.reduce(
+      (acc, value, index) => ({
+        ...acc,
+        [value]: { '@type': initialBlocksConfig[index] },
+      }),
+      {},
+    );
+  } else {
+    return null;
+  }
+
+  return [initialBlocks, initialBlocksLayout];
+}
+
+export function getDefaultBlocks(initialBlocksConfig: object[]) {
+  let initialBlocksLayout;
+  let initialBlocks;
+  if (initialBlocksConfig) {
+    initialBlocksLayout = initialBlocksConfig.map(() => uuid());
+    initialBlocks = initialBlocksLayout.reduce(
+      (acc, value, index) => ({
+        ...acc,
+        [value]: initialBlocksConfig[index],
+      }),
+      {},
+    );
+  } else {
+    return null;
+  }
+
+  return [initialBlocks, initialBlocksLayout];
+}

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -47,7 +47,7 @@ export const addExtensionFieldToSchema = ({
   items,
   intl,
   title,
-  description,
+  description = '',
   insertFieldToOrder = _addField,
 }) => {
   const _ = intl.formatMessage;
@@ -64,6 +64,8 @@ export const addExtensionFieldToSchema = ({
 
   schema.properties[name] = {
     title: _(title),
+    // TODO: is description sensible in here? The argument is not used anywhere
+    // description: _(description),
     choices: items?.map(({ id, title }) => [
       id,
       _({ id: title, defaultMessage: title }),
@@ -199,6 +201,8 @@ export const applySchemaEnhancer = ({
   formData,
   intl,
   blocksConfig = config.blocks.blocksConfig,
+  navRoot,
+  contentType,
 }) => {
   let schema, schemaEnhancer;
 
@@ -215,6 +219,8 @@ export const applySchemaEnhancer = ({
         schema: cloneDeepSchema(originalSchema),
         formData,
         intl,
+        navRoot,
+        contentType,
       });
     return schema || originalSchema;
   }
@@ -230,12 +236,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 +257,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 +265,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 +278,15 @@ export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
     });
   }
 
+  schema = applySchemaEnhancer({
+    schema,
+    formData,
+    intl,
+    blocksConfig,
+    navRoot,
+    contentType,
+  });
+
   return <FormComponent {...props} schema={schema} />;
 };
 

package/src/helpers/FormValidation/FormValidation.js

@@ -157,7 +157,7 @@ const widgetValidation = {
  * The string that comes my not be a valid JSON
  * @param {string} requestItem
  */
-const tryParseJSON = (requestItem) => {
+export const tryParseJSON = (requestItem) => {
   let resultObj = null;
   try {
     resultObj = JSON.parse(requestItem);

package/src/helpers/Html/Html.jsx

@@ -143,8 +143,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,

package/src/helpers/Slots/index.tsx

@@ -0,0 +1,12 @@
+import type { Content } from '@plone/types';
+import { matchPath } from 'react-router-dom';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ pathname }: { pathname: string }) =>
+    Boolean(matchPath(pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content }: { content: Content }) =>
+    contentType.includes(content?.['@type']);
+}

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),
     );
   });