Merge pull request #1412 from creative-commoners/pulls/6/kb-reorder

ENH Allow reordering elements with space

Author: GuySartorelli

client/dist/js/bundle.js

@@ -10,6 +10,7 @@
     "ElementArchiveAction.DUPLICATE_PERMISSION_DENY": "Duplicate, insufficient permissions",
     "ElementEditForm.ERROR_NOTIFICATION": "Error displaying the edit form for this block",
     "ElementHeader.BROKEN": "This element is of obsolete type {type}.",
+    "ElementHeader.DRAG_HANDLE": "Reorder block",
     "ElementHeader.EXPAND": "Show editable fields",
     "ElementHeader.NOTITLE": "Untitled {type} block",
     "ElementHeader.STATE_DRAFT": "Item has not been published yet",

client/dist/styles/bundle.css

@@ -45,6 +45,7 @@ const Element = (props) => {
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
@@ -56,6 +57,23 @@ const Element = (props) => {
     transition,
   };
 
+  // Defensive fallback: useSortable() returns listeners as an object or undefined (not guaranteed
+  // to always be defined), so we normalise to {} to safely call Object.entries() below.
+  const sortableListeners = listeners || {};
+  // Split dnd-kit listeners into keyboard vs pointer groups so they can be attached to different
+  // DOM nodes: pointer listeners stay on the outer element container (for mouse/touch drag),
+  // while keyboard listeners are forwarded to the drag-handle button inside the header so that
+  // keyboard-initiated sorting activates only from the focused handle, not the whole block.
+  const keyboardListeners = {};
+  const pointerListeners = {};
+  Object.entries(sortableListeners).forEach(([key, value]) => {
+    if (key.startsWith('onKey')) {
+      keyboardListeners[key] = value;
+      return;
+    }
+    pointerListeners[key] = value;
+  });
+
   const formRenderedIfNeeded = formHasRendered || !props.type.inlineEditable;
 
   useEffect(() => {
@@ -247,6 +265,13 @@ const Element = (props) => {
     if (type.broken) {
       return;
     }
+    const dragHandle = event.target.closest
+      ? event.target.closest('.element-editor-header__drag-handle')
+      : null;
+    if (dragHandle) {
+      event.stopPropagation();
+      return;
+    }
     if (event.target.type === 'button') {
       // Stop bubbling if the click target was a button within this container
       event.stopPropagation();
@@ -268,9 +293,14 @@ const Element = (props) => {
    */
   const handleKeyUp = (event) => {
     const { nodeName } = event.target;
+    const dragHandle = event.target.closest
+      ? event.target.closest('.element-editor-header__drag-handle')
+      : null;
     if ((event.key === ' ' || event.key === 'Enter')
       // Ignore presses while focusing inputs and textareas
       && !['input', 'textarea'].includes(nodeName.toLowerCase())
+      // Ignore presses while focused on the drag handle
+      && !dragHandle
     ) {
       handleExpand(event);
     }
@@ -341,6 +371,7 @@ const Element = (props) => {
     return null;
   }
 
+  const elementDomId = `element-${element.id}`;
   const elementClassNames = classNames(
     'element-editor__element',
     {
@@ -360,17 +391,16 @@ const Element = (props) => {
   };
 
   const content = <div
+    id={elementDomId}
     className={elementClassNames}
     onClick={handleExpand}
     onKeyUp={handleKeyUp}
     role="button"
     tabIndex={0}
     title={getLinkTitle(type)}
     key={element.id}
-    // sortable properties
     ref={setNodeRef}
-    {...attributes}
-    {...listeners}
+    {...pointerListeners}
     style={style}
   >
     <ElementContext.Provider value={providerValue}>
@@ -384,6 +414,10 @@ const Element = (props) => {
         handleEditTabsClick={handleTabClick}
         activeTab={activeTab}
         disableTooltip={isDragging}
+        sortableListeners={keyboardListeners}
+        sortableAttributes={attributes}
+        sortableActivatorRef={setActivatorNodeRef}
+        elementId={elementDomId}
       />
       <ContentComponent
         id={element.id}
@@ -467,7 +501,7 @@ Element.propTypes = {
   activeTab: PropTypes.string,
   tabSetName: PropTypes.string,
   onActivateTab: PropTypes.func,
-  isOver: PropTypes.bool.isRequired,
+  onChangeHasUnsavedChanges: PropTypes.func.isRequired,
   saveElement: PropTypes.bool.isRequired,
   onBeforeSubmitForm: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types
   onAfterSubmitResponse: PropTypes.func.isRequired,

client/lang/src/en.json

@@ -12,14 +12,20 @@
 
   &:hover {
     .element-editor-header__drag-handle {
-      display: block;
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 
   &:focus-within {
     // Set this explicitly instead of just setting the variable beacause
     // we don't want to affect child items
     outline-offset: var(--focus-outline-offset-inset);
+
+    .element-editor-header__drag-handle {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 
   &--broken {
@@ -29,5 +35,10 @@
   &--dragging {
     opacity: 0.3;
     cursor: grabbing;
+
+    .element-editor-header__drag-handle {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

client/src/components/ElementEditor/Element.js

@@ -6,11 +6,86 @@ import { compose } from 'redux';
 import { inject } from 'lib/Injector';
 import classNames from 'classnames';
 import i18n from 'i18n';
-import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  KeyboardCode,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
 import { getElementTypeConfig } from 'state/editor/elementConfig';
 
+export const keyboardCoordinateGetter = (event, args) => {
+  event.preventDefault();
+  const { active, over, droppableContainers } = args.context;
+  if (!droppableContainers) {
+    return undefined;
+  }
+  if (!active || !active.data || !active.data.current) {
+    return undefined;
+  }
+  const { sortable } = active.data.current;
+  if (!sortable || !Array.isArray(sortable.items)) {
+    return undefined;
+  }
+  const items = sortable.items;
+  const overId = over ? over.id : active.id;
+  const overIndex = items.indexOf(overId);
+  const activeIndex = items.indexOf(active.id);
+  if (overIndex === -1 || activeIndex === -1) {
+    return undefined;
+  }
+  const directionUp = -1;
+  const directionDown = 1;
+  let nextIndex = overIndex;
+  let direction = directionDown;
+  switch (event.code) {
+    case KeyboardCode.Down:
+    case KeyboardCode.Right:
+      nextIndex = Math.min(overIndex + 1, items.length - 1);
+      break;
+    case KeyboardCode.Up:
+    case KeyboardCode.Left:
+      nextIndex = Math.max(0, overIndex - 1);
+      direction = directionUp;
+      break;
+    default:
+      return undefined;
+  }
+  if (overIndex === nextIndex) {
+    return undefined;
+  }
+  const sortedItems = arrayMove(items, activeIndex, overIndex);
+  const currentNodeIdAtNextIndex = sortedItems[nextIndex];
+  if (!droppableContainers.has(currentNodeIdAtNextIndex)) {
+    return undefined;
+  }
+  if (!droppableContainers.has(active.id)) {
+    return undefined;
+  }
+  const activeNode = droppableContainers.get(active.id).node?.current;
+  if (!activeNode) {
+    return undefined;
+  }
+  const newNode = droppableContainers.get(currentNodeIdAtNextIndex).node?.current;
+  if (!newNode) {
+    return undefined;
+  }
+  const activeRect = activeNode.getBoundingClientRect();
+  const newRect = newNode.getBoundingClientRect();
+  const offset = direction === directionDown
+    ? newRect.top - activeRect.bottom
+    : activeRect.top - newRect.bottom;
+  return {
+    x: 0,
+    y: activeRect.top + direction * (newRect.height + offset),
+  };
+};
+
 function ElementList({
   elements = [],
   sharedObject = {
@@ -35,7 +110,6 @@ function ElementList({
   const [increment, setIncrement] = useState(0);
   const [hasUnsavedChangesBlockIDs, setHasUnsavedChangesBlockIDs] = useState({});
   const [validBlockIDs, setValidBlockIDs] = useState({});
-
   // Update the sharedObject so state can be set from entwine.js
   sharedObject.setIncrement = setIncrement;
   sharedObject.setSaveAllElements = setSaveAllElements;
@@ -139,8 +213,23 @@ function ElementList({
         distance: 10
       }
     }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: keyboardCoordinateGetter
+    })
   );
 
+  const handleDragStart = (event) => {
+    if (onDragStart) {
+      onDragStart(event);
+    }
+  };
+
+  const handleDragEnd = (event) => {
+    if (onDragEnd) {
+      onDragEnd(event);
+    }
+  };
+
   const handleChangeHasUnsavedChanges = (elementID, hasUnsavedChanges) => {
     setHasUnsavedChangesBlockIDs({
       ...hasUnsavedChangesBlockIDs,
@@ -215,8 +304,8 @@ function ElementList({
       modifiers={[restrictToVerticalAxis, restrictToParentElement]}
       sensors={sensors}
       collisionDetection={closestCenter}
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
     >
       <SortableContext
         items={elements.map(element => element.id)}
@@ -244,6 +333,7 @@ function ElementList({
     { 'elemental-editor-list--empty': !elements || !elements.length }
   );
 
+  // return <div className={listClassNames} ref={listRef}>
   return <div className={listClassNames}>
     {renderLoading()}
     {renderBlocks()}

client/src/components/ElementEditor/Element.scss

@@ -19,6 +19,10 @@ const Header = ({
   expandable = true,
   ElementActionsComponent,
   handleEditTabsClick,
+  sortableListeners,
+  sortableAttributes,
+  sortableActivatorRef,
+  elementId,
 }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
@@ -138,10 +142,20 @@ const Header = ({
     }
   );
   const blockIconId = `element-icon-${element.id}`;
+  const dragHandleLabel = i18n._t('ElementHeader.DRAG_HANDLE', 'Reorder block');
 
   return (
     <div className={containerClasses}>
-      <div className="element-editor-header__drag-handle">
+      <div
+        className="element-editor-header__drag-handle"
+        ref={sortableActivatorRef}
+        {...sortableListeners}
+        {...sortableAttributes}
+        tabIndex={0}
+        role="button"
+        aria-label={dragHandleLabel}
+        aria-controls={elementId}
+      >
         <span className="font-icon-drag-handle" aria-hidden="true" />
       </div>
       <div className="element-editor-header__info">
@@ -188,6 +202,12 @@ Header.propTypes = {
   ElementActionsComponent: PropTypes.elementType,
   previewExpanded: PropTypes.bool,
   disableTooltip: PropTypes.bool,
+  sortableListeners: PropTypes.object,
+  sortableAttributes: PropTypes.object,
+  sortableActivatorRef: PropTypes.func,
+  elementId: PropTypes.string,
+  expandable: PropTypes.bool,
+  handleEditTabsClick: PropTypes.func,
 };
 
 export { Header as Component };

client/src/components/ElementEditor/ElementList.js

@@ -84,14 +84,21 @@
   }
 
   &__drag-handle {
-    display: none;
+    display: block;
+    opacity: 0;
+    pointer-events: none;
     position: absolute;
     left: 5px;
     cursor: grab;
+
+    &:focus-visible {
+      border-radius: 0.125rem;
+    }
   }
 
   &--simple &__drag-handle {
-    display: block;
+    opacity: 1;
+    pointer-events: auto;
   }
 
   &--simple &__info {