企业官网建设流程全解析

• 前端
• UI组件
• 富文本

cherry-markdown 是一款基于 Web 的 Markdown 编辑器，本文以仓库内 packages/cherry-markdown/CHANGELOG.md 为主线，系统梳理从 v0.5.13 到 v0.11.10 的完整版本演进脉络，涵盖编辑器内核升级（CodeMirror 6）、流式输出（stream/AI 会话）、所见即所得编辑、主题系统重构、构建产物体系、语法扩展与安全加固等关键议题。读完本文，你将能理解 cherry-markdown 每个大版本背后的设计取舍、核心配置项的含义与默认值，并知道如何在仓库源码与测试中进一步验证这些能力。

版本总览：三大演进阶段

cherry-markdown 的版本历程可以划分为三个清晰阶段：

其中v0.11.0与v0.11.10是两个技术含量最高的里程碑：前者完成了编辑器底层从 CodeMirror 5 到 CodeMirror 6 的重构，后者将发布构建链整体迁移至 Vite+ 并引入 Oxc 压缩器。

v0.11.x：内核重构与构建体系现代化

0.11.0——CodeMirror v6 升级（本阶段最重要的破坏性变更）

v0.11.0 将编辑器内核从 CodeMirror v5 升级到 v6，并重构出 CM6Adapter 适配器。这次升级带来几项关键收益与代价：

• 性能优化：特殊字符标记（Decoration/Mark）处理性能得到优化，对超大文档渲染有直接帮助；
• 功能修复：修复了选区映射、正则处理、Bubble 事件等一批与编辑器交互相关的历史问题；
• vim 模式懒加载：支持通过@replit/codemirror-vim实现 vim 编辑模式的按需加载，而非随主包打包；
• stream 模式瘦身：codeMirror模块改为依赖注入方式加载，stream（流式）模式下完全不加载 CodeMirror，进一步降低 AI 会话场景的包体。

从源码看，Editor.js 中暴露了CM6Adapter、ReplacementWidget与Editor三个类，适配器模式正是这一阶段重构的核心产物；而 packages/cherry-markdown/test/codemirror/ 目录下的Editor.spec.ts、BatchMarks.spec.ts、MultiInstanceIsolation.spec.ts、SearchReplace.spec.ts等测试文件，则是这次重构配套建立的验证体系。

升级提醒：v0.11.0 同步修复了 XSS 安全漏洞（#1653），并调整了工具栏隐藏逻辑——当toolbar与toolbarRight同时为false或空数组时，顶部工具栏将自动隐藏。

0.11.4——内置搜索/替换面板与动态安装 mermaid

v0.11.4 引入两个实用能力：

1. 内置搜索/替换面板：新增SearcherPanel、SearcherBridge及toolbars/searcher模块，通过工具栏searchhook 启用，支持 Ctrl+F 查找、Ctrl+H 替换，并配套中英文等多语言文案。仓库中 packages/cherry-markdown/src/toolbars/searcher/ 即为该模块的源码实现，packages/cherry-markdown/test/toolbars/searcher/ 提供了对应测试。此外搜索框还新增了"选中所有匹配项"按钮。
2. 动态安装 mermaid（#1603）：mermaid 从"必须预置"变为"可按需动态加载"，配合 0.11.3 的"mermaid 延时加载"与"代码块缓存机制修复"，让图表渲染在长文档与流式场景下更稳定。

同版本还修复了es-toolkit依赖问题——移除该依赖并内置mergeWith、cloneDeep、escapeRegExp、debounce（位于 packages/cherry-markdown/src/utils/toolkit/），其中mergeWith采用 lodash 兼容语义，修复了usePlugin两参数调用时不合并配置的问题。

0.11.5——ESM 与 UMD/CDN 入口拆分

