nuxt-markdown-editable-renderer

Module Nuxt 3/4 pour :

• Rendre une chaine Markdown (viewer)
• Editer du Markdown via un editeur TipTap (UX type Notion)
• Optionnel : lire/ecrire un fichier Markdown local via une API Nitro (GET/PUT /api/markdown) avec ETag (verrouillage optimiste).

Installation

npm i nuxt-markdown-editable-renderer

Configuration

Dans nuxt.config.ts :

export default defineNuxtConfig({
  modules: ['nuxt-markdown-editable-renderer'],
  markdownEditableRenderer: {
    baseDir: 'content',     // dossier autorise (relatif au rootDir Nuxt)
    enableApi: true,        // expose /api/markdown
  },
})

Composants

MarkdownRenderer

<MarkdownRenderer :markdown="value" />

MarkdownEditor

<MarkdownEditor v-model="value" />

MarkdownEditableRenderer

• Mode controle (v-model)

<MarkdownEditableRenderer v-model="value" />

• Mode fichier (charge + sauvegarde via /api/markdown)

<MarkdownEditableRenderer path="example.md" />

API (optionnelle)

• GET /api/markdown?path=example.md -> { path, markdown, etag }
• PUT /api/markdown?path=example.md body { markdown, etag } -> { path, markdown, etag }

Si le etag ne correspond pas a la version actuelle, le serveur repond 409 Conflict.

Notes importantes

• Le module autorise uniquement les fichiers .md/.mdc et bloque les chemins absolus / path traversal.
• La conversion Markdown <-> editeur est best-effort (Markdown -> HTML -> TipTap, TipTap HTML -> Markdown via Turndown). Pour une preservation stricte, on peut remplacer cette couche par un serializer Markdown TipTap.

Playground

npm run dev

Puis ouvrez le playground : il permet d'editer un exemple controle et un fichier playground/content/example.md.