探索 Atomic Editor：將 Obsidian 風格的即時預覽引入 CodeMirror 6
探索 Atomic Editor：將 Obsidian 風格的即時預覽引入 CodeMirror 6
追求完美的 Markdown 編輯器往往會面臨一個十字路口：純文字編輯器那種原始、無干擾的特性，與 WYSIWYG (What You See Is What You Get) 介面的即時視覺滿足感之間的抉擇。對於許多人來說，理想的中間地帶是 Obsidian 所推廣的「即時預覽」(Live Preview) 範式，在使用者移動游標時，Markdown 語法會即時隱藏或進行樣式化處理，將純文字的速度與渲染後文件的清晰度融合在一起。
Atomic Editor 作為 CodeMirror 6 的一個專門實現，進入了這個領域，旨在為開發建構自身文字型應用程式的開發者提供這種流暢的混合編輯體驗。透過利用 CodeMirror 6 的擴展性，Atomic Editor 嘗試在單一編輯介面上彌合原始碼與渲染預覽之間的差距。
The Core Proposition: Live Preview in CodeMirror 6
核心提案：在 CodeMirror 6 中實現即時預覽
Atomic Editor 的核心設計在於提供編輯與檢視之間的無縫轉換。與傳統的分屏編輯器（一邊顯示 Markdown，另一邊顯示 HTML 渲染結果）不同，Atomic Editor 會動態修改編輯器的檢視方式。這種方法透過讓作者在不離開原始文字上下文的情況下，看到格式化後的結構化結果（例如表格、核取方塊和粗體文字），從而降低了認知負荷。
目前實作方式中最受讚譽的方面之一是它對複雜 Markdown 元素的處理。使用者特別注意到該工具的「完成度」(fit-and-finish)，並對表格的 WYSIWYG 支援給予高度評價，因為表格在即時預覽環境中是出了名的難以實作。
Technical Considerations and Community Feedback
技術考量與社群回饋
雖然該專案計畫展現了巨大的潛力，但從原型轉向生產就緒的工具，需要克服幾個技術障礙。來自 Hacker News 開發者社群的回饋突顯了幾個摩擦點：
State Management and Cursor Behavior
狀態管理與游標行為
實作即時預覽需要對編輯器的狀態進行精確控制。一些使用者回報在特定元素周圍輸入時會出現「跳動」行為，這顯示了底層文字文件與視覺呈現之間的同步可能會偶量發生的不同步或觸發非預期的佈局偏移。
The "Leaky Abstraction" Problem
「洩漏的抽象化」問題
混合型編輯器的主要挑戰之一是確保抽象化不會「洩漏」——也就是說，使用者不應該被迫以破壞視覺流暢度的形式來處理原始語法。例如，一位使用者指出，刪除一個開頭的程式碼圍欄 (code fence) 可能會導致結尾圍欄的行為異常，這顯示了編輯器處理成對分隔符號的邏輯仍需進一步完善。
Interaction Design
互動設計
除了渲染之外，編輯器的觸感也是討論的關鍵點。具體的改進建議包括：
- Selection Highlighting: 使用者注意到選擇範圍的高亮顯示功能並不總是如預期運作。
- Checkbox Ergonomics: 使用者希望核取方塊在游標接近時能更直觀地轉換為可編輯文字。
- Row Deletion: 雖然表格渲染令人印象深刻，但在這些表格中刪除特定列的機制仍是一個摩擦點。
CodeMirror 6 vs. ProseMirror
CodeMirror 6 vs. ProseMirror
社群提出了一個有趣的技術辯論，即在以散文為主的編輯器中，選擇 CodeMirror 6 而非 ProseMirror。雖然 ProseMirror 是專為結構化文件與富文本設計的，但 CodeMirror 6 是一個高度可擴展的文字編輯器。選擇 CodeMirror 6 顯示了對維持與底層純文字檔案強連結的偏好，確保編輯器保持為「文字編輯器優先」，而非「將文字儲存為文件的編輯器」。
Conclusion
結論
Atomic Editor 代表了一種大膽的嘗試，旨在將複雜的編輯範式引入開源生態系統。雖然它目前面臨著早期階段專案的典型成長痛——例如游標不穩定與邊緣案例的語法處理——但它處理複雜元素（如表格）的能力顯示了強大的基礎。對於希望在自己的應用程式中實作 Obsidian-like 體驗的開發者來說，Atomic Editor 提供了一個引人注目的起點，並讓人一窺窺見混合型 Markdown 編輯的未來。