v0.11.5 对构建产物做了重要调整：ESM 产物不再挂载window.Cherry，而 UMD/CDN 产物继续挂载并保持原 CDN 路径不变。这消除了 ESM 场景下全局变量的副作用（side effect），让 ESM 包可以被 tree-shaking。仓库中 index.core.js、index.core.umd.js、index.stream.js、index.stream.umd.js、index.umd.js 等多入口文件即对应 full/core/stream 三种能力的 ESM 与 UMD 形态。

同版本还支持了拖拽插入文件（#1787），配合此前版本对拖拽上传的持续打磨，形成了完整的"拖放文件→走上传逻辑→插入内容"链路。

0.11.10——Vite+ 构建链与 Oxc 压缩器

v0.11.10 将发布构建链迁移至 Vite+，并引入 Oxc 作为 JavaScript 压缩器。这一阶段的关键承诺是：

• 继续发布 ESM 与 UMD 两种产物；
• 现有 UMD 文件名和 CDN 集成路径保持不变，存量用户无需改动引入方式；
• 新增cherry-markdown.core.esm.js、cherry-markdown.engine.js、cherry-markdown.engine.esm.js三个产物文件，满足不同引入粒度（core 版不含编辑器与流式能力，engine 版仅含渲染引擎）。

同版本还修复了"未提供 ECharts 时图表表格无法安全降级"的问题，并恢复 core 入口的MermaidPlugin命名导出；此外修复了链接注入（#1861 相关）的安全问题。这与 0.11.1 中新增enableJs配置（避免代码块渲染 echarts 引入安全风险）一脉相承，可见安全是该阶段持续投入的主线。

0.11.7——时间线、选项卡、无限列布局与 setDisable

v0.11.7 在语法与 API 层面均有新增：

• 新增时间线语法（#1819）；
• 多列布局支持配置对齐方式、支持无限列，并新增选项卡语法（#1820）；
• 新增setDisable方法用于禁用编辑器（#1816）；
• stream 包默认关闭下划线语法——这是流式输出场景下的有意取舍，避免部分 Markdown 变体语法干扰 AI 增量输出；
• 降低engines.node约束从 >=24 到 >=22，兼容 Node.js 22 用户安装；
• 搜索替换匹配项后不再自动滚动视口，改善交互；
• 脚注样式优化：默认不渲染脚注标题，标题仅由title.render决定，不再回退locale.footnoteTitle。

v0.10.x：主题体系重构与图表/公式能力爆发

0.10.0——light 主题移除与 CSS 变量系统

v0.10.0 是一次破坏性变更：原有的light主题被移除，default成为新的默认主题（即原 light 主题的继承者）。具体影响与迁移路径：

• 原本在themeSettings.mainTheme中配置'light'的用户，升级后会自动切换为'default'主题；
• 自定义过light.scss的用户，可将原文件底部的配置项迁移到default.scss；
• 同版本完成了主题 CSS 变量系统重构：新增variables/目录（基础效果变量、语义化界面变量、Open Color 颜色系统），移除传统 SCSS 变量体系，主题切换性能与可维护性显著提升；
• 移除toolbarTheme配置（不影响功能，主题切换仍由mainTheme控制），清理废弃的 prettyprint 样式。

仓库中 packages/cherry-markdown/src/sass/variables/ 与 packages/cherry-markdown/src/sass/themes/ 即是这套新主题体系的落地位置。

0.10.0 图表能力：JSON 化 options、cherry:mapping 与新增图型

0.10.0 与 0.10.1 对表格图表插件（cherry-table-echarts-plugin.js）做了重大演进：

• 图表options配置格式改为更通用的JSON 格式，并采取渐进式迁移——解析失败自动回退旧方案并打印弃用警告；
• 散点图支持语义化列标题，通过特殊键名cherry:mapping指明映射关系，并在解析后先做必要维度错误验证；
• 新增散点图、雷达图、地图、桑基图等图型，图表适配各主题样式并修复导出问题；
• 图片样式编辑支持对齐方式（左/中/右对齐、左/右浮动），同时暴露出"原生 JS 缺少 DOM 更新后回调机制"的技术债务（当时用setTimeout(..., 100)临时解决）。

