✍️ 02. 笔记与编辑器 (Notes & Editor)

围绕核心创作体验。
FlashNote 采用专为极客创作者打磨的现代化富文本引擎，兼具“所见即所得的直观流畅”与“纯文本 Markdown 的敲击掌控感”。

📑 本篇大纲

1. 新建、编辑、重命名和删除笔记
2. Markdown 与所见即所得编辑（4 种视界形态）
3. 标题、列表、引用、代码块和链接
4. 图片插入与管理
5. 表格、图表、数学公式
6. 草稿与文件夹管理

1. 新建、编辑、重命名和删除笔记

1.1 生命周期管理

• 新建笔记：点击侧边栏右上角 + 号，或使用快捷键 Ctrl/Cmd + N；
• 编辑笔记：点击左侧笔记列表的任意卡片，右侧工作台即刻载入该笔记内容，光标就位即可输入；
• 重命名笔记：直接点击编辑器顶部的标题输入框即可修改标题，按 Enter 保存；
• 删除与回收：点击笔记卡片右上角 ··· 更多操作，选择“删除笔记”。删除后笔记将移入“最近删除”安全回收站，防止误触丢失。

2. Markdown 与所见即所得编辑（4 种视界形态）

FlashNote 创新支持 4 种视界形态 (View Modes)，满足从敏捷记录到源码精雕的不同阶段：

1. 可视化模式 (Visual)：所见即所得。直接在输入时呈现精致排版，适合顺畅心流与快速成文；
2. 双栏对照 (Split)：左侧富文本编辑，右侧同步实时呈现 Markdown 纯源码，两栏滚动协同，细节一目了然；
3. Markdown 源码 (Source)：原生纯文本敲击视界，快捷符号自动补齐闭合，极致纯粹高效；
4. 纯网页预览 (Preview)：模拟读者最终阅读排版，所有超链接可安全点击穿透，检验排版效果。

3. 标题、列表、引用、代码块和链接

3.1 标题与文本层级

• 支持标准 # 至 ###### 对应 1~6 级标题；
• 标题自带折叠功能与文档右侧大纲导航，轻松理清长文脉络。

3.2 列表与任务清单

• 无序列表：输入 - 或 * 加空格；
• 有序列表：输入 1. 加空格，后续序号自动自增递补；
• 交互式待办清单 (Task List)：输入 [] 加空格生成复选框，可直接点击勾选完成。

3.3 引用卡片与超链接

• 输入 > 加空格生成优雅的半透明引用框，适合摘录名言金句或文献引用；
• 选中文本按下 Ctrl/Cmd + K 快速插入或编辑外链 URL。

3.4 智能代码块与语法高亮

针对程序员与技术写作者深度定制：

• 快速呼出：输入三个反引号 ``` 后回车即可呼出代码块容器；
• 语言切换：右上角常驻语言下拉菜单（支持 TypeScript, JavaScript, Python, Rust, Go, SQL, Shell, HTML/CSS 等）；
• 一键复制代码：点击右上角复制图标，源码完整拷贝入剪贴板，附带微动画提示；
• 防误选行号设计：左侧带有灰色行号辅助阅读，行号采用 CSS user-select: none 保护，划选代码时绝不会误复制代码行号。

4. 图片插入与管理

FlashNote 提供全方位的多媒体离线化保障：

• 灵活插入途径：支持拖拽图片入文、操作系统截图直接 Ctrl/Cmd + V 粘贴、或点击工具栏图片图标；
• 自动离线缓存：从外部网页拖拽或复制的图片，FlashNote 引擎自动抓取图像数据并存入本地 IndexedDB，避免外链防盗链或失效造成图片无法显示；
• 高清预览与灯箱：双击正文图片即可进入全屏灯箱，支持缩放、旋转与原图保存。

5. 表格、图表、数学公式

5.1 可视化表格矩阵

• 支持快速插入 $M \times N$ 矩阵表格，自由增删行、列与调整对齐方式；
• LaTeX 符号转 Unicode：导出或复制表格文本时，内置引擎自动将常用数学/逻辑 LaTeX 宏转换为高保真 Unicode 字符（如 \in $\rightarrow$ $\in$、\rightarrow $\rightarrow$ $\rightarrow$、\alpha $\rightarrow$ $\alpha$）。

5.2 KaTeX 数学公式

• 行内公式：使用 $E=mc^2$ 包裹公式；
• 块级公式：使用 $$ ... $$ 包裹独立展示公式；
• 内置 KaTeX 极速实时排版引擎，支持微积分、矩阵、希腊字母与方程组渲染。

5.3 Mermaid 画布交互

在代码块中指定语言为 mermaid 即可实时绘制流程图、时序图与甘特图：

• 画布平移与缩放：支持鼠标滚轮在 30%～350% 范围内无级缩放，按住鼠标拖拽平移画布；
• 语法消毒防护：内置 mermaid-sanitizer 语法防白屏保护，遇拼写错误友好提示而非页面崩溃；
• 高保真导出：支持一键将图表导出为高清矢量 SVG 或 2x Retina PNG。

6. 草稿与文件夹管理

• 草稿箱标记：未定稿的思考内容可打上“草稿”标记，在博客发布或多端归档时自动规避，仅留在本地沙箱；
• 树状文件夹分类：创建多层级自定义文件夹（如 技术研发/前端、读书随笔），将零散的笔记按业务与主题分门别类，保持工作台井然有序。