@payload-onpage/react 0.2.0 → 0.3.0

package/src/ui/Dock.tsx

@@ -5,14 +5,49 @@
  * recovery: reload after a conflict, retry after an error), undo/redo, locale,
  * share link, preview, discard, admin, exit and publish.
  */
+import { errorText } from '@payload-onpage/core'
 import type { DocumentState } from '@payload-onpage/core'
 import { useEffect, useState } from 'react'
 import { useOnPage } from '../context.tsx'
-import { relativeTime } from '../messages.ts'
+import { relativeTime, type Translate } from '../messages.ts'
 import { PostButton } from './PostButton.tsx'
+import { ToolbarButton } from './ToolbarButton.tsx'
+import type { Flash } from '../types.ts'
 
 const title = (d: DocumentState) => d.schema?.labels.singular ?? d.ref.slug
 
+interface DockState {
+  docs: DocumentState[]
+  ready: DocumentState[]
+  failed: DocumentState | undefined
+  conflict: DocumentState | undefined
+  error: DocumentState | undefined
+  saving: boolean
+  rendering: boolean
+  lastSaved: number
+}
+
+/** What the dock says, most urgent first. */
+function dockStatus(s: DockState, t: Translate): Flash {
+  if (s.failed)
+    return {
+      text: t('dock.unavailable', { doc: title(s.failed), error: s.failed.error ?? '' }),
+      bad: true,
+    }
+  if (!s.docs.length) return { text: t('dock.nothing') }
+  if (!s.ready.length) return { text: t('dock.loading') }
+  if (s.conflict) return { text: t('dock.conflict', { doc: title(s.conflict) }), bad: true }
+  if (s.error)
+    return {
+      text: t('dock.saveFailed', { doc: title(s.error), message: s.error.save.message ?? '' }),
+      bad: true,
+    }
+  if (s.saving) return { text: t('dock.saving') }
+  if (s.rendering) return { text: t('dock.updating') }
+  if (s.lastSaved) return { text: t('dock.saved', { ago: relativeTime(s.lastSaved) }) }
+  return { text: t('dock.editing') }
+}
+
 function useTicker(ms: number) {
   const [, setN] = useState(0)
   useEffect(() => {
@@ -21,8 +56,8 @@ function useTicker(ms: number) {
   }, [ms])
 }
 
-export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null }) {
-  const { session, snap, links, rendering, notify, rerender, docKeys, t } = useOnPage()
+export function Dock() {
+  const { session, snap, links, rendering, notify, rerender, docKeys, flash, t } = useOnPage()
   const [confirmDiscard, setConfirmDiscard] = useState(false)
   useTicker(5000)
   useEffect(() => {
@@ -41,23 +76,11 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
   const primary = docs[0]
   const busy = snap.busy
 
-  const status = failed
-    ? { text: t('dock.unavailable', { doc: title(failed), error: failed.error ?? '' }), bad: true }
-    : !docs.length
-      ? { text: t('dock.nothing') }
-      : !ready.length
-        ? { text: t('dock.loading') }
-        : conflict
-          ? { text: t('dock.conflict', { doc: title(conflict) }), bad: true }
-          : error
-            ? { text: `${title(error)}: ${error.save.message ?? ''}`, bad: true }
-            : saving
-              ? { text: t('dock.saving') }
-              : rendering
-                ? { text: t('dock.updating') }
-                : lastSaved
-                  ? { text: t('dock.saved', { ago: relativeTime(lastSaved) }) }
-                  : { text: t('dock.editing') }
+  const retryable = failed ?? error
+  const status = dockStatus(
+    { docs, ready, failed, conflict, error, saving, rendering, lastSaved },
+    t,
+  )
 
   const schema = ready[0]?.schema
   const nonDefaultLocale =
@@ -67,10 +90,10 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
     try {
       const res = await session.publish({ keys: docKeys })
       if (res.published.length) await rerender(res.published)
-      if (res.ok) notify(res.published.length ? 'notify.published' : 'notify.nothingToPublish')
-      else notify('notify.publishFailed', { message: res.message ?? '' }, true)
+      if (res.ok) notify(t(res.published.length ? 'notify.published' : 'notify.nothingToPublish'))
+      else notify(t('notify.publishFailed', { message: res.message ?? '' }), true)
     } catch (e) {
-      notify('notify.publishFailed', { message: (e as Error).message }, true)
+      notify(t('notify.publishFailed', { message: errorText(e) }), true)
     }
   }
   const discard = async () => {
@@ -79,9 +102,9 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
     setConfirmDiscard(false)
     try {
       await session.discard({ keys: docKeys })
-      notify('notify.discarded')
+      notify(t('notify.discarded'))
     } catch (e) {
-      notify((e as Error).message, undefined, true)
+      notify(errorText(e), true)
     }
   }
   const reload = async (d: DocumentState) => {
@@ -89,7 +112,7 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
       await session.reload(d.key)
       await rerender([d.ref])
     } catch (e) {
-      notify((e as Error).message, undefined, true)
+      notify(errorText(e), true)
     }
   }
   const createLink = session.dataSource.createPreviewLink?.bind(session.dataSource)
@@ -98,9 +121,9 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
     try {
       const { url, expiresAt } = await createLink(primary.ref, { locale: session.locale })
       await navigator.clipboard.writeText(url)
-      notify('notify.linkCopied', { date: new Date(expiresAt).toLocaleString() })
+      notify(t('notify.linkCopied', { date: new Date(expiresAt).toLocaleString() }))
     } catch (e) {
-      notify('notify.linkFailed', { message: (e as Error).message }, true)
+      notify(t('notify.linkFailed', { message: errorText(e) }), true)
     }
   }
 
@@ -136,11 +159,11 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
             {t('dock.reload')}
           </button>
         )}
