feat(mdc): comark migration

CLAUDE.md

@@ -56,7 +56,7 @@ studio/
 
 - **Nuxt 3**: Core framework
 - **Nuxt Content**: Content management layer (peer dependency)
-- **@nuxtjs/mdc**: MDC (Markdown Components) parsing and rendering
+- **comark**: MDC (Markdown Components) parsing and rendering — produces a compact array-based `ComarkTree` AST
 - **TipTap**: Visual WYSIWYG editor
 - **Monaco Editor**: Code editor
 - **Vue Router**: SPA routing inside Studio
@@ -232,9 +232,9 @@ description: 'meta description of the page'
 
 **Tiptap editor**
 - Can edit Markdown files with MDC syntax
-- Tiptap editor manipulate Tiptap AST which is directly converted to MDC AST and stored in the existing SQLite database
+- TipTap AST is converted to/from `ComarkTree` (via `comarkToTiptap.ts` / `tiptapToComark.ts`) and stored in the SQLite database
 - If we want to display raw markdown of a file, we can use the `generateContentFromDocument` function to get the raw markdown (ie. preview page or monaco editor)
-- If we want to generate the MDC AST from the raw markdown, we can use the `generateDocumentFromMarkdownContent` function
+- If we want to generate a `ComarkTree` from raw markdown, we can use the `generateDocumentFromMarkdownContent` function
 
 **Form editor**
 - Can edit YAML files
@@ -504,7 +504,7 @@ This ensures AI never generates headings when you're writing paragraphs, or full
 
 **In production mode:**
 - Exisiting db files is stored in SQLite browser side database by Nuxt Content. It's loaded by a dump file.
-- Markdown files are stored as MDC AST
+- Markdown files are stored as `ComarkTree` (the array-based AST produced by the comark parser)
 - YAML and JSON files are stored as pure json
 - Drafts files and meta are stored client-side in IndexedDB
 - Drafts files content is merged with the existing db files in the browser before being rendered => app is rerendered with updated content in db => this is the preview you see in the browser
@@ -521,12 +521,18 @@ Studio uses `nuxt-component-meta` to:
 - Find props editors for components
 - Find slots for components
 
-#### @nuxtjs/mdc
+#### comark
 
-Studio uses `@nuxtjs/mdc` to:
-- Parse MDC syntax
-- Render MDC syntax
-- Generate MDC AST
+Studio uses `comark` to:
+- Parse MDC/Markdown content into a `ComarkTree` — a compact array-based AST: `[tag, attrs, ...children]`
+- Render a `ComarkTree` back to raw markdown (via `renderMarkdown` from `comark/render`)
+- Apply plugins during parsing: emoji, syntax highlighting (shiki themes), and table of contents
+
+**Key files:**
+- `src/module/src/runtime/utils/document/generate.ts` — parses markdown files server-side with `parse()` from comark
+- `src/app/src/utils/tiptap/comarkToTiptap.ts` / `tiptapToComark.ts` — convert between ComarkTree and TipTap JSON in the visual editor
+- `src/app/src/utils/comark.ts` — helpers to traverse ComarkTree nodes (`isElement`, `getTag`, `getAttrs`, `getChildren`)
+- `src/module/src/runtime/utils/document/legacy.ts` — backward-compatible conversion layer between the old `MarkdownRoot` format (produced by `@nuxtjs/mdc`) and the new `ComarkTree`, allowing Nuxt Content to continue storing documents in its existing format until it natively supports ComarkTree
 
 #### shiki
 
@@ -586,7 +592,7 @@ Studio uses `shiki` to highlight code in code blocks.
 
 **Required**:
 - `@nuxt/content` - Content layer (peer dependency)
-- `@nuxtjs/mdc` - MDC parsing/rendering
+- `comark` - MDC parsing/rendering (produces `ComarkTree` AST)
 
 **Core**:
 - `unstorage` - Storage abstraction
