鐵人檔案
覺得只用 <input> 、 <textarea> 做出來的文字編輯器看起來很 low 嗎？
想做個互動效果十足、炫砲感滿滿的文字編輯器，卻無法有系統性地管理 & 製作功能嗎？
用 Medium 寫文章寫這麼久，甚至報名參加 IThome 鐵人賽的你，卻連 WYSIWYG 都沒聽過？！
不怕！
就讓我們用 30 天的時間，一步一步地探索『富文本編輯器 feat. slate.js 』的世界
接下來的篇章我們會把目光聚焦於 interfaces/ 這個目錄底下的內容，想確認 slate package 完整的 src directory 的讀者們可...
上一篇我們有提到上圖這些畫了黃框的 files ，是我們在建立 editor 與操作 editor value 時主要會使用到的概念。 同時介紹了 slate...
緊接著這一篇要來探討 slate 是如何實現『定位』這件事的。 在開發以 text 文字資料模型為主的功能時，有辦法精準地定位到特定的文字位置，甚至是文字集合...
相信有 React 開發經驗的讀者們對 Ref 這個詞一定不陌生。 其實 slate 裡頭的 Ref concept 與 React Ref 非常相似，同樣都...
JS 的 Iteration 在 Slate 裡頭佔了不小的份量，即便有 Ref concepts 讓我們得以追蹤特定的 Location value ，在很...
slate 將 typescript 的型別擴充相關的內容都集合在 interfaces/custom-types.ts 這個 file 裡面。 這個 fil...
接著我們要進入到 slate 的下一個重點章節： Immutability 。 雖然這已經算是一個老生常談的主題了，但還是先讓我們稍微花點篇幅討論一下：什麼是...
ImmutableJS v.s. ImmerJS 舊版的 Slate 選擇 Immutable.js 這個套件去建立 Immutable object ，但...
在正式開始介紹 Operation 的內容之前，先讓我們花一點篇幅來介紹一下『 WeakMap 』這個感覺有點偏冷門的主題。 即便對它不熟悉的讀者們，第一眼看...
我們接下來就要進入到 slate 世界裡的另一大領域： Operations 。 這一整段章節其實也是筆者準備整個系列文章中數一數二期待的章節。因為在面對 W...