md2ui 1.0.18 → 1.0.20

package/README.md

@@ -1,81 +1,75 @@
 # md2ui
 
 [![npm version](https://img.shields.io/npm/v/md2ui)](https://www.npmjs.com/package/md2ui)
-[![GitHub](https://img.shields.io/badge/GitHub-devsneed%2Fmd2ui-blue?logo=github)](https://github.com/devsneed/md2ui)
+[![GitHub](https://img.shields.io/badge/GitHub-xiaoyaodev%2Fmd2ui-blue?logo=github)](https://github.com/xiaoyaodev/md2ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
-一个轻量级的 Markdown 文档渲染工具，将本地 `.md` 文件转换为美观的 HTML 页面。支持实时预览和静态站点生成（SSG）两种模式。
+轻量级 Markdown 文档站点工具，一行命令将本地 `.md` 文件转换为可预览、可编辑、可搜索的文档站点。
 
-## 功能特性
+## 为什么需要 md2ui？
 
-- 自动目录树 - 扫描文档文件夹，自动生成多级导航，支持搜索过滤
-- 三栏布局 - 左侧导航 / 中间内容 / 右侧大纲，可拖拽调整宽度
-- Markdown 增强 - GFM 语法、代码高亮、Mermaid 图表、Frontmatter
-- 全文搜索 - 基于 MiniSearch 的快速全文检索
-- 暗色模式 - 一键切换亮色/暗色主题
-- 移动端适配 - 响应式布局，抽屉式导航和目录
-- 阅读体验 - 阅读进度条、预计阅读时间、上下篇导航
-- SSG 构建 - `md2ui build` 生成纯静态 HTML，可直接部署
-- 自定义配置 - 站点标题、主题色、GitHub 链接、页脚等
-
-## 效果预览
-
-### 全文搜索
-
-![全文搜索](screenshots/task1-search.png)
-
-### 代码高亮
-
-![代码高亮 - 语言标签与复制按钮](screenshots/task2-code-highlight-top.png)
+AI 编程时代，Cursor、Copilot、Kiro 等工具正在改变我们的开发方式。与 AI 协作的过程中，会产生大量的 Markdown 文档 —— 需求文档、设计方案、API 文档、会议纪要、技术调研……
 
-![代码高亮 - 渲染效果](screenshots/task2-code-highlight-view.png)
+这些 `.md` 文件散落在项目各处，带来了一系列痛点：
 
-### 暗色模式
+- 文件越来越多，找一篇文档要翻半天
+- IDE 的 Markdown 预览体验一般，表格、流程图、数学公式渲染不理想
+- 想快速改几个字，还得切回编辑器找到对应文件
+- 文档之间缺乏导航关系，无法形成知识体系
+- 想分享给团队成员，还得额外搭建文档站
 
-![暗色模式 - 欢迎页](screenshots/task3-dark-mode-welcome.png)
+md2ui 就是为了解决这些问题而生的。把它指向你的文档目录，立刻获得一个功能完整的文档站点。
 
-![暗色模式 - 文档内容](screenshots/task3-dark-mode-content.png)
+## 核心能力
 
-### 移动端适配
-
-<p>
-  <img src="screenshots/task4-mobile-welcome.png" width="32%" alt="移动端 - 欢迎页" />
-  <img src="screenshots/task4-mobile-drawer.png" width="32%" alt="移动端 - 抽屉导航" />
-  <img src="screenshots/task4-mobile-toc.png" width="32%" alt="移动端 - 目录大纲" />
-</p>
-
-![移动端 - 文档内容](screenshots/task4-mobile-content.png)
+- 零配置启动 - `cd docs && md2ui`，开箱即用
+- 实时预览 - 文件变更自动刷新，所见即所得
+- 在线编辑 - 内置富文本编辑器，直接在浏览器中修改并保存到本地文件
+- 全文搜索 - 基于 MiniSearch，毫秒级检索所有文档内容
+- 自动导航 - 扫描目录结构自动生成多级目录树，支持拖拽排序
+- 三栏布局 - 左侧导航 / 中间内容 / 右侧大纲，宽度可拖拽调整
+- Markdown 增强 - GFM 语法、代码高亮、Mermaid 图表、数学公式、Frontmatter
+- 移动端适配 - 响应式布局，手机上也能舒适阅读
+- 阅读体验 - 进度条、预计阅读时间、上下篇导航、图片放大
+- SSG 构建 - `md2ui build` 生成纯静态站点，可直接部署
+- 自定义配置 - 站点标题、主题色、GitHub 链接、页脚等
 
-### 上下篇导航
+## 界面预览
+预览模式
+![预览模式](imgs/1.png)
+编辑模式
 
-![上下篇导航](screenshots/task5-prev-next-nav.png)
+![编辑模式](imgs/2.png)
 
-### 阅读时间
+## 典型使用场景
 
-![阅读时间](screenshots/task7-reading-time.png)
+**AI 辅助开发的文档管理**
 
-### Frontmatter 支持
+用 AI 生成的需求文档、设计方案、技术调研统一放到一个目录，md2ui 提供即时预览和编辑，让文档真正流动起来。
 
-![Frontmatter](screenshots/task8-frontmatter.png)
+**个人知识库**
 
-### 导航过滤
+日常笔记、学习记录、读书摘要，用 Markdown 写完丢进文件夹，md2ui 自动组织成可浏览的知识站点。
 
-![导航过滤](screenshots/task9-nav-filter.png)
+**项目文档站**
 
-### SSG 静态构建
+API 文档、部署指南、开发规范，`md2ui build` 一键构建为静态站点，部署到任意服务器。
 
-![SSG - 首页](screenshots/ssg-index.png)
+**团队协作文档**
 
-![SSG - 目录展开](screenshots/ssg-folder-open.png)
+配合 Git 管理文档版本，本地用 md2ui 预览和编辑，提交后自动构建部署。
 
-## 安装使用
+## 快速开始
 
-### 全局安装
+### 安装
 
 ```bash
-pnpm add -g md2ui
-# 或
+# 需要提前安装nodejs运行环境
 npm install -g md2ui
+
+
+# 免安装 一次性运行
+npx  md2ui
 ```
 
 ### 实时预览
@@ -87,21 +81,19 @@ cd /path/to/your/docs
 md2ui
 ```
 
-指定端口：
+访问 http://localhost:3000 即可查看文档。支持 `-p` 参数指定端口：
 
 ```bash
 md2ui -p 8080
 ```
 
-访问 http://localhost:3000 查看文档（默认端口 3000）。
-
 ### 静态构建
 
 ```bash
 md2ui build
 ```
 
-生成的静态文件在 `dist/` 目录下，可直接部署到任意静态服务器。
+生成的静态文件在 `dist/` 目录下，可直接部署到 Nginx、GitHub Pages、Vercel 等任意静态托管服务。
 
 ## 文档组织
 
@@ -116,8 +108,8 @@ your-docs/
 ```
 
 - 使用 `序号-名称.md` 格式控制排序，如 `01-快速开始.md`
-- 文件夹也支持序号前缀，如 `02-进阶指南/`
-- 序号越小越靠前
+- 文件夹同样支持序号前缀，如 `02-进阶指南/`
+- 支持任意层级嵌套
 
 ## 自定义配置
 
@@ -147,7 +139,7 @@ export default {
 ## 开发
 
 ```bash
-git clone https://github.com/devsneed/md2ui.git
+git clone https://github.com/xiaoyaodev/md2ui.git
 cd md2ui
 pnpm install
 pnpm dev
@@ -162,9 +154,10 @@ md2ui/
 │   └── build.js           # SSG 静态构建
 ├── src/
 │   ├── App.vue            # 主组件
-│   ├── api/docs.js        # 文档列表获取
 │   ├── components/        # Vue 组件
 │   ├── composables/       # 组合式函数
+│   ├── extensions/        # Tiptap 编辑器扩展
+│   ├── services/          # 文档服务
 │   ├── config.js          # 共享配置
 │   └── style.css          # 全局样式
 ├── public/docs/           # 示例文档

package/bin/build.js

@@ -18,6 +18,13 @@ import { marked } from 'marked'
 import hljs from 'highlight.js'
 import GithubSlugger from 'github-slugger'
 
+let katex
+try {
+  katex = (await import('katex')).default
+} catch {
+  katex = null
+}
+
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 const pkgRoot = resolve(__dirname, '..')
@@ -189,10 +196,10 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
   const slugger = new GithubSlugger()
   const renderer = new marked.Renderer()
 
-  // 标题渲染
+  // 标题渲染（SSG 版本也加上 # 锚点链接）
   renderer.heading = function(text, level) {
     const id = slugger.slug(text)
-    return `<h${level} id="${id}">${text}</h${level}>\n`
+    return `<h${level} id="${id}"><a class="heading-anchor" href="#${id}" aria-hidden="true">#</a>${text}</h${level}>\n`
   }
 
   // 代码块渲染
@@ -253,6 +260,46 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
   }
 
   marked.setOptions({ renderer, breaks: true, gfm: true, headerIds: false, mangle: false })
+
+  // 注册 KaTeX 数学公式扩展
+  if (katex) {
+    marked.use({
+      extensions: [
+        {
+          name: 'mathBlock',
+          level: 'block',
+          start(src) {
+            const m = src.match(/(?:^|\n)\$\$/)
+            return m ? m.index + (m[0].startsWith('\n') ? 1 : 0) : -1
+          },
+          tokenizer(src) {
+            const match = src.match(/^\$\$\s*\n([\s\S]+?)\n\s*\$\$(?:\s*$|\n)/)
+            if (match) return { type: 'mathBlock', raw: match[0], text: match[1].trim() }
+          },
+          renderer(token) {
+            try {
+              return `<div class="math-block">${katex.renderToString(token.text, { throwOnError: false, displayMode: true })}</div>`
+            } catch { return `<pre class="math-error">${token.text}</pre>` }
+          }
+        },
+        {
+          name: 'mathInline',
+          level: 'inline',
+          start(src) { return src.indexOf('$') },
+          tokenizer(src) {
+            const match = src.match(/^\$(?!\$)((?:\\.|[^$\\])+)\$/)
+            if (match) return { type: 'mathInline', raw: match[0], text: match[1].trim() }
+          },
+          renderer(token) {
+            try {
+              return katex.renderToString(token.text, { throwOnError: false, displayMode: false })
+            } catch { return `<code class="math-error">${token.text}</code>` }
+          }
+        }
+      ]
+    })
+  }
+
   let html = marked.parse(content)
 
   // frontmatter.title 覆盖 h1
@@ -370,8 +417,10 @@ function renderDocNav(flatDocs, currentIdx) {
 
 // 生成完整的静态 HTML 页面
 function generatePageHtml(options) {
-  const { title, siteTitle, contentHtml, sidebarHtml, docNavHtml, cssContent, themeColor, isWelcome } = options
+  const { title, siteTitle, contentHtml, sidebarHtml, docNavHtml, cssContent, themeColor, isWelcome, description, url } = options
   const pageTitle = isWelcome ? siteTitle : `${title} - ${siteTitle}`
+  const metaDesc = description || title || siteTitle
+  const canonicalUrl = url || '/'
 
   return `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -379,8 +428,19 @@ function generatePageHtml(options) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${pageTitle}</title>
-  <meta name="description" content="${title}">
+  <meta name="description" content="${metaDesc}">
   <meta name="theme-color" content="${themeColor}">
+  <!-- Open Graph -->
+  <meta property="og:title" content="${pageTitle}">
+  <meta property="og:description" content="${metaDesc}">
+  <meta property="og:type" content="article">
+  <meta property="og:url" content="${canonicalUrl}">
+  <meta property="og:site_name" content="${siteTitle}">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="${pageTitle}">
+  <meta name="twitter:description" content="${metaDesc}">
+  <link rel="canonical" href="${canonicalUrl}">
   <link rel="icon" type="image/svg+xml" href="/logo.svg">
   <style>${cssContent}</style>
 </head>
@@ -464,6 +524,13 @@ document.head.appendChild(s)})();
 // 生成 SSG 专用 CSS（从 style.css 读取 + 补充 SSG 特有样式）
 function getSsgCss(pkgRoot) {
   let css = fs.readFileSync(resolve(pkgRoot, 'src/style.css'), 'utf-8')
+  // 尝试加载 KaTeX CSS
+  try {
+    const katexCssPath = resolve(pkgRoot, 'node_modules/katex/dist/katex.min.css')
+    if (fs.existsSync(katexCssPath)) {
+      css += '\n' + fs.readFileSync(katexCssPath, 'utf-8')
+    }
+  } catch { /* KaTeX CSS 不可用时忽略 */ }
   // 追加 SSG 特有样式
   css += `
 /* SSG 特有样式 */
@@ -507,8 +574,19 @@ function getSsgCss(pkgRoot) {
 
 // ===== 主构建流程 =====
 async function build() {
+  // 解析位置参数：md2ui build [dir]
+  const args = process.argv.slice(3)
+  let targetDir = null
+  for (const arg of args) {
+    if (!arg.startsWith('-')) {
+      targetDir = arg
+      break
+    }
+  }
+  const scanDir = targetDir ? resolve(userDir, targetDir) : userDir
+
   console.log('\n  md2ui build - 静态站点生成\n')
-  console.log(`  扫描目录: ${userDir}\n`)
+  console.log(`  扫描目录: ${scanDir}\n`)
 
   // 加载配置
   const userConfig = await loadUserConfig()
@@ -516,7 +594,7 @@ async function build() {
   const outDir = resolve(userDir, siteConfig.outDir || 'dist')
 
   // 扫描文档
-  const docsList = scanDocs(userDir, '', 0, siteConfig.folderExpanded)
+  const docsList = scanDocs(scanDir, '', 0, siteConfig.folderExpanded)
   const flatDocs = flattenDocs(docsList)
 
   if (flatDocs.length === 0) {
@@ -546,20 +624,28 @@ async function build() {
   for (let i = 0; i < flatDocs.length; i++) {
     const doc = flatDocs[i]
     const markdown = fs.readFileSync(doc.path, 'utf-8')
-    const { html: contentHtml, title } = await renderMarkdownToHtml(markdown, doc.key, docsList)
+    const { html: contentHtml, title, frontmatter } = await renderMarkdownToHtml(markdown, doc.key, docsList)
     const sidebarHtml = renderSidebarHtml(docsList, doc.key)
     const docNavHtml = renderDocNav(flatDocs, i)
     const hash = docHash(doc.key)
 
+    // 获取文件最后修改时间
+    const stat = fs.statSync(doc.path)
+    const mtime = stat.mtime
+    const lastModifiedStr = `${mtime.getFullYear()}-${String(mtime.getMonth() + 1).padStart(2, '0')}-${String(mtime.getDate()).padStart(2, '0')} ${String(mtime.getHours()).padStart(2, '0')}:${String(mtime.getMinutes()).padStart(2, '0')}`
+    const lastModifiedHtml = `<div class="doc-last-modified"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><span>最后更新于 ${lastModifiedStr}</span></div>`
+
     const pageHtml = generatePageHtml({
       title: title || doc.label,
       siteTitle: siteConfig.title,
       contentHtml,
       sidebarHtml,
-      docNavHtml,
+      docNavHtml: lastModifiedHtml + docNavHtml,
       cssContent,
       themeColor: siteConfig.themeColor,
-      isWelcome: false
+      isWelcome: false,
+      description: frontmatter.description || '',
+      url: `/${hash}.html`
     })
 
     fs.writeFileSync(resolve(outDir, `${hash}.html`), pageHtml, 'utf-8')

package/bin/md2ui.js

@@ -11,6 +11,7 @@ import { createServer } from 'vite'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
 import fs from 'fs'
+import crypto from 'crypto'
 import { exec } from 'child_process'
 import { pathToFileURL } from 'url'
 
@@ -62,11 +63,14 @@ async function loadUserConfig() {
 // 解析命令行参数
 function parseArgs() {
   const args = process.argv.slice(2)
-  const result = {}
+  const result = { dir: null }
   for (let i = 0; i < args.length; i++) {
     if (args[i] === '-p' || args[i] === '--port') {
       result.port = parseInt(args[i + 1]) || undefined
       i++
+    } else if (!args[i].startsWith('-')) {
+      // 位置参数作为扫描目录
+      result.dir = args[i]
     }
   }
   return result
@@ -130,17 +134,25 @@ function hasMdFiles(dir) {
 }
 
 // Vite 插件：提供用户文档 API + 配置 API + 热更新
-function md2uiPlugin(siteConfig) {
+function md2uiPlugin(siteConfig, docsRoot) {
   return {
     name: 'md2ui-server',
     configureServer(server) {
       // API 中间件
       server.middlewares.use((req, res, next) => {
-        // 文档列表 API
+        // 文档列表 API（带 ETag 支持，避免轮询时重复传输）
         if (req.url === '/@user-docs-list') {
-          const docs = scanDocs(userDir, '', 0, siteConfig.folderExpanded)
+          const docs = scanDocs(docsRoot, '', 0, siteConfig.folderExpanded)
+          const body = JSON.stringify(docs)
+          const etag = '"' + crypto.createHash('md5').update(body).digest('hex') + '"'
+          if (req.headers['if-none-match'] === etag) {
+            res.statusCode = 304
+            res.end()
+            return
+          }
           res.setHeader('Content-Type', 'application/json; charset=utf-8')
-          res.end(JSON.stringify(docs))
+          res.setHeader('ETag', etag)
+          res.end(body)
           return
         }
         // 站点配置 API
@@ -149,12 +161,79 @@ function md2uiPlugin(siteConfig) {
           res.end(JSON.stringify(siteConfig))
           return
         }
+        // 图片上传 API
+        if (req.url === '/@upload-image' && req.method === 'POST') {
+          const chunks = []
+          req.on('data', chunk => chunks.push(chunk))
+          req.on('end', () => {
+            try {
+              const body = Buffer.concat(chunks)
+              const docPath = decodeURIComponent(req.headers['x-doc-path'] || '')
+              const fileName = decodeURIComponent(req.headers['x-file-name'] || `img-${Date.now()}.png`)
+
+              if (!docPath) {
+                res.statusCode = 400; res.end('缺少文档路径'); return
+              }
+
+              const docDir = dirname(resolve(docsRoot, docPath))
+              if (!docDir.startsWith(docsRoot)) {
+                res.statusCode = 403; res.end('禁止访问'); return
+              }
+
+              const assetsDir = resolve(docDir, 'assets')
+              fs.mkdirSync(assetsDir, { recursive: true })
+
+              const ext = docPath.includes('.') ? `.${fileName.split('.').pop()}` : '.png'
+              const baseName = `img-${Date.now()}`
+              const targetName = `${baseName}${ext.startsWith('.') ? ext : '.' + ext}`
+              const targetPath = resolve(assetsDir, targetName)
+
+              fs.writeFileSync(targetPath, body)
+
+              // 返回相对于文档根目录的路径（对路径各段做 URL 编码）
+              const docDirRel = dirname(docPath)
+              const encodedDir = docDirRel && docDirRel !== '.'
+                ? docDirRel.split('/').map(encodeURIComponent).join('/')
+                : ''
+              const imageUrl = encodedDir
+                ? `/@user-docs/${encodedDir}/assets/${targetName}`
+                : `/@user-docs/assets/${targetName}`
+
+              res.setHeader('Content-Type', 'application/json; charset=utf-8')
+              res.end(JSON.stringify({ url: imageUrl }))
+            } catch (e) {
+              res.statusCode = 500; res.end(e.message)
+            }
+          })
+          return
+        }
         // 文档内容
         if (req.url?.startsWith('/@user-docs/')) {
-          const filePath = resolve(userDir, decodeURIComponent(req.url.replace('/@user-docs/', '')))
+          const filePath = resolve(docsRoot, decodeURIComponent(req.url.replace('/@user-docs/', '')))
           if (fs.existsSync(filePath)) {
-            res.setHeader('Content-Type', 'text/plain; charset=utf-8')
-            res.end(fs.readFileSync(filePath, 'utf-8'))
+            // 根据扩展名设置 Content-Type
+            const extName = filePath.split('.').pop().toLowerCase()
+            const mimeMap = {
+              md: 'text/plain; charset=utf-8',
+              png: 'image/png',
+              jpg: 'image/jpeg',
+              jpeg: 'image/jpeg',
+              gif: 'image/gif',
+              webp: 'image/webp',
+              svg: 'image/svg+xml',
+              bmp: 'image/bmp',
+            }
+            const contentType = mimeMap[extName] || 'application/octet-stream'
+            res.setHeader('Content-Type', contentType)
+            // 附带最后修改时间
+            const stat = fs.statSync(filePath)
+            res.setHeader('X-Last-Modified', stat.mtime.toISOString())
+            // 文本文件用 utf-8 读取，二进制文件直接读取
+            if (contentType.startsWith('text/')) {
+              res.end(fs.readFileSync(filePath, 'utf-8'))
+            } else {
+              res.end(fs.readFileSync(filePath))
+            }
             return
           }
         }
@@ -178,10 +257,14 @@ function md2uiPlugin(siteConfig) {
 }
 
 async function start() {
+  // 解析参数，支持位置参数指定扫描目录
+  const cliArgs = parseArgs()
+  const scanDir = cliArgs.dir ? resolve(userDir, cliArgs.dir) : userDir
+
   console.log(`\n  md2ui - Markdown 文档预览工具\n`)
-  console.log(`  扫描目录: ${userDir}\n`)
+  console.log(`  扫描目录: ${scanDir}\n`)
 
-  if (!hasMdFiles(userDir)) {
+  if (!hasMdFiles(scanDir)) {
     console.log('  当前目录下没有找到 Markdown 文件 (.md)\n')
     console.log('  请在包含 .md 文件的目录中运行此命令\n')
     process.exit(1)
@@ -189,15 +272,21 @@ async function start() {
 
   // 加载配置
   const userConfig = await loadUserConfig()
-  const cliArgs = parseArgs()
   const siteConfig = { ...defaultConfig, ...userConfig, ...cliArgs }
+  delete siteConfig.dir
 
   const server = await createServer({
     root: pkgRoot,
-    configFile: resolve(pkgRoot, 'vite.config.js'),
-    plugins: [md2uiPlugin(siteConfig)],
+    configFile: false,
+    plugins: [
+      (await import('@vitejs/plugin-vue')).default(),
+      md2uiPlugin(siteConfig, scanDir)
+    ],
     server: {
       port: siteConfig.port
+    },
+    optimizeDeps: {
+      include: ['vue', 'marked', 'mermaid']
     }
   })
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "md2ui",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/md2ui"
+    "url": "https://github.com/xiaoyaodev/md2ui"
   },
   "keywords": [
     "markdown",
@@ -22,29 +22,43 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "publish": "bash publish.sh"
+    "preview": "vite preview"
   },
   "files": [
     "bin",
     "src",
     "public",
     "index.html",
-    "vite.config.js"
+    "vite.config.js",
+    "vite-plugin-doc-api.js"
   ],
   "dependencies": {
+    "@tiptap/extension-code-block-lowlight": "^3.22.3",
+    "@tiptap/extension-image": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/extension-table": "^3.22.3",
+    "@tiptap/extension-table-cell": "^3.22.3",
+    "@tiptap/extension-table-header": "^3.22.3",
+    "@tiptap/extension-table-row": "^3.22.3",
+    "@tiptap/extension-task-item": "^3.22.3",
+    "@tiptap/extension-task-list": "^3.22.3",
+    "@tiptap/extension-underline": "^3.22.3",
+    "@tiptap/pm": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/vue-3": "^3.22.3",
     "@vitejs/plugin-vue": "^5.0.0",
     "docx": "^9.6.1",
-    "file-saver": "^2.0.5",
-    "flexsearch": "^0.8.212",
     "github-slugger": "^2.0.0",
     "highlight.js": "^11.11.1",
-    "jsdom": "^28.1.0",
+    "highlightjs-line-numbers.js": "^2.9.1",
+    "katex": "^0.16.45",
     "lucide-vue-next": "^0.556.0",
     "marked": "^11.1.1",
-    "mermaid": "^10.6.1",
+    "mermaid": "^11.14.0",
     "minisearch": "^7.2.0",
+    "tiptap-markdown": "^0.9.0",
     "vite": "^5.0.0",
-    "vue": "^3.4.0"
+    "vue": "^3.4.0",
+    "vuedraggable": "^4.1.0"
   }
 }