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

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/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,

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;
+      }
+    }
+  }
+}

package/types/actions/form/form.d.ts

@@ -2,6 +2,13 @@
  * Set form data function.
  * @function setFormData
  * @param {Object} data New form data.
- * @returns {Object} Set sidebar action.
+ * @returns {Object} Set form data action.
  */
 export function setFormData(data: any): any;
+/**
+ * Set ui state function.
+ * @function setUIState
+ * @param {Object} ui New ui state.
+ * @returns {Object} Set ui state action.
+ */
+export function setUIState(ui: any): any;

package/types/actions/index.d.ts

@@ -10,7 +10,6 @@ export { listRoles } from "@plone/volto/actions/roles/roles";
 export { getTypes } from "@plone/volto/actions/types/types";
 export { getQuerystring } from "@plone/volto/actions/querystring/querystring";
 export { getQueryStringResults } from "@plone/volto/actions/querystringsearch/querystringsearch";
-export { setFormData } from "@plone/volto/actions/form/form";
 export { loadLazyLibrary } from "@plone/volto/actions/lazyLibraries/lazyLibraries";
 export { getContextNavigation } from "@plone/volto/actions/contextNavigation/contextNavigation";
 export { authenticatedRole } from "@plone/volto/actions/authRole/authRole";
@@ -38,6 +37,7 @@ export { login, loginRenew, logout, resetLoginRequest } from "@plone/volto/actio
 export { getVocabulary, getVocabularyTokenTitle } from "@plone/volto/actions/vocabularies/vocabularies";
 export { getWorkflow, transitionWorkflow } from "@plone/volto/actions/workflow/workflow";
 export { setMetadataFieldsets, setMetadataFocus, resetMetadataFocus, setSidebarTab } from "@plone/volto/actions/sidebar/sidebar";
+export { setFormData, setUIState } from "@plone/volto/actions/form/form";
 export { deleteLinkTranslation, getTranslationLocator, linkTranslation } from "@plone/volto/actions/translations/translations";
 export { setBlocksClipboard, resetBlocksClipboard } from "@plone/volto/actions/blocksClipboard/blocksClipboard";
 export { changeLanguage, changeLanguageCookies } from "./language/language";

package/types/components/manage/Blocks/Block/Order/Item.d.ts

@@ -0,0 +1,2 @@
+export const Item: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/types/components/manage/Blocks/Block/Order/Order.d.ts

@@ -0,0 +1,13 @@
+export function Order({ items, onMoveBlock, onDeleteBlock, onSelectBlock, indentationWidth, removable, dndKitCore, dndKitSortable, dndKitUtilities, }: {
+    items?: any[];
+    onMoveBlock: any;
+    onDeleteBlock: any;
+    onSelectBlock: any;
+    indentationWidth?: number;
+    removable: any;
+    dndKitCore: any;
+    dndKitSortable: any;
+    dndKitUtilities: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare const _default: any;
+export default _default;

package/types/components/manage/Blocks/Block/Order/SortableItem.d.ts

@@ -0,0 +1,9 @@
+export function SortableItem({ id, depth, dndKitSortable, dndKitUtilities, ...props }: {
+    [x: string]: any;
+    id: any;
+    depth: any;
+    dndKitSortable: any;
+    dndKitUtilities: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare const _default: any;
+export default _default;

package/types/components/manage/Blocks/Block/Order/utilities.d.ts

@@ -0,0 +1,9 @@
+export function getProjection(items: any, activeId: any, overId: any, dragOffset: any, indentationWidth: any, arrayMove: any): {
+    depth: any;
+    maxDepth: any;
+    minDepth: any;
+    parentId: any;
+};
+export function flattenTree(items: any): any;
+export function findItem(items: any, itemId: any): any;
+export function removeChildrenOf(items: any, ids: any): any;

package/types/components/manage/Blocks/Image/schema.d.ts

@@ -15,10 +15,12 @@ export function ImageSchema({ formData, intl }: {
         align: {
             title: any;
             widget: string;
+            default: string;
         };
         size: {
             title: any;
             widget: string;
+            default: string;
         };
         href: {
             title: any;