@payload-onpage/react 0.0.0-stage → 0.2.0

package/src/editors/ColorEditor.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react'
+import type { FieldEditorProps } from '../types.ts'
+import { Dialog } from '../ui/Dialog.tsx'
+
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
+
+/** 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()
+  }
+  return (
+    <Dialog
+      variant="popover"
+      anchor={element}
+      title={field.label}
+      onClose={close}
+      t={t}
+      width={260}
+      testId="onpage-color"
+    >
+      <div className="po-row po-inline-row">
+        <input
+          type="color"
+          aria-label={field.label}
+          value={HEX.test(draft) && draft.length === 7 ? draft : '#000000'}
+          onChange={(e) => change(e.target.value)}
+          data-testid="onpage-color-picker"
+        />
+        <input
+          className="po-input"
+          aria-label={field.label}
+          data-autofocus
+          value={draft}
+          placeholder="#1e40af"
+          aria-invalid={draft !== '' && !HEX.test(draft)}
+          onChange={(e) => change(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && save()}
+          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>
+  )
+}

package/src/editors/DateEditor.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react'
+import type { FieldEditorProps } from '../types.ts'
+import { Dialog } from '../ui/Dialog.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 d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+  return withTime ? `${date}T${pad(d.getHours())}:${pad(d.getMinutes())}` : date
+}
+
+export function DateEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+  const withTime = field.pickerAppearance === 'dayAndTime' || field.pickerAppearance === 'timeOnly'
+  const [draft, setDraft] = useState(toLocalInput(value, withTime))
+  const save = () => {
+    // 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()
+  }
+  return (
+    <Dialog
+      variant="popover"
+      anchor={element}
+      title={field.label}
+      onClose={close}
+      t={t}
+      testId="onpage-date"
+    >
+      <div className="po-row">
+        <input
+          className="po-input"
+          type={withTime ? 'datetime-local' : 'date'}
+          aria-label={field.label}
+          data-autofocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && save()}
+          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>
+  )
+}

package/src/editors/InlineText.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+/**
+ * In-place editing for text, textarea and email fields.
+ *
+ * The site's element is never made editable (React owns its DOM). An editable
+ * twin with the same computed typography is laid over it and the original is
+ * hidden. In client mode each keystroke re-renders the page live underneath;
+ * in refresh mode the twin shows the text and, after commit, stays as a ghost
+ * until the server render arrives. Blur/Enter commits (one undo step), Escape
+ * cancels.
+ */
+import { useLayoutEffect, useRef } from 'react'
+import { toText } 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]!)
+
+export function InlineText({
+  field,
+  value,
+  element,
+  commit,
+  preview,
+  close,
+  ghost,
+  live,
+  point,
+  t,
+}: FieldEditorProps) {
+  const multiline = field.type === 'textarea'
+  const ref = useRef<HTMLDivElement>(null)
+  const initial = useRef(toText(value))
+  const done = useRef(false)
+
+  useLayoutEffect(() => {
+    const el = element()
+    const twin = ref.current
+    if (!twin) return
+    if (el) {
+      copyTypography(el, twin)
+      placeOver(twin, el, { minWidth: 40, minHeight: true })
+      el.setAttribute(HIDDEN, 'true')
+    }
+    twin.textContent = initial.current
+    twin.focus({ preventScroll: true })
+    placeCaret(twin, point)
+    return () => element()?.removeAttribute(HIDDEN)
+    // Runs once: the twin takes over the element for its lifetime.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Follow the element as the page reflows (client mode re-renders it live).
+  useTrackElement(element, (el) => {
+    if (!ref.current) return
+    if (!el.hasAttribute(HIDDEN)) el.setAttribute(HIDDEN, 'true')
+    placeOver(ref.current, el, { minWidth: 40, minHeight: true })
+  })
+
+  const read = () => {
+    // textContent, not innerText: innerText applies CSS (text-transform:
+    // uppercase on an eyebrow would save "SANDBOX" for "Sandbox").
+    const text = (ref.current?.textContent ?? '').replace(/\u00a0/g, ' ').replace(/\n$/, '')
+    return multiline ? text : text.replace(/\s*\n\s*/g, ' ')
+  }
+
+  const finish = (save: boolean) => {
+    if (done.current) return
+    done.current = true
+    const text = read()
+    if (save && text !== initial.current) {
+      commit(text === '' && !field.required ? null : text)
+      if (!live && ref.current) ghost({ html: escapeHtml(text), style: typographyOf(ref.current) })
+    }
+    close()
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="po-inline"
+      contentEditable="plaintext-only"
+      suppressContentEditableWarning
+      role="textbox"
+      tabIndex={0}
+      aria-multiline={multiline}
+      aria-label={t('inline.label', { field: field.label })}
+      data-testid="onpage-inline-text"
+      spellCheck
+      onInput={() => live && preview(read())}
+      onBlur={() => finish(true)}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault()
+          finish(false)
+        } else if (e.key === 'Enter' && (!multiline || e.metaKey || e.ctrlKey)) {
+          e.preventDefault()
+          finish(true)
+        }
+      }}
+    />
+  )
+}

