feat: enable drag and drop reordering in references field (#752)

Author: stevenle

.changeset/lovely-peaches-chew.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: enable drag and drop reordering in references field (#752)

docs/root-cms.d.ts

@@ -357,4 +357,6 @@ export interface TemplateSandboxFields {
   file?: RootCMSFile;
   /** FileField (.txt only) */
   fileTxtOnly?: RootCMSFile;
+  /** References */
+  references?: RootCMSReference[];
 }

docs/templates/TemplateSandbox/TemplateSandbox.schema.ts

@@ -19,5 +19,9 @@ export default schema.define({
       label: 'FileField (.txt only)',
       exts: ['.txt'],
     }),
+    schema.references({
+      id: 'references',
+      label: 'References',
+    }),
   ],
 });

packages/root-cms/ui/components/DocEditor/fields/ReferencesField.css

@@ -10,18 +10,45 @@
 .ReferencesField__card {
   display: flex;
   gap: 8px;
+  align-items: stretch;
+  padding: 8px 0;
   border-bottom: 1px solid var(--color-border);
 }
 
+.ReferencesField__card__preview {
+  padding: 0 !important;
+}
+
 .ReferencesField__card:first-child {
   border-top: 1px solid var(--color-border);
 }
 
+.ReferencesField__card--dragging {
+  background-color: #f8f9fa;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px,
+    rgba(0, 0, 0, 0.04) 0 7px 7px -5px;
+}
+
+.ReferencesField__card__handle {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--color-text-subtle);
+  cursor: grab;
+}
+
+.ReferencesField__card__handle:active {
+  cursor: grabbing;
+}
+
 .ReferencesField__card__preview {
   flex: 1;
 }
 
 .ReferencesField__card__controls {
   display: flex;
   align-items: flex-start;
+  padding: 0 8px;
 }

packages/root-cms/ui/components/DocEditor/fields/ReferencesField.tsx

@@ -1,10 +1,17 @@
 import './ReferencesField.css';
 
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from '@hello-pangea/dnd';
 import {ActionIcon, Button, Tooltip} from '@mantine/core';
-import {IconTrash} from '@tabler/icons-preact';
+import {IconGripVertical, IconTrash} from '@tabler/icons-preact';
 import {useState} from 'preact/hooks';
 import * as schema from '../../../../core/schema.js';
 import {useDraftDoc, useDraftDocField} from '../../../hooks/useDraftDoc.js';
+import {joinClassNames} from '../../../utils/classes.js';
 import {DocPreviewCard} from '../../DocPreviewCard/DocPreviewCard.js';
 import {useDocSelectModal} from '../../DocSelectModal/DocSelectModal.js';
 import {FieldProps} from './FieldProps.js';
@@ -71,27 +78,71 @@ export function ReferencesField(props: FieldProps) {
   return (
     <div className="ReferencesField">
       {refIds.length > 0 ? (
-        <div className="ReferencesField__refs">
-          {refIds.map((id) => (
-            <div key={id} className="ReferencesField__card">
-              <DocPreviewCard
-                className="ReferencesField__card__preview"
-                docId={id}
-                variant="compact"
-              />
-              <div className="ReferencesField__card__controls">
-                <Tooltip label="Remove">
-                  <ActionIcon
-                    className="ReferencesField__card__controls__remove"
-                    onClick={() => removeDoc(id)}
-                  >
-                    <IconTrash size={16} />
-                  </ActionIcon>
-                </Tooltip>
+        <DragDropContext
+          onDragEnd={(result: DropResult) => {
+            const {destination, source} = result;
+            if (!destination || destination.index === source.index) {
+              return;
+            }
+            const next = [...refIds];
+            const [removed] = next.splice(source.index, 1);
+            next.splice(destination.index, 0, removed);
+            onChange(next);
+          }}
+        >
+          <Droppable
+            droppableId="ReferencesField__droppable"
+            direction="vertical"
+          >
+            {(provided: any) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+                className="ReferencesField__refs"
+              >
+                {refIds.map((refId, index) => (
+                  <Draggable key={refId} draggableId={refId} index={index}>
+                    {(provided, snapshot) => (
+                      <div
+                        ref={provided.innerRef}
+                        {...(provided.draggableProps as any)}
+                        className={joinClassNames(
+                          'ReferencesField__card',
+                          snapshot.isDragging &&
+                            'ReferencesField__card--dragging'
+                        )}
+                      >
+                        <div
+                          className="ReferencesField__card__handle"
+                          {...(provided.dragHandleProps as any)}
+                        >
+                          <IconGripVertical size={16} stroke={'1.5'} />
+                        </div>
+                        <DocPreviewCard
+                          className="ReferencesField__card__preview"
+                          docId={refId}
+                          variant="compact"
+                          clickable
+                        />
+                        <div className="ReferencesField__card__controls">
+                          <Tooltip label="Remove">
+                            <ActionIcon
+                              className="ReferencesField__card__controls__remove"
+                              onClick={() => removeDoc(refId)}
+                            >
+                              <IconTrash size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
               </div>
-            </div>
-          ))}
-        </div>
+            )}
+          </Droppable>
+        </DragDropContext>
       ) : (
         <div className="ReferencesField__none">None selected</div>
       )}

packages/root-cms/ui/components/DocPreviewCard/DocPreviewCard.css

@@ -5,6 +5,10 @@
   overflow: hidden;
 }
 
+a.DocPreviewCard {
+  text-decoration: none;
+}
+
 .DocPreviewCard__image {
   border: 1px solid var(--color-border);
   flex-shrink: 0;

packages/root-cms/ui/components/DocPreviewCard/DocPreviewCard.tsx

@@ -1,3 +1,5 @@
+import './DocPreviewCard.css';
+
 import {Image, Loader} from '@mantine/core';
 import {useEffect, useState} from 'preact/hooks';
 import {joinClassNames} from '../../utils/classes.js';
@@ -6,14 +8,14 @@ import {getDocServingUrl} from '../../utils/doc-urls.js';
 import {notifyErrors} from '../../utils/notifications.js';
 import {getNestedValue} from '../../utils/objects.js';
 import {DocStatusBadges} from '../DocStatusBadges/DocStatusBadges.js';
-import './DocPreviewCard.css';
 
 export interface DocPreviewCardProps {
   className?: string;
   variant?: 'default' | 'compact';
   docId: string;
   doc?: any;
   statusBadges?: boolean;
+  clickable?: boolean;
 }
 
 export function DocPreviewCard(props: DocPreviewCardProps) {
@@ -67,13 +69,22 @@ export function DocPreviewCard(props: DocPreviewCardProps) {
     slug: slug,
   });
 
+  let Component: 'div' | 'a' = 'div';
+  const attrs: Record<string, any> = {};
+  if (props.clickable) {
+    Component = 'a';
+    attrs.href = `/cms/content/${props.docId}`;
+    attrs.target = '_blank';
+  }
+
   return (
-    <div
+    <Component
       className={joinClassNames(
         props.className,
         'DocPreviewCard',
         props.variant && `DocPreviewCard--${props.variant}`
       )}
+      {...attrs}
     >
       <div className="DocPreviewCard__image">
         <Image
@@ -95,6 +106,6 @@ export function DocPreviewCard(props: DocPreviewCardProps) {
           <div className="DocPreviewCard__content__url">{docServingUrl}</div>
         )}
       </div>
-    </div>
+    </Component>
   );
 }