0.10.1——移动端默认配置与复制重构

• 新增默认 mobile 模式配置（#1445）；
• 重构复制逻辑：剪贴板text/html携带富文本 HTML（含样式），text/plain携带原始 Markdown 源码。这意味着粘贴到微信公众号、Word 时保留格式，粘贴到纯文本编辑器时得到 Markdown 源码；
• 表格交互全面重构：新增菜单气泡、边界插入、列宽拖拽、拖拽高亮重写；
• 连续空格语法（默认不支持）与对应配置（#1438）；
• 目录（TOC）中特殊标记被引用的标题（#1443）。

0.10.2/0.10.3——语法自动闭合与联想能力

0.10.2/0.10.3 聚焦输入体验：

• 流式输出场景支持超链接、图片、标题、公式、脚注等语法的自动闭合（#1521/#1522/#1531）；
• 图片、音视频、语法自动闭合时可配置自定义占位（#1524）；
• beforeMakeHtml/afterMakeHtml支持传入行内语法解析器作为第二个参数；
• 行内代码块支持自动补全；
• 修复urlProcessor未传入原始 url 的问题。

v0.9.x：流式会话（Stream）与 AI 场景适配

0.9.0——changeset 发布流程与多端支持

• 引入changeset自动化发布流程（#1036），CHANGELOG 从此采用 Changesets 的Patch Changes/Minor Changes格式，这也是本文档后半部分条目格式的由来；
• engine.makeHtml增加第二个参数；预览逻辑避免自动加载图片资源（#1130）；
• 支持有序列表英文字母；
• 增加 React demo（examples/react_demo/）；
• 增加禁用 html 的配置能力（#1111）。

0.9.1/0.9.2——流式光标与缓存优化

• 修复"追加流式光标破坏超链接语法"的问题（#1170）；
• 优化 cache 逻辑，避免内存爆炸（#1169）；
• 脚注支持 hover 数字角标出现 tips 的能力（#1080）；
• 有序/无序/checklist 列表后续版本持续补齐所见即所得编辑。

0.9.3/0.9.4——Node 环境与配置开放

• 修复 Node 环境下engine.makeHtml()报错的问题（#1179）；
• 快捷键映射改用标准键名；
• 新增 html 标签属性白名单配置能力、自定义超链接属性配置能力（#1206）；
• 对齐方式增加两端对齐（#1208）；
• 代码块自定义按钮回调函数增加第四个参数（#1202）。

v0.8.x：所见即所得与多端生态成型

表格、代码块、列表的 WYSIWYG 能力

0.8.x 是 WYSIWYG（所见即所得）能力集中建设期：

• v0.7.0引入表格 WYSIWYG v1.0（#189）；
• v0.8.21丰富表格 WYSIWYG（#479），预览区支持 hover 添加行列、支持专注模式与打字机模式（#503）；
• v0.8.25有序/无序/checklist 列表支持所见即所得编辑（#543），CodeBlock 所见即所得支持（#549）；
• v0.8.27支持表格行/列拖拽改变位置（#584）；
• v0.8.49/v0.8.50表格增加删除列操作、导出时处理懒加载图片。

这些能力的实现分布在 packages/cherry-markdown/src/utils/tableContentHandler.js、listContentHandler.js、codeBlockContentHandler.js 等工具模块中，预览区交互则依赖 PreviewerBubble.js 等气泡组件。

输入联想（Suggester）

• v0.6.1引入 suggester 功能；
• v0.8.21Suggester 扩展（#430）；
• v0.10.1支持输入联想功能配置与自定义候选项、行内公式与块级公式联想建议；
• 输入中文符号时给出英文联想（#541）。

主题与国际化

