@payload-onpage/react 0.2.0 → 0.3.0

package/src/OnPageClient.tsx

@@ -12,10 +12,11 @@
  * invisible markers (turn off with `autoMap={false}`).
  */
 import { useEvent } from './useEvent.ts'
+import { toRef } from './annotations.ts'
 import { encodeDocument, refKey, type DocRef } from '@payload-onpage/core'
 import { useEffect, useMemo, type ReactNode } from 'react'
 import { editable, editableOff, type Editable } from './annotations.ts'
-import { useOnPageOptional } from './context.tsx'
+import { useOnPageOptional, useSessionSnapshot } from './context.tsx'
 
 export type OnPageClientProps<T> = {
   doc: T
@@ -33,9 +34,9 @@ export function OnPageClient<T extends { id?: string | number } | null | undefin
   const ref = useMemo<DocRef | null>(
     () =>
       globalSlug
-        ? { kind: 'global', slug: globalSlug }
-        : collection && id != null
-          ? { kind: 'collection', slug: collection, id }
+        ? toRef({ global: globalSlug })
+        : collection
+          ? toRef({ collection, doc: { id } })
           : null,
     [globalSlug, collection, id],
   )
@@ -51,7 +52,8 @@ export function OnPageClient<T extends { id?: string | number } | null | undefin
   })
   useEffect(() => (enabled && ref ? join(ref) : undefined), [enabled, ref, join])
 
-  const state = key ? ctx?.snap.docs[key] : undefined
+  const snap = useSessionSnapshot(ctx?.session)
+  const state = key ? snap.docs[key] : undefined
   const stateDoc = state?.doc
   const fields = state?.schema?.fields
   const autoMap = props.autoMap !== false
@@ -63,5 +65,7 @@ export function OnPageClient<T extends { id?: string | number } | null | undefin
     () => (enabled && ref ? editable(ref, { enabled: true }) : editableOff),
     [enabled, ref],
   )
+  // The session's copy started as this `doc` (same document, edited, held as plain JSON),
+  // so it is handed back as the page's own type.
   return <>{render(current as T, e)}</>
 }

package/src/annotations.ts

