extensions: [StarterKit, Mention]MSFE = Markdown Source-First Editor · 源码优先的 Markdown 编辑器框架 · 预览版
- 01只有内核
- 02装插件
- 03写插件
- 04源码未变
点按文中任意处，即可执笔
pnpm add @quirekit/msfe-core @quirekit/msfe-starter-kitPART 1框架 · MSFE
一个内核，构建各种编辑器
MSFE 是一个编辑器内核加一组可自由组合的插件。下面四个都是真实可编辑的实例，共用同一个内核，按场景装上不同的插件。
FIG 1 — 四种组装createMsfeEditor({ extensions })
extensions: [StarterKit, CustomContainer, Highlight]extensions: [StarterKit, Math, Mermaid]extensions: [StarterKit, MsfeMindMap]- ONE CORE
- 同一个 createMsfeEditor源码、解析、投影、命令与撤销都由内核负责。
- PAY FOR WHAT YOU USE
- 每个能力一个包按需引入，打包体积只跟装上的插件有关。
- ALL THE WAY UP
- MD Editor 也是这样构建的完整产品同样只是一组插件加上界面，见下文第二部分。
每一种能力，都是一个插件
MSFE 本身只负责源码、解析与投影。容器、公式、图形、AI 都是插件：声明语法、读写源码、画出投影、注册命令。按需装上现成的，也能自己写一个。
FIG 2 — 插件实验台0 / 7 已接入 · 自动演示
- addMarkdownExtensionsaddSourceaddStateaddProjectionLayers
- addMarkdownExtensionsaddSourceaddProjections
- addMarkdownExtensionsaddSourceaddProjectionLayers
- addSourceaddProjectionLayers
- addSourceaddAttributesaddCommandsaddProjectionLayers
- addSourceaddAttributesaddCommandsaddProjectionLayers
- addProjectionLayers
- color-swatch.ts
const ColorSwatch = Extension.create({ name: 'colorSwatch', addProjectionLayers: () => [{ key: 'color-swatch', placement: 'inline', build(input) { const text = input.document.slice(input.from, input.to) return [...text.matchAll(/#[0-9a-f]{6}\b/gi)].map(m => { const from = input.from + m.index return { type: 'widget', from, key: `swatch-${from}`, // Swatch.vue: a ColorPicker that rewrites these 7 characters view: componentView(Swatch, { color: m[0], from }), } }) }, }], })
- SOURCE
- 拔插 0 次，原文 0 字节改动插件只决定怎么呈现；点色块改色，才会改写那 7 个字符。
- HOOKS
- 语法 · 源码 · 投影 · 命令还有快捷键、输入规则、组件视图与 AI 能力声明。
- COMPOSE
- 按需组合Vue / React 组件可以直接作为插件的视图，产品只装自己需要的。
源码是真相，呈现是投影
编辑器先把 Markdown 解析成语法树，再由投影层画出标题、容器和图形。你在任何视图里改一个字，落到源码上都只是那几个字符；改不了的地方宁可拒绝，也不重写整段。
FIG 3 — 同一处修改，贯穿三层合拢
L0 · Markdown 源码
# 交付说明 一段 **原生 Markdown** 正文。 ```mermaid flowchart LR 写作 --> 交付 ```
L1 · Lezer 语法树
L2 · 呈现（投影层）
交付说明
一段 原生 Markdown 正文。
写作交付
1 万段文档 · 改一处15,234 → <150语法片段比对次数
@quirekit/lezer-markdown
优化过的 Lezer Markdown 解析器。在原生增量解析之上记录实际复用的语法块，编辑后只比对改动附近的片段；每一次的结果都与完整解析逐次核对一致。
@quirekit/cm-*
源码级维护的 CodeMirror 6。15 个包从源码构建，修正相邻块间距进入高度图、DOM 复用与旧视图释放，长文档里的点击、滚动和拖选落点更准。
几行代码，放进你的应用
从一个编辑器实例开始，需要什么扩展就装什么。命令、状态、组件视图和资源生命周期都有完整的开发指南。
FIG 4 — 接入与包结构Vue · React · 原生 JavaScript
// editor.ts import { createMsfeEditor } from '@quirekit/msfe-core' import { StarterKit } from '@quirekit/msfe-starter-kit' const editor = createMsfeEditor({ parent: document.querySelector('#editor'), markdown: '# 给想法一点空间', extensions: [StarterKit], }) // 保存时取回的，就是用户写的那份 Markdown const markdown = editor.getMarkdown()
内核msfe-coremsfe-starter-kitmsfe-prose
框架绑定msfe-vuemsfe-react
语法与节点msfe-headingmsfe-boldmsfe-linkmsfe-imagemsfe-code-blockmsfe-htmlmsfe-html-sandboxmsfe-markdown-extras
图形msfe-flowchartmsfe-mind-mapmsfe-whiteboard
协作与 AImsfe-commentsmsfe-collaborationmsfe-collaboration-hocuspocusmsfe-ai
PART 2产品 · 用 MSFE 构建的 MD Editor
基于 MSFE 的完整文档编辑器
MD Editor 是用 MSFE 构建的产品，开箱即用。同一份源码可以交付为 DOCX、PDF、OFD，源文件本身就是 .md；Markdown 和 docx 都能导入继续写。
FIG 5 — 一份源码，四种交付Vue 组件 · MIT
01 · 源码
# 季度复盘
收入同比增长 **18%**。
$$
g = \frac{R_t - R_{t-1}}{R_{t-1}}
$$
```quirekit-mind-map
{"title":"下季度重点", …}
```导出→导入←
02 · 交付
DOCX
季度复盘
收入同比增长 18%。
g = (Rt − Rt−1) / Rt−1
下季度重点留存新渠道
PDF
OFD
MD
- FORMULA
- 可编辑公式LaTeX 转为 DOCX 原生公式，在 Word、WPS 里还能继续改。
- DIAGRAM
- 图形可导回图形导出为图片并保留源数据，导回后仍能双击编辑。
- TEMPLATE
- 导出模板标题、正文、表格样式套用模板，DOCX、PDF 与 OFD 同源输出。
- 图形编辑器流程图、思维导图、白板
- 公式公式面板与 LaTeX
- 文本绘图Mermaid、PlantUML、DOT
- 评论与 @提及单独保存，原文干净
- AI 助手按块改写，可审阅撤回
- 协作记录按时间线追溯改动
- 手机上也能写触屏选区与工具栏
下一个想法，从 Markdown 开始
把 MSFE 放进你的应用，或者直接用 MD Editor。