• v0.8.8/v0.8.7增加切换主题功能与四个默认主题，支持 protobuf 等更多代码高亮语言；
• v0.8.47主题/代码块主题支持持久化，优先级为本地缓存 > 配置 > 默认配置；
• v0.8.36/v0.8.37引入主题缓存命名空间机制themeNamespace（适用于多实例/多租户场景）；
• v0.8.50支持 frontMatter 语法，并可在其中设置全局字体大小；
• 国际化支持 zh_CN/en_US/ru_RU，见 packages/cherry-markdown/src/locales/。

安全加固脉络

0.8.x 期间的安全投入值得单列：

• mathjax 引入 safe 组件，防止 XSS 注入（v0.8.37）；
• math 结果接入 dom purifier（v0.8.35）；
• 修复 raw html 的潜在 xss（v0.8.35）；
• 封装新的哈希算法：md5 → sha256（v0.8.53）；
• 0.11.9 修复引用式链接可绕过协议校验注入javascript:等危险协议的问题；0.11.10 修复引入链接的注入问题。

安全实现主要位于 Sanitizer.js 与 utils/sanitize.js，测试覆盖见 packages/cherry-markdown/test/utils/sanitize.spec.ts。

引擎与渲染：理解 CHANGELOG 背后的核心架构

要真正读懂这些版本变更，需要了解 cherry-markdown 的渲染架构。从源码看：

• Engine.js是渲染核心。它通过HookCenter加载 core/HooksConfig.js 中的语法 hook 列表（core/hooks/目录下包含 AutoLink、Image、Ruby、FrontMatter、Space、Footnote、MathBlock、Detail、Panel 等 30+ 个语法模块），并用AsyncRenderHandler做异步渲染调度；
• 引擎内置LRU 缓存：hashCache最多缓存 20000 个渲染结果、hashStrMap最多缓存 2000 个哈希值（对应 0.10.0 中 "engine.js add LRU" 的变更），配合 0.11.0 新增的clearEngineCache接口，解决了长文档与流式场景下的重复渲染开销；
• 引擎遵循实例级确定性：内建段落 hook 每次从~~C0开始编号，跨实例占位符一致，这一点由 test/core/EngineDeterminism.spec.ts 等测试保障；
• Cherry.config.js定义了大量默认回调与配置，其中urlProcessor(url, srcType)支持'image' | 'audio' | 'video' | 'autolink' | 'link'五种来源类型，fileUpload/fileUploadMulti给出了无图床场景下回显 base64 的默认实现——这与 0.8.24 "未配置图片上传回调时以 base64 展示粘贴/拖拽图片"的变更直接对应；
• 全量入口 index.js 默认注册 MermaidCodeEngine、PlantUMLCodeEngine、EChartsTableEngine 三个插件，并处理 mermaid v9/v10/v11 多版本 API 差异（mermaid.mermaidAPI在 v10+ 为 undefined）。

从 CHANGELOG 反推的升级迁移清单

综合全文变更记录，面向升级用户的迁移要点如下：

结语：从变更日志读懂一个编辑器的成长曲线

对照 packages/cherry-markdown/CHANGELOG.md 与源码实现可以看到：cherry-markdown 的演进始终围绕渲染引擎的确定性、编辑交互的所见即所得、AI 流式场景的适配、构建产物的现代化四条主线展开。v0.11.x 的 CodeMirror 6 升级与 Vite+ 构建链迁移，标志着该项目完成了一次彻底的内核现代化；而贯穿 0.8.x 至 0.11.x 的安全修复记录（协议校验、XSS 过滤、哈希算法升级）则提醒使用者：在引入任何 Markdown 编辑器时，都应把渲染管道的 sanitize 环节作为接入校验的重中之重。对开发者而言，CHANGELOG 中每一条fix与feat都能在 packages/cherry-markdown/src/ 与 packages/cherry-markdown/test/ 中找到对应的实现与测试，这是深入理解该编辑器设计的最佳路径。

• 前端
• UI组件
• 富文本