Markdown 切换功能

相关源文件

• src/chrome/backgroundscript.js
• src/chrome/contentscript.js
• src/common/markdown-here.js
• src/common/test/utils-test.js
• src/common/utils.js
• src/firefox/chrome/content/ff-overlay.js

本文档解释了 Markdown Here 扩展中实现用户在 Markdown 和渲染的 HTML 之间切换的核心功能。它涵盖了如何在不同浏览器平台中触发切换，系统如何确定是渲染还是还原内容，以及在此过程中保留原始 Markdown 的技术机制。

有关将 Markdown 转换为 HTML 的具体渲染过程的信息，请参阅Markdown 渲染管道。

架构概述

Markdown 切换功能是 Markdown Here 扩展的核心特性，允许用户在任何富文本编辑器中以 Markdown 格式书写，并通过简单的操作将其转换为格式化的 HTML。

切换机制图

来源: src/common/markdown-here.js570-646 src/chrome/contentscript.js18-52 src/firefox/chrome/content/ff-overlay.js31-74

平台特定实现

Markdown Here 支持多个浏览器，并针对不同平台编写了特定代码来处理切换激活。

来源: src/chrome/backgroundscript.js94-96 src/chrome/backgroundscript.js187-189 src/chrome/contentscript.js18-64 src/firefox/chrome/content/ff-overlay.js31-79

核心切换功能

在 markdown-here.js 中的 markdownHere() 函数是切换功能的核心。此函数决定是渲染 Markdown 到 HTML 还是将 HTML 还原回 Markdown。

来源: src/common/markdown-here.js570-646

查找聚焦元素

findFocusedElem() 函数定位用户当前正在输入或放置光标的活动元素。

关键行为

• 深入到 iframe 中查找实际具有焦点的元素
• 处理 Firefox/Thunderbird 特有怪癖（例如，HTML 元素焦点）
• 返回将被渲染或取消渲染的元素

来源: src/common/markdown-here.js60-106

确定元素可渲染性

并非所有元素都可以渲染。elementCanBeRendered() 函数检查元素是否适合 Markdown 渲染。

来源: src/common/markdown-here.js110-116

包装器机制

该扩展使用一种巧妙的机制来存储渲染为 HTML 时的原始 Markdown 文本，从而使其能够在以后切换回原始文本。

包装器标记结构如下所示：

来源: src/common/markdown-here.js13-35 src/common/markdown-here.js482-507 src/common/markdown-here.js536-552

渲染过程

当将 Markdown 渲染为 HTML 时，renderMarkdown() 函数会：

1. 捕获包含 Markdown 文本的原始 HTML
2. 调用 Markdown 渲染器（由平台处理程序提供）
3. 创建包含渲染 HTML 的包装器结构
4. 将原始 Markdown 存储在隐藏元素中
5. 用包装器替换选区
6. 使 CSS 样式明确以兼容邮件客户端

来源: src/common/markdown-here.js482-534

取消渲染过程

当将渲染的 HTML 转换回 Markdown 时，unrenderMarkdown() 函数会：

1. 查找包含编码的原始 Markdown 的隐藏元素
2. 从 title 属性中提取编码的 Markdown
3. 解码 Base64 编码的 Markdown
4. 用原始 Markdown 替换包装器

来源: src/common/markdown-here.js536-552

切换操作范围管理

该扩展智能地处理选区范围

1. 如果存在选区，则仅渲染/取消渲染该选区
2. 如果没有选区，则对整个可聚焦元素进行操作
3. 签名检测可防止渲染电子邮件签名
4. 选区中的多个已渲染块可以同时取消渲染

来源: src/common/markdown-here.js121-167 src/common/markdown-here.js174-208

显式样式应用

电子邮件客户端通常会去除 <style> 标签，因此 Markdown Here 直接将样式应用于元素。

来源: src/common/markdown-here.js280-336

跨平台考量

切换功能弥合了浏览器之间的差异

• Chrome/Chromium: 使用后台脚本和内容脚本之间的消息传递。
• Firefox/Thunderbird: 使用 XUL 覆盖脚本直接访问切换功能。
• 包装器检测: 在所有支持的平台上保持一致。
• 样式应用: 处理特定于平台的 DOM 操作差异。

来源: src/chrome/backgroundscript.js94-96 src/chrome/backgroundscript.js187-189 src/chrome/contentscript.js18-64 src/firefox/chrome/content/ff-overlay.js31-79

用户界面集成

切换功能以多种方式与用户界面集成

按钮可见性管理

来源: src/chrome/contentscript.js91-147 src/firefox/chrome/content/ff-overlay.js292-325

忘记渲染检查

该扩展可以检测用户何时可能发送包含未渲染 Markdown 的电子邮件。

来源: src/firefox/chrome/content/ff-overlay.js167-225 src/chrome/contentscript.js256-264