✍️ 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. 草稿與資料夾管理

• 草稿箱標記：未定稿的思考內容可打上「草稿」標記，在部落格發布或多端歸檔時自動規避，僅留在本地沙盒；
• 樹狀資料夾分類：建立多層級自定義資料夾（如 技術研發/前端、讀書隨筆），將零散的筆記按業務與主題分門別類，保持工作台井然有序。