T-BLHH-learn-web-editor-markdown-ui

State: closed/done · Impact: medium · Complexity: large

Goal

learn_web edits book content in a textarea with an MDC preview, reads it through MDC, and parses frontmatter with gray-matter in two scripts. It is the second real editor consumer after notes. This task moves editing onto MdSurface, reading onto MdViewer, and deletes the MDC remark/rehype stack and gray-matter.

Today

Location	Role today
`solutions/augmented/apps/learn_web/layers/books/components/editor/ContentEditor.vue`	Title and description fields, `textarea` body, `<MDC>` preview toggle
`solutions/augmented/apps/learn_web/layers/books/components/editor/PreviewPanel.vue`	`<MDC>` with `prose` classes
`solutions/augmented/apps/learn_web/layers/books/components/book/ContentPane.vue`	`<MDC>` read view
`solutions/augmented/apps/learn_web/layers/books/components/editor/BookEditorLayout.vue`	Hosts `ContentEditor`
`solutions/augmented/apps/learn_web/layers/books/components/editor/EditorPanel.vue`	Hosts `ContentEditor`
`solutions/augmented/apps/learn_web/layers/books/composables/useContentEditor.ts`	Editor state
`solutions/augmented/apps/learn_web/layers/books/composables/useBookEditorState.ts`	Editor state
`solutions/augmented/apps/learn_web/layers/books/types.ts`	Comment: content rendered via MDC
`solutions/augmented/apps/learn_web/nuxt.config.ts`	`modules` includes `@nuxt/content`, `@nuxtjs/mdc`; `mdc:` block with `remark-math`, `rehype-mathjax`, shiki langs
`solutions/augmented/apps/learn_web/package.json`	`@nuxtjs/mdc`, `gray-matter`, `rehype-mathjax`, `rehype-raw`, `remark-emoji`, `remark-gfm`, `remark-math`, `remark-mdc`, `remark-rehype`; `codemirror` for the SQL layer
`solutions/augmented/apps/learn_web/scripts/migrate-to-hybrid-ids.ts`	`import matter from 'gray-matter'`
`solutions/augmented/apps/learn_web/scripts/migrate-v1-to-v2.ts`	`import matter from 'gray-matter'`

Proposed

ContentEditor.vue keeps its title and description fields and mounts:

<MdSurface v-model="localContent" mode="live" :modes="['live','source']" toolbar="fixed" frontmatter-panel="hidden" :render-options="{ math: true }">

The textarea and preview toggle are deleted. PreviewPanel.vue and ContentPane.vue render with <MdViewer :source :render-options="{ math: true, highlight: rehypeShiki() }">, with rehypeShiki from @sksizer/obsidian-md/shiki and KaTeX replacing MathJax. The two scripts split frontmatter with split() from @sksizer/markdown-util and parse it with yaml. @nuxtjs/mdc, gray-matter and the remark/rehype packages that only fed MDC are removed; @nuxt/content stays.

Approach

package.json: add @sksizer/markdown-ui, @sksizer/markdown-util, yaml (workspace:* for the first two); delete @nuxtjs/mdc, gray-matter, rehype-mathjax, rehype-raw, remark-emoji, remark-gfm, remark-math, remark-mdc, remark-rehype.
nuxt.config.ts: add the layer to extends; remove @nuxtjs/mdc from modules and the mdc: block.
ContentEditor.vue: replace the textarea and preview toggle with MdSurface; keep the update:modelValue and update:frontmatter emits.
PreviewPanel.vue and ContentPane.vue: MdViewer; drop prose classes.
The two scripts: split() plus yaml.parse; run each against a fixture book to confirm the same output.
Fix the types.ts comment.
Root bun install; bun install --frozen-lockfile.
Verify: bun run typecheck and bun run build in the app; edit a content file, save, reload; byte-diff an unedited save; a page with $x^2$ renders through KaTeX; light and dark screenshots; moon run :check :test --affected. Flip the learn_web row of the duplicates ledger in docs/LIBRARIES.md.

