wysiwygエディタについての学習8

draft-jsを使ってみる続き

SelectionState

EditorState.getSelection()で取得できる選択範囲の状態

キーとオフセット

ネイティブDOMでは、選択範囲にはノードとオフセットのペアであり、
開始地点と終了地点を表し、それぞれアンカーとフォーカスとされる。

フォーカスって選択の終端だったのか。。知らなかった。

Draftでは、コンテンツブロックがあるので、そのキーとオフセットのペアで示すことができます

アンカーとフォーカス VS 開始点と終了点

アンカーとフォーカスだと便利で、前後の選択が柔軟にできる
ただ、選択の方向性を考慮する時には開始点と終了点の方を使うほうがいい

なるほど、編集時に引き続きの操作の際のフォーカス操作と一体に考えられるということかな。。

アンカー・フォーカスと開始点・終了点の両方をSelectionStateでは公開します。
編集操作では、アンカー・フォーカス、
コンテンツ管理では、開始点・終了点を使うべし。

SelectionStateが実際に持つのはアンカー・フォーカスであって、開始点と終了点は導出されるものです。

細かいプロパティの説明は省略。

Data Conversion

エディタは空き領域に存在するわけではない、保存や送信のためにnativeのjsに変換する場合があり、
汎用的なJSのデータに変換するユーティリティを提供する
FlowTypeのRawDraftContentStateには、エンティティオブジェクトのマップと同様に、
コンテンツブロックのリストが含まれる

細かいプロパティの説明は省略。

RichUtils

リッチテキスト編集のための静的ユーティリティーセットです。

細かいプロパティの説明は省略。

AtomicBlockUtils

アトミックブロック編集のためのユーティリティ関数の静的なセットです。

細かいプロパティの説明は省略。

KeyBindingUtil

キーバインディングを定義するためのユーティリティ関数の静的なセットです。

細かいプロパティの説明は省略。

Modifier

ContentStateオブジェクトに対する一般的な編集操作をカプセル化するユーティリティ関数の静的なセットです。これらのメソッドを編集操作に使用することを強くお勧めします。

細かいプロパティの説明は省略。