#编辑体验

#设计思路

mdocs 的编辑器基于 Lexical（Meta 开源的富文本引擎），配合 @lobehub/editor 插件体系。核心思路是：用富文本编辑，以 JSON 存储。

编辑时
  用户操作 → Lexical JSON（保留全部格式信息）
  自动保存 → IndexedDB（Lexical JSON）

发布时
  内容写入 → 文件系统（Lexical JSON 文件）

这意味着：

• 编辑时享受完整的富文本体验（标题、加粗、表格、代码块等）
• 文档以 Lexical JSON 格式持久化，保留全部语义信息，重新打开时精确恢复
• 由于是自有格式，文档只能由 mdocs 加载（未来会提供导出 Markdown 功能）

#Markdown 导入

mdocs 支持直接粘贴或通过 API 传入 Markdown 文本，后端会自动转换为 Lexical JSON 存储。

#粘贴 Markdown

在编辑器中直接粘贴（Ctrl+V）Markdown 文本，内容会按富文本格式渲染，保留标题、粗体、列表、表格、代码块等结构。

#API / CLI 传入 Markdown

通过 API 或命令行客户端创建/更新文档时，传入的 Markdown 内容会自动转换：

# CLI 创建文档，直接传 Markdown
node ~/.mdocs-cli/mdocs.mjs create \
  --name "笔记.md" \
  --content "# 标题\n\n这是**粗体**和*斜体*"

转换能力包括：

• 标题 h1-h6、段落、换行
• 粗体/斜体/删除线/行内代码/超链接
• 有序/无序列表（支持嵌套）
• 代码块（保留语言标识）
• 引用块、分隔线
• 表格（含表头、合并单元格）

#编辑器功能

#富文本工具栏

编辑器顶部提供了格式化工具栏，支持斜杠命令（输入 / 触发）：

• 标题：H1 ~ H3
• 文本格式：加粗、斜体、行内代码
• 插入元素：表格、链接、图片、分割线、数学公式（TeX）
• 代码块：基于 CodeMirror 的代码编辑器，支持语法高亮
• 文件附件：上传并插入文件

#大纲面板

编辑器右侧自动提取文档标题层级，生成可点击的导航大纲，方便在长文档中快速跳转。

#文档信息菜单

编辑器工具栏右侧提供文档信息入口（三条线图标），点击可查看：

元信息区

• 创建者：显示访客昵称，未设置昵称时显示 visitorId 前 8 位
• 创建时间：文档创建的本地化日期格式
• 大小：文件体积（KB/MB 自动适配）
• 上次编辑：最后修改的本地化时间

操作区

• 收藏/取消收藏：一键切换当前文档的收藏状态
• 修改文章权限：后续版本开放完整的权限修改对话框

💡 点击菜单外部区域可自动关闭下拉菜单。收藏按钮 hover 时有缩放动画效果。

#流程图

支持 Meta2d 流程图，输入 ---meta2d--- 后回车即可打开画布编辑器，拖拽绘制流程图。

详见流程图生成。

#设计取舍

• 选择 Lexical 而非 Prosemirror/Slate：Lexical 对 React 生态更友好，插件系统清晰，且 @lobehub/editor 提供了开箱即用的工具栏和斜杠菜单。只需在lobehub项目基础上进行额外开发，避免重复造轮子
• JSON 存储：保留完整的富文本结构，重新打开时精确还原编辑状态。代价是数据不能直接用文本编辑器阅读——未来会提供 Markdown 导出