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

package/src/components/manage/Blocks/Block/Order/Order.jsx

@@ -0,0 +1,367 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { find, min } from 'lodash';
+
+import { flattenTree, getProjection, removeChildrenOf } from './utilities';
+import SortableItem from './SortableItem';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+export function Order({
+  items = [],
+  onMoveBlock,
+  onDeleteBlock,
+  onSelectBlock,
+  indentationWidth = 25,
+  removable,
+  dndKitCore,
+  dndKitSortable,
+  dndKitUtilities,
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const [overId, setOverId] = useState(null);
+  const [offsetLeft, setOffsetLeft] = useState(0);
+  const [currentPosition, setCurrentPosition] = useState(null);
+
+  const {
+    DndContext,
+    closestCenter,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragOverlay,
+    MeasuringStrategy,
+    defaultDropAnimation,
+  } = dndKitCore;
+  const { SortableContext, arrayMove, verticalListSortingStrategy } =
+    dndKitSortable;
+  const { CSS } = dndKitUtilities;
+
+  const measuring = {
+    droppable: {
+      strategy: MeasuringStrategy.Always,
+    },
+  };
+
+  const dropAnimationConfig = {
+    keyframes({ transform }) {
+      return [
+        { opacity: 1, transform: CSS.Transform.toString(transform.initial) },
+        {
+          opacity: 0,
+          transform: CSS.Transform.toString({
+            ...transform.final,
+            x: transform.final.x + 5,
+            y: transform.final.y + 5,
+          }),
+        },
+      ];
+    },
+    easing: 'ease-out',
+    sideEffects({ active }) {
+      active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: defaultDropAnimation.duration,
+        easing: defaultDropAnimation.easing,
+      });
+    },
+  };
+
+  const flattenedItems = useMemo(
+    () => removeChildrenOf(flattenTree(items), activeId ? [activeId] : []),
+    [activeId, items],
+  );
+  const projected =
+    activeId && overId
+      ? getProjection(
+          flattenedItems,
+          activeId,
+          overId,
+          offsetLeft,
+          indentationWidth,
+          arrayMove,
+        )
+      : null;
+  const sensorContext = useRef({
+    items: flattenedItems,
+    offset: offsetLeft,
+  });
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  const sortedIds = useMemo(
+    () => flattenedItems.map(({ id }) => id),
+    [flattenedItems],
+  );
+  const activeItem = activeId
+    ? flattenedItems.find(({ id }) => id === activeId)
+    : null;
+
+  useEffect(() => {
+    sensorContext.current = {
+      items: flattenedItems,
+      offset: offsetLeft,
+    };
+  }, [flattenedItems, offsetLeft]);
+
+  const announcements = {
+    onDragStart({ active }) {
+      return `Picked up ${active.id}.`;
+    },
+    onDragMove({ active, over }) {
+      return getMovementAnnouncement('onDragMove', active.id, over?.id);
+    },
+    onDragOver({ active, over }) {
+      return getMovementAnnouncement('onDragOver', active.id, over?.id);
+    },
+    onDragEnd({ active, over }) {
+      return getMovementAnnouncement('onDragEnd', active.id, over?.id);
+    },
+    onDragCancel({ active }) {
+      return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+    },
+  };
+
+  return (
+    <DndContext
+      accessibility={{ announcements }}
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      measuring={measuring}
+      onDragStart={handleDragStart}
+      onDragMove={handleDragMove}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
+        {flattenedItems.map(({ id, parentId, depth, data }) => (
+          <SortableItem
+            key={id}
+            id={id}
+            parentId={parentId}
+            data={data}
+            depth={min([
+              id === activeId && projected ? projected.depth : depth,
+              1,
+            ])}
+            indentationWidth={indentationWidth}
+            onRemove={removable ? () => handleRemove(id) : undefined}
+            onSelectBlock={onSelectBlock}
+          />
+        ))}
+        {createPortal(
+          <DragOverlay dropAnimation={dropAnimationConfig}>
+            {activeId && activeItem ? (
+              <SortableItem
+                id={activeId}
+                depth={activeItem.depth}
+                clone
+                data={find(flattenedItems, { id: activeId }).data}
+                indentationWidth={indentationWidth}
+              />
+            ) : null}
+          </DragOverlay>,
+          document.body,
+        )}
+      </SortableContext>
+    </DndContext>
+  );
+
+  function handleDragStart({ active: { id: activeId } }) {
+    setActiveId(activeId);
+    setOverId(activeId);
+
+    const activeItem = flattenedItems.find(({ id }) => id === activeId);
+
+    if (activeItem) {
+      setCurrentPosition({
+        parentId: activeItem.parentId,
+        overId: activeId,
+      });
+    }
+
+    document.body.style.setProperty('cursor', 'grabbing');
+  }
+
+  function handleDragMove({ delta }) {
+    setOffsetLeft(delta.x);
+  }
+
+  function handleDragOver({ over }) {
+    setOverId(over?.id ?? null);
+  }
+
+  function handleDragEnd({ active, over }) {
+    if (projected && over) {
+      const { depth, parentId } = projected;
+      const clonedItems = JSON.parse(JSON.stringify(flattenedItems));
+      const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
+      const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+      const activeTreeItem = clonedItems[activeIndex];
+      const oldParentId = activeTreeItem.parentId;
+
+      clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+
+      // Translate position depending on parent
+      if (parentId === oldParentId) {
+        // Move from and to toplevel or move within the same grid block
+
+        let destIndex = clonedItems[overIndex].index;
+        if (clonedItems[overIndex].depth > clonedItems[activeIndex].depth) {
+          destIndex = find(clonedItems, {
+            id: clonedItems[overIndex].parentId,
+          }).index;
+        }
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position: destIndex,
+            parent: parentId,
+          },
+        });
+      } else if (parentId && oldParentId) {
+        // Move from one gridblock to another
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex < activeIndex
+                ? clonedItems[overIndex - 1].parentId
+                  ? clonedItems[overIndex - 1].index + 1
+                  : clonedItems[overIndex].index
+                : overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1,
+            parent: parentId,
+          },
+        });
+      } else if (oldParentId) {
+        // Moving to the main container from a gridblock
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex > activeIndex
+                ? overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1
+                : clonedItems[overIndex].index,
+            parent: parentId,
+          },
+        });
+      } else {
+        // Moving from the main container to a gridblock
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex < activeIndex
+                ? clonedItems[overIndex - 1].parentId
+                  ? clonedItems[overIndex - 1].index + 1
+                  : clonedItems[overIndex].index
+                : overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1,
+            parent: parentId,
+          },
+        });
+      }
+    }
+
+    resetState();
+  }
+
+  function handleDragCancel() {
+    resetState();
+  }
+
+  function resetState() {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+    setCurrentPosition(null);
+
+    document.body.style.setProperty('cursor', '');
+  }
+
+  function handleRemove(id) {
+    onDeleteBlock(id);
+  }
+
+  function getMovementAnnouncement(eventName, activeId, overId) {
+    if (overId && projected) {
+      if (eventName !== 'onDragEnd') {
+        if (
+          currentPosition &&
+          projected.parentId === currentPosition.parentId &&
+          overId === currentPosition.overId
+        ) {
+          return;
+        } else {
+          setCurrentPosition({
+            parentId: projected.parentId,
+            overId,
+          });
+        }
+      }
+
+      const clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
+      const overIndex = clonedItems.findIndex(({ id }) => id === overId);
+      const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
+      const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+
+      const previousItem = sortedItems[overIndex - 1];
+
+      let announcement;
+      const movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
+      const nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
+
+      if (!previousItem) {
+        const nextItem = sortedItems[overIndex + 1];
+        announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
+      } else {
+        if (projected.depth > previousItem.depth) {
+          announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;
+        } else {
+          let previousSibling = previousItem;
+          while (previousSibling && projected.depth < previousSibling.depth) {
+            const parentId = previousSibling.parentId;
+            previousSibling = sortedItems.find(({ id }) => id === parentId);
+          }
+
+          if (previousSibling) {
+            announcement = `${activeId} was ${movedVerb} after ${previousSibling.id}.`;
+          }
+        }
+      }
+
+      return announcement;
+    }
+
+    return;
+  }
+}
+
+export default injectLazyLibs([
+  'dndKitCore',
+  'dndKitSortable',
+  'dndKitUtilities',
+])(Order);

