@payload-onpage/react 0.0.0-stage → 0.2.0

package/src/ui/PreviewToolbar.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+/**
+ * Preview mode: the draft without editing tools. Device widths open the same
+ * page in a framed viewport. Signed-in editors can switch back to editing;
+ * people on a shared link can leave to the published page.
+ */
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { createPortal } from 'react-dom'
+import { UI } from '../dom.ts'
+import { createTranslate, type Messages } from '../messages.ts'
+import { injectStyles } from '../styles.ts'
+import { PostButton } from './PostButton.tsx'
+
+export interface PreviewToolbarProps {
+  /** Endpoint that leaves preview (POST), back to the published page. */
+  exitHref: string
+  /** Endpoint that switches to editing (POST); omit for people who can't edit (shared links). */
+  editHref?: string
+  /** Opened from a shared preview link. */
+  shared?: boolean
+  messages?: Messages
+}
+
+const DEVICES = [
+  { id: 'phone', width: 390 },
+  { id: 'tablet', width: 820 },
+] as const
+
+export const FRAME_PARAM = 'onpage-frame'
+
+/** True inside the device-preview frame (the toolbar and editor stay out of it). */
+export const inPreviewFrame = (): boolean =>
+  typeof window !== 'undefined' &&
+  (window.self !== window.top || new URLSearchParams(window.location.search).has(FRAME_PARAM))
+
+const noop = () => () => {}
+const useMounted = () =>
+  useSyncExternalStore(
+    noop,
+    () => true,
+    () => false,
+  )
+
+export function PreviewToolbar({ exitHref, editHref, shared, messages }: PreviewToolbarProps) {
+  const [device, setDevice] = useState<(typeof DEVICES)[number] | null>(null)
+  const mounted = useMounted()
+  const t = useMemo(() => createTranslate(messages), [messages])
+  useEffect(() => injectStyles(), [])
+  useEffect(() => {
+    if (!device) return
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setDevice(null)
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [device])
+  if (!mounted || inPreviewFrame()) return null
+
+  const frameSrc = () => {
+    const u = new URL(window.location.href)
+    u.searchParams.set(FRAME_PARAM, '1')
+    return u.toString()
+  }
+
+  return createPortal(
+    <div className="po-layer" {...{ [UI]: '' }}>
+      {device && (
+        <div className="po-frame-bg" data-testid="onpage-device-frame">
+          <button
+            type="button"
+            className="po-frame-close"
+            onClick={() => setDevice(null)}
+            aria-label={t('common.close')}
+          />
+          <iframe
+            src={frameSrc()}
+            title={t(`preview.${device.id}`)}
+            style={{ width: device.width }}
+          />
+        </div>
+      )}
+      <div
+        className="po-preview"
+        role="toolbar"
+        aria-label={t('preview.label')}
+        data-testid="onpage-preview-toolbar"
+      >
+        <span className="po-badge">{t('preview.badge')}</span>
+        <span className="po-status">{t(shared ? 'preview.shared' : 'preview.own')}</span>
+        {DEVICES.map((d) => (
+          <button
+            key={d.id}
+            type="button"
+            className="po-btn"
+            aria-pressed={device?.id === d.id}
+            onClick={() => setDevice(device?.id === d.id ? null : d)}
+            data-testid={`onpage-device-${d.id}`}
+          >
+            {t(`preview.${d.id}`)}
+          </button>
+        ))}
+        {device && (
+          <button
+            type="button"
+            className="po-btn"
+            onClick={() => setDevice(null)}
+            data-testid="onpage-device-desktop"
+          >
+            {t('preview.desktop')}
+          </button>
+        )}
+        {editHref && (
+          <PostButton action={editHref} className="po-btn po-primary" testId="onpage-edit">
+            {t('preview.edit')}
+          </PostButton>
+        )}
+        <PostButton action={exitHref} testId="onpage-exit-preview">
+          {t(shared ? 'preview.viewPublished' : 'preview.exit')}
+        </PostButton>
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/ui/SettingsPanel.tsx

@@ -0,0 +1,279 @@
+'use client'
+
+/**
+ * Settings for one section or item, generated from the schema: every value
+ * that isn't edited directly on the page — selects (layout, background, width,
+ * spacing…), checkboxes, numbers, dates, relationships, URLs and other plain
+ * text, images that aren't on the page. Changes apply immediately.
+ */
+import { fieldAtPath, getAt, relationTitle, toText, type SchemaField } from '@payload-onpage/core'
+import { useId, useRef, useState, type KeyboardEvent, type RefObject } from 'react'
+import { useOnPage } from '../context.tsx'
+import type { Translate } from '../messages.ts'
+import type { TargetIndex } from '../types.ts'
+import { Dialog } from './Dialog.tsx'
+
+const SKIP = new Set(['id', 'blockType', 'blockName'])
+const TEXTUAL = new Set(['text', 'textarea', 'email', 'number', 'date', 'relationship', 'upload'])
+const INPUT_TYPES = new Set(['text', 'textarea', 'email', 'number'])
+
+function settable(field: SchemaField, path: string, key: string, targets: TargetIndex): boolean {
+  if (SKIP.has(field.name)) return false
+  const full = `${path}.${field.name}`
+  switch (field.type) {
+    case 'select':
+    case 'radio':
+    case 'checkbox':
+      return true
+    case 'group':
+      return (field.fields ?? []).some((f) => settable(f, full, key, targets))
+    default:
+      // Shown on the page? Edit it there.
+      return TEXTUAL.has(field.type) && !targets.find(key, full)
+  }
+}
+
+export const hasSettings = (
+  fields: SchemaField[],
+  path: string,
+  key: string,
+  targets: TargetIndex,
+): boolean => fields.some((f) => settable(f, path, key, targets))
+
+const display = (v: unknown, t: Translate): string => {
+  if (v == null || v === '') return t('common.none')
+  if (Array.isArray(v))
+    return v.length ? t('common.selected', { count: v.length }) : t('common.none')
+  return typeof v === 'object' ? relationTitle(v) : toText(v)
+}
+
+function TextInput({
+  docKey,
+  path,
+  field,
+  id,
+}: {
+  docKey: string
+  path: string
+  field: SchemaField
+  id: string
+}) {
+  const { session, snap } = useOnPage()
+  const value = getAt(snap.docs[docKey]?.doc, path)
+  const [draft, setDraft] = useState<string | null>(null)
+  const shown = draft ?? toText(value)
+  const parse = (v: string) => (field.type === 'number' ? (v === '' ? null : Number(v)) : v)
+  const commit = () => {
+    if (draft === null) return
+    session.setValue(docKey, path, parse(draft))
+    setDraft(null)
+  }
+  return (
+    <input
+      id={id}
+      className="po-input"
+      type={field.type === 'number' ? 'number' : field.type === 'email' ? 'email' : 'text'}
+      value={shown}
+      onChange={(e) => {
+        setDraft(e.target.value)
+        session.setValue(docKey, path, parse(e.target.value), { transient: true })
+      }}
+      onBlur={commit}
+      onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
+      data-testid={`onpage-setting-${path}`}
+    />
+  )
+}
+
+/** A radio group with arrow-key navigation (WAI-ARIA radio pattern). */
+function Segmented({
+  docKey,
+  path,
+  field,
+  labelId,
+}: {
+  docKey: string
+  path: string
+  field: SchemaField
+  labelId: string
+}) {
+  const { session, snap } = useOnPage()
+  const options = field.options ?? []
+  const current = getAt(snap.docs[docKey]?.doc, path) ?? field.defaultValue ?? ''
+  const index = Math.max(
+    0,
+    options.findIndex((o) => o.value === current),
+  )
+  const onKey = (e: KeyboardEvent<HTMLButtonElement>) => {
+    const step =
+      e.key === 'ArrowRight' || e.key === 'ArrowDown'
+        ? 1
+        : e.key === 'ArrowLeft' || e.key === 'ArrowUp'
+          ? -1
+          : 0
+    if (!step) return
+    e.preventDefault()
+    const next = options[(index + step + options.length) % options.length]
+    if (next) session.setValue(docKey, path, next.value)
+    const group = e.currentTarget.parentElement
+    requestAnimationFrame(() =>
+      group?.querySelector<HTMLButtonElement>('[aria-checked="true"]')?.focus(),
+    )
+  }
+  return (
+    <div className="po-seg" role="radiogroup" aria-labelledby={labelId}>
+      {options.map((o, i) => (
+        <button
+          key={o.value}
+          type="button"
+          role="radio"
+          aria-checked={current === o.value}
+          tabIndex={i === index ? 0 : -1}
+          onClick={() => session.setValue(docKey, path, o.value)}
+          onKeyDown={onKey}
+          data-testid={`onpage-setting-${path}-${o.value}`}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function Control({
+  docKey,
+  path,
+  field,
+  anchor,
+  id,
+  labelId,
+}: {
+  docKey: string
+  path: string
+  field: SchemaField
+  anchor: RefObject<HTMLDivElement | null>
+  id: string
+  labelId: string
+}) {
+  const { session, snap, edit, t } = useOnPage()
+  const value = getAt(snap.docs[docKey]?.doc, path)
+  const set = (v: unknown) => session.setValue(docKey, path, v)
+  if ((field.type === 'select' || field.type === 'radio') && !field.hasMany) {
+    const options = field.options ?? []
+    if (options.length <= 5)
+      return <Segmented docKey={docKey} path={path} field={field} labelId={labelId} />
+    return (
+      <select
+        id={id}
+        className="po-select"
+        value={toText(value ?? field.defaultValue)}
+        onChange={(e) => set(e.target.value || null)}
+        data-testid={`onpage-setting-${path}`}
+      >
+        {!field.required && <option value="">{t('common.none')}</option>}
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    )
+  }
+  if (field.type === 'checkbox') {
+    return (
+      <label className="po-check">
+        <input
+          type="checkbox"
+          checked={Boolean(value ?? field.defaultValue)}
+          onChange={(e) => set(e.target.checked)}
+          data-testid={`onpage-setting-${path}`}
+        />
+        {field.label}
+      </label>
+    )
+  }
+  if (INPUT_TYPES.has(field.type))
+    return <TextInput docKey={docKey} path={path} field={field} id={id} />
+  // Everything else opens its field editor, anchored to the panel row.
+  return (
+    <button
+      id={id}
+      type="button"
+      className="po-input po-picker"
+      onClick={() => edit(docKey, path, { anchor: anchor.current ?? undefined })}
+      data-testid={`onpage-setting-${path}`}
+    >
+      {field.type === 'upload'
+        ? t(value ? 'settings.changeImage' : 'settings.chooseImage')
+        : display(value, t)}
+    </button>
+  )
+}
+
+function Row({ docKey, path, field }: { docKey: string; path: string; field: SchemaField }) {
+  const anchor = useRef<HTMLDivElement>(null)
+  const id = useId()
+  const labelId = `${id}-label`
+  return (
+    <div className="po-row" ref={anchor}>
+      {field.type !== 'checkbox' && (
+        <label id={labelId} htmlFor={id}>
+          {field.label}
+        </label>
+      )}
+      <Control
+        docKey={docKey}
+        path={path}
+        field={field}
+        anchor={anchor}
+        id={id}
+        labelId={labelId}
+      />
+      {field.description && <small>{field.description}</small>}
+    </div>
+  )
+}
+
+function Fields({ docKey, fields, path }: { docKey: string; fields: SchemaField[]; path: string }) {
+  const { targets } = useOnPage()
+  return (
+    <>
+      {fields
+        .filter((f) => settable(f, path, docKey, targets))
+        .map((f) => {
+          const full = `${path}.${f.name}`
+          if (f.type === 'group') {
+            return (
+              <fieldset key={f.name} className="po-group">
+                <legend className="po-h4">{f.label}</legend>
+                <Fields docKey={docKey} fields={f.fields ?? []} path={full} />
+              </fieldset>
+            )
+          }
+          return <Row key={f.name} docKey={docKey} path={full} field={f} />
+        })}
+    </>
+  )
+}
+
+export function SettingsPanel() {
+  const { panel, setPanel, snap, t } = useOnPage()
+  if (panel?.kind !== 'settings') return null
+  const state = snap.docs[panel.key]
+  if (!state?.schema || !state.doc) return null
+  const owner = fieldAtPath(state.schema.fields, state.doc, panel.path)
+  // Row fields: the block's fields for a blocks row, the item fields for an array row.
+  const fields =
+    owner?.field.type === 'blocks' ? (owner.block?.fields ?? []) : (owner?.field.fields ?? [])
+  return (
+    <Dialog
+      variant="panel"
+      title={t('settings.title', { label: panel.title })}
+      onClose={() => setPanel(null)}
+      t={t}
+      testId="onpage-settings"
+    >
+      <Fields docKey={panel.key} fields={fields} path={panel.path} />
+    </Dialog>
+  )
+}

package/src/useEvent.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { useCallback, useInsertionEffect, useRef } from 'react'
+
+/**
+ * A stable function that always calls the latest `fn` (the `useEffectEvent`
+ * pattern). Our own, because the React bundled with Next.js 15 doesn't export
+ * `useEffectEvent`. Call it from effects and event handlers, not during render.
+ */
+export function useEvent<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R {
+  const latest = useRef(fn)
+  useInsertionEffect(() => {
+    latest.current = fn
+  })
+  return useCallback((...args: A) => latest.current(...args), [])
+}