-        {(failed ?? error) && (
+        {retryable && (
           <button
             type="button"
             className="po-btn"
-            onClick={() => void session.retry((failed ?? error)!.key)}
+            onClick={() => void session.retry(retryable.key)}
             data-testid="onpage-retry"
           >
             {t('dock.retry')}
@@ -157,28 +180,22 @@ export function Dock({ flash }: { flash: { text: string; bad?: boolean } | null
         )}
         {session.locale && <span className="po-chip-locale">{session.locale}</span>}
         <span className="po-sep" />
-        <button
-          type="button"
-          className="po-btn"
-          onClick={() => session.undo()}
+        <ToolbarButton
+          label={t('dock.undo')}
+          hint={`${t('dock.undo')} (⌘Z)`}
+          icon="↶"
           disabled={!snap.canUndo}
-          aria-label={t('dock.undo')}
-          title={`${t('dock.undo')} (⌘Z)`}
-          data-testid="onpage-undo"
-        >
-          ↶
-        </button>
-        <button
-          type="button"
-          className="po-btn"
-          onClick={() => session.redo()}
+          onClick={() => session.undo()}
+          testId="onpage-undo"
+        />
+        <ToolbarButton
+          label={t('dock.redo')}
+          hint={`${t('dock.redo')} (⇧⌘Z)`}
+          icon="↷"
           disabled={!snap.canRedo}
-          aria-label={t('dock.redo')}
-          title={`${t('dock.redo')} (⇧⌘Z)`}
-          data-testid="onpage-redo"
-        >
-          ↷
-        </button>
+          onClick={() => session.redo()}
+          testId="onpage-redo"
+        />
         <span className="po-sep" />
         {links.mode && (
           <PostButton

package/src/ui/Overlay.tsx

@@ -6,35 +6,34 @@
  * from the target elements whenever the layout changes.
  */
 import {
-  cloneRow,
   fieldAtPath,
   getAt,
-  insertItem,
   isEditablePath,
-  moveItem,
+  isListField,
   newArrayRow,
   refKey,
-  removeItem,
   resolveRow,
-  updateArray,
-  type Doc,
+  rowPrefixes,
   type RowInfo,
   type Target,
+  isReady,
+  type RefKey,
 } from '@payload-onpage/core'
 import { useEffect, useState } from 'react'
 import { useOnPage } from '../context.tsx'
 import { isOurs } from '../dom.ts'
+import { belowList, GEOMETRY, inViewport, outlineBox, toolbarPosition } from '../geometry.ts'
 import { useLayoutTick } from '../layout.ts'
+import { ToolbarButton } from './ToolbarButton.tsx'
 import { targetsAt } from '../targets.ts'
-import { hasSettings } from './SettingsPanel.tsx'
+import { insertRow, rowOps } from '../rowOps.ts'
+import { hasSettings } from '../settings.ts'
 
 interface Hover {
-  field?: Target
+  field?: Target | undefined
   rows: Target[] // innermost first
 }
 
-const VIEW_PAD = 8
-
 function useHover(): Hover {
   const { targets } = useOnPage()
   const [hover, setHover] = useState<Hover>({ rows: [] })
@@ -70,14 +69,14 @@ function Outline({
   if (r.width === 0 && r.height === 0) return null
   return (
     <>
-      <div
-        className={`po-outline${variant ? ` is-${variant}` : ''}`}
-        style={{ top: r.top - 2, left: r.left - 2, width: r.width + 4, height: r.height + 4 }}
-      />
+      <div className={`po-outline${variant ? ` is-${variant}` : ''}`} style={outlineBox(r)} />
       {label && (
         <div
           className={`po-chip${variant === 'item' ? ' is-item' : ''}`}
-          style={{ top: Math.max(r.top - 2, 22), left: r.left - 2 }}
+          style={{
+            top: Math.max(r.top - GEOMETRY.outline, GEOMETRY.chipMinTop),
+            left: r.left - GEOMETRY.outline,
+          }}
         >
           {label}
         </div>
@@ -87,7 +86,7 @@ function Outline({
 }
 
 interface ActiveRow {
-  key: string
+  key: RefKey
   info: RowInfo
   el: Element
 }
@@ -96,94 +95,67 @@ function RowToolbar({ row, variant }: { row: ActiveRow; variant: 'block' | 'item
   const { session, setSelected, setPanel, selected, targets, t } = useOnPage()
   const { key, info, el } = row
   const r = el.getBoundingClientRect()
-  if (r.bottom < 40 || r.top > window.innerHeight - 40) return null
-  const top = Math.min(Math.max(r.top + VIEW_PAD, 60), r.bottom - 40)
-  const right = Math.max(window.innerWidth - r.right + VIEW_PAD, VIEW_PAD)
-  const { listPath, index, length, rowFields, path } = info
+  if (!inViewport(r, GEOMETRY.toolbar)) return null
+  const { path } = info
   const label = targets.find(key, path, ['item'])?.label || info.label
-  const apply = (fn: (d: Doc) => Doc) => session.apply(key, fn)
-  const max = info.listField.maxRows
-  const min = info.listField.minRows ?? 0
-
+  const ops = rowOps(session, key, info)
   const move = (dir: -1 | 1) => {
-    apply((d) => updateArray(d, listPath, (a) => moveItem(a, index, index + dir)))
-    setSelected({ key, path: `${listPath}.${index + dir}` })
+    const next = ops.move(dir)
+    if (next) setSelected(next)
   }
   const duplicate = () => {
-    apply((d) =>
-      updateArray(d, listPath, (a) => insertItem(a, index + 1, cloneRow(a[index], rowFields))),
-    )
-    setSelected({ key, path: `${listPath}.${index + 1}` })
+    const next = ops.duplicate()
+    if (next) setSelected(next)
   }
   const remove = () => {
-    apply((d) => updateArray(d, listPath, (a) => removeItem(a, index)))
-    if (selected?.key === key && selected.path.startsWith(path)) setSelected(null)
+    if (ops.remove() && selected?.key === key && selected.path.startsWith(path)) setSelected(null)
   }
   return (
     <div
       className={`po-bar${variant === 'item' ? ' is-item' : ''}`}
-      style={{ top, right }}
+      style={toolbarPosition(r)}
       role="toolbar"
       aria-label={t('row.toolbar', { label })}
       data-testid={`onpage-${variant}-toolbar`}
     >
       <span className="po-btn po-bar-label">{label}</span>
-      <button
-        type="button"
-        className="po-btn"
-        disabled={index === 0}
+      <ToolbarButton
+        label={t('row.moveUp')}
+        icon="↑"
+        disabled={!ops.canMove(-1)}
         onClick={() => move(-1)}
-        aria-label={t('row.moveUp')}
-        title={t('row.moveUp')}
-        data-testid={`onpage-${variant}-up`}
-      >
-        ↑
-      </button>
-      <button
-        type="button"
-        className="po-btn"
-        disabled={index >= length - 1}
+        testId={`onpage-${variant}-up`}
+      />
+      <ToolbarButton
+        label={t('row.moveDown')}
+        icon="↓"
+        disabled={!ops.canMove(1)}
         onClick={() => move(1)}
-        aria-label={t('row.moveDown')}
-        title={t('row.moveDown')}
-        data-testid={`onpage-${variant}-down`}
-      >
-        ↓
-      </button>
-      <button
-        type="button"
-        className="po-btn"
-        disabled={max !== undefined && length >= max}
+        testId={`onpage-${variant}-down`}
+      />
+      <ToolbarButton
+        label={t('row.duplicate')}
+        icon="⧉"
+        disabled={!ops.canDuplicate}
         onClick={duplicate}
-        aria-label={t('row.duplicate')}
-        title={t('row.duplicate')}
-        data-testid={`onpage-${variant}-duplicate`}
-      >
-        ⧉
-      </button>
-      {hasSettings(rowFields, path, key, targets) && (
-        <button
-          type="button"
-          className="po-btn"
+        testId={`onpage-${variant}-duplicate`}
+      />
+      {hasSettings(info.rowFields, path, key, targets) && (
+        <ToolbarButton
+          label={t('row.settings')}
+          icon="⚙"
           onClick={() => setPanel({ kind: 'settings', key, path, title: label })}
-          aria-label={t('row.settings')}
-          title={t('row.settings')}
-          data-testid={`onpage-${variant}-settings`}
-        >
-          ⚙
-        </button>
+          testId={`onpage-${variant}-settings`}
+        />
       )}
-      <button
-        type="button"
-        className="po-btn is-danger"
-        disabled={length <= min}
+      <ToolbarButton
+        label={t('row.delete')}
+        icon="✕"
+        danger
+        disabled={!ops.canRemove}
         onClick={remove}
-        aria-label={t('row.delete')}
-        title={t('row.delete')}
-        data-testid={`onpage-${variant}-delete`}
-      >
-        ✕
-      </button>
+        testId={`onpage-${variant}-delete`}
+      />
     </div>
   )
 }
@@ -201,7 +173,7 @@ function InsertPoints({ row }: { row: ActiveRow }) {
           onClick={() =>
             setPanel({ kind: 'blocks', key: row.key, listPath: row.info.listPath, index })
           }
-          aria-label={`${t('row.addSection')} (${edge})`}
+          aria-label={t(edge === 'above' ? 'row.addSectionAbove' : 'row.addSectionBelow')}
           data-testid={`onpage-insert-${edge}`}
         >
           + {t('row.addSection')}
@@ -220,10 +192,11 @@ function AddItem({ list }: { list: Target }) {
   const { snap, session, setPanel, setSelected, t } = useOnPage()
   const key = refKey(list.ref)
   const state = snap.docs[key]
-  if (!state?.schema || !state.doc || !isEditablePath(state.schema, list.path)) return null
+  if (!isReady(state) || !isEditablePath(state.schema, list.path)) return null
   const field = fieldAtPath(state.schema.fields, state.doc, list.path)?.field
-  if (!field || (field.type !== 'array' && field.type !== 'blocks')) return null
-  const length = (getAt<unknown[]>(state.doc, list.path) ?? []).length
+  if (!field || !isListField(field)) return null
+  const rows = getAt(state.doc, list.path)
+  const length = Array.isArray(rows) ? rows.length : 0
   const r = list.el.getBoundingClientRect()
   if (field.type === 'blocks') {
     // Sections get "+ Add section" above/below each one; this covers an empty list.
@@ -231,7 +204,10 @@ function AddItem({ list }: { list: Target }) {
     return (
       <div
         className="po-add"
-        style={{ top: r.top + Math.min(r.height / 2, 160), left: r.left + r.width / 2 }}
+        style={{
+          top: r.top + Math.min(r.height / 2, GEOMETRY.emptyListOffset),
+          left: r.left + r.width / 2,
+        }}
       >
         <button
           type="button"
@@ -246,13 +222,10 @@ function AddItem({ list }: { list: Target }) {
   }
   if (field.maxRows !== undefined && length >= field.maxRows) return null
   // Below the list, or pinned to the bottom of the viewport while the list runs past it.
-  if (r.bottom < 0 || r.top > window.innerHeight - 40) return null
-  const y = Math.min(r.bottom + 14, window.innerHeight - 84)
+  if (!inViewport(r) || r.top > window.innerHeight - GEOMETRY.toolbar) return null
+  const y = belowList(r)
   const item = list.label || field.labels?.singular || field.label
-  const add = () => {
-    session.apply(key, (d) => updateArray(d, list.path, (a) => [...a, newArrayRow(field)]))
-    setSelected({ key, path: `${list.path}.${length}` })
-  }
+  const add = () => setSelected(insertRow(session, key, list.path, length, newArrayRow(field)))
   return (
     <div className="po-add is-item" style={{ top: y, left: r.left + r.width / 2 }}>
       <button type="button" className="po-btn" onClick={add} data-testid="onpage-add-item">
@@ -271,8 +244,7 @@ export function Overlay() {
     if (!target) return null
     const key = refKey(target.ref)
     const state = snap.docs[key]
-    const info =
-      state?.schema && state.doc ? resolveRow(state.schema, state.doc, target.path) : null
+    const info = isReady(state) ? resolveRow(state.schema, state.doc, target.path) : null
     return info ? { key, info, el: target.el } : null
   }
 
@@ -284,13 +256,13 @@ export function Overlay() {
   // Its section: the outermost enclosing row of a blocks field (may be itself).
   let section: ActiveRow | null = null
   if (active) {
-    const segs = active.info.path.split('.')
-    for (let i = 1; i < segs.length && !section; i++) {
-      if (!/^\d+$/.test(segs[i])) continue
-      const path = segs.slice(0, i + 1).join('.')
+    for (const path of [...rowPrefixes(active.info.path), active.info.path]) {
       const candidate =
         path === active.info.path ? active : rowFor(targets.find(active.key, path, ['item']))
-      if (candidate?.info.isBlock) section = candidate
+      if (candidate?.info.isBlock) {
+        section = candidate
+        break
+      }
     }
   }
   const item = active && section?.info.path !== active.info.path ? active : null
@@ -302,7 +274,8 @@ export function Overlay() {
     : undefined
   const emptyLists = lists.filter((l) => {
     const doc = snap.docs[refKey(l.ref)]?.doc
-    return doc && !(getAt<unknown[]>(doc, l.path) ?? []).length
+    const rows = doc ? getAt(doc, l.path) : undefined
+    return doc && !(Array.isArray(rows) && rows.length)
   })
   const hoverField = !editing ? hover.field : undefined
 

package/src/ui/PreviewToolbar.tsx

@@ -5,21 +5,21 @@
  * 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 { useEffect, useMemo, useState } from 'react'
+import { useEditorStyles, useIsClient } from '../useIsClient.ts'
 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
+  editHref?: string | undefined
   /** Opened from a shared preview link. */
-  shared?: boolean
-  messages?: Messages
+  shared?: boolean | undefined
+  messages?: Messages | undefined
 }
 
 const DEVICES = [
@@ -34,19 +34,11 @@ 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 mounted = useIsClient()
   const t = useMemo(() => createTranslate(messages), [messages])
-  useEffect(() => injectStyles(), [])
+  useEditorStyles()
   useEffect(() => {
     if (!device) return
     const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setDevice(null)