feat(web): integrate MarkdownEditor into SpecEditor (visual mode, no AI drawer) #917

New issue

Closed

opened 2026-05-06 23:26:54 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-06 23:26:54 +00:00

Collaborator

Context

SpecEditor (apps/web/src/components/spec-editor/spec-editor.tsx) uses a CodeMirror 6 split-pane layout (editor left, preview right). Replacing the body-editing surface with the shared MarkdownEditor (Milkdown Crepe, visual mode) gives a consistent, polished WYSIWYG experience across the app.

The Architect is already embedded in the workspace sidebar for specs — no AI assistant drawer needed here.

AC

Replace the CodeMirror instance + Markdown preview pane inside SpecEditor with <MarkdownEditor defaultMode="visual"> from @/components/markdown-editor.
Preserve the existing autosave behaviour: the onChange callback should still trigger the debounced saveSpec call and update the save-state pill (idle / saving / saved / error).
Preserve the ⌘/Ctrl+S hotkey (already a no-op / flush — wire it via a CodeMirror-free handler or the sourceExtensions prop if source mode is retained).
Do not add a MarkdownAssistantDrawer or toolbar assistant button — the workspace architect panel already serves this purpose.
The autosave status pill and its aria-live region must remain accessible above or below the editor surface.
Update spec-editor.test.tsx — swap the EditorView mock for @/components/markdown-editor mock.

Notes

Autosave debounce + blur flush logic moves from the CodeMirror update listener to a standard onChange prop.
SpecEditor remains a split-pane or full-width layout at the call site's discretion — workspace is the sole consumer.

Depends on

#915 (visual-only MarkdownEditor)

## Context `SpecEditor` (`apps/web/src/components/spec-editor/spec-editor.tsx`) uses a CodeMirror 6 split-pane layout (editor left, preview right). Replacing the body-editing surface with the shared `MarkdownEditor` (Milkdown Crepe, visual mode) gives a consistent, polished WYSIWYG experience across the app. The Architect is already embedded in the workspace sidebar for specs — **no AI assistant drawer needed here**. ## AC - Replace the CodeMirror instance + Markdown preview pane inside `SpecEditor` with `<MarkdownEditor defaultMode="visual">` from `@/components/markdown-editor`. - Preserve the existing autosave behaviour: the `onChange` callback should still trigger the debounced `saveSpec` call and update the save-state pill (`idle / saving / saved / error`). - Preserve the `⌘/Ctrl+S` hotkey (already a no-op / flush — wire it via a CodeMirror-free handler or the `sourceExtensions` prop if source mode is retained). - **Do not** add a `MarkdownAssistantDrawer` or toolbar assistant button — the workspace architect panel already serves this purpose. - The autosave status pill and its `aria-live` region must remain accessible above or below the editor surface. - Update `spec-editor.test.tsx` — swap the `EditorView` mock for `@/components/markdown-editor` mock. ## Notes - Autosave debounce + blur flush logic moves from the CodeMirror update listener to a standard `onChange` prop. - `SpecEditor` remains a split-pane or full-width layout at the call site's discretion — workspace is the sole consumer. ## Depends on #915 (visual-only MarkdownEditor)

claude-desktop changed title from ~~feat(web): integrate MarkdownEditor + AI drawer into plugins-tab editor~~ to feat(web): integrate MarkdownEditor into SpecEditor (visual mode, no AI drawer)

2026-05-06 23:28:56 +00:00