@@ -51,7 +51,7 @@ export const editableOff: Editable = {
 
 export type EditableTarget =
   | DocRef
-  | { collection: string; doc: { id?: string | number } | null | undefined }
+  | { collection: string; doc: { id?: string | number | undefined } | null | undefined }
   | { global: string }
 
 export function toRef(t: EditableTarget): DocRef | null {

package/src/context.tsx

@@ -1,23 +1,66 @@
 'use client'
 
-import { createContext, useContext, useSyncExternalStore } from 'react'
+import { createContext, useContext, useSyncExternalStore, type ReactNode } from 'react'
+import type { EditorSession, SessionSnapshot } from '@payload-onpage/core'
 import { hub } from './hub.ts'
-import type { OnPageContextValue } from './types.ts'
+import type { OnPageApi, OnPageContextValue, OnPageState } from './types.ts'
 
-export const OnPageContext = createContext<OnPageContextValue | null>(null)
+const ApiContext = createContext<OnPageApi | null>(null)
+const StateContext = createContext<OnPageState | null>(null)
 
-/** The editor, for code rendered inside it (field editors, panels). */
+/** Provides the editor to everything it renders (two contexts: the stable API and the changing state). */
+export function OnPageProvider({
+  api,
+  state,
+  children,
+}: {
+  api: OnPageApi
+  state: OnPageState
+  children: ReactNode
+}) {
+  return (
+    <ApiContext.Provider value={api}>
+      <StateContext.Provider value={state}>{children}</StateContext.Provider>
+    </ApiContext.Provider>
+  )
+}
+
+/** The editor, for code rendered inside it (field editors, panels): its API and state. */
 export function useOnPage(): OnPageContextValue {
-  const ctx = useContext(OnPageContext)
-  if (!ctx) throw new Error('useOnPage must be used inside <OnPageEditor>')
-  return ctx
+  const api = useContext(ApiContext)
+  const state = useContext(StateContext)
+  if (!api || !state) throw new Error('useOnPage must be used inside <OnPageEditor>')
+  return { ...api, ...state }
+}
+
+/** Only the editor's API (session, actions): re-renders when the editor is reconfigured, not on every edit. */
+export function useOnPageApi(): OnPageApi {
+  const api = useContext(ApiContext)
+  if (!api) throw new Error('useOnPageApi must be used inside <OnPageEditor>')
+  return api
 }
 
 const getNull = () => null
 
-/** The editor, from inside it or anywhere on the page; null when no editor is mounted (public pages). */
-export function useOnPageOptional(): OnPageContextValue | null {
-  const inside = useContext(OnPageContext)
+/**
+ * The editor's API from inside it or anywhere on the page; null when no editor
+ * is mounted (public pages). Read documents with `useSessionSnapshot(api?.session)`.
+ */
+export function useOnPageOptional(): OnPageApi | null {
+  const inside = useContext(ApiContext)
   const outside = useSyncExternalStore(hub.subscribe, hub.get, getNull)
   return inside ?? outside
 }
+
+const EMPTY: SessionSnapshot = { docs: {}, canUndo: false, canRedo: false, busy: false }
+const noopSubscribe = () => () => {}
+const getEmpty = () => EMPTY
+
+/** A session's documents, re-rendering when they change (an empty snapshot without a session). */
+export function useSessionSnapshot(session: EditorSession | null | undefined): SessionSnapshot {
+  return useSyncExternalStore(
+    session?.subscribe ?? noopSubscribe,
+    session?.getSnapshot ?? getEmpty,
+    getEmpty,
+  )
+}

package/src/dom.ts

@@ -1,9 +1,21 @@
 /** DOM helpers shared by the editor UI (browser-only, no React). */
 
-/** Attribute that hides a page element while an editor or ghost stands in for it. */
-export const HIDDEN = 'data-onpage-hidden'
-/** Marks the editor's own UI, which locators and click handling ignore. */
-export const UI = 'data-onpage-ui'
+/** Every DOM attribute the editor sets (annotations, which sites write, are `ATTR`). */
+export const DOM_ATTR = {
+  /** Hides a page element while an editor or ghost stands in for it. */
+  hidden: 'data-onpage-hidden',
+  /** Marks the editor's own UI, which locators and click handling ignore. */
+  ui: 'data-onpage-ui',
+  /** A page target the editor made keyboard-focusable. */
+  focusable: 'data-onpage-focusable',
+  /** On <html> while editing. */
+  editing: 'data-onpage-editing',
+  /** The editor's injected stylesheet. */
+  styles: 'data-onpage-styles',
+} as const
+
+export const HIDDEN = DOM_ATTR.hidden
+export const UI = DOM_ATTR.ui
 
 /** Computed styles copied onto an inline editor so it looks like the element it replaces. */
 export const TYPOGRAPHY = [
@@ -94,20 +106,7 @@ export function placeCaret(el: HTMLElement, point?: { x: number; y: number }): v
   sel.addRange(range)
 }
 
-/** Position a fixed popover below (or above) an element, kept inside the viewport. */
-export function popoverPosition(
-  el: Element | null,
-  size = { width: 300, height: 320 },
-): { top: number; left: number } {
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  if (!el) return { top: 80, left: Math.max(8, vw / 2 - size.width / 2) }
-  const r = el.getBoundingClientRect()
-  const below = r.bottom + 8
-  const top = below + size.height < vh ? below : Math.max(8, r.top - 8 - size.height)
-  const left = Math.min(Math.max(8, r.left), vw - size.width - 8)
-  return { top, left }
-}
+export { popoverPosition } from './geometry.ts'
 
 const FOCUSABLE =
   'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'

package/src/editor/FieldHost.tsx

@@ -1,19 +1,34 @@
 'use client'
 
-import { fieldAtPath, getAt } from '@payload-onpage/core'
+import { fieldAtPath, getAt, isReady, type ReadyDocumentState } from '@payload-onpage/core'
 import { Suspense, useCallback } from 'react'
 import { useOnPage } from '../context.tsx'
-import type { FieldEditorProps } from '../types.ts'
+import { canEdit } from '../registry.ts'
+import type { EditingState, FieldEditorDef, FieldEditorProps } from '../types.ts'
 
 /** Renders the open field editor, if it belongs to this layer. */
 export function FieldHost({ mode }: { mode: 'inline' | 'popover' }) {
-  const { editing, editors, session, snap, targets, setEditing, addGhost, isLive, t } = useOnPage()
-  const def = editing ? editors[editing.editor] : undefined
-  const state = editing ? snap.docs[editing.key] : undefined
-  const key = editing?.key ?? ''
-  const path = editing?.path ?? ''
+  const { editing, editors, snap } = useOnPage()
+  if (!editing) return null
+  const def = editors[editing.editor]
+  const state = snap.docs[editing.key]
+  if (!def || def.mode !== mode || !isReady(state)) return null
+  return <OpenEditor editing={editing} def={def} state={state} />
+}
+
+/** The editor for one field of a loaded document. */
+function OpenEditor({
+  editing,
+  def,
+  state,
+}: {
+  editing: EditingState
+  def: FieldEditorDef
+  state: ReadyDocumentState
+}) {
+  const { session, targets, setEditing, addGhost, isLive, t } = useOnPage()
+  const { key, path, el: clicked } = editing
   const live = isLive(key)
-  const clicked = editing?.el
 
   const element = useCallback(
     () => (clicked?.isConnected ? clicked : (targets.find(key, path)?.el ?? null)),
@@ -39,10 +54,10 @@ export function FieldHost({ mode }: { mode: 'inline' | 'popover' }) {
     [addGhost, key, path],
   )
 
-  if (!editing || !def || def.mode !== mode || !state?.schema || !state.doc) return null
   const field = fieldAtPath(state.schema.fields, state.doc, path)?.field
-  if (!field) return null
+  if (!field || !canEdit(def, field)) return null
   const Editor = def.component
+  const raw = getAt(state.doc, path)
   // Editors may be lazy (the rich-text editor is): render nothing until they've loaded.
   return (
     <Suspense fallback={null}>
@@ -52,7 +67,7 @@ export function FieldHost({ mode }: { mode: 'inline' | 'popover' }) {
         path={path}
         field={field}
         element={element}
-        value={getAt(state.doc, path)}
+        value={def.normalize ? def.normalize(raw, field) : raw}
         commit={commit}
         preview={preview}
         close={close}

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>
   )
 }