package/src/editors/NumberEditor.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { toText } from '@payload-onpage/core'
+import { useState } from 'react'
+import type { FieldEditorProps } from '../types.ts'
+import { Dialog } from '../ui/Dialog.tsx'
+
+/** 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))
+  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"
+    >
+      <div className="po-row">
+        {slider && (
+          <input
+            type="range"
+            aria-label={field.label}
+            min={field.min}
+            max={field.max}
+            value={draft || field.min}
+            onChange={(e) => change(e.target.value)}
+            data-testid="onpage-number-slider"
+          />
+        )}
+        <input
+          className="po-input"
+          type="number"
+          aria-label={field.label}
+          data-autofocus
+          min={field.min}
+          max={field.max}
+          value={draft}
+          onChange={(e) => change(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && save()}
+          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>
+  )
+}

package/src/editors/RelationshipEditor.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+/**
+ * Relationship editor: search the related collection(s) by their title field
+ * (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 { useCallback, 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 RelationshipEditor({
+  docKey,
+  field,
+  value,
+  element,
+  commit,
+  close,
+  t,
+}: FieldEditorProps) {
+  const { session, snap } = useOnPage()
+  const targets = Array.isArray(field.relationTo)
+    ? 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 ds = session.dataSource
+  const search = useCallback(
+    async (query: string) =>
+      ds.search
+        ? {
+            items: await ds.search(collection, {
+              query,
+              titleField,
+              locale: session.locale,
+              limit: 12,
+            }),
+            hasMore: false,
+          }
+        : { items: [] as SearchHit[], hasMore: false },
+    [ds, collection, titleField, session.locale],
+  )
+  const results = useDebouncedSearch<SearchHit>(ds.search ? search : null, [])
+
+  const wrap = (hit: SearchHit): unknown =>
+    poly ? { relationTo: collection, value: hit.doc } : hit.doc
+  const same = (v: unknown, id: string | number) => String(relationId(v)) === String(id)
+  const pick = (hit: SearchHit) => {
+    if (!many) {
+      commit(wrap(hit))
+      close()
+      return
+    }
+    commit(
+      current.some((v) => same(v, hit.id))
+        ? current.filter((v) => !same(v, hit.id))
+        : [...current, wrap(hit)],
+    )
+  }
+  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"
+    >
+      {current.map((v, i) => (
+        <div className="po-rel-item" key={`${String(relationId(v))}-${i}`}>
+          {relationTitle(v, titleField)}
+          {(!field.required || many) && (
+            <button
+              type="button"
+              onClick={() => remove(i)}
+              aria-label={`${t('common.remove')} ${relationTitle(v, titleField)}`}
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      ))}
+      {poly && (
+        <div className="po-seg" role="radiogroup" aria-label={field.label}>
+          {targets.map((c) => (
+            <button
+              key={c}
+              type="button"
+              role="radio"
+              aria-checked={c === collection}
+              onClick={() => setCollection(c)}
+            >
+              {relations[c]?.label ?? c}
+            </button>
+          ))}
+        </div>
+      )}
+      {!ds.search ? (
+        <p className="po-muted">{t('search.unsupported')}</p>
+      ) : (
+        <>
+          <input
+            className="po-input"
+            aria-label={t('search.placeholder')}
+            placeholder={t('search.placeholder')}
+            value={results.query}
+            data-autofocus
+            onChange={(e) => results.setQuery(e.target.value)}
+            data-testid="onpage-relationship-search"
+          />
+          {results.error && <p className="po-error">{results.error}</p>}
+          <div
+            className="po-pop-list"
+            role="listbox"
+            aria-multiselectable={many}
+            aria-label={field.label}
+          >
+            {results.items.map((h) => (
+              <button
+                key={String(h.id)}
+                type="button"
+                role="option"
+                aria-selected={current.some((v) => same(v, h.id))}
+                onClick={() => pick(h)}
+                data-testid={`onpage-relationship-${h.id}`}
+              >
+                {h.title}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </Dialog>
+  )
+}

package/src/editors/SelectEditor.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { toText } from '@payload-onpage/core'
+import type { FieldEditorProps } from '../types.ts'
+import { Dialog } from '../ui/Dialog.tsx'
+
+/** Select / radio: pick one (closes) or toggle several (hasMany). */
+export function SelectEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+  const options = field.options ?? []
+  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)
+      close()
+      return
+    }
+    const set = new Set(current)
+    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)))
+  }
+  return (
+    <Dialog
+      variant="popover"
+      anchor={element}
+      title={field.label}
+      onClose={close}
+      t={t}
+      testId="onpage-select"
+    >
+      <div
+        className="po-pop-list"
+        role="listbox"
+        aria-multiselectable={many}
+        aria-label={field.label}
+      >
+        {!field.required && !many && (
+          <button
+            type="button"
+            role="option"
+            aria-selected={!current.length}
+            onClick={() => pick(null)}
+          >
+            {t('common.none')}
+          </button>
+        )}
+        {options.map((o) => {
+          const selected = current.includes(o.value)
+          return (
+            <button
+              key={o.value}
+              type="button"
+              role="option"
+              aria-selected={selected}
+              onClick={() => pick(o.value)}
+              data-testid={`onpage-option-${o.value}`}
+            >
+              {many ? (selected ? '☑ ' : '☐ ') : ''}
+              {o.label}
+            </button>
+          )
+        })}
+      </div>
+    </Dialog>
+  )
+}

