腦洞|理想的文檔編輯器
零、引言
自從養成了碼字寫筆記的習慣，我先後接觸過一些文檔編輯器，Word、WPS、Onenote、為知筆記、Evernote、幕布、Typora、VNote、Notion等等。誠然，這些都是一些非常優秀的文檔編輯器，但是實際使用下來，總感覺體驗上有一些不如意的地方，這時我會問自己：理想文檔編輯器是怎樣的？
我覺得應該滿足以下幾點：
- 面向具體使用情景，內容與形式分離；
- 簡潔美觀而友好的界面；
- 功能滿足書寫和排版的需求；
- 引導用戶養成良好書寫的習慣；
- 確定感，主要是格式的確定感，意味著更少的格式混亂；
- 兼容性，方便導入導出，用戶擁有數據的主權；
- 書寫體驗好；
- 面向未來，智能化； ……
Word與Markdown
Word是所見即所得編輯器的標杆，經過2013和2016的成長，現在體驗上已經優化了很多 。儘管如此，Word的基因決定了無法實現內容形式分離，比起書寫，他更適合排版。
Markdown是個新鮮的事物，我對Markdown的理解是網路界的標點符號（雖然目前並未完全普及），如果對比中英文的標點符號和Markdown的符號設計，會發現二者有異曲同工的地方。有的網站會把文章中小括弧（）內的文字識別為解釋類文字，用灰色小一號楷體顯示，這種做法就是模糊了標點符號與Markdown的界限。而從編輯器方面看，VNote之類支持高亮語法的編輯器是最符合這種理解的。
Markdown的優勢與不足都非常明顯，優勢自不多言，而天生的不足是語法對功能的束縛，其功能上的增長會帶來語法增加和兼容性問題。
從以上對理想文檔編輯器的要求來看，Word和Markdown都有不完善的地方，下面我腦洞一個我覺得較為理想的文檔編輯器雛形以供參考。為方便說明，假設軟體名字為「Wonder」。
一、文檔類型
與一般的編輯器不同，Wonder需要區分文檔的類型。
書寫是有目的的行為，我們創建一個文檔是一本書、是一篇公眾號文章、是一篇讀書筆記還是一頁辦公的表格？
書寫的目的決定了文檔的類型，不同的文檔類型對應了不同的工作情景。
參考了LaTex的分類，Wonder將文檔分為5類：
- 文章（article）
- 論文（paper）
- 書籍（book）
- 學位論文（report）
- 辦公文檔（office document）
文章（article） 是最基本的類型，一篇筆記，一篇頭條，一篇公眾號文章，一篇科普文，一篇隨筆，一篇博客。
書籍（book） 是多篇文章（article）文檔的集合。
論文（paper） 是特殊的文章（article）類型， 學位論文（report） 是特殊的書籍（book）類型，兩者特殊的地方在於它們是十分嚴格的出版物，從文章的內容到格式排版都有相當嚴格的要求。我至今仍不能忘記被論文格式所支配的恐懼，特別是我不得不用Word幫朋友調整用WPS創建的論文格式的時候，剪不斷，理還亂……
辦公文檔（office document） 的特點在於，創建文檔的人不一定是提供文檔內容的主要貢獻者，比如公司做了一張問卷，讓員工填寫。
二、組成文檔內容的元素
Wonder採用內容與形式分離，並將組成文檔內容的元素分為 塊元素（block element） 和 行內元素（inline element） ，元素按書寫的順序依次排列（類似Html和Markdown）。
注意：此處元素不包括排版用到的元素。
塊元素（block element） 包括：段落、標題、圖片、表格、有序列表、無序列表、代碼塊、區塊公式、專業圖表……
行內元素（inline element） 包括：文字、強調、行內公式、鏈接、引用……
在Word里，元素是分布在一張固定大小（默認是A4）的紙張上，而在Wonder中，文檔元素是默認是排列在大小不定（彈性寬度，無限長度）的窗口中，與網頁類似。其中塊元素就像積木，一個接一個上下排列構成文檔，而行內元素就像多米諾骨牌，在塊元素內橫向排列。
下面介紹部分文檔元素：
塊元素
段落是最基礎的塊元素。Wonder與Markdown、html不同的是，Wonder不設置換行，即html中的<br>或Markdown行最後的兩空格，也不允許空行存在，因為換行和空行只有排版的功能，並不構成內容本身。
標題是能劃分文檔內容的塊元素，並能與大綱聯動。Wonder中設置了大標題、附標題、一級標題、二級標題、三級標題等標題元素。在一篇文章中有且只能有一個大標題。
圖片在markdown中是行內元素，但在實際書寫中，在行內插入圖片只會嚴重破壞排版，所以Wonder把圖片作為塊元素而存在（類似html的<figure>）。
其他的如代碼塊、塊公式、專業圖表類似Markdown。
此外，Wonder還提供一些方便書寫的塊元素，比如論文書寫中常用的作者和摘要。
再比如備忘元素，用於書寫時跳過一定內容時備忘，比如文章寫到中途某個地方突然需要插入一個圖片，但並不希望寫作思路被打斷，這時可以插入一個空元素，備註寫下需要什麼樣的圖片，然後繼續書寫，在最後返回補充圖片。
行內元素
文字是最基礎的行內元素。
強調是最常用的行內元素之一。有人覺得強調就是斜體或加粗，這種認識是比較片面的。強調帶語義，而斜體和加粗只是單純的格式，具體區別可以參考html中<em>、<strong>和<i>、<b>的區別。強調分為輕強調，重強調和超強調。輕強調是閱讀到強調附近才能發現的程度，重強調是掃一眼就能發現的程度，而超強調是比重強調更進一步。Wonder中強調的樣式是可以自由調整，恢復使用中文著重號也是一種未來的可能。
引用在論文或比較嚴肅的文章中常用到，可以參考Word的引用或者Markdown的腳註功能。在Word中就算有文獻管理軟體的插件支持，核對參考文獻一樣可能弄到吐血。
其他如鏈接、行內公式、備忘元素等元素不做過多解釋，隨著軟體的發展，可以像Notion一樣加入更多有趣而實用的塊元素或行內元素，比如添加視頻。
三、使用情景（工作流）
一篇文章從有想法到最後成品，大概需要經歷幾個階段：作者構思→準備素材→創作內容→排版→發布→讀者閱讀。在工作流中共有兩名角色：作者和讀者，作者參與發布前的工作，讀者參與發布後的工作。工作流中的每一步經常需要反覆修改，而工作流下游的每一步也可能返回上游進行再次修改。
注意：作者和讀者指身份，可以是同一個人或多個不同的人。
如果理解工作流，也就能知道不同工具的優勢所在。比如幕布等大綱軟體適合構思和草稿，Markdown類編輯器適合內容創作，Word適合排版。
當然也有覆蓋面比較廣的軟體，比如Word，Word提供了5種視圖，分別適應不同的情景：
- 大綱視圖：適合構思和疏理；
- 草稿視圖：適合初步內容創作；
- Web視圖：適合內容創作和網路排版；
- 頁面視圖：適合內容創作、排版和閱讀；
- 閱讀視圖：適合閱讀；
辦公文檔的工作情景比較特別，工作流大致如下：發布者確定內容需求→接受者填充內容→文檔返回發布者。還有一些工作情景是單純的排版或作圖做表。
在辦公文檔方面，目前只有Word之類的軟體能勝任。
可惜的是，Word的多種視圖的設計並沒有讓體驗提高，閱讀視圖剛出來的時候甚至讓人有點煩躁。有沒有可能讓多種工作情景能更有機地整合起來，從而提高體驗呢？我借Wonder提供一種可供參考的設計。
四、基礎界面布局
我有個比較自私的認識，就是覺得一個軟體的焦點應該在屏幕比較中間的位置，所以我比較喜歡VNote那種三欄式布局，這也比較適合目前寬屏電腦。Wonder採用類似的布局：
左欄是目錄區，中欄為內容展示和編輯區，右欄為工具欄和大綱欄。
對於書籍類型的文檔，目錄區顯示文章的目錄，對於一般文章類型的文檔，目錄區起文檔管理的作用，類似Ulysses。
當然也可以變成像Typora那樣只留一個編輯區，適合軟體分屏和專註書寫，簡潔而美觀。
五、構思階段
大綱工具是構思階段的利器。一般編輯器中的大綱只能展示和跳轉，Wonder的大綱工具需要做得更多。
我覺得大綱是個非常重要的工具。當我們說一篇文章的結構時，常常有兩種含義，一是指文檔元素的位置關係，比如塊元素按順序上下排列，二是指內容的邏輯關係，比如文章分幾部分內容，每部分內容又分幾部分來說明，這種邏輯關係構成了文章的脈絡，這種脈絡需要通過大綱來體現。
所以大綱必須可以編輯，而且編輯起來要像無序列表那麼方便，當我們按回車的時候，可以創建一個同級的標題，用Tab和Shift+Tab可以調節標題的層級。
更加理想的情況是，可以將其他工具生成的大綱或列表導入，可以選擇添加「第幾章」、「第幾節」等標題前綴。
六、素材準備階段
文章中用到一些資料、圖片經常需要提前準備，一些軟體會設計備忘錄或靈犀頁，但是很少軟體會文檔設計圖片庫或素材庫。Wonder為每文檔設計了一個素材庫，用來放置書寫可能用到圖片和資料。素材庫分成兩部分，一部分如同記事本，記錄單純的文字，如文字資料、靈感、網頁鏈接等，另一部分存放圖片或其他文件，可以調用其他軟體打開這些文件，也可以重命名文件和圖片。
七、內容書寫階段
書寫階段的體驗是一個編輯器的靈魂，主要體現在兩方面，一是內容展示，二是內容錄入。這兩方面共同決定一個編輯器的書寫邏輯和體驗差異。
舉幾個典型的例子：
Word在內容展示方面採用的是所見即所得，連編輯區都是一張A4紙的樣子，而內容錄入方面，主要鍵盤錄入文本，滑鼠點擊工具欄圖標添加內容，部分樣式亦可採用快捷鍵實現。
純文本Markdown在內容展示方面採用純粹的源碼，而內容錄入方面完全依賴鍵盤。
VNote在內容展示方面採用的是在保留源碼的情況下原地預覽，即高亮語法同時添加對應的樣式，圖片則添加後馬上在語法下面顯示出來，可以說是部分渲染。而內容錄入方面，在鍵盤錄入的基礎上，VNote增加了工具欄圖標的方式和快捷鍵的方式。
Typora在內容展示方面採用的是所見即所得（也可以說是隱藏了Markdown語法的徹底版原地預覽），而內容錄入方面，在鍵盤錄入的基礎上，增加了快捷鍵和菜單的方式。
我對體驗好的定義是，用戶能在具體文檔編輯情景中感到專註、便利和舒適。我希望從這個角度重新審視內容展示和內容書寫。
內容展示
如果從源代碼到渲染的過程進行劃分，我們可以得到下面一個圖：
無渲染和完全渲染是內容展示的兩個極端，有段時間裡，我一直覺得所見即所得是最為理想的內容展示方式，後來我發現其實所見即所得的方式在實際的使用中並不完美，比如Typora的完全渲染只是針對非編輯器狀態下的元素，因為它的本質是Markdown編輯器，所以只能在部分渲染的狀態下編輯元素，這就導致了用戶在編輯過程中其實在不停切換部分渲染和完全渲染兩種狀態。Word就更不用多說了，一個空格里就可能隱藏了很多的格式，而這些隱藏的格式常常是個地雷。
我這裡想討論的是在文檔編輯中的安全感（或者說是確定感），前面提到，好的體驗能讓用戶在使用中感到專註、便利和舒適。讓用戶專註和舒適除了簡潔美觀的界面，流暢友好的交互，其中還有一點就是要消除用戶在使用過程中的不安。只有放心了，才會有更少的思想負擔，腦袋才有更多的空間去琢磨內容本身，這也是為何我提倡軟體書寫中內容與形式分離。
當我們面對一份源代碼（哪怕是最簡單的Markdown）時，我們其實是非常不安的，因為我們很難保證完全沒有語法錯誤，所以產生了高亮語法。通過高亮語法，編輯器告訴我們，它讀懂了我們的內容。部分渲染也是同理，前段時間我在VNote上寫筆記的時候，發現強調內有小括弧的時候，強調會出現渲染失效，後來我翻閱了幫助說明，才發現原來文檔中已經有了說明。而在這之前，我一直覺得我的Markdown已經學的夠好了，這讓我對而面對一份完全渲染的文檔，其實我們也是有不安的，我們瞄一眼標題有時並不能確定標題的層級，這種不安在Word中更明顯，計算機識別出了我們的內容，我們自己卻糊塗了。
當然，經過養成良好的書寫習慣、一定時間適應以及軟體優化，部分渲染和所見即所得帶來的不安可以被克服。只是我覺得，這種不安如果可以交由軟體來完全克服，那就不應該轉嫁到用戶身上。所以Wonder採取了一種迂迴的展示方式，我叫做超渲染。
超渲染是在完全渲染的基礎上，額外渲染一定量的元素符號（主要是針對標題和行內元素）。這種方式其實來自Bear，我從中得到對Markdown的又一個認識，如果僅僅從內容展示的角度看Markdown，Markdown的語法符號其實是幫助計算機和肉眼識別元素的符號。Markdown語法作為符號存在時，其實也是可以被其他符號做代替。
比如上圖，Bear不僅渲染了標題的樣式，還在標題前添加了一個二級標題的符號，用戶甚至能通過與這個符號互動改變標題的層級。
超渲染的好處：
- 超渲染通過完全渲染保證了計算機識別，通過額外元素符號保證了肉眼識別，兩者結合帶來最強的確定感。
- 超渲染不僅適合Markdown，也適合非Markdown編輯器。
- 超渲染如同Markdown一樣明確了行內元素的邊界，這樣用戶可以自由選擇游標落在行內元素的裡面還是外面（Word中這是做不到的，後一個字只能繼承前一個字的格式）。
- 超渲染的額外元素符號可以增加更多功能，像改變標題層級，行內元素可以調節範圍。
當然，超渲染最大的壞處是文檔不再所見即所得。
超渲染所增加的符號要儘可能簡潔形象，如bear中一級標題用h1符號；部分可以參考Markdown，比如強調的用*。
內容錄入
文字是一篇文章的主體，而文字的錄入主要依賴鍵盤和輸入法，未來可能還有語音輸入等方式。而鍵盤和輸入法並不是編輯器能控制的，所以文檔編輯器在內容錄入方面的體驗主要在除文字之外的元素錄入上。
前面提到，好的體驗能讓用戶在使用中感到專註、便利和舒適，這裡細分為三點：
- 盡量讓用戶的視覺焦點集中在正在錄入的內容上。當使用菜單欄和工具欄中的圖標時，用戶的視覺焦點必須離開內容，轉移到軟體頂部，這種錄入方式就容易讓用戶分心。同理的，讓軟體的界面更簡潔，也是為了讓用戶的焦點不亂跑。有的軟體為了這點，還提供了專註模式和全屏模式。
- 盡量多使用鍵盤，少使用滑鼠，減少切換工具帶來的思維干擾。
- 輸入的順性。文字來表達是線性的，如同說話一樣，越是尊重這種順性，錄入就越自然，所以Markdown的語法錄入體驗上優於快捷鍵。
所以，在不考慮效率的情況下，體驗方面：滑鼠點工具欄/菜單<滑鼠右鍵菜單<鍵盤右鍵菜單<鍵盤快捷鍵<Markdown語法。
這也是為何我使用Markdown的原因之一。但是Markdown語法在錄入圖片和表格的時候並不方便，效率低下，所以很多軟體都提供了圖片和表格的快捷鍵或快捷工具，但是這樣的話用戶就不得不切換使用兩種錄入方法。
那有沒有可能在錄入所有的元素時都採用一樣的方式，既方便又有類似Markdown語法輸入的體驗呢？
我把這種Markdown這種使用輸入特定字元完成內容定義或功能輸出的錄入方式稱為語法輸入。不過Wonder中使用關鍵詞激發功能，這個關鍵詞可以是符號、字母甚至中文。如果Markdown像編程工具，那麼Wonder像輸入法。當我們想插入圖片的時候，敲打「圖片」兩個字，Wonder就會將可能的指令作為候選彈出，選擇「插入本地圖片」這個候選，就可以選擇合適的本地圖片插入了。就如同文檔編輯器中內置了一款輸入法一樣，只不過這個「輸入法」不是錄入字詞，而是錄入元素。
前段時間經朋友介紹，居然發現了使用類似方法的工具，叫Notion，當輸入「list」後，Notion會彈出下拉菜單，提供多種list供選擇。
關鍵詞錄入的好處是：
- 元素錄入變得與文字錄入同樣的習慣，沒有思維切換的負擔，更加自然。
- 用戶可以自由定製碼錶，就像定製輸入法的碼錶一樣。
- 可以兼容Markdown語法的前綴，但是沒有了Markdown語法對功能的限制，可以方便添加功能。
- 關鍵詞不僅可以用於元素的簡單添加，還可以實現更多功能，比如輸入素材庫中的圖片名字，可以插入圖片；比如插入圖片後馬上輸入像素或百分比，可以調節圖片大小；比如在開頭用關鍵詞可以調動模版；再比如用關鍵詞快速插入常用的一段話。
- 未來可以像智能輸入法一樣，抓取用戶習慣，變得更加智能，越來越符合用戶習慣。
其他一些細節：
激發鍵：Nition設置了/作為功能激發鍵，只有按了/後輸入關鍵詞才有用。但是/鍵對於中文習慣的用戶並不友好。Wonder默認不使用激發鍵。為了減少候選菜單的彈出干擾，也可以自定義或前或後的激發鍵。如果使用，推薦用空格做為激發鍵，因為空格比起其他鍵更自然。
除了設置激發鍵外，減少選菜單的彈出干擾的手段：限定關鍵詞的使用範圍，比如塊元素的關鍵詞只有在新段落段首才能被識別。
自動翻頁：當塊元素觸底後，回車後自動翻頁，讓下一個新的塊元素居窗口中間。同時設置專註模式，專註模式下，正在編輯的塊元素居窗口中間。
候選的樣式：暫且設計了兩個方案，一是同輸入法和notion，使用彈出菜單；二是候選使用預覽圖。
候選鍵：輸入法使用12345進行候選，Wonder使用F1、F2、F3、F4、F5進行候選。
素材庫與備忘元素：為了保證用戶在有思路時儘可能書寫，提前準備的素材可以放素材庫，書寫時可以不用切換窗口，來不及準備的素材可以用備忘元素先佔位置，後面再補充。
Tab鍵跳出行內元素：因為行內元素都是包裹型的，在行內元素內輸入完文字後，可以按Tab、右方向鍵或End鍵讓游標跳出到行內元素外，繼續後面書寫。
智能化：Wonder最後希望變成一款智能的編輯器，就像一個懂你的助手一樣。智能化的內容多於複雜，簡單舉幾個例子：比如自動把粘貼的內容解析為相應的元素；沒有$直接的公式和上下標能被識別為行內公式；素材庫中的素材會臨時載入到碼錶，方便添加；多次使用的句子或短語，提示添加到碼錶；分析用戶的使用習慣，調整元素的候選順序；更智能的拼寫錯誤識別……
靈感來源：這種設計的靈感來源是Markdown和Word，我使用過的最早使用語法輸入方式的編輯器其實是Word。在Word中，當我們在段首輸入1.+空格，Word會自動識別為有序列表。只是很少有編輯器打算深化這種方式。
容錯的後置語法：主要針對包裹式的行內元素，如果開始只是錄入了關鍵詞，但是沒有回車定義元素，在結束時用關鍵詞可以定義元素，完全同Markdown的行內元素的寫法。對於塊元素也適用，但是實現起來可能比較麻煩。最理想的結果是可以完全兼容Markdown語法的寫法。
繞了一圈，把Markdown的書寫體驗搬到了一個非Markdown編輯器上。
八、內容修改階段
在內容書寫的時候，書寫是線性進行的，但是在內容修改的時候，修改是非線性的，需要快速定位到需要修改的位置，或添加內容，或刪除內容，或改變元素的內容、範圍、類型。
內容定位，滑鼠可以快速定位，對於位置較近的內容，也可以使用鍵盤方向鍵。
添加、刪除、改變元素的方式除了文字必須使用雙手鍵盤外，其他方式包括快捷鍵、關鍵詞錄入、右鍵菜單，能與滑鼠和方向鍵配合最好的是快捷鍵。左手快捷鍵，右手方向鍵或滑鼠，分工合作，互不耽誤。這也是為何大部分Markdown編輯器都加入快捷鍵功能的原因，Markdown原生的語法輸入方式與滑鼠配合度，不如快捷鍵。
然而像Word這樣的行業巨頭，居然沒有為插入圖片設置默認的快捷鍵。Word強化的是工具欄和右鍵菜單，這些都是依賴滑鼠的，所以我一直把Word看做一款排版軟體。
九、排版階段
排版的基礎是文章內容和發布載體。一篇文章可能需要多個載體，這時候內容與形式分離的優勢就體現出來了，把文章內容複製到一個新的模版就可以開始新的排版。
Wonder不打算像Word一樣實現超級複雜的排版功能，Wonder的目標是簡化排版。
全局設置，在內容書寫階段，就可以進行全局樣式的設置，主要針對每種元素定義樣式，也可以改變主題和配色。排版階段與書寫階段的全局設置相互獨立，可以相同，也可以不同。
頁面設置，最終發布的載體，可以是固定大小的紙張，也可以是一定寬度的窗口。
模版可以簡化排版的難度，對於論文，可以直接套用某個雜誌的排版樣式，方便投遞。
布局調整，當進入排版模式後，所有超渲染的額外符號消失，文章內容變成完全渲染的狀態，每一個內容元素（主要是塊元素）視為一個方塊，所有內容元素不允許覆蓋另一個內容元素，他們在同一個層次。
有點類似秀米的布局模式：
在書寫階段，只允許塊元素上下調整，在排版模式下，滑鼠拖動後可以使塊元素左右分布。這樣文章可以放多個圖片，類似拼圖。
空元素，為了豐富排版，設置了空元素，空元素就是個佔位用的方塊。
排版元素，排版元素依附於內容元素，增加內容元素的表現，可以與內容元素同層，也可以在內容元素的-1層或1層。比如為標題周圍添加花紋，或分隔線。
十、閱讀階段
閱讀模式下，文章不能編輯，如果文章到書寫階段，顯示為書寫階段的超渲染頁面。如果文章到排版階段，顯示為排版後的頁面。
閱讀模式可以批註，標記。
十一、後記
本文僅提供一個與眾不同的文檔編輯器雛形，眼界有限，可能已經有類似的甚至更好的文檔編輯器出現。如果有，請告訴我！
推薦閱讀：
