@payload-onpage/react 0.2.1 → 0.3.1

package/src/editors/CheckboxEditor.tsx

@@ -1,23 +1,22 @@
 'use client'
 
+import type { ScalarField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { EditorPopover } from './kit.tsx'
 
-export function CheckboxEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+/** A checkbox value (unset falls back to the field's default). */
+export const checkedOf = (raw: unknown, field: { defaultValue?: unknown }): boolean =>
+  Boolean(raw ?? field.defaultValue)
+
+export function CheckboxEditor(props: FieldEditorProps<ScalarField, boolean>) {
+  const { field, value, commit, close } = props
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-checkbox"
-    >
+    <EditorPopover props={props} testId="onpage-checkbox">
       <label className="po-check">
         <input
           type="checkbox"
           data-autofocus
-          checked={Boolean(value ?? field.defaultValue)}
+          checked={value}
           onChange={(e) => {
             commit(e.target.checked)
             close()
@@ -26,6 +25,6 @@ export function CheckboxEditor({ field, value, element, commit, close, t }: Fiel
         />
         {field.label}
       </label>
-    </Dialog>
+    </EditorPopover>
   )
 }

package/src/editors/ColorEditor.tsx

@@ -1,41 +1,23 @@
 'use client'
 
-import { useState } from 'react'
+import type { ScalarField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
 
 const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
 
+export const toColor = (raw: unknown): string | null =>
+  typeof raw === 'string' && raw ? raw : null
+
 /** Hex color with a native picker. Use it from a text field: `admin.custom.onpage.editor: 'color'`. */
-export function ColorEditor({
-  field,
-  value,
-  element,
-  commit,
-  preview,
-  close,
-  live,
-  t,
-}: FieldEditorProps) {
-  const [draft, setDraft] = useState(typeof value === 'string' ? value : '')
-  const change = (v: string) => {
-    setDraft(v)
-    if (live && HEX.test(v)) preview(v)
-  }
-  const save = () => {
-    if (draft !== (value ?? '') && (draft === '' || HEX.test(draft))) commit(draft || null)
-    close()
-  }
+export function ColorEditor(props: FieldEditorProps<ScalarField, string | null>) {
+  const { field, t } = props
+  const { draft, change, save, onKeyDown } = useDraft(props, {
+    format: (v) => v ?? '',
+    parse: (d) => (d === '' ? null : HEX.test(d) ? d : undefined),
+  })
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      width={260}
-      testId="onpage-color"
-    >
+    <EditorPopover props={props} testId="onpage-color" width={260}>
       <div className="po-row po-inline-row">
         <input
           type="color"
@@ -52,13 +34,11 @@ export function ColorEditor({
           placeholder="#1e40af"
           aria-invalid={draft !== '' && !HEX.test(draft)}
           onChange={(e) => change(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onKeyDown={onKeyDown}
           data-testid="onpage-color-input"
         />
       </div>
-      <button type="button" className="po-btn po-primary" onClick={save} data-testid="onpage-apply">
-        {t('common.apply')}
-      </button>
-    </Dialog>
+      <ApplyBar onApply={save} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/DateEditor.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { useState } from 'react'
+import type { DateField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
 
 /** Payload stores dates as ISO strings; the input works in local time. */
-const toLocalInput = (iso: unknown, withTime: boolean): string => {
-  if (typeof iso !== 'string' || !iso) return ''
+const toLocalInput = (iso: string | null, withTime: boolean): string => {
+  if (!iso) return ''
   const d = new Date(iso)
   if (Number.isNaN(d.getTime())) return ''
   const pad = (n: number) => String(n).padStart(2, '0')
@@ -14,24 +14,19 @@ const toLocalInput = (iso: unknown, withTime: boolean): string => {
   return withTime ? `${date}T${pad(d.getHours())}:${pad(d.getMinutes())}` : date
 }
 
-export function DateEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+export const toIsoDate = (raw: unknown): string | null =>
+  typeof raw === 'string' && raw ? raw : null
+
+export function DateEditor(props: FieldEditorProps<DateField, string | null>) {
+  const { field, t } = props
   const withTime = field.pickerAppearance === 'dayAndTime' || field.pickerAppearance === 'timeOnly'
-  const [draft, setDraft] = useState(toLocalInput(value, withTime))
-  const save = () => {
+  const { draft, change, save, onKeyDown, clear } = useDraft(props, {
+    format: (v) => toLocalInput(v, withTime),
     // Date-only values are stored at local noon, which survives any timezone shift (as Payload's picker does).
-    const next = draft ? new Date(withTime ? draft : `${draft}T12:00:00`).toISOString() : null
-    if (next !== value) commit(next)
-    close()
-  }
+    parse: (d) => (d ? new Date(withTime ? d : `${d}T12:00:00`).toISOString() : null),
+  })
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-date"
-    >
+    <EditorPopover props={props} testId="onpage-date">
       <div className="po-row">
         <input
           className="po-input"
@@ -39,26 +34,12 @@ export function DateEditor({ field, value, element, commit, close, t }: FieldEdi
           aria-label={field.label}
           data-autofocus
           value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onChange={(e) => change(e.target.value)}
+          onKeyDown={onKeyDown}
           data-testid="onpage-date-input"
         />
       </div>
-      <div className="po-actions">
-        <button
-          type="button"
-          className="po-btn po-primary"
-          onClick={save}
-          data-testid="onpage-apply"
-        >
-          {t('common.apply')}
-        </button>
-        {!field.required && (
-          <button type="button" className="po-btn" onClick={() => setDraft('')}>
-            {t('common.clear')}
-          </button>
-        )}
-      </div>
-    </Dialog>
+      <ApplyBar onApply={save} onClear={field.required ? undefined : clear} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/InlineText.tsx

@@ -11,13 +11,12 @@
  * cancels.
  */
 import { useLayoutEffect, useRef } from 'react'
-import { toText } from '@payload-onpage/core'
+import type { ScalarField } from '@payload-onpage/core'
 import { copyTypography, HIDDEN, placeCaret, placeOver, typographyOf } from '../dom.ts'
 import { useTrackElement } from '../layout.ts'
 import type { FieldEditorProps } from '../types.ts'
 
-export const escapeHtml = (s: string): string =>
-  s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]!)
+import { escapeHtml } from '../sanitize.ts'
 
 export function InlineText({
   field,
@@ -30,10 +29,10 @@ export function InlineText({
   live,
   point,
   t,
-}: FieldEditorProps) {
+}: FieldEditorProps<ScalarField, string>) {
   const multiline = field.type === 'textarea'
   const ref = useRef<HTMLDivElement>(null)
-  const initial = useRef(toText(value))
+  const initial = useRef(value)
   const done = useRef(false)
 
   useLayoutEffect(() => {

package/src/editors/NumberEditor.tsx

@@ -1,41 +1,22 @@
 'use client'
 
-import { toText } from '@payload-onpage/core'
-import { useState } from 'react'
+import type { NumberField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
+
+export const toNumber = (raw: unknown): number | null =>
+  typeof raw === 'number' && Number.isFinite(raw) ? raw : null
 
 /** Number input, with a slider when the field has min and max. */
-export function NumberEditor({
-  field,
-  value,
-  element,
-  commit,
-  preview,
-  close,
-  live,
-  t,
-}: FieldEditorProps) {
-  const [draft, setDraft] = useState(toText(value))
+export function NumberEditor(props: FieldEditorProps<NumberField, number | null>) {
+  const { field, t } = props
+  const { draft, change, save, onKeyDown } = useDraft(props, {
+    format: (v) => (v === null ? '' : String(v)),
+    parse: (d) => (d === '' ? null : Number.isNaN(Number(d)) ? undefined : Number(d)),
+  })
   const slider = field.min !== undefined && field.max !== undefined
-  const save = () => {
-    const next = draft === '' ? null : Number(draft)
-    if (next !== value && (next === null || !Number.isNaN(next))) commit(next)
-    close()
-  }
-  const change = (v: string) => {
-    setDraft(v)
-    if (live && v !== '' && !Number.isNaN(Number(v))) preview(Number(v))
-  }
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-number"
-    >
+    <EditorPopover props={props} testId="onpage-number">
       <div className="po-row">
         {slider && (
           <input
@@ -57,13 +38,11 @@ export function NumberEditor({
           max={field.max}
           value={draft}
           onChange={(e) => change(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onKeyDown={onKeyDown}
           data-testid="onpage-number-input"
         />
       </div>
-      <button type="button" className="po-btn po-primary" onClick={save} data-testid="onpage-apply">
-        {t('common.apply')}
-      </button>
-    </Dialog>
+      <ApplyBar onApply={save} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/RelationshipEditor.tsx

@@ -5,43 +5,32 @@
  * (Payload REST, so access control applies) and pick one, or several for
  * hasMany. Polymorphic fields get a collection switch and store `{ relationTo, value }`.
  */
-import { relationId, relationTitle, type SearchHit } from '@payload-onpage/core'
+import {
+  asList,
+  relationId,
+  relationTitle,
+  type RelationField,
+  type SearchHit,
+} from '@payload-onpage/core'
 import { useCallback, useState } from 'react'
 import { useOnPage } from '../context.tsx'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { EditorPopover } from './kit.tsx'
 import { useDebouncedSearch } from './useDebouncedSearch.ts'
 
-export function RelationshipEditor({
-  docKey,
-  field,
-  value,
-  element,
-  commit,
-  close,
-  t,
-}: FieldEditorProps) {
+export function RelationshipEditor(props: FieldEditorProps<RelationField>) {
+  const { docKey, field, value, commit, close, t } = props
   const { session, snap } = useOnPage()
-  const targets = Array.isArray(field.relationTo)
-    ? field.relationTo
-    : field.relationTo
-      ? [field.relationTo]
-      : []
+  const targets = Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo]
   const poly = Array.isArray(field.relationTo)
   const [collection, setCollection] = useState(targets[0] ?? '')
   const relations = snap.docs[docKey]?.schema?.relations ?? {}
   const titleField = relations[collection]?.titleField
   const many = !!field.hasMany
-  const current: unknown[] = many
-    ? Array.isArray(value)
-      ? value
-      : []
-    : value == null
-      ? []
-      : [value]
+  const current = asList(value, many)
   const ds = session.dataSource
   const search = useCallback(
-    async (query: string) =>
+    async (query: string, _page: number, signal: AbortSignal) =>
       ds.search
         ? {
             items: await ds.search(collection, {
@@ -49,13 +38,14 @@ export function RelationshipEditor({
               titleField,
               locale: session.locale,
               limit: 12,
+              signal,
             }),
             hasMore: false,
           }
         : { items: [] as SearchHit[], hasMore: false },
     [ds, collection, titleField, session.locale],
   )
-  const results = useDebouncedSearch<SearchHit>(ds.search ? search : null, [])
+  const results = useDebouncedSearch<SearchHit>(ds.search ? search : null)
 
   const wrap = (hit: SearchHit): unknown =>
     poly ? { relationTo: collection, value: hit.doc } : hit.doc
@@ -75,15 +65,7 @@ export function RelationshipEditor({
   const remove = (i: number) => commit(many ? current.filter((_, j) => j !== i) : null)
 
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      width={320}
-      testId="onpage-relationship"
-    >
+    <EditorPopover props={props} testId="onpage-relationship" width={320}>
       {current.map((v, i) => (
         <div className="po-rel-item" key={`${String(relationId(v))}-${i}`}>
           {relationTitle(v, titleField)}
@@ -91,7 +73,7 @@ export function RelationshipEditor({
             <button
               type="button"
               onClick={() => remove(i)}
-              aria-label={`${t('common.remove')} ${relationTitle(v, titleField)}`}
+              aria-label={t('common.removeItem', { item: relationTitle(v, titleField) })}
             >
               ✕
             </button>
@@ -148,6 +130,6 @@ export function RelationshipEditor({
           </div>
         </>
       )}
-    </Dialog>
+    </EditorPopover>
   )
 }

package/src/editors/SelectEditor.tsx

@@ -1,20 +1,19 @@
 'use client'
 
-import { toText } from '@payload-onpage/core'
+import { asList, type ChoiceField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { EditorPopover } from './kit.tsx'
+
+/** A select/radio value as the selected option values. */
+export const selectedValues = (raw: unknown, field: ChoiceField): string[] =>
+  asList(raw, field.hasMany, (v) =>
+    typeof v === 'string' || typeof v === 'number' ? String(v) : undefined,
+  )
 
 /** Select / radio: pick one (closes) or toggle several (hasMany). */
-export function SelectEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
-  const options = field.options ?? []
+export function SelectEditor(props: FieldEditorProps<ChoiceField, string[]>) {
+  const { field, value: current, commit, close, t } = props
   const many = !!field.hasMany
-  const current: string[] = many
-    ? Array.isArray(value)
-      ? (value as string[])
-      : []
-    : value == null
-      ? []
-      : [toText(value)]
   const pick = (v: string | null) => {
     if (!many) {
       commit(v)
@@ -25,17 +24,10 @@ export function SelectEditor({ field, value, element, commit, close, t }: FieldE
     if (v === null) set.clear()
     else if (set.has(v)) set.delete(v)
     else set.add(v)
-    commit(options.map((o) => o.value).filter((o) => set.has(o)))
+    commit(field.options.map((o) => o.value).filter((o) => set.has(o)))
   }
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-select"
-    >
+    <EditorPopover props={props} testId="onpage-select">
       <div
         className="po-pop-list"
         role="listbox"
@@ -52,7 +44,7 @@ export function SelectEditor({ field, value, element, commit, close, t }: FieldE
             {t('common.none')}
           </button>
         )}
-        {options.map((o) => {
+        {field.options.map((o) => {
           const selected = current.includes(o.value)
           return (
             <button
@@ -69,6 +61,6 @@ export function SelectEditor({ field, value, element, commit, close, t }: FieldE
           )
         })}
       </div>
-    </Dialog>
+    </EditorPopover>
   )
 }

package/src/editors/UploadEditor.tsx

@@ -5,14 +5,14 @@
  * new file, through the MediaLibrary port. The chosen document goes into state
  * populated, so a client-rendered page shows it at once; saving sends its id.
  */
-import { relationId, type MediaItem } from '@payload-onpage/core'
+import { errorText, relationId, type MediaItem, type RelationField } from '@payload-onpage/core'
 import { useCallback, useRef, useState } from 'react'
 import { useOnPage } from '../context.tsx'
 import type { FieldEditorProps } from '../types.ts'
 import { Dialog } from '../ui/Dialog.tsx'
 import { useDebouncedSearch } from './useDebouncedSearch.ts'
 
-export function UploadEditor({ field, value, commit, close, t }: FieldEditorProps) {
+export function UploadEditor({ field, value, commit, close, t }: FieldEditorProps<RelationField>) {
   const { media } = useOnPage()
   const relationTo =
     (Array.isArray(field.relationTo) ? field.relationTo[0] : field.relationTo) ?? 'media'
@@ -20,13 +20,13 @@ export function UploadEditor({ field, value, commit, close, t }: FieldEditorProp
   const [uploadError, setUploadError] = useState<string | null>(null)
   const fileRef = useRef<HTMLInputElement>(null)
   const search = useCallback(
-    (query: string, page: number) =>
+    (query: string, page: number, signal: AbortSignal) =>
       media
-        ? media.search({ query, page, relationTo })
+        ? media.search({ query, page, relationTo, signal })
         : Promise.resolve({ items: [] as MediaItem[], hasMore: false }),
     [media, relationTo],
   )
-  const results = useDebouncedSearch<MediaItem>(media ? search : null, [])
+  const results = useDebouncedSearch<MediaItem>(media ? search : null)
   const currentId = relationId(value)
 
   const choose = (m: MediaItem) => {
@@ -39,7 +39,7 @@ export function UploadEditor({ field, value, commit, close, t }: FieldEditorProp
     try {
       choose(await media.upload(file, { relationTo }))
     } catch (e) {
-      setUploadError((e as Error).message)
+      setUploadError(errorText(e))
     } finally {
       setUploading(false)
     }

package/src/editors/index.ts

@@ -1,26 +1,66 @@
 /** The default field editors. Spread, override or remove (`null`) entries via the `editors` option. */
+import { toText } from '@payload-onpage/core'
+import { defineEditor } from '../registry.ts'
 import type { EditorRegistry } from '../types.ts'
-import { CheckboxEditor } from './CheckboxEditor.tsx'
-import { ColorEditor } from './ColorEditor.tsx'
-import { DateEditor } from './DateEditor.tsx'
+import { checkedOf, CheckboxEditor } from './CheckboxEditor.tsx'
+import { ColorEditor, toColor } from './ColorEditor.tsx'
+import { DateEditor, toIsoDate } from './DateEditor.tsx'
 import { InlineText } from './InlineText.tsx'
-import { NumberEditor } from './NumberEditor.tsx'
+import { NumberEditor, toNumber } from './NumberEditor.tsx'
 import { RelationshipEditor } from './RelationshipEditor.tsx'
-import { SelectEditor } from './SelectEditor.tsx'
+import { SelectEditor, selectedValues } from './SelectEditor.tsx'
 import { UploadEditor } from './UploadEditor.tsx'
 
+const text = defineEditor({
+  mode: 'inline',
+  accepts: ['text', 'textarea', 'email'],
+  normalize: (raw) => toText(raw),
+  component: InlineText,
+})
+const select = defineEditor({
+  mode: 'popover',
+  accepts: ['select', 'radio'],
+  normalize: selectedValues,
+  component: SelectEditor,
+})
+
 export const defaultEditors: EditorRegistry = {
-  text: { mode: 'inline', component: InlineText },
-  textarea: { mode: 'inline', component: InlineText },
-  email: { mode: 'inline', component: InlineText },
-  select: { mode: 'popover', component: SelectEditor },
-  radio: { mode: 'popover', component: SelectEditor },
-  checkbox: { mode: 'popover', component: CheckboxEditor },
-  number: { mode: 'popover', component: NumberEditor },
-  date: { mode: 'popover', component: DateEditor },
-  relationship: { mode: 'popover', component: RelationshipEditor },
-  upload: { mode: 'popover', component: UploadEditor },
-  color: { mode: 'popover', component: ColorEditor },
+  text,
+  textarea: text,
+  email: text,
+  select,
+  radio: select,
+  checkbox: defineEditor({
+    mode: 'popover',
+    accepts: ['checkbox'],
+    normalize: checkedOf,
+    component: CheckboxEditor,
+  }),
+  number: defineEditor({
+    mode: 'popover',
+    accepts: ['number'],
+    normalize: toNumber,
+    component: NumberEditor,
+  }),
+  date: defineEditor({
+    mode: 'popover',
+    accepts: ['date'],
+    normalize: toIsoDate,
+    component: DateEditor,
+  }),
+  relationship: defineEditor({
+    mode: 'popover',
+    accepts: ['relationship'],
+    component: RelationshipEditor,
+  }),
+  upload: defineEditor({ mode: 'popover', accepts: ['upload'], component: UploadEditor }),
+  // A text field holding a hex color: `admin.custom.onpage.editor: 'color'`.
+  color: defineEditor({
+    mode: 'popover',
+    accepts: ['text'],
+    normalize: toColor,
+    component: ColorEditor,
+  }),
 }
 
 export {