package/src/editors/UploadEditor.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+/**
+ * Image editor: pick from the upload collection (search, pages) or upload a
+ * 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 { 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) {
+  const { media } = useOnPage()
+  const relationTo =
+    (Array.isArray(field.relationTo) ? field.relationTo[0] : field.relationTo) ?? 'media'
+  const [uploading, setUploading] = useState(false)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+  const search = useCallback(
+    (query: string, page: number) =>
+      media
+        ? media.search({ query, page, relationTo })
+        : Promise.resolve({ items: [] as MediaItem[], hasMore: false }),
+    [media, relationTo],
+  )
+  const results = useDebouncedSearch<MediaItem>(media ? search : null, [])
+  const currentId = relationId(value)
+
+  const choose = (m: MediaItem) => {
+    commit(m.doc)
+    close()
+  }
+  const upload = async (file: File) => {
+    if (!media?.upload) return
+    setUploading(true)
+    try {
+      choose(await media.upload(file, { relationTo }))
+    } catch (e) {
+      setUploadError((e as Error).message)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const actions = (
+    <>
+      <input
+        className="po-input po-search"
+        aria-label={t('media.search')}
+        placeholder={t('media.search')}
+        value={results.query}
+        data-autofocus
+        onChange={(e) => results.setQuery(e.target.value)}
+        data-testid="onpage-media-search"
+      />
+      {media?.upload && (
+        <>
+          <button
+            type="button"
+            className="po-btn"
+            onClick={() => fileRef.current?.click()}
+            disabled={uploading}
+            data-testid="onpage-media-upload"
+          >
+            {t('media.upload')}
+          </button>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            hidden
+            onChange={(e) => e.target.files?.[0] && void upload(e.target.files[0])}
+          />
+        </>
+      )}
+      {!field.required && currentId != null && (
+        <button
+          type="button"
+          className="po-btn"
+          onClick={() => {
+            commit(null)
+            close()
+          }}
+          data-testid="onpage-media-remove"
+        >
+          {t('common.remove')}
+        </button>
+      )}
+    </>
+  )
+
+  return (
+    <Dialog
+      title={field.label}
+      onClose={close}
+      t={t}
+      actions={actions}
+      testId="onpage-media-picker"
+    >
+      {(results.error ?? uploadError) && <p className="po-error">{results.error ?? uploadError}</p>}
+      <div className="po-grid">
+        {results.items.map((m) => (
+          <button
+            key={String(m.id)}
+            type="button"
+            className="po-tile"
+            onClick={() => choose(m)}
+            aria-current={String(m.id) === String(currentId)}
+            data-testid={`onpage-media-${m.id}`}
+          >
+            <img src={m.thumbnailUrl ?? m.url ?? ''} alt={m.alt ?? ''} loading="lazy" />
+            <span>{m.alt || m.filename}</span>
+          </button>
+        ))}
+      </div>
+      {!results.busy && !results.items.length && <p className="po-muted">{t('media.empty')}</p>}
+      {results.hasMore && (
+        <div className="po-center">
+          <button type="button" className="po-btn" onClick={results.more} disabled={results.busy}>
+            {t('media.more')}
+          </button>
+        </div>
+      )}
+      {(results.busy || uploading) && <p className="po-muted">{t('media.loading')}</p>}
+    </Dialog>
+  )
+}

package/src/editors/index.ts

@@ -0,0 +1,35 @@
+/** The default field editors. Spread, override or remove (`null`) entries via the `editors` option. */
+import type { EditorRegistry } from '../types.ts'
+import { CheckboxEditor } from './CheckboxEditor.tsx'
+import { ColorEditor } from './ColorEditor.tsx'
+import { DateEditor } from './DateEditor.tsx'
+import { InlineText } from './InlineText.tsx'
+import { NumberEditor } from './NumberEditor.tsx'
+import { RelationshipEditor } from './RelationshipEditor.tsx'
+import { SelectEditor } from './SelectEditor.tsx'
+import { UploadEditor } from './UploadEditor.tsx'
+
+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 },
+}
+
+export {
+  CheckboxEditor,
+  ColorEditor,
+  DateEditor,
+  InlineText,
+  NumberEditor,
+  RelationshipEditor,
+  SelectEditor,
+  UploadEditor,
+}