Blog Editor UX

The Blog Editor is the authoring surface used by Malet Owners to create, edit, and publish blog content on their Malets. The upgraded editor adds four key capabilities: auto-save drafts, Tiptap JSON validation, version history with restore, and a publish approval pipeline (DRAFT → REVIEW → APPROVED → PUBLISHED/SCHEDULED).

Architecture

The editor is separated into a store layer and a UI layer, following the Svelte 5 runes pattern used across all Mallnline dashboard components.

┌───────────────────────────────────┐
│           BlogForm.svelte         │
│  ┌──────────┐  ┌────────────────┐ │
│  │ Autosave │  │ History Drawer │ │
│  │ Bar      │  │ (slide-in)     │ │
│  └──────────┘  └────────────────┘ │
│  ┌────────────────────────────────┤
│  │ TiptapEditor.svelte            │
│  │  (ProseMirror + word count)    │
│  └────────────────────────────────┤
│  ┌────────────────────────────────┤
│  │ Publish Pipeline Actions       │
│  │  Draft → Review → Publish      │
│  └────────────────────────────────┘
│                 ↕
│      blogEditorStore.svelte.ts
│     (localStorage snapshots,
│      Zod JSON validation,
│      pipeline state machine)
└───────────────────────────────────┘

Store: `blogEditorStore.svelte.ts`

A Svelte 5 runes class (BlogEditorStore) that manages:

• Content state — title, slug, excerpt, coverImage, tags, html, json, stage
• Auto-save timer — 30-second debounced timer triggered by markDirty()
• Draft snapshots — localStorage-backed array of DraftSnapshot objects
• Tiptap JSON validation — Zod schema (TiptapDocSchema) validates ProseMirror output
• Publish pipeline — state machine with canTransition() guard + transitionTo() mutator

Component: `BlogForm.svelte`

The UI layer consumes the store and renders:

• Autosave indicator bar — stage badge (color-coded), JSON validation badge (✓ / ✗), dirty/saved status, manual save button, history toggle
• Title input — Headline-style 2.5rem input
• Meta panel — URL slug (auto-generated from title), cover image uploader, excerpt textarea, tag input
• Editor — TiptapEditor with real-time word/character count footer
• Schedule picker — datetime-local input for scheduling publications
• Pipeline action bar — context-sensitive buttons based on current stage

Auto-Save System

Each snapshot is a DraftSnapshot with a unique ID (snap_{timestamp}_{random}). When localStorage reaches capacity, the store gracefully degrades to keeping only the 5 most recent snapshots.

Tiptap JSON Validation

The TiptapEditor emits both HTML and ProseMirror JSON on every content change. The store validates the JSON against a Zod schema:

const TiptapDocSchema = z.object({
  type: z.literal('doc'),
  content: z.array(ProseMirrorNodeSchema).optional()
});

The validation badge in the autosave bar shows:

• ✓ Valid (green badge) — document conforms to the ProseMirror spec
• ✗ Invalid (red badge) — with a tooltip showing the Zod error message

Version History

The Draft History Drawer is a slide-in panel from the right edge of the viewport.

Drawer Features

• Reverse-chronological list of all saved snapshots
• Each card shows: title (truncated), timestamp, color-coded stage badge
• Restore — replaces all editor state from the snapshot
• Delete — removes a single snapshot
• Clear All — wipes all snapshots for the post

Restore Behavior

When a Malet Owner restores a version:

1. Store state is updated (title, html, json, excerpt, tags, coverImage)
2. The TiptapEditor's setJSON() method is called with the parsed ProseMirror JSON
3. If JSON parsing fails, falls back to setContent() with the HTML string
4. The form becomes dirty (unsaved indicator appears)

Publish Approval Pipeline

A visual state machine governing the lifecycle of a blog post.

Stage Definitions

Valid Transitions

DRAFT ────→ REVIEW ────→ APPROVED ────→ PUBLISHED
  │                         │
  ├────→ PUBLISHED          ├────→ SCHEDULED
  └────→ SCHEDULED          └────→ DRAFT (send back)

PUBLISHED ──→ DRAFT (unpublish)
SCHEDULED ──→ DRAFT | PUBLISHED

Anyone with write permissions on the Malet can transition between stages. The pipeline is enforced visually — context-sensitive action buttons appear based on the current stage:

• DRAFT: "Submit for Review", "Publish", "Schedule" buttons
• REVIEW: "Approve & Publish" button
• PUBLISHED: No additional actions (post is live)

TiptapEditor Enhancements

The shared TiptapEditor.svelte component was enhanced for the blog editor:

GraphQL Changes

scheduledPublishAt was added to the Blog entity type, CreateBlogInput, and UpdateBlogInput in src/lib/queries/blog.ts. The REVIEW status was added to all status union types.

File Map

Related

• Admin Analytics Dashboards — Blog analytics charts and engagement KPIs consumed alongside the editor
• Edit History Audit Trail — Field-level diff viewer tracking blog post changes
• Organization & Malet Management — Malet ownership context and The Deck operations
• Alert Templates — Companion template maker in the Admin Dashboard Templates tab