package/src/components/manage/Blocks/Block/Order/SortableItem.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import { Item } from './Item';
+
+const animateLayoutChanges = ({ isSorting, wasDragging }) =>
+  isSorting || wasDragging ? false : true;
+
+export function SortableItem({
+  id,
+  depth,
+  dndKitSortable,
+  dndKitUtilities,
+  ...props
+}) {
+  const { useSortable } = dndKitSortable;
+  const { CSS } = dndKitUtilities;
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id,
+    animateLayoutChanges,
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  return (
+    <Item
+      ref={setDraggableNodeRef}
+      wrapperRef={setDroppableNodeRef}
+      style={style}
+      depth={depth}
+      ghost={isDragging}
+      disableSelection={false}
+      disableInteraction={isSorting}
+      id={id}
+      handleProps={{
+        ...attributes,
+        ...listeners,
+      }}
+      {...props}
+    />
+  );
+}
+
+export default injectLazyLibs(['dndKitSortable', 'dndKitUtilities'])(
+  SortableItem,
+);

package/src/components/manage/Blocks/Block/Order/utilities.js

@@ -0,0 +1,113 @@
+import { isArray } from 'lodash';
+
+import { getBlocksLayoutFieldname } from '@plone/volto/helpers';
+
+function getDragDepth(offset, indentationWidth) {
+  return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+  items,
+  activeId,
+  overId,
+  dragOffset,
+  indentationWidth,
+  arrayMove,
+) {
+  const overItemIndex = items.findIndex(({ id }) => id === overId);
+  const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+  const activeItem = items[activeItemIndex];
+  const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  const previousItem = newItems[overItemIndex - 1];
+  const nextItem = newItems[overItemIndex + 1];
+  const dragDepth = getDragDepth(dragOffset, indentationWidth);
+  const projectedDepth = activeItem.depth + dragDepth;
+  const maxDepth = getMaxDepth({
+    previousItem,
+  });
+  const minDepth = getMinDepth({ nextItem });
+  let depth = projectedDepth;
+
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+
+  return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+
+    if (depth <= previousItem.depth) {
+      return previousItem.parentId;
+    }
+
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+
+    const newParent = newItems
+      .slice(0, overItemIndex)
+      .reverse()
+      .find((item) => item.depth === depth)?.parentId;
+
+    return newParent ?? null;
+  }
+}
+
+function getMaxDepth({ previousItem }) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(
+    previousItem?.data || {},
+  );
+  if (previousItem) {
+    return isArray(previousItem.data?.[blocksLayoutFieldname]?.items)
+      ? previousItem.depth + 1
+      : previousItem.depth;
+  }
+
+  return 0;
+}
+
+function getMinDepth({ nextItem }) {
+  if (nextItem) {
+    return nextItem.depth;
+  }
+
+  return 0;
+}
+
+function flatten(items = [], parentId = null, depth = 0) {
+  return items.reduce((acc, item, index) => {
+    return [
+      ...acc,
+      { ...item, parentId, depth, index },
+      ...flatten(item.children, item.id, depth + 1),
+    ];
+  }, []);
+}
+
+export function flattenTree(items) {
+  return flatten(items);
+}
+
+export function findItem(items, itemId) {
+  return items.find(({ id }) => id === itemId);
+}
+
+export function removeChildrenOf(items, ids) {
+  const excludeParentIds = [...ids];
+
+  return items.filter((item) => {
+    if (item.parentId && excludeParentIds.includes(item.parentId)) {
+      if (item.children.length) {
+        excludeParentIds.push(item.id);
+      }
+      return false;
+    }
+
+    return true;
+  });
+}

