Schwitzz
bb68d9d5d2
Complete the Writing Surface chunk: wire the web writing view to the
offline-first storage adapter, finish the editor package exports, and
apply Step 4 polish (SVG monogram logo, real project in the sidebar,
font settings → CSS variables).
Editor package
- Re-export EditorContent + Editor type from @pubscript/editor so the
web app never imports TipTap directly.
Web writing view (apps/web)
- project-store (zustand) over storageLocal: project, chapters, active
chapter, autosave via createAutosave, idle detection via
createIdleDetector.
- Client-side seed mirroring the server seed ("The Glass Harbor").
- WritingView component: editor + autosave label + word/scene count +
chapter nav; wire the /write route inside AppShell.
- Import editor.css in main.tsx.
Core storage contract
- Extend StorageAdapter with createBook/listBooks/listChapters;
implement in local + server adapters; update contract test mock.
Polish
- Sidebar: SVG monogram logo + live project title/word count instead
of the placeholder "The Silent Cartographer".
- Fonts: applyFontSettings() in the theme engine writes --ps-font-*
variables; .ps-content reads --ps-font-size/leading/measure; settings
store applies fontSize on boot and change.
Docs
- PLAN.md: CHUNK #3 → in progress.
- CHUNK#3_PROGRESS.md: steps 1–3 done, step 4 polish in progress.
Verified: full workspace typecheck clean, lint clean, core 24 / ui 5 /
editor 7 tests pass, web build clean. (server vitest hits EADDRINUSE on
8080 — pre-existing Docker WordPress port conflict, unrelated.)
32 lines
1.9 KiB
Markdown
32 lines
1.9 KiB
Markdown
# CHUNK #3 — Editor & Writing View
|
||
|
||
**Status:** In progress. Steps 1–3 committed. Step 4 (polish) in progress.
|
||
|
||
## Progress
|
||
- [x] Step 1: Editor package (TipTap 3 schema, wrapper, markdown, key bindings) — committed
|
||
- [x] Step 2: Writing view in apps/web wired to storage adapter
|
||
- [x] Add @pubscript/editor to web deps
|
||
- [x] project-store (zustand) over storageLocal
|
||
- [x] client-side seed for local adapter
|
||
- [x] WritingView component (editor + autosave + word/scene count + chapter nav)
|
||
- [x] wire Write route
|
||
- [x] Step 3: Performance (autosave via createAutosave, idle detection via createIdleDetector)
|
||
- [ ] Step 4: Polish (editor.css import ✅, fonts 🟡, SVG monogram logo ✅)
|
||
- [x] editor.css import in main.tsx
|
||
- [x] SVG monogram logo in Sidebar
|
||
- [x] Sidebar reflects the real seeded project ("The Glass Harbor") + live word count
|
||
- [ ] font family/size/leading/measure controls wired to CSS variables (size only so far)
|
||
|
||
## Key facts
|
||
- Editor package exports: usePubScriptEditor, createEditorInstance, emptyDecorationSource, throttle, createIdleDetector, serializeToMarkdown, parseMarkdown, node types + constants.
|
||
- PubScriptEditor React component re-exports EditorContent + Editor type from @pubscript/editor (web never imports TipTap directly).
|
||
- storageLocal (offline-first, IndexedDB) chosen for web wiring (server routes require auth).
|
||
- Demo prose lives in server/src/seed.ts ("The Glass Harbor", 3 chapters, 4 chars, 1 world, 1 board).
|
||
- Web app uses @pubscript/core/local (storageLocal) — no server needed to run offline.
|
||
- Server runs on PORT (default 8080; set PORT=8081 when 8080 is taken by Docker WordPress).
|
||
|
||
## Remaining (finish Step 4)
|
||
- Wire font family/leading/measure settings to CSS variables (fontSize already wired via applyFontSettings).
|
||
- Add a settings UI control for font size (or confirm existing one applies).
|
||
- Final polish pass: focus mode visual, empty-state copy, a11y labels.
|