iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

深入 slate.js x 一起打造專屬的富文字編輯器吧!系列 第 30

Day 30. Goal × 微結語

https://ithelp.ithome.com.tw/upload/images/20211015/20139359amYC4SVRvt.png

一天過一天,終於走到了今天(撒花~

從最一開始的 Pre-Start 篇章:帶讀者們認識 WYSIWYG 、瀏覽器的 contenteditable 屬性、 execCommand api

Compare 篇章 : 從頭梳理了歷史的脈絡介紹了不同世代編輯器的特色。選了幾個市場上的熱門 Libraries 做比較 —— 他們屬於哪一世代的編輯器、各自有著什麼樣的特色、用了什麼工具去實作底層的架構、又各自擁有哪些優缺點是開發者可以依照自身開發上的需求去做選擇的。

最後到 Slate 篇章

  • 從頭介紹了它的 Interfaces 與延伸出來的 Custom-Types 的實作
  • 它與『遍歷』相關的功能,也一併介紹了 JS Iterator & Iterable protocol 的背景知識
  • JS Immutable 的議題以及它與 immer.js 的搭配
  • 完整 Operation 的流程 —— General transform & Locations transform 的實作細節與使用到的輔助函式
  • Slate Normalizing —— normalize & normalizeNode 的實作細節以及整個 Slate 編輯器的完整運作流程圖
  • Transform methods references 等等。

筆者其實最一開始是打算完整解析 slate 的所有 packages 的,包含 slate-react 、 slate-hyperscript 、 slate-history 。但寫到後來發現自己還是太高估 30 天可以介紹到的量了(其實是高估自己產出文章的速度 XD 邊寫邊研究真的是一個不小的挑戰),希望未來有機會回頭挑戰它們!

不過其實 slate package 裡面也還有很多其他內容可以研究,如果把 Interfaces 、 Transforms 裡所有的 method apis 的實現邏輯都一併梳理清楚的話不知道還需要花上幾十篇文章 ...


來說說之後的小計畫吧!

畢竟也算是費盡了千辛萬苦才走完了這 30 天,文章寫完就這麼丟著也是怪可惜的!

剛好因為自己就在外商上班,對於朝向國外發展這件事也頗感興趣,也一直都想要試著去經營英文的 Blog 等。

所以接下來會試著將這 30 篇的內容濃縮翻譯成一整篇短系列的英文文章,然後再順著定期地產出英文技術文章,暫時先把這件事當作短期規劃,希望能維持成為一個習慣~

同時也附上本人的 TwitterMedium 帳號。怎麼能忘本呢?!鐵人賽都寫完了該經營與定期產出的文章還是要接著繼續的

  • Twitter 平時會分享一些網頁技術相關的內容,可能是一串 thread 也可能是一些轉推等等的(或是廢文 XD)

  • Medium 除了技術文章之外也會放上一些生活紀錄/成長相關的文章。

    我喜歡文字,也因此期許自己能成為寫得出充滿溫度的字句的人。

    周遭的人事物會變,過往的經歷卻不會。

    那份紀錄當下的感觸會在未來無論何時的閱讀中浮現,即便只是幾行字幾張圖。

最後非常感謝一路讀到今天的讀者們,希望各位能在閱讀的過程中確實吸收到對自己有幫助的新知,也希望文章中的問答形式能確實解答出讀者心中的疑惑,對整個系列的任一單元或是對這系列本身有任何想法都歡迎聯絡我給予任何意見或回饋!

最後的最後來附上 Slate 的 Slack 討論版 ,許多使用上的問題都能在裡頭找到解答,對於 Slate 的開發甚至是 contribute 有興趣的讀者們不妨上前看看。

那這次的鐵人賽就到這邊告一個段落嘍~我是 Ian 我們下篇文章見!


上一篇
Day 29. slate × Transforms × Selection & Text
系列文
深入 slate.js x 一起打造專屬的富文字編輯器吧!30

尚未有邦友留言

立即登入留言