@plone/volto 18.0.0-alpha.32 → 18.0.0-alpha.34

package/src/components/manage/Widgets/TextWidget.stories.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import TextWidget from './TextWidget';
 import WidgetStory from './story';
 
@@ -6,7 +5,10 @@ export const Text = WidgetStory.bind({
   props: { id: 'text', title: 'Text' },
   widget: TextWidget,
 });
-
+Text.args = {
+  description: 'description',
+  placeholder: 'placeholder',
+};
 export default {
   title: 'Edit Widgets/Text',
   component: TextWidget,
@@ -17,5 +19,14 @@ export default {
       </div>
     ),
   ],
-  argTypes: {},
+  argTypes: {
+    description: {
+      control: 'text',
+      description: 'description',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'placeholder',
+    },
+  },
 };

package/src/components/theme/App/App.jsx

@@ -151,6 +151,11 @@ export class App extends Component {
             [trim(join(split(this.props.pathname, '/'), ' section-'))]:
               this.props.pathname !== '/',
             siteroot: this.props.pathname === '/',
+            [`is-adding-contenttype-${decodeURIComponent(
+              this.props.location?.search?.replace('?type=', ''),
+            )
+              .replace(' ', '')
+              .toLowerCase()}`]: this.props.location?.search,
             'is-authenticated': !!this.props.token,
             'is-anonymous': !this.props.token,
             'cms-ui': isCmsUI,

package/src/components/theme/Footer/Footer.jsx

@@ -42,6 +42,7 @@ const Footer = ({ intl }) => {
       textAlign="center"
       id="footer"
       aria-label="Footer"
+      tabIndex="-1"
     >
       <Container>
         <Segment basic inverted color="grey" className="discreet">

package/src/components/theme/FormattedDate/FormattedDate.jsx

@@ -18,13 +18,25 @@ const FormattedDate = ({
   const language = useSelector((state) => locale || state.intl.locale);
   const toDate = (d) => (typeof d === 'string' ? new Date(d) : d);
   const args = { date, long, includeTime, format, locale: language };
+  const new_date = new Date(toDate(date));
+  // Dat check taken from https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript#1353711
+  if (Object.prototype.toString.call(new_date) === '[object Date]') {
+    // it is a date
+    if (isNaN(new_date)) {
+      // date object is not valid
+      return <span>bad date</span>;
+    }
+  } else {
+    // not a date object
+    return <span>not a date</span>;
+  }
 
   return (
     <time
       className={className}
       dateTime={date}
       title={new Intl.DateTimeFormat(language, long_date_format)
-        .format(new Date(toDate(date)))
+        .format(new_date)
         .replace('\u202F', ' ')}
     >
       {children

package/src/components/theme/Icon/Icon.jsx

@@ -12,10 +12,10 @@ const defaultSize = '36px';
  * @function Field
  * @param {Object} props Component properties.
  * @param {string} props.name Name source object.
- * @param {string} props.size Size of the Icon (in px).
- * @param {string} props.color Color of the Icon.
- * @param {string} props.className className to add to the component.
- * @param {string} props.title Title (a11y).
+ * @param {string} [props.size] Size of the Icon (in px).
+ * @param {string} [props.color] Color of the Icon.
+ * @param {string} [props.className] className to add to the component.
+ * @param {string} [props.title] Title (a11y).
  * @returns {string} Markup of the component.
  *
  * Use:

package/src/components/theme/Navigation/Navigation.jsx

@@ -49,7 +49,7 @@ const Navigation = (props) => {
     setisMobileMenuOpen(false);
   };
   return (
-    <nav className="navigation" id="navigation" aria-label="Site">
+    <nav className="navigation" id="navigation" aria-label="Site" tabIndex="-1">
       {items?.length ? (
         <div className="hamburger-wrapper mobile tablet only">
           <button

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom';
 import config from '@plone/volto/registry';
-
 import type { Content } from '@plone/types';
 
 /*
@@ -17,11 +16,11 @@ const SlotRenderer = ({
   content: Content;
   navRoot?: Content;
 }) => {
-  const pathname = useLocation().pathname;
+  const location = useLocation();
 
   let slots = config.getSlot(name, {
     content,
-    pathname,
+    location: location as any, // Since we are using an older version of history, we need to cast it to any
     // This is to cover the use case while adding a new content and we don't have
     // have the navRoot information in the initial content. This will be
     // useful for SlotRenderers rendered in the `Add` route.
@@ -48,7 +47,7 @@ const SlotRenderer = ({
             <SlotComponent
               key={name}
               content={content}
-              pathname={pathname}
+              location={location}
               navRoot={navRoot}
             />
           );

package/src/components/theme/View/View.jsx

@@ -237,7 +237,7 @@ class View extends Component {
       this.getViewByLayout() || this.getViewByType() || this.getViewDefault();
 
     return (
-      <div id="view">
+      <div id="view" tabIndex="-1">
         <ContentMetadataTags content={this.props.content} />
         {/* Body class if displayName in component is set */}
         <BodyClass

package/src/config/Loadables.jsx

@@ -1,5 +1,20 @@
 import loadable from '@loadable/component';
 
+// This is to make happy the types declaration extractor (tsc) that is not able to
+// extract one private method the types from `@dnd-kit` library:
+// error TS9006: Declaration emit for this file requires using private name
+// 'DefaultDropAnimationSideEffectsOptions' from module '".../node_modules/@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation"'.
+// An explicit type annotation may unblock declaration emit
+
+/**
+ * @typedef {Object} LoadableLib
+ * @property {() => Promise<any>} import
+ * @property {Object} [options]
+ */
+
+/**
+ * @type {{ [key: string]: LoadableLib }}
+ */
 export const loadables = {
   prettierStandalone: loadable.lib(() => import('prettier/standalone')),
   prettierParserHtml: loadable.lib(() => import('prettier/plugins/html')),
@@ -35,4 +50,7 @@ export const loadables = {
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
+  dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
+  dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/config/server.js

@@ -18,7 +18,6 @@ const settings = {
   ],
   criticalCssPath: 'public/critical.css',
   readCriticalCss: null, // so it will be defaultReadCriticalCss
-  extractScripts: { errorPages: false },
   staticFiles: [
     {
       id: 'root_static',

package/src/constants/ActionTypes.js

@@ -145,4 +145,5 @@ 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';
+export const SET_UI_STATE = 'SET_UI_STATE';
 export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';

package/src/express-middleware/static.js

@@ -1,28 +1,46 @@
 import express from 'express';
 import path from 'path';
+import AddonConfigurationRegistry from '@plone/registry/src/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 = new AddonConfigurationRegistry(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/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.
@@ -714,6 +718,183 @@ export function findBlocks(blocks, types, result = []) {
   return result;
 }
 
+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:
+      properties[blocksFieldName][n]?.['@type'] === 'gridBlock'
+        ? 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

@@ -22,6 +22,7 @@ import {
   getPreviousNextBlock,
   blocksFormGenerator,
   findBlocks,
+  findContainer,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1507,3 +1508,138 @@ 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,
+      });
+    });
+  });
+});

package/src/helpers/Html/Html.jsx

@@ -187,14 +187,12 @@ class Html extends Component {
             charSet="UTF-8"
           />
           {/* Add the crossorigin while in development */}
-          {this.props.extractScripts !== false
-            ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
-                  crossOrigin:
-                    process.env.NODE_ENV === 'production' ? undefined : 'true',
-                }),
-              )
-            : ''}
+          {extractor.getScriptElements().map((elem) =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+            }),
+          )}
         </body>
       </html>
     );

package/src/helpers/Slots/index.tsx

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

package/src/helpers/index.js

@@ -61,6 +61,8 @@ export {
   buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
+  getBlocksHierarchy,
+  moveBlockEnhanced,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export {
   getSimpleDefaultBlocks,
@@ -98,6 +100,8 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  insertInArray,
+  removeFromArray,
   arrayRange,
   reorderArray,
   isInteractiveElement,