HTML 到 Markdown 转换

原始 Markdown 的存储机制

在将 Markdown 渲染为 HTML 时，Markdown Here 不仅转换内容，还会保留原始 Markdown 源以供后续检索。这种方法确保在切换回 Markdown 时保持完美的保真度。

原始 Markdown 使用 Base64 进行编码，以防止在存储到 HTML 属性时出现任何丢失或更改。此编码由 Utils.utf8StringToBase64() 处理。

来源

包装结构

当 Markdown 被渲染时，它会被包装在一个便于后续取消渲染的结构中

该包装器包含以下关键组件：

一个带有类名 markdown-here-wrapper 的 div，它包含所有内容
实际渲染的 HTML 内容
一个隐藏的 div，其中原始 Markdown 存储在其 title 属性中
隐藏的 div 包含一个零宽度空格 ()，以确保其在电子邮件客户端中得以保留

来源

src/common/markdown-here.js493-507

取消渲染过程

当用户在已渲染内容上触发 Markdown 切换时，会发生以下过程：

此过程中的关键步骤包括：

找到包含已渲染 Markdown 的包装元素
检查内容自渲染以来是否已被修改
从隐藏 div 的 title 属性中提取原始 Markdown
解码 Base64 编码的 Markdown
用原始 Markdown 替换整个包装器

来源

找到包装元素

要取消渲染 Markdown，扩展程序必须首先识别用户光标是否位于已渲染的 Markdown 内容内部。这通过 findMarkdownHereWrapper 函数完成

isWrapperElem 函数通过检查以下内容来确定元素是否为 Markdown Here 包装器：

它是否是一个元素节点
它是否不是一个 blockquote（以避免取消渲染引用的电子邮件）
它是否有一个包含原始 Markdown 的子元素

来源

原始 Markdown 占位符检测

findElemRawHolder 函数搜索包含原始 Markdown 的 div

此函数

搜索 title 属性以 MDH: 开头的元素
确保该元素是包装器的直接子元素
验证它不在 blockquote 内部（避免取消渲染引用的内容）

来源

src/common/markdown-here.js359-394

边缘情况和特殊处理

内容修改检测

Markdown Here 监控已渲染内容的变化。如果用户修改了已渲染的 Markdown，然后尝试取消渲染，他们会收到警告。

此功能有助于防止意外丢失对已渲染内容所做的更改。

来源

处理嵌套内容

会特别注意避免取消渲染引用的电子邮件回复中的 Markdown

hasParentElementOfTagName 函数检查包装器是否在 blockquote 内部
findElemRawHolder 函数会跳过 blockquote 内部的元素

这确保了在回复包含已渲染 Markdown 的电子邮件时，只有用户的新内容会受到切换的影响。

来源

MdhHtmlToText：有限的 HTML 到 Markdown 转换

虽然不是取消渲染过程的直接部分，但 Markdown Here 包含一个单独的 MdhHtmlToText 类，用于有限的 HTML 到文本转换。该类主要用于：

检查内容是否包含未渲染的 Markdown
支持“忘记渲染”检查功能

该类包含对以下方面的特殊处理：

将 HTML 链接转换为 Markdown 链接
处理引用块（blockquote）和预渲染内容
处理 Gmail 的引用文本格式
保留图片标记

来源

与切换机制的集成

HTML 到 Markdown 的转换是 Markdown Here 整体切换机制的一部分

切换过程根据内容的当前状态决定是渲染还是取消渲染，从而为用户提供无缝的双向转换体验。

来源

src/common/markdown-here.js570-646

结论

Markdown Here 中的 HTML 到 Markdown 转换采用存储和检索方法，而不是试图从 HTML 中逆向工程 Markdown。通过在渲染过程中保留原始 Markdown，该扩展程序确保了在切换回 Markdown 时，即使是复杂的 Markdown 语法也能完美还原。这种方法在不同的电子邮件客户端和平台上提供了可靠的用户体验，同时避免了直接 HTML 到 Markdown 转换固有的挑战。