Files to touch

Location	Kind	Change
`solutions/augmented/apps/learn_web/package.json`	modify	Add layer, `markdown-util`, `yaml`; delete the MDC stack and `gray-matter`
`solutions/augmented/apps/learn_web/nuxt.config.ts`	modify	Extend the layer; drop `@nuxtjs/mdc` module and `mdc:` block
`solutions/augmented/apps/learn_web/layers/books/components/editor/ContentEditor.vue`	modify	`MdSurface` replaces `textarea` and preview toggle
`solutions/augmented/apps/learn_web/layers/books/components/editor/PreviewPanel.vue`	modify	`MdViewer`
`solutions/augmented/apps/learn_web/layers/books/components/book/ContentPane.vue`	modify	`MdViewer`
`solutions/augmented/apps/learn_web/layers/books/types.ts`	modify	Comment
`solutions/augmented/apps/learn_web/scripts/migrate-to-hybrid-ids.ts`	modify	`split()` plus `yaml`
`solutions/augmented/apps/learn_web/scripts/migrate-v1-to-v2.ts`	modify	`split()` plus `yaml`
`docs/LIBRARIES.md`	modify	learn_web render-site row flips to resolved
`bun.lock`	modify	Root lockfile regen

Acceptance criteria

AC-1: grep -rn "<MDC\|gray-matter" solutions/augmented/apps/learn_web --include=*.vue --include=*.ts --include=*.json returns nothing outside node_modules.
AC-2: solutions/augmented/apps/learn_web/package.json lists none of @nuxtjs/mdc, gray-matter, rehype-mathjax, remark-mdc, remark-math, remark-emoji; nuxt.config.ts has no mdc: block.
AC-3: ContentEditor.vue has no <textarea and mounts MdSurface; PreviewPanel.vue and ContentPane.vue mount MdViewer.
AC-4: bun run typecheck and bun run build pass in the app.
AC-5: Saving an unedited content file leaves its sha unchanged; editing one line yields a one-line diff (recorded in the PR).
AC-6: A content page with inline math renders through KaTeX (light and dark screenshots attached).
AC-7: Both migration scripts produce byte-identical output on a fixture book before and after the gray-matter swap (recorded in the PR).
AC-8: bun install --frozen-lockfile passes at the root.

Out of scope

Removing @nuxt/content; content collections stay.
The SQL editor (codemirror, @codemirror/lang-sql) in the sqljs layer.
vimit_prototype; its MDC prototype page and @nuxtjs/mdc dep are removed by T-FUVB-augmented-web-renderer-markdown-ui.
augmented_web (T-FUVB-augmented-web-renderer-markdown-ui).

Dependencies

The same engine and chrome tasks as T-3DFJ-notes-adopts-markdown-ui; learn_web needs the full editing surface, including math (T-JPB0-md-engine-math).
D-4QGN-markdown-dialect-and-compatibility-profile: frontmatter split by markdown-util; body-only editing.
D-7VMX-markdown-ecosystem-strategy d.10: the MDC stack is deleted.
D-DLNG-design-language ring order places augmented last.

Discovery context

Member of milestone M-931L; wave 6b (learn_web) of D-K3EM-markdown-editor-chrome-and-plugin-environment.

Depends on

T-EXQ7-md-engine-command-catalogue, T-MNRO-md-engine-anchors, T-N58P-md-engine-slash-and-heading-completion, T-UYTR-md-engine-tables, T-JPB0-md-engine-math, T-VCFL-md-engine-mermaid, T-DSVW-md-engine-html-details, T-LNJA-md-engine-large-file-guard, T-0BFS-md-engine-attachments, T-E99V-md-engine-transclusion-expansion, T-98EU-md-ui-toolbar-insert-frontmatter, T-8ZHI-md-ui-overlays-bubble-link-table, T-RJVA-md-ui-find-outline-hover-lifts, T-I630-md-ui-playground-e2e-perf

← Back to Tasks