@plone/volto 18.0.0-alpha.33 → 18.0.0-alpha.35

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.
@@ -689,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
  *
@@ -697,8 +714,6 @@ 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
@@ -706,7 +721,7 @@ export function findBlocks(blocks, types, result = []) {
     const child_blocks = block.blocks || block.data?.blocks;
     if (types.includes(block['@type'])) {
       result.push(blockId);
-    } else if (containerBlockTypes.includes(block['@type']) || child_blocks) {
+    } else if (isBlockContainer(block)) {
       findBlocks(child_blocks, types, result);
     }
   });
@@ -714,6 +729,185 @@ export function findBlocks(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

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

package/src/helpers/index.js

@@ -30,6 +30,7 @@ export {
   removeProtocol,
   URLUtils,
   flattenScales,
+  getFieldURL,
 } from '@plone/volto/helpers/Url/Url';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 export {
@@ -61,6 +62,8 @@ export {
   buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
+  getBlocksHierarchy,
+  moveBlockEnhanced,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export {
   getSimpleDefaultBlocks,
@@ -98,6 +101,8 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  insertInArray,
+  removeFromArray,
   arrayRange,
   reorderArray,
   isInteractiveElement,

package/src/reducers/form/form.js

@@ -4,10 +4,19 @@
  * @module reducers/form/form
  */
 
-import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_FORM_DATA,
+  SET_UI_STATE,
+} from '@plone/volto/constants/ActionTypes';
 
 const initialState = {
   global: {},
+  ui: {
+    selected: null,
+    multiSelected: [],
+    gridSelected: null,
+    hovered: null,
+  },
 };
 
 /**
@@ -23,6 +32,14 @@ export default function form(state = initialState, action = {}) {
         ...state,
         global: action.data,
       };
+    case SET_UI_STATE:
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          ...action.ui,
+        },
+      };
     default:
       return state;
   }

package/src/reducers/form/form.test.js

@@ -3,7 +3,15 @@ import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
 
 describe('Form reducer', () => {
   it('should return the initial state', () => {
-    expect(form()).toEqual({ global: {} });
+    expect(form()).toEqual({
+      global: {},
+      ui: {
+        gridSelected: null,
+        hovered: null,
+        multiSelected: [],
+        selected: null,
+      },
+    });
   });
 
   it('should handle SET_FORM_DATA', () => {
@@ -14,6 +22,12 @@ describe('Form reducer', () => {
       }),
     ).toEqual({
       global: { foo: 'bar' },
+      ui: {
+        gridSelected: null,
+        hovered: null,
+        multiSelected: [],
+        selected: null,
+      },
     });
   });
 });

package/theme/themes/pastanaga/extras/blocks.less

@@ -36,20 +36,21 @@
   display: inline-block;
 }
 
-.block .block.selected::before,
-.block .block.selected:hover::before {
-  border-width: 1px;
-  border-color: rgba(120, 192, 215, 0.75);
-}
-
 [data-slate-editor='true'] {
   outline: none;
 }
 
+.block .block.hovered::before,
 .block .block:hover::before {
   border-color: rgba(120, 192, 215, 0.375);
 }
 
+.block .block.selected::before,
+.block .block.selected:hover::before {
+  border-width: 1px;
+  border-color: rgba(120, 192, 215, 0.75);
+}
+
 .block .block.multiSelected::before {
   z-index: 1;
   background-color: rgba(120, 192, 215, 0.375);

package/theme/themes/pastanaga/extras/sidebar.less

@@ -504,3 +504,148 @@
 .formtabs {
   flex-wrap: wrap;
 }
+
+// Order
+.tree-item-wrapper {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  margin-bottom: -1px;
+  list-style: none;
+
+  .text {
+    overflow: hidden;
+    flex-grow: 1;
+    padding-left: 0.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.disable-interaction {
+    pointer-events: none;
+  }
+
+  &.disable-selection,
+  &.clone {
+    .text {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+
+  &.clone {
+    display: inline-block;
+    width: 375px;
+    height: 43px;
+    padding: 0;
+    pointer-events: none;
+
+    .tree-item {
+      box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+    }
+  }
+
+  &.ghost {
+    &.indicator {
+      position: relative;
+      z-index: 1;
+      margin-bottom: -1px;
+      opacity: 1;
+
+      .tree-item {
+        position: relative;
+        height: 8px;
+        padding: 0;
+        border-color: #2389ff;
+        background-color: #56a1f8;
+
+        &:before {
+          position: absolute;
+          top: -4px;
+          left: -8px;
+          display: block;
+          width: 12px;
+          height: 12px;
+          border: 1px solid #2389ff;
+          border-radius: 50%;
+          background-color: #ffffff;
+          content: '';
+        }
+
+        > * {
+          height: 0;
+          /* Items are hidden using height and opacity to retain focus */
+          opacity: 0;
+        }
+      }
+    }
+
+    &:not(.indicator) {
+      opacity: 0.5;
+    }
+
+    .tree-item > * {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--vertical-padding) 10px;
+    border: 1px solid #edf1f2;
+    background-color: #fff;
+    color: #222;
+    cursor: pointer;
+    --vertical-padding: 10px;
+
+    .delete {
+      visibility: hidden;
+    }
+
+    &.depth-0 {
+      border-left: solid 1px white;
+    }
+
+    &.hovered {
+      z-index: 99;
+      border: solid 1px #69b6fa;
+    }
+
+    &.selected {
+      z-index: 99;
+      border: solid 1px #2996da;
+
+      .delete {
+        visibility: visible;
+      }
+    }
+
+    &.multiSelected {
+      z-index: 99;
+      border: solid 1px #2996da;
+      background-color: rgba(120, 192, 215, 0.375);
+    }
+
+    .action {
+      border: 0;
+      margin-left: 8px;
+      background-color: transparent;
+      color: rgba(0, 0, 0, 0.6);
+
+      .icon {
+        vertical-align: middle;
+      }
+
+      &.delete {
+        cursor: pointer;
+      }
+
+      &.drag {
+        cursor: grab;
+      }
+    }
+  }
+}