请结合项目实践，说明你如何基于 ByteMD 封装了可复用的 Editor 和 Viewer 组件？请描述组件封装的设计思路、暴露的 API 或 Props、以及在实际使用中如何处理编辑与只读展示的差异。
考察说明
考察候选人对开源编辑器组件的二次封装能力，以及组件复用、API 设计、性能与适用边界的理解。
回答思路
- 【回答框架 1】ByteMD 是基于 Markdown 的所见即所得编辑器，提供编辑与预览两种模式。封装时先确定核心复用点：编辑器组件承载编辑能力，Viewer 组件只做渲染，两者共享配置如主题、语言与代码高亮。通过统一配置文件（如 options 对象）注入，减少重复初始化。
- 【回答框架 2】Editor 组件封装要点：将 ByteMD 实例初始化放入 useEffect 中，通过 ref 暴露实例方法（如 getHTML、insertContent），通过 props 支持 v-model 或受控 value 与 onChange，并处理销毁与清理。同时暴露插槽或事件用于扩展工具栏。
- 【回答框架 3】Viewer 组件封装要点：使用 ByteMD 的静态渲染能力（如手动调用 parse 或使用其预览模块），输入为 Markdown 字符串，输出为渲染后的 HTML。由于 Viewer 无交互，应剥离编辑相关依赖，减小打包体积，并考虑使用缓存或 memo 避免重复渲染。
- 【回答框架 4】在实际使用中，可能遇到 SSR 或样式冲突问题。解决方案是判断环境，仅在客户端初始化；通过 CSS 隔离或作用域样式防止污染。同时注意版本兼容性，ByteMD 不同版本 API 可能有差异，封装内做适配层。
- 【回答框架 5】整体设计遵循单一职责：Editor 管输入，Viewer 管输出，二者通过通用类型定义（如 Markdown 内容类型）解耦，便于在不同页面（如评论、文章编辑）中复用。
- 【关键点 1】Editor 与 Viewer 分离，各自封装独立实例，避免相互影响。
- 【关键点 2】通过 ref 暴露核心方法，通过 props 控制数据流，实现可控性。
- 【关键点 3】统一配置选项，减少重复代码，便于主题定制。
- 【关键点 4】处理生命周期，确保组件卸载时销毁 ByteMD 实例，防止内存泄漏。
- 【关键点 5】考虑性能与体积，Viewer 端剥离编辑相关代码，按需加载。
- 【易错点 1】误以为 ByteMD 封装能完全保证所有场景一致，忽略其底层依赖于浏览器环境，SSR 下需特殊处理。
- 【易错点 2】直接复用编辑实例作为只读展示，导致多余开销和交互问题。
- 【易错点 3】忽略不同版本 API 差异，导致封装在新版本下失效。