Slate.js
Draft.jsよりもデータ構造の複雑性が緩和されている
Decorator
これだけでエディタができる
code:tsx
function App() {
const editor = useMemo(() => withReact(createEditor()), []);
{
type: "paragraph",
children: text: "A line oooof text in a paragraph." },
},
]);
return (
<Slate
editor={editor}
value={value}
onChange={(newValue) => setValue(newValue)}
<Editable />
</Slate>
);
}
SlateがContextを管理する
値や詮索範囲、発生した変更、history
Editableがeditor
実装
4つのpackagesからなる(with Lerna) slate
Core Logic
InterfacesとTransformsからなる
slate-react
React向けWrapper。
ComponentやHooks
slate-history
編集のHistoryを管理する
めちゃくちゃシンプル
slate-hyperscript
参考にできそうmrsekut.icon
Contextを上手く使っている
コードがキレイ
slate
Core Logic
InterfacesとTransformsからなる
createEditorの定義などがある
slate-react
withReactが何をやっているのか
slate-history
編集のHistoryを管理する
めちゃくちゃシンプル
カーソル位置の取得