@byline/admin 4.2.0 → 4.4.0

package/src/fields/group/group-field.tsx

@@ -12,6 +12,7 @@ import type { Field, FieldAdminConfig, GroupField as GroupFieldType } from '@byl
 import { ErrorText } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { placeholderForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { useFieldError } from '../../forms/form-context'
@@ -33,11 +34,15 @@ interface GroupFieldProps {
   defaultValue: any
   path: string
   /**
-   * Collection path forwarded to upload-capable child fields (`file` / `image`),
-   * which need it to reach the `/upload` endpoint. Without it those fields fall
-   * back to their empty placeholder and never render an upload widget.
+   * Threaded to child fields — governs only the *drag* affordance of any
+   * `array` children (structural add/remove always renders; see ArrayField).
+   * Defaults to `true` (conservative): arrays inside plain schema groups
+   * stay drag-free. `BlocksField` passes `false` on its synthesized group so
+   * arrays directly inside blocks are fully sortable — safe because each
+   * `DraggableSortable` is an independent DndContext with grip-scoped
+   * listeners.
    */
-  collectionPath?: string
+  disableSorting?: boolean
   /**
    * Active content locale, forwarded to child fields so localized widgets
    * nested inside the group (e.g. a `localized` richText) can render their
@@ -46,10 +51,13 @@ interface GroupFieldProps {
   contentLocale?: string
   /**
    * Per-child-field admin overrides (`components` slots, richtext `editor`),
-   * keyed by child field name. Threaded by `BlocksField` from the site-wide
-   * `ClientConfig.blockAdmin` registry so block children can take per-field
-   * admin config; plain groups receive none today (their children inherit
-   * site-wide defaults).
+   * keyed by dotted, index-free schema paths relative to this group
+   * ('caption', 'faq.answer'). Threaded by `BlocksField` from the site-wide
+   * `ClientConfig.blockAdmin` registry (block children render through a
+   * synthesized group) and by `FieldRenderer` for plain schema groups, whose
+   * map arrives pre-sliced from the collection admin config. Exact-name
+   * entries apply to the child itself; deeper entries are re-sliced and
+   * threaded on (see `sliceFieldAdmin`).
    */
   fieldAdmin?: Record<string, FieldAdminConfig>
 }
@@ -58,7 +66,7 @@ export const GroupField = ({
   field,
   defaultValue,
   path,
-  collectionPath,
+  disableSorting = true,
   contentLocale,
   fieldAdmin,
 }: GroupFieldProps) => {
@@ -100,11 +108,11 @@ export const GroupField = ({
               field={innerField}
               defaultValue={groupData[innerField.name]}
               basePath={path}
-              disableSorting={true}
-              collectionPath={collectionPath}
+              disableSorting={disableSorting}
               contentLocale={contentLocale}
               components={fieldAdmin?.[innerField.name]?.components}
               editor={fieldAdmin?.[innerField.name]?.editor}
+              fieldAdmin={sliceFieldAdmin(fieldAdmin, innerField.name)}
             />
           )
         })}

package/src/fields/image/image-field.tsx

