@payload-onpage/react 0.2.1 → 0.3.1

package/src/editor/OnPageEditor.tsx

@@ -7,38 +7,33 @@
  * through the DataSource; the Renderer shows them (server refresh by default,
  * instant for documents rendered with <OnPageClient>).
  */
-import { useEvent } from '../useEvent.ts'
 import {
-  EditorSession,
-  fieldAtPath,
-  isEditablePath,
   refKey,
   type DataSource,
   type DocRef,
   type Locator,
   type MediaLibrary,
+  type RefKey,
   type Renderer,
-  type SessionSnapshot,
 } from '@payload-onpage/core'
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { OnPageContext } from '../context.tsx'
+import { OnPageProvider, useSessionSnapshot } from '../context.tsx'
 import { UI } from '../dom.ts'
 import { defaultEditors } from '../editors/index.ts'
 import { hub } from '../hub.ts'
 import { notifyLayout } from '../layout.ts'
 import { annotations, composite, stega } from '../locators.ts'
 import { createTranslate, type Messages } from '../messages.ts'
-import { mergeEditors, resolveEditor } from '../registry.ts'
+import { mergeEditors } from '../registry.ts'
 import { clientState } from '../renderers.ts'
-import { injectStyles } from '../styles.ts'
 import { useTargets } from '../targets.ts'
 import type {
   EditingState,
-  EditorRegistry,
   FieldEditorDef,
   Links,
-  OnPageContextValue,
+  OnPageApi,
+  OnPageState,
   Panel,
   Selection,
 } from '../types.ts'
@@ -46,43 +41,46 @@ import { BlockPicker } from '../ui/BlockPicker.tsx'
 import { Dock } from '../ui/Dock.tsx'
 import { Overlay } from '../ui/Overlay.tsx'
 import { SettingsPanel } from '../ui/SettingsPanel.tsx'
+import { useEditorStyles, useIsClient } from '../useIsClient.ts'
+import { useEvent } from '../useEvent.ts'
+import { resolveEditTarget } from './editTarget.ts'
 import { FieldHost } from './FieldHost.tsx'
 import { Ghosts } from './Ghosts.tsx'
-import { usePageEvents } from './usePageEvents.ts'
+import { useClientDocs } from './useClientDocs.ts'
+import { useEditorSession } from './useEditorSession.ts'
+import { useFlash } from './useFlash.ts'
 import { useGhosts } from './useGhosts.ts'
+import { usePageEvents } from './usePageEvents.ts'
 
 export interface OnPageEditorProps {
   dataSource: DataSource
   /** Image search/upload (e.g. `payloadUploads()`). Without it, upload fields can't be changed. */
-  media?: MediaLibrary
+  media?: MediaLibrary | undefined
   /** How elements map to fields. Default: composite(annotations(), stega()). */
-  locator?: Locator
+  locator?: Locator | undefined
   /** How saved changes reach the page. Default: clientState() (no server refresh). */
-  renderer?: Renderer
+  renderer?: Renderer | undefined
   /** Extra or replacement field editors by id; `null` removes a default. */
-  editors?: Record<string, FieldEditorDef | null>
+  editors?: Record<string, FieldEditorDef | null> | undefined
   links: Links
   /** Content locale to edit. */
-  locale?: string
+  locale?: string | undefined
   /** Autosave debounce, ms. Default: 250 with a refreshing renderer; else the collection's autosave interval, else 800. */
-  autosaveDelay?: number
+  autosaveDelay?: number | undefined
   /** Where to look for editable content. Default: document.body. */
-  root?: () => ParentNode | null
+  root?: (() => ParentNode | null) | undefined
   /** Override any UI string (see `defaultMessages`). */
-  messages?: Messages
+  messages?: Messages | undefined
 }
 