package/src/components/manage/Blocks/Container/Edit.jsx

@@ -129,6 +129,7 @@ const ContainerBlockEdit = (props) => {
         blocksConfig={allowedBlocksConfig}
         title={data.placeholder}
         isContainer
+        isMainForm={false}
         stopPropagation={selectedBlock}
         disableAddBlockOnEnterKey
         onSelectBlock={(id) => {

package/src/components/manage/Blocks/Grid/Edit.jsx

@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useState } from 'react';
 import ContainerEdit from '../Container/Edit';
+import { useDispatch, useSelector } from 'react-redux';
+import { setUIState } from '@plone/volto/actions';
 
 const GridBlockEdit = (props) => {
   const { data } = props;
 
   const columnsLength = data?.blocks_layout?.items?.length || 0;
 
-  const [selectedBlock, setSelectedBlock] = useState(null);
+  const selectedBlock = useSelector((state) => state.form.ui.gridSelected);
+  const dispatch = useDispatch();
 
   return (
     <div
@@ -22,14 +24,14 @@ const GridBlockEdit = (props) => {
       // This is required to enabling a small "in-between" clickable area
       // for bringing the Grid sidebar alive once you have selected an inner block
       onClick={(e) => {
-        if (!e.block) setSelectedBlock(null);
+        if (!e.block) dispatch(setUIState({ gridSelected: null }));
       }}
       role="presentation"
     >
       <ContainerEdit
         {...props}
         selectedBlock={selectedBlock}
-        setSelectedBlock={setSelectedBlock}
+        setSelectedBlock={(id) => dispatch(setUIState({ gridSelected: id }))}
         direction="horizontal"
       />
     </div>

package/src/components/manage/Blocks/Image/schema.js

@@ -77,10 +77,12 @@ export function ImageSchema({ formData, intl }) {
       align: {
         title: intl.formatMessage(messages.Align),
         widget: 'align',
+        default: 'center',
       },
       size: {
         title: intl.formatMessage(messages.size),
         widget: 'image_size',
+        default: 'l',
       },
       href: {
         title: intl.formatMessage(messages.LinkTo),

package/src/components/manage/Controlpanels/Relations/RelationsListing.jsx

@@ -45,7 +45,7 @@ const RelationsListing = ({
 
   const staticCatalogVocabularyQuery = useSelector(
     (state) =>
-      state.relations?.relations?.[relationtype]
+      state.relations?.relations?.data?.[relationtype]
         ?.staticCatalogVocabularyQuery || {},
   );
 

package/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx

@@ -414,7 +414,7 @@ const RelationsMatrix = (props) => {
                           <Popup
                             trigger={
                               <a
-                                href="https://6.docs.plone.org/volto/recipes/widget.html#restricting-potential-targets"
+                                href="https://6.docs.plone.org/volto/development/widget.html#widget-relation-field-label"
                                 target="_blank"
                                 rel="noopener noreferrer"
                               >