@@ -38,8 +38,6 @@ import { ImageUploadField } from './image-upload-field'
 
 interface ImageFieldProps {
   field: FieldType
-  /** Collection path required to call the /upload endpoint. */
-  collectionPath?: string
   // Stored value is currently a plain object with file/image metadata
   // coming from the seed data / storage layer.
   value?: StoredFileValue | null
@@ -50,7 +48,6 @@ interface ImageFieldProps {
 
 export const ImageField = ({
   field,
-  collectionPath,
   value,
   defaultValue,
   onChange: _onChange,
@@ -61,7 +58,10 @@ export const ImageField = ({
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
   const isUploading = useIsFieldUploading(fieldPath)
-  const { removePendingUpload, documentId } = useFormContext()
+  // `collectionPath` comes from form context rather than a prop: it is
+  // constant for the form, and prop-drilling it meant any container that
+  // forgot to forward it silently rendered this widget read-only.
+  const { removePendingUpload, documentId, collectionPath } = useFormContext()
   const { t } = useTranslation('byline-admin')
 
   // Re-use the standard field change handler so patches are emitted correctly.

package/src/fields/sortable-item.tsx

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { type ReactNode, useState } from 'react'
+import { type CSSProperties, type ReactNode, type Ref, useState } from 'react'
 
 import { useTranslation } from '@byline/i18n/react'
 import { ChevronDownIcon, GripperVerticalIcon, useSortable } from '@byline/ui/react'
@@ -15,44 +15,60 @@ import cx from 'classnames'
 import { DraggableContextMenu } from './draggable-context-menu'
 import styles from './sortable-item.module.css'
 
-export const SortableItem = ({
-  id,
-  label,
-  children,
-  onAddBelow,
-  onRemove,
-}: {
-  id: string
+// ---------------------------------------------------------------------------
+// Item chrome for repeating-structure entries (array items, block instances):
+// a header carrying the label, the add-below/remove context menu, and a
+// collapse toggle, above the item's rendered fields.
+//
+// Two variants share the frame:
+//   - `SortableItem` — adds the dnd-kit grip (drag handle). Must render
+//     inside a `DraggableSortable` (it calls `useSortable`).
+//   - `StaticItem`  — no grip, no dnd hook. For contexts where drag is
+//     disabled but structural editing (add/remove/collapse) must remain,
+//     e.g. arrays nested inside another array's items.
+//
+// They are separate components (not a boolean prop on one component)
+// because `useSortable` is a hook — it cannot be called conditionally, and
+// it throws outside a DndContext.
+// ---------------------------------------------------------------------------
+
+interface ItemFrameProps {
   label: ReactNode
   children: ReactNode
   onAddBelow?: () => void
   onRemove?: () => void
-}) => {
-  const { t } = useTranslation('byline-admin')
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id,
-    transition: {
-      duration: 250,
-      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
-    },
-  })
+  /** Drag handle slot — rendered leading the header when provided. */
+  grip?: ReactNode
+  rootRef?: Ref<HTMLDivElement>
+  style?: CSSProperties
+  dragging?: boolean
+  /** Extra root class, e.g. the static variant marker. */
+  rootClassName?: string
+}
 
+const ItemFrame = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+  grip,
+  rootRef,
+  style,
+  dragging = false,
+  rootClassName,
+}: ItemFrameProps) => {
+  const { t } = useTranslation('byline-admin')
   const [collapsed, setCollapsed] = useState(false)
 
-  const style = {
-    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
-    transition,
-    zIndex: isDragging ? 10 : 'auto',
-  }
-
   return (
     <div
-      ref={setNodeRef}
+      ref={rootRef}
       style={style}
       className={cx(
         'byline-sortable',
         styles.root,
-        isDragging && ['byline-sortable-dragging', styles.dragging],
+        rootClassName,
+        dragging && ['byline-sortable-dragging', styles.dragging],
         collapsed && ['byline-sortable-collapsed', styles.collapsed]
       )}
     >
@@ -63,14 +79,7 @@ export const SortableItem = ({
           !collapsed && ['byline-sortable-header-expanded', styles['header-expanded']]
         )}
       >
-        <button
-          type="button"
-          className={cx('byline-sortable-grip', styles.grip)}
-          {...attributes}
-          {...listeners}
-        >
-          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
-        </button>
+        {grip}
         <div className={cx('byline-sortable-label', styles.label)}>{label}</div>
         <DraggableContextMenu onAddBelow={onAddBelow} onRemove={onRemove} />
         <button
@@ -104,3 +113,75 @@ export const SortableItem = ({
     </div>
   )
 }
+
+export const SortableItem = ({
+  id,
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  id: string
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    transition,
+    zIndex: isDragging ? 10 : 'auto',
+  }
+
+  return (
+    <ItemFrame
+      label={label}
+      onAddBelow={onAddBelow}
+      onRemove={onRemove}
+      rootRef={setNodeRef}
+      style={style}
+      dragging={isDragging}
+      grip={
+        <button
+          type="button"
+          className={cx('byline-sortable-grip', styles.grip)}
+          {...attributes}
+          {...listeners}
+        >
+          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
+        </button>
+      }
+    >
+      {children}
+    </ItemFrame>
+  )
+}
+
+export const StaticItem = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => (
+  <ItemFrame
+    label={label}
+    onAddBelow={onAddBelow}
+    onRemove={onRemove}
+    rootClassName="byline-sortable-static"
+  >
+    {children}
+  </ItemFrame>
+)

package/src/forms/form-context.tsx

@@ -90,6 +90,19 @@ interface FormContextType {
    * `@byline/core`).
    */
   documentId: string | null
+  /**
+   * Path of the collection this form edits, `null` when the form is rendered
+   * without one. Upload widgets need it to address the upload endpoint.
+   *
+   * It lives here rather than being passed down because it is constant for
+   * the whole form: threading it as a prop meant every nesting-capable
+   * container (`array`, `group`, `blocks`) had to remember to forward it,
+   * and a container that forgot silently rendered upload fields read-only —
+   * no error, just a missing drop zone. That happened twice, in `array` /
+   * `group` and then in `blocks`. A value read from context cannot be
+   * dropped by a container that never carries it.
+   */
+  collectionPath: string | null
   setFieldValue: (name: string, value: any) => void
   setFieldStore: (name: string, value: any) => void
   getFieldValue: (name: string) => any
@@ -158,6 +171,7 @@ export const FormProvider = ({
   children,
   initialData = {},
   documentId = null,
+  collectionPath = null,
 }: {
   children: React.ReactNode
   initialData?: Record<string, any>
@@ -166,6 +180,12 @@ export const FormProvider = ({
    * the context for upload widgets honouring `upload.requireSavedDocument`.
    */
   documentId?: string | null
+  /**
+   * Path of the collection being edited. Exposed on the context so upload
+   * widgets can reach the upload endpoint from any nesting depth without
+   * every container forwarding it — see `FormContextType.collectionPath`.
+   */
+  collectionPath?: string | null
 }) => {
   const fieldValues = useRef<Record<string, any>>(
     JSON.parse(JSON.stringify(initialData?.fields ?? initialData))
@@ -316,7 +336,15 @@ export const FormProvider = ({
   const getPatches = useCallback(() => patchesRef.current, [])
   const appendPatch = useCallback(
     (patch: DocumentPatch) => {
-      patchesRef.current = [...patchesRef.current, patch]
+      // Snapshot the patch at append time. Structural patches (array.insert,
+      // block add) carry item objects that are ALSO placed into the form
+      // store — and `setNestedValue` mutates store nodes in place, so a
+      // later nested write inside the item (e.g. adding an array item to a
+      // block added this session) would silently rewrite the queued patch.
+      // Serialized at save time, the block insert would then already contain
+      // the array items AND the array.insert patches would re-add them —
+      // duplicating items server-side (caught by e2e/array-in-block.spec.ts).
+      patchesRef.current = [...patchesRef.current, structuredClone(patch)]
       // Mark a generic dirty flag so hasChanges() becomes true even
       // for patches that don't correspond to a specific field.set.
       dirtyFields.current.add('__patch__')
@@ -654,6 +682,7 @@ export const FormProvider = ({
     <FormContext.Provider
       value={{
         documentId,
+        collectionPath,
         setFieldValue,
         setFieldStore,
         getFieldValue,

package/src/forms/form-renderer.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, ComboButton } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../fields/field-admin'
 import { FieldRenderer } from '../fields/field-renderer'
 import { useBylineFieldServices } from '../fields/field-services-context'
 import { AdminGroup } from '../presentation/group'
@@ -484,10 +485,10 @@ const FormContent = ({
         key={field.name}
         field={field}
         defaultValue={initialData?.fields?.[field.name]}
-        collectionPath={collectionPath}
         contentLocale={contentLocale}
         components={adminConfig?.fields?.[field.name]?.components}
         editor={adminConfig?.fields?.[field.name]?.editor}
+        fieldAdmin={sliceFieldAdmin(adminConfig?.fields, field.name)}
       />
     )
   }
@@ -776,6 +777,7 @@ export const FormRenderer = ({
       key={`${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`}
       initialData={initialData}
       documentId={mode === 'edit' && typeof initialData?.id === 'string' ? initialData.id : null}
+      collectionPath={collectionPath ?? null}
     >
       <FormContent
         mode={mode}

package/src/forms/upload-executor.test.node.ts

@@ -56,6 +56,76 @@ const publicationsFields: Field[] = [
   },
 ]
 
+/**
+ * Two block types that both declare an array named `gallery`, each holding a
+ * different upload-capable leaf. Leaf names stay unique across the
+ * collection, so this passes the boot-time uniqueness constraint — the shape
+ * is legal, and it is the shape that made block resolution ambiguous.
+ */
+const blocksFields: Field[] = [
+  { name: 'title', label: 'Title', type: 'text' },
+  {
+    name: 'content',
+    label: 'Content',
+    type: 'blocks',
+    blocks: [
+      {
+        blockType: 'photoBlock',
+        fields: [
+          {
+            name: 'gallery',
+            label: 'Gallery',
+            type: 'array',
+            fields: [
+              {
+                name: 'heroImage',
+                label: 'Hero',
+                type: 'image',
+                upload: { context: ['/title'] },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        blockType: 'videoBlock',
+        fields: [
+          {
+            name: 'gallery',
+            label: 'Gallery',
+            type: 'array',
+            fields: [
+              {
+                name: 'poster',
+                label: 'Poster',
+                type: 'image',
+                upload: { context: ['/title'] },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+
+/** Form state for `blocksFields`: a photoBlock then a videoBlock. */
+const blocksFormValues = () => ({
+  title: 'Hello',
+  content: [
+    { _type: 'photoBlock', _id: 'blk-photo', gallery: [{}] },
+    { _type: 'videoBlock', _id: 'blk-video', gallery: [{}] },
+  ],
+})
+
+function imageUpload(name = 'p.png'): PendingUpload {
+  return {
+    file: new File(['x'], name, { type: 'image/png' }),
+    previewUrl: 'blob:mock',
+    collectionPath: 'pages',
+  }
+}
+
 function pendingUpload(name = 'test.pdf'): PendingUpload {
   return {
     file: new File(['%PDF'], name, { type: 'application/pdf' }),
@@ -174,3 +244,120 @@ describe('executeUploads — context transmission', () => {
     expect(body.get('documentId')).toBeNull()
   })
 })
+
+// ---------------------------------------------------------------------------
+// Block resolution
+//
+// A form field path is an INSTANCE path — `content[1].gallery[0].poster` — and
+// carries no block type, because a block item holds its own `_type`. Resolving
+// an upload field inside a block therefore means reading that item.
+// ---------------------------------------------------------------------------
+
+describe('executeUploads — upload fields inside blocks', () => {
+  it('resolves upload.context for a field in the first block', async () => {
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[0].gallery[0].heroImage', imageUpload('h.png')]])
+
+    await executeUploads(uploads, fn, {
+      fields: blocksFields,
+      getFormValues: blocksFormValues,
+    })
+
+    expect(bodies[0]?.get('title')).toBe('Hello')
+  })
+
+  it('resolves upload.context for a field in a later block', async () => {
+    // Regression: block resolution used to match the first block declaring a
+    // field named by the next path segment. Both blocks declare `gallery`, so
+    // `photoBlock` won, `poster` was not found in it, and the declared context
+    // was dropped silently — no error, just a missing value the server-side
+    // beforeStore / afterStore hooks were relying on.
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[1].gallery[0].poster', imageUpload()]])
+
+    await executeUploads(uploads, fn, {
+      fields: blocksFields,
+      getFormValues: blocksFormValues,
+    })
+
+    expect(bodies[0]?.get('title')).toBe('Hello')
+  })
+
+  it('addresses a block item by stable id as well as position', async () => {
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[id=blk-video].gallery[0].poster', imageUpload()]])
+
+    await executeUploads(uploads, fn, {
+      fields: blocksFields,
+      getFormValues: blocksFormValues,
+    })
+
+    expect(bodies[0]?.get('title')).toBe('Hello')
+  })
+
+  it('still resolves when the addressed block item is missing from form state', async () => {
+    // Form state can lag a pending upload. The item is what supplies `_type`,
+    // so its absence drops us to the unique-match fallback — but the *field*
+    // is a declaration, and `poster` is declared in exactly one block, so the
+    // answer is unchanged. Staleness costs nothing here; genuine ambiguity
+    // would still return nothing (see the ambiguous case below).
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[7].gallery[0].poster', imageUpload()]])
+
+    await executeUploads(uploads, fn, {
+      fields: blocksFields,
+      getFormValues: blocksFormValues,
+    })
+
+    expect(bodies[0]?.get('title')).toBe('Hello')
+    expect(bodies[0]?.get('fieldPath')).toBe('content[7].gallery[0].poster')
+  })
+
+  it('falls back to a unique match when form values cannot disambiguate', async () => {
+    // Without data the block type is unknowable from the path. `poster` is
+    // declared in exactly one block, so the answer is still unambiguous.
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[1].gallery[0].poster', imageUpload()]])
+
+    await executeUploads(uploads, fn, {
+      fields: blocksFields,
+      getFormValues: () => ({ title: 'Hello' }),
+    })
+
+    expect(bodies[0]?.get('title')).toBe('Hello')
+  })
+
+  it('sends no context when the path genuinely identifies no single declaration', async () => {
+    // Same leaf name in both blocks and no data to choose between them. A
+    // guess would be wrong half the time, so nothing is sent.
+    const ambiguous: Field[] = [
+      { name: 'title', label: 'Title', type: 'text' },
+      {
+        name: 'content',
+        label: 'Content',
+        type: 'blocks',
+        blocks: [
+          {
+            blockType: 'aBlock',
+            fields: [
+              { name: 'shared', label: 'S', type: 'image', upload: { context: ['/title'] } },
+            ],
+          },
+          {
+            blockType: 'bBlock',
+            fields: [
+              { name: 'shared', label: 'S', type: 'image', upload: { context: ['/title'] } },
+            ],
+          },
+        ],
+      },
+    ]
+
+    const { fn, bodies } = captureUploadField()
+    const uploads = new Map([['content[1].shared', imageUpload()]])
+
+    await executeUploads(uploads, fn, { fields: ambiguous, getFormValues: () => ({ title: 'x' }) })
+
+    expect(bodies[0]?.get('title')).toBeNull()
+  })
+})