feat: supoort md export

Author: PttCodingMan

frontend/src/lib/markdown.js

@@ -400,3 +400,13 @@ export function renderMarkdown(source) {
   if (!source) return ''
   return singletonMd.render(source)
 }
+
+// Milkdown preserves pasted `<br>` as raw HTML inline nodes, which then round-
+// trip back into serialized markdown verbatim. Users reasonably expect clean
+// markdown when copying/exporting, so we normalize those to CommonMark hard
+// breaks (two trailing spaces + newline). Any following newline is absorbed
+// to avoid turning `<br />\n` into an accidental paragraph break.
+export function stripBrTags(source) {
+  if (!source) return source
+  return source.replace(/<br\s*\/?>[ \t]*\n?/gi, '  \n')
+}

frontend/src/lib/markdown.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { renderMarkdown } from './markdown'
+import { renderMarkdown, stripBrTags } from './markdown'
 
 describe('renderMarkdown', () => {
   it('returns empty string for null/undefined/empty', () => {
@@ -275,3 +275,35 @@ describe('renderMarkdown', () => {
     expect(html).toContain('visible')
   })
 })
+
+describe('stripBrTags', () => {
+  it('passes through null/undefined/empty unchanged', () => {
+    expect(stripBrTags('')).toBe('')
+    expect(stripBrTags(null)).toBeNull()
+    expect(stripBrTags(undefined)).toBeUndefined()
+  })
+
+  it('converts <br /> followed by newline to a markdown hard break', () => {
+    expect(stripBrTags('Line 1<br />\nLine 2')).toBe('Line 1  \nLine 2')
+  })
+
+  it('handles <br>, <br/>, <br /> and case variants', () => {
+    expect(stripBrTags('a<br>b')).toBe('a  \nb')
+    expect(stripBrTags('a<br/>b')).toBe('a  \nb')
+    expect(stripBrTags('a<BR />b')).toBe('a  \nb')
+    expect(stripBrTags('a<Br/>b')).toBe('a  \nb')
+  })
+
+  it('strips trailing horizontal whitespace after the tag', () => {
+    expect(stripBrTags('foo<br />   \nbar')).toBe('foo  \nbar')
+  })
+
+  it('replaces multiple occurrences', () => {
+    expect(stripBrTags('a<br />b<br />c')).toBe('a  \nb  \nc')
+  })
+
+  it('leaves markdown without <br> untouched', () => {
+    const md = '# Heading\n\nHello world\n\n- item'
+    expect(stripBrTags(md)).toBe(md)
+  })
+})

frontend/src/pages/NewPage.jsx

@@ -7,6 +7,7 @@ import Editor from '../components/Editor/Editor'
 import MediaPickerModal from '../components/Editor/MediaPickerModal'
 import DrawioModal from '../components/DrawioModal'
 import useUnsavedWarning from '../hooks/useUnsavedWarning'
+import { stripBrTags } from '../lib/markdown'
 
 function findNodeById(nodes, id) {
   for (const node of nodes) {
@@ -128,7 +129,7 @@ export default function NewPage() {
     try {
       const page = await createPage({
         title,
-        content_md: content,
+        content_md: stripBrTags(content),
         template_id: selectedTemplate?.id,
         parent_id: parentMissing ? null : parentId,
       })

frontend/src/pages/PageEdit.jsx

@@ -9,6 +9,7 @@ import MediaPickerModal from '../components/Editor/MediaPickerModal'
 import MarkdownViewer from '../components/Viewer/MarkdownViewer'
 import DrawioModal from '../components/DrawioModal'
 import useUnsavedWarning from '../hooks/useUnsavedWarning'
+import { stripBrTags } from '../lib/markdown'
 import api from '../api/client'
 
 export default function PageEdit() {
@@ -152,14 +153,17 @@ export default function PageEdit() {
     setError('')
     setConflict(null)
     try {
+      // Milkdown round-trips pasted <br> tags as raw HTML; normalize to
+      // markdown hard breaks before persisting so new content stays clean.
+      const cleanContent = stripBrTags(content)
       const updated = await updatePage(slug, {
         title,
-        content_md: content,
+        content_md: cleanContent,
         base_version: baseVersionRef.current,
       })
       baseVersionRef.current = updated.version
       await fetchTree()
-      setOriginal({ title, content })
+      setOriginal({ title, content: cleanContent })
       setSaving(false)
       navigate(`/page/${slug}`)
     } catch (err) {

frontend/src/pages/PageView.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback } from 'react'
+import React, { useEffect, useState, useRef, useCallback } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
 import usePages from '../store/usePages'
 import useTags from '../store/useTags'
@@ -10,6 +10,7 @@ import TableOfContents from '../components/Viewer/TableOfContents'
 import Comments from '../components/Comments'
 import ConfirmDialog from '../components/ConfirmDialog'
 import AclManager from '../components/AclManager'
+import { stripBrTags } from '../lib/markdown'
 import api from '../api/client'
 
 export default function PageView() {
@@ -141,6 +142,31 @@ export default function PageView() {
     setMenuOpen(false)
   }
 
+  const handleCopyMarkdown = async () => {
+    try {
+      await navigator.clipboard.writeText(stripBrTags(page.content_md ?? ''))
+      setToast('Markdown copied')
+    } catch {
+      setToast('Copy failed — clipboard requires HTTPS or localhost')
+    }
+    setMenuOpen(false)
+  }
+
+  const handleDownloadMarkdown = () => {
+    const blob = new Blob([stripBrTags(page.content_md ?? '')], { type: 'text/markdown;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${page.slug}.md`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    // Defer revoke: some browsers start the download asynchronously after
+    // click(), and revoking the blob URL too early can cancel it.
+    setTimeout(() => URL.revokeObjectURL(url), 0)
+    setMenuOpen(false)
+  }
+
   const handleMakePrivate = async () => {
     try {
       await api.put(`/pages/${slug}`, { is_public: false })
@@ -281,6 +307,27 @@ export default function PageView() {
             </>
             )}
             <div className="border-t border-border my-1" />
+            <button
+              onClick={handleCopyMarkdown}
+              className="w-full text-left px-3 py-2 text-sm text-text hover:bg-surface-hover flex items-center gap-2"
+            >
+              <svg className="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <rect x="9" y="9" width="11" height="11" rx="2" />
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+              </svg>
+              Copy Markdown
+            </button>
+            <button
+              onClick={handleDownloadMarkdown}
+              className="w-full text-left px-3 py-2 text-sm text-text hover:bg-surface-hover flex items-center gap-2"
+            >
+              <svg className="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M12 3v12" />
+                <path d="M7 10l5 5 5-5" />
+                <path d="M5 21h14" />
+              </svg>
+              Download .md
+            </button>
             <button
               onClick={() => {
                 setMenuOpen(false)