On this page

11. Editor-UX & Click-to-Edit

Der Editor ist eine React-SPA mit Split-View: links CodeMirror (Markdown), rechts Iframe (Preview).

11.1 PostMessage-Protokoll#

Richtung	Type	Payload
Editor → Preview	`RENDER_DOCS`	`{ docsPage, pack, editMode }`
Editor → Preview	`SET_EDIT_MODE`	`{ enabled: bool }`
Editor → Preview	`CHANGE_PACK`	`{ pack: string }`
Preview → Editor	`PREVIEW_READY`	—
Preview → Editor	`LAYOUT_VARIANT_CHANGED`	`{ slug, variant }` (project-scope)
Preview → Editor	`PAGE_VARIANT_CHANGED`	`{ slug, variant }` (page-scope)
Preview → Editor	`CONVERT_CODE_TO_MERMAID`	`{ code, language }`
Preview → Editor	`DOCS_NAVIGATE`	`{ slug }`

Origin-Check: event.origin === PREVIEW_ORIGIN (http://localhost:4173 in dev, gleiche Origin in prod).

11.2 Click-to-Edit-Flow#

Im Edit-Mode wickelt jede Component sich in einen EditablePrimitiveWrapper:

Hover → dashed indigo Outline (35% → 75%)
Click → solid Outline + Swap-Bar oben mittig: [← V1 V2 V3 →] [✨ To Mermaid] [✕]
Variant-Wechsel → postMessage zum Editor → API-Patch → Re-Generate → Re-Render

11.3 Variant-Resolution#

Drei Scopes, hierarchisch:

explicit (im MD frontmatter)
  → page.componentVariants[slug]   (page-scope, content primitives)
    → project.componentVariants[slug]   (project-scope, layout primitives)
      → pack.defaultVariants[slug]
        → 1 (canonical)

Beispiel: ein callout auf einer Page mit componentVariants: {callout: 2} → V2, egal was der Pack default sagt.

11.4 Auto-Save#

Editor.tsx debounced den Markdown-Text mit 800ms. Nach Pause → PATCH .../pages/:id mit neuem mdContent. Generate wird nicht automatisch ausgelöst — nur explicit per Button (LLM-Calls kosten Geld).