-const EMPTY_SNAP: SessionSnapshot = { docs: {}, canUndo: false, canRedo: false, busy: false }
-const noopSubscribe = () => () => {}
+/** How long a re-rendered page gets to land (and the locator to rescan) before ghosts are retired. */
+const SETTLE_MS = 250
 
 export function OnPageEditor(props: OnPageEditorProps) {
-  const { dataSource, locale, autosaveDelay, links, media } = props
+  const { dataSource, locale, links, media } = props
   const renderer = useMemo(() => props.renderer ?? clientState(), [props.renderer])
   const locator = useMemo(() => props.locator ?? composite(annotations(), stega()), [props.locator])
-  const editors: EditorRegistry = useMemo(
-    () => mergeEditors(defaultEditors, props.editors),
-    [props.editors],
-  )
+  const editors = useMemo(() => mergeEditors(defaultEditors, props.editors), [props.editors])
   const t = useMemo(() => createTranslate(props.messages), [props.messages])
   const rootProp = props.root
   const root = useCallback(
@@ -94,161 +92,112 @@ export function OnPageEditor(props: OnPageEditorProps) {
   const [editing, setEditing] = useState<EditingState | null>(null)
   const [selected, setSelected] = useState<Selection | null>(null)
   const [renders, setRenders] = useState(0)
-  const [flash, setFlash] = useState<{ text: string; bad?: boolean } | null>(null)
-  const [clientDocs, setClientDocs] = useState<ReadonlySet<string>>(() => new Set())
-  const [session, setSession] = useState<EditorSession | null>(null)
-  const snap = useSyncExternalStore(
-    session?.subscribe ?? noopSubscribe,
-    session?.getSnapshot ?? (() => EMPTY_SNAP),
-    () => EMPTY_SNAP,
-  )
-  const targets = useTargets(locator, root)
-  const { ghosts, add: addGhostEntry, rendered: ghostsRendered } = useGhosts(session ? snap : null)
-
+  const [flash, notify] = useFlash()
+  const [clientDocs, registerClientDoc] = useClientDocs()
   const isLive = useCallback(
-    (key: string) => renderer.live || clientDocs.has(key),
+    (key: RefKey) => renderer.live || clientDocs.has(key),
     [renderer, clientDocs],
   )
 
-  /** Re-render documents that aren't client-rendered, then retire their ghosts. */
-  const rerender = useCallback(
-    async (refs: DocRef[], seq?: number) => {
-      const stale = refs.filter((r) => !isLive(refKey(r)))
-      if (!stale.length) return
-      setRenders((n) => n + 1)
-      try {
-        await renderer.afterSave({ refs: stale })
-      } catch (e) {
-        console.error('[payload-onpage] render after save failed', e)
-      } finally {
-        setRenders((n) => n - 1)
-        // Give the new DOM a moment to land (and the locator to rescan) before uncovering it.
-        setTimeout(() => {
-          for (const r of stale) ghostsRendered(refKey(r), seq ?? Number.MAX_SAFE_INTEGER)
-        }, 250)
-      }
-    },
-    [isLive, renderer, ghostsRendered],
-  )
-
-  const handleSaved = useEvent((ref: DocRef, seq: number) => void rerender([ref], seq))
+  // Refresh mode saves quickly (the page only updates after a save); client mode uses the collection's interval.
+  const session = useEditorSession({
+    dataSource,
+    locale,
+    autosaveDelay: props.autosaveDelay ?? (renderer.live ? undefined : 250),
+    onSaved: (ref, seq) => void rerender([ref], seq),
+  })
+  const snap = useSessionSnapshot(session)
+  const targets = useTargets(locator, root)
+  const { ghosts, add: addGhostEntry, rendered: ghostsRendered } = useGhosts(session ? snap : null)
 
-  // One session per data source and locale; disposed (after flushing) when they change or on unmount.
+  // Pending "retire ghosts" timers, cleared on unmount.
+  const ghostTimers = useRef(new Set<ReturnType<typeof setTimeout>>())
   useEffect(() => {
-    // Refresh mode saves quickly (the page only updates after a save); client mode uses the collection's interval.
-    const delay = autosaveDelay ?? (renderer.live ? undefined : 250)
-    const s = new EditorSession({
-      dataSource,
-      locale,
-      autosaveDelay: delay,
-      onSaved: (ref, seq) => handleSaved(ref, seq),
-    })
-    // The session is an external resource with a lifecycle; it lives in state so StrictMode's
-    // mount/unmount/mount gets a fresh one each time.
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setSession(s)
+    const timers = ghostTimers.current
     return () => {
-      void s.flush().finally(() => s.dispose())
+      for (const id of timers) clearTimeout(id)
+      timers.clear()
     }
-  }, [dataSource, locale, autosaveDelay, renderer.live, handleSaved])
+  }, [])
 
-  useEffect(() => {
-    if (!flash) return
-    const id = setTimeout(() => setFlash(null), 4000)
-    return () => clearTimeout(id)
-  }, [flash])
+  /** Re-render documents that aren't client-rendered, then retire their ghosts. */
+  const rerender = useEvent(async (refs: DocRef[], seq?: number) => {
+    const stale = refs.filter((r) => !isLive(refKey(r)))
+    if (!stale.length) return
+    setRenders((n) => n + 1)
+    try {
+      await renderer.afterSave({ refs: stale })
+    } catch (e) {
+      console.error('[payload-onpage] render after save failed', e)
+    } finally {
+      setRenders((n) => n - 1)
+      const id = setTimeout(() => {
+        ghostTimers.current.delete(id)
+        for (const r of stale) ghostsRendered(refKey(r), seq ?? Number.MAX_SAFE_INTEGER)
+      }, SETTLE_MS)
+      ghostTimers.current.add(id)
+    }
+  })
 
   // Documents on this page: everything the locator found, plus client-mode documents.
   const docKeys = useMemo(() => {
-    const keys = new Set<string>(clientDocs)
+    const keys = new Set<RefKey>(clientDocs)
     for (const target of targets.all) keys.add(refKey(target.ref))
     return [...keys]
   }, [targets, clientDocs])
 
   useEffect(() => {
     if (!session) return
-    const seen = new Set<string>()
+    const seen = new Set<RefKey>()
     for (const target of targets.all) {
-      const k = refKey(target.ref)
-      if (seen.has(k)) continue
-      seen.add(k)
+      const key = refKey(target.ref)
+      if (seen.has(key)) continue
+      seen.add(key)
       void session.open(target.ref)
     }
   }, [targets, session])
 
   useEffect(() => notifyLayout(), [snap, targets])
 
-  const notify = useCallback<OnPageContextValue['notify']>(
-    (key, vars, bad) => setFlash({ text: t(key, vars), bad }),
-    [t],
-  )
-
-  const registerClientDoc = useCallback((key: string) => {
-    setClientDocs((s) => new Set(s).add(key))
-    return () =>
-      setClientDocs((s) => {
-        const next = new Set(s)
-        next.delete(key)
-        return next
-      })
-  }, [])
-
-  const addGhost = useCallback<OnPageContextValue['addGhost']>(
-    (g) => addGhostEntry(g, session?.get(g.key)?.save.seq ?? 0),
-    [addGhostEntry, session],
+  const addGhost = useEvent<OnPageApi['addGhost']>((g) =>
+    addGhostEntry(g, session?.get(g.key)?.save.seq ?? 0),
   )
 
-  const edit = useCallback<OnPageContextValue['edit']>(
-    (key, path, opts = {}) => {
-      const state = session?.get(key)
-      if (!state?.schema || !state.doc) {
-        if (state?.status === 'error')
-          notify('notify.cantEdit', { message: state.error ?? '' }, true)
-        else notify('notify.loading')
+  // Stable: reads the latest state when called, so the API doesn't change on every rescan.
+  const edit = useEvent<OnPageApi['edit']>((key, path, opts = {}) => {
+    const target = resolveEditTarget(session?.get(key), editors, key, path, {
+      point: opts.point,
+      kind: opts.kind,
+      el: opts.anchor ?? targets.find(key, path)?.el,
+    })
+    switch (target.kind) {
+      case 'not-ready':
+        if (target.state?.status === 'error')
+          notify(t('notify.cantEdit', { message: target.state.error ?? '' }), true)
+        else notify(t('notify.loading'))
         return true
-      }
-      if (!isEditablePath(state.schema, path)) return false
-      const hit = fieldAtPath(state.schema.fields, state.doc, path)
-      if (!hit) return false
-      const editor = resolveEditor(
-        editors,
-        hit.field,
-        opts.kind === 'field' ? undefined : opts.kind,
-      )
-      if (!editor) return false
-      setEditing({
-        key,
-        path,
-        editor,
-        point: opts.point,
-        el: opts.anchor ?? targets.find(key, path)?.el,
-      })
-      return true
-    },
-    [session, editors, targets, notify],
-  )
+      case 'none':
+        return false
+      case 'edit':
+        setEditing(target.editing)
+        return true
+    }
+  })
 
-  const ctx = useMemo<OnPageContextValue | null>(
+  const api = useMemo<OnPageApi | null>(
     () =>
       session && {
         session,
-        snap,
         renderer,
         media,
         editors,
-        targets,
         links,
         t,
-        panel,
         setPanel,
-        editing,
         setEditing,
-        selected,
         setSelected,
-        docKeys,
         isLive,
         registerClientDoc,
-        rendering: renders > 0,
         edit,
         rerender: (refs) => rerender(refs),
         notify,
@@ -256,43 +205,37 @@ export function OnPageEditor(props: OnPageEditorProps) {
       },
     [
       session,
-      snap,
       renderer,
       media,
       editors,
-      targets,
       links,
       t,
-      panel,
-      editing,
-      selected,
-      docKeys,
       isLive,
       registerClientDoc,
-      renders,
       edit,
       rerender,
       notify,
       addGhost,
     ],
   )
+  const state = useMemo<OnPageState>(
+    () => ({ snap, targets, panel, editing, selected, docKeys, rendering: renders > 0, flash }),
+    [snap, targets, panel, editing, selected, docKeys, renders, flash],
+  )
 
+  // Components outside the editor's tree (client-mode documents) reach it through the hub.
   useEffect(() => {
-    hub.set(ctx)
-  }, [ctx])
+    hub.set(api)
+  }, [api])
   useEffect(() => () => hub.set(null), [])
-  useEffect(() => injectStyles(), [])
-  usePageEvents(ctx, root)
+  useEditorStyles()
+  usePageEvents(api && { ...api, ...state }, root)
 
-  const mounted = useSyncExternalStore(
-    noopSubscribe,
-    () => true,
-    () => false,
-  )
-  if (!mounted || !ctx) return null
+  const mounted = useIsClient()
+  if (!mounted || !api) return null
 
   return (
-    <OnPageContext.Provider value={ctx}>
+    <OnPageProvider api={api} state={state}>
       {createPortal(
         <div className="po-doc-layer" {...{ [UI]: '' }}>
           <Ghosts ghosts={ghosts} />
@@ -306,10 +249,10 @@ export function OnPageEditor(props: OnPageEditorProps) {
           <SettingsPanel />
           <BlockPicker />
           <FieldHost mode="popover" />
-          <Dock flash={flash} />
+          <Dock />
         </div>,
         document.body,
       )}
-    </OnPageContext.Provider>
+    </OnPageProvider>
   )
 }

package/src/editor/editTarget.ts

@@ -0,0 +1,41 @@
+/**
+ * What clicking or pressing Enter on a field opens: a pure function of the
+ * document's state, the editor registry and what was clicked.
+ */
+import {
+  fieldAtPath,
+  isEditablePath,
+  isReady,
+  type DocumentState,
+  type RefKey,
+  type TargetKind,
+} from '@payload-onpage/core'
+import { resolveEditor } from '../registry.ts'
+import type { EditingState, EditorRegistry } from '../types.ts'
+
+export type EditTarget =
+  /** The document isn't loaded (yet, or it failed). */
+  | { kind: 'not-ready'; state: DocumentState | undefined }
+  /** Nothing here is edited in place. */
+  | { kind: 'none' }
+  | { kind: 'edit'; editing: EditingState }
+
+export function resolveEditTarget(
+  state: DocumentState | undefined,
+  editors: EditorRegistry,
+  key: RefKey,
+  path: string,
+  opts: {
+    point?: { x: number; y: number } | undefined
+    kind?: TargetKind | undefined
+    el?: Element | undefined
+  },
+): EditTarget {
+  if (!isReady(state)) return { kind: 'not-ready', state }
+  if (!isEditablePath(state.schema, path)) return { kind: 'none' }
+  const hit = fieldAtPath(state.schema.fields, state.doc, path)
+  if (!hit) return { kind: 'none' }
+  const editor = resolveEditor(editors, hit.field, opts.kind === 'field' ? undefined : opts.kind)
+  if (!editor) return { kind: 'none' }
+  return { kind: 'edit', editing: { key, path, editor, point: opts.point, el: opts.el } }
+}

package/src/editor/useClientDocs.ts

@@ -0,0 +1,19 @@
+'use client'
+
+import type { RefKey } from '@payload-onpage/core'
+import { useCallback, useState } from 'react'
+
+/** Documents rendered from editor state on this page (client mode), and how they register. */
+export function useClientDocs(): [ReadonlySet<RefKey>, (key: RefKey) => () => void] {
+  const [docs, setDocs] = useState<ReadonlySet<RefKey>>(() => new Set())
+  const register = useCallback((key: RefKey) => {
+    setDocs((s) => new Set(s).add(key))
+    return () =>
+      setDocs((s) => {
+        const next = new Set(s)
+        next.delete(key)
+        return next
+      })
+  }, [])
+  return [docs, register]
+}

package/src/editor/useEditorSession.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { EditorSession, type DataSource, type DocRef } from '@payload-onpage/core'
+import { useEffect, useState } from 'react'
+import { useEvent } from '../useEvent.ts'
+
+/**
+ * One editor session per data source and locale, disposed (after flushing its
+ * saves) when they change or on unmount. It lives in state, so StrictMode's
+ * mount/unmount/mount gets a fresh one each time.
+ */
+export function useEditorSession(opts: {
+  dataSource: DataSource
+  locale: string | undefined
+  autosaveDelay: number | undefined
+  onSaved: (ref: DocRef, seq: number) => void
+}): EditorSession | null {
+  const { dataSource, locale, autosaveDelay } = opts
+  const onSaved = useEvent(opts.onSaved)
+  const [session, setSession] = useState<EditorSession | null>(null)
+  useEffect(() => {
+    const s = new EditorSession({
+      dataSource,
+      locale,
+      autosaveDelay,
+      onSaved: (ref, seq) => onSaved(ref, seq),
+    })
+    // The session is an external resource with a lifecycle (see above).
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setSession(s)
+    return () => {
+      void s.flush().finally(() => s.dispose())
+    }
+  }, [dataSource, locale, autosaveDelay, onSaved])
+  return session
+}

package/src/editor/useFlash.ts

@@ -0,0 +1,18 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { Flash } from '../types.ts'
+
+const SHOWN_FOR = 4000
+
+/** The dock's short message, cleared after a few seconds. */
+export function useFlash(): [Flash | null, (text: string, bad?: boolean) => void] {
+  const [flash, setFlash] = useState<Flash | null>(null)
+  useEffect(() => {
+    if (!flash) return
+    const id = setTimeout(() => setFlash(null), SHOWN_FOR)
+    return () => clearTimeout(id)
+  }, [flash])
+  const notify = useCallback((text: string, bad?: boolean) => setFlash({ text, bad }), [])
+  return [flash, notify]
+}

package/src/editor/useGhosts.ts

@@ -6,16 +6,14 @@
  * records the document's save sequence when it was made; the render after a
  * later save retires it. Failed saves and a TTL retire ghosts too.
  */
-import type { SessionSnapshot } from '@payload-onpage/core'
+import type { SessionSnapshot, RefKey } from '@payload-onpage/core'
+import type { GhostInput } from '../types.ts'
 import { useCallback, useEffect, useState } from 'react'
 
-export interface Ghost {
+export interface Ghost extends GhostInput {
   id: string
-  key: string
+  key: RefKey
   path: string
-  html: string
-  className?: string
-  style?: Partial<CSSStyleDeclaration>
   /** Save sequence of the document when the ghost was made. */
   afterSeq: number
   until: number
@@ -35,7 +33,7 @@ export function useGhosts(snap: SessionSnapshot | null) {
   }, [])
 
   /** The page re-rendered after save `seq` of document `key`. */
-  const rendered = useCallback((key: string, seq: number) => {
+  const rendered = useCallback((key: RefKey, seq: number) => {
     setGhosts((gs) =>
       gs.some((g) => g.key === key && g.afterSeq < seq)
         ? gs.filter((g) => !(g.key === key && g.afterSeq < seq))

package/src/editor/usePageEvents.ts

@@ -8,13 +8,14 @@
  *  - a warning before leaving with unsaved changes
  */
 import { useEvent } from '../useEvent.ts'
-import { moveItem, refKey, removeItem, resolveRow, updateArray } from '@payload-onpage/core'
+import { refKey, resolveRow, isReady } from '@payload-onpage/core'
+import { rowOps } from '../rowOps.ts'
 import { useEffect } from 'react'
-import { isOurs, isTyping } from '../dom.ts'
+import { DOM_ATTR, isOurs, isTyping } from '../dom.ts'
 import { isFieldTarget, isRowTarget, targetsAt } from '../targets.ts'
 import type { OnPageContextValue } from '../types.ts'
 
-const FOCUSABLE_FLAG = 'data-onpage-focusable'
+const FOCUSABLE_FLAG = DOM_ATTR.focusable
 
 export function usePageEvents(ctx: OnPageContextValue | null, root: () => ParentNode | null): void {
   const onClick = useEvent((e: MouseEvent) => {
@@ -43,22 +44,20 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
     }
   })
 
+  /** ⌥↑/⌥↓ move the selected row, ⌥⌫ deletes it. True when the key was ours (even if the row can't move). */
   const moveSelected = (dir: -1 | 1 | 'delete') => {
     if (!ctx?.selected) return false
     const { key, path } = ctx.selected
     const state = ctx.snap.docs[key]
-    const info = state?.schema && state.doc ? resolveRow(state.schema, state.doc, path) : null
+    const info = isReady(state) ? resolveRow(state.schema, state.doc, path) : null
     if (!info) return false
+    const ops = rowOps(ctx.session, key, info)
     if (dir === 'delete') {
-      if (info.length <= (info.listField.minRows ?? 0)) return true
-      ctx.session.apply(key, (d) => updateArray(d, info.listPath, (a) => removeItem(a, info.index)))
-      ctx.setSelected(null)
-      return true
+      if (ops.remove()) ctx.setSelected(null)
+    } else {
+      const next = ops.move(dir)
+      if (next) ctx.setSelected(next)
     }
-    const to = info.index + dir
-    if (to < 0 || to >= info.length) return true
-    ctx.session.apply(key, (d) => updateArray(d, info.listPath, (a) => moveItem(a, info.index, to)))
-    ctx.setSelected({ key, path: `${info.listPath}.${to}` })
     return true
   }
 
@@ -120,7 +119,7 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
   })
 
   useEffect(() => {
-    document.documentElement.setAttribute('data-onpage-editing', '')
+    document.documentElement.setAttribute(DOM_ATTR.editing, '')
     const click = (e: MouseEvent) => onClick(e)
     const key = (e: KeyboardEvent) => onKey(e)
     const focus = (e: FocusEvent) => onFocus(e)
@@ -130,7 +129,7 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
     document.addEventListener('focusin', focus)
     window.addEventListener('beforeunload', unload)
     return () => {
-      document.documentElement.removeAttribute('data-onpage-editing')
+      document.documentElement.removeAttribute(DOM_ATTR.editing)
       document.removeEventListener('click', click, true)
       document.removeEventListener('keydown', key)
       document.removeEventListener('focusin', focus)

package/src/editor-kit.ts

@@ -2,14 +2,17 @@
  * @payload-onpage/react/editor-kit — building blocks for custom field editors
  * (the default editors and @payload-onpage/lexical use exactly these).
  *
- *   function JsonEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
- *     return <Dialog variant="popover" anchor={element} title={field.label} onClose={close} t={t}>…</Dialog>
- *   }
+ *   const json = defineEditor({
+ *     mode: 'popover',
+ *     accepts: ['json'],
+ *     component: (props) => <EditorPopover props={props} testId="my-json">…</EditorPopover>,
+ *   })
  */
 export { Dialog, type DialogProps } from './ui/Dialog.tsx'
 export { useOnPage } from './context.tsx'
 export { useDebouncedSearch } from './editors/useDebouncedSearch.ts'
-export { escapeHtml } from './editors/InlineText.tsx'
+export { ApplyBar, EditorPopover, useDraft } from './editors/kit.tsx'
+export { canEdit, defineEditor } from './registry.ts'
 export {
   HIDDEN,
   UI,
@@ -22,6 +25,7 @@ export {
 } from './dom.ts'
 export { useTrackElement, useLayoutTick, notifyLayout } from './layout.ts'
 export { useEvent } from './useEvent.ts'
-export { sanitizeHtml } from './sanitize.ts'
-export type { EditorRegistry, FieldEditorDef, FieldEditorProps } from './types.ts'
+export { escapeHtml, sanitizeHtml } from './sanitize.ts'
+export type { EditorRegistry, FieldEditorDef, FieldEditorProps, GhostInput } from './types.ts'
+export type { FieldOf } from '@payload-onpage/core'
 export type { Translate } from './messages.ts'