@@ -595,7 +601,7 @@ Studio uses `shiki` to highlight code in code blocks.
 
 **Editors**:
 - `modern-monaco` - Code editor
-- `minimark` - Markdown processing (TipTap)
+- `minimark` - Legacy MarkdownRoot format (used only in backward-compat layer)
 
 **Git Providers**:
 - `@octokit/types` - GitHub API

docs/content/5.content.md

@@ -154,11 +154,15 @@ Customize which components appear in the editor, restrict icon libraries, and fi
 Enable **debug mode** from the footer menu to see the real-time conversion between:
 
 - TipTap JSON format
-- MDC AST
+- Comark Tree (the compact array-based AST produced by [comark](https://github.com/comarkdown/comark))
 - Final Markdown output
 
 This is useful for understanding how content is transformed and to share troubleshooting.
 
+::prose-note
+Studio uses **comark** as its Markdown parser. When you type in the visual editor, the content flows through: TipTap JSON → ComarkTree → raw Markdown. The ComarkTree is also what gets stored in the browser SQLite database and committed to Git as raw markdown via `renderMarkdown`.
+::
+
 ## Form Editor
 
 The form editor is used for editing:

docs/content/9.advanced.md

@@ -19,6 +19,14 @@ This section is informational. Synchronization happens automatically after setup
 
 The self-hosted Nuxt Studio module uses a three-tier system for storage:
 
+### Content Parsing (comark)
+
+Studio uses **[comark](https://github.com/comarkdown/comark)** as its Markdown parser. At build time and in development, markdown files are parsed by comark into a `ComarkTree` — a compact array-based representation where each node is `[tag, attributes, ...children]`. This tree is stored in the SQLite database and used as the interchange format between all Studio editors:
+
+- **Visual editor** (TipTap) ↔ ComarkTree ↔ stored in SQLite
+- **Code editor** ↔ raw Markdown ↔ `renderMarkdown(tree)` from comark regenerates it
+- **Publishing** ↔ comark renders the ComarkTree back to raw Markdown before committing to Git
+
 ### Production Database (SQLite WASM)
 
 When the application loads in the browser, Nuxt Content v3 downloads a SQLite database dump from the server and initializes a local WASM database. :br

package.json

@@ -54,15 +54,14 @@
     "@ai-sdk/gateway": "^3.0.104",
     "@ai-sdk/vue": "^3.0.168",
     "@iconify-json/lucide": "^1.2.102",
-    "@nuxtjs/mdc": "^0.21.1",
     "@vueuse/core": "^14.2.1",
     "ai": "^6.0.168",
+    "comark": "https://pkg.pr.new/comark@35a5e29",
     "defu": "^6.1.7",
     "destr": "^2.0.5",
     "js-yaml": "^4.1.1",
     "minimatch": "^10.2.5",
     "nuxt-component-meta": "^0.17.2",
-    "remark-mdc": "^3.10.0",
     "shiki": "^4.0.2",
     "unstorage": "1.17.5",
     "zod": "^4.3.6",

playground/docus/content/1.getting-started/3.installation.md

@@ -35,4 +35,3 @@ A local preview of your documentation will be available at <http://localhost:400
 
 Head over the [Edition](https://docus.dev/concepts/edition) section to learn how to write your documentation.
 ::
-

playground/docus/content/1.getting-started/4.project-structure.md

@@ -1,7 +1,8 @@
 ---
+title: Project Structure
+description: Docus provides a ready-to-use documentation website starter.
 navigation:
   icon: i-lucide-folder-tree
-title: Project Structure
 ---
 
 Docus provides a ready-to-use [documentation website starter](https://github.com/nuxt-content/docus/tree/.starter).

playground/docus/content/1.getting-started/5.studio.md

@@ -9,7 +9,8 @@ navigation:
 
 The Nuxt Studio **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
 
-:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
+::video{src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4" controls loop}
+::
 
 ## **Web Editor vs. CLI**