wisewigdocs
GitHubWebsite

Browser editor workspace and command vertical slice

The Morning Bell example demonstrates the browser-based editor and its mutation path end to end. The authenticated draft page becomes the editing canvas. A narrow WiseWig sidebar sits beside it for actions that do not belong directly on the document, producing a Pages-like writing experience instead of a CMS dashboard.

Workspace architecture

  • The left side is the actual server-rendered Astro draft in a same-origin frame. The surrounding chrome recedes so the page itself reads as the document.
  • Desktop, tablet, and mobile controls set the frame to real responsive layout widths, including 768 and 390 pixels. Customer-site media queries therefore behave as they do in a browser viewport.
  • The right side is a narrow React sidebar. Add contains the approved component palette, Edit contains controls for the selected section, and Pages opens site management.
  • Any heading or body field whose component contract declares inline: true becomes a contenteditable field in edit mode. It owns the caret while focused and accepts plain-text paste. Plain text sends a bounded value; a rich-text field receives a floating, selection-aware toolbar containing only its declared bold/italic/link operations and sends a portable span document on blur. Rendered HTML is never stored as content.
  • Movable sections receive a keyboard-focusable drag handle. Components may be dragged from the palette between sections, and existing sections may be reordered. Click/tap on a palette item remains the touch-accessible insertion path.
  • The Layout palette item adds a selected, outlined responsive row. Components can be dropped into its one-to-four columns, moved between row and page, and unwrapped without content loss. Row controls configure desktop/tablet columns and gap; mobile remains a safe one-column stack.
  • The frame receives draft content and data-edit-* metadata only after the normal session and permission checks succeed. __wise_wig_frame=1 only prevents the frame from recursively mounting another editor workspace; it grants no access or render mode.
  • Internal page links target the top-level editor tab so an editor can move between site pages without nesting workspaces.
  • Public and preview modes do not load the editor workspace or edit metadata. The customer site is not hydrated merely to make it editable.

The Canvas design uses the WiseWig brand system independently of the selected customer theme: Bricolage Grotesque headings, Hanken Grotesk controls, Space Mono metadata, a warm cream workspace, coral selection/action color, and teal inline-edit state. Customer theme styles remain isolated inside the frame.

Mutation path

The editor follows the same guarded path for every control:

  1. An editor changes an approved inline field on the page, or selects a presentation, asset, or structural action in the React sidebar.
  2. The browser sends a schema-bounded patch plus a unique Idempotency-Key to the private API route.
  3. The route validates the development session and builds a tenant/site-scoped identity.
  4. executeCommand authorizes content.edit, performs the draft patch once, and records a succeeded or replayed audit event.
  5. Publishing requires a browser confirmation and a separate explicit confirmation header before content.publish is run.
  6. The published page reads the published snapshot; preview/edit read the draft snapshot and remain private, no-store.

The example now edits the approved component layout variant (left, center, or split) and updates the server-rendered DOM immediately while persisting the typed variant through a guarded command. Canvas rows are a separate page-layout concern and always request a fresh server render. Preview opens the draft in a separate private tab.

The component palette is generated from the same registry. A component can be inserted only from its schema defaults, in an approved placement region, and below the tighter of its structural and placement limits. Hero therefore appears as unavailable once its single-instance limit is reached. Successful add, move, remove, and duplicate commands request a fresh server-rendered draft. Public, preview, and edit modes still use the same Astro components.

This remains a local POC: the cookie identity, in-memory idempotency/audit stores, and repository are replaced in production by OAuth/OIDC, authoritative D1 memberships, Durable Object versions/audit storage, and cache invalidation. Its purpose is to prove that the editor workspace does not bypass the production-shaped command boundary.