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

エディターコンポーネント

contentEditable自体のAPIとプロップについて説明します。
DraftEditorPropsにプロップを定義します。

基本的なもの

• EditorStateオブジェクト
• onChangeメソッド

表現まわりのオプション

• プレースホルダー
• align
• 入力の方向
• カスタムブロックレンダリングのメソッド
• ブロックスタイルの指定
• カスタムスタイルマップ
• スタイルのカスタムのメソッド指定

挙動まわりのオプション

• 読み取り専用
  • カスタムコンポーネントの対話の際につかったり、静的なテキストに使う
• スペルチェック
• ペーストの際の書式の除去フラグ

DOM、アクセシビリティ

• タブインデックス
  • ？
• エリアプロップ
  • エディタへのアクセシビリティなどを色々指定できる
• エディターキー
  • 通常は不要で、サーバーサイドレンダリングするときに指定する

キャンセル可能なハンドラー

返り値によってコアのハンドルを通さないようになります

• リターンキーハンドル
• 任意のコマンドをキーバインド
• beforeInput
  • 入力されつつある時に発火する、別のDOMに変換したりする時に使う
  • 顔文字の入力に利用できる
• handlePastedText
  • 貼り付け時の挙動指定
  • trueでデフォルト挙動をキャンセル
• handlePastedFiles
  • エディタへの直接のファイル貼り付け
• handleDroppedFiles
  • エディタへのファイルのドロップ
• handleDrop
  • ドロップ操作

キーハンドラー

よくつかうキーのハンドラーを提供する
メンションへの操作などに使われる

• エスケープ
• タブ
• 上
• 下

マウスイベント

• フォーカス
• ブラー

メソッド

• フォーカス
  • エディタへフォーカスする
• ブラー
  • エディタからフォーカスを外す

EditorChangeType

エディタで可能な操作をenumにおさめたもの
このタイプは、Editor.pushからContentStateへ渡されるパラメータで、
直接変更はしないようにするべき

Flowを使うと静的な型付けをしてEditorChangeTypeに従ってくれる

EditorState

エディタの最上位の状態オブジェクトで、以下を含む

• テキスト
• 選択状態
• 装飾
• undo/redoのスタック
• 直近変更のタイプ

これらに対してはImmutable APIで操作せずに、用意したメソッドを使うべき

この状態に対する操作や設定が色々できそう
詳しくは省く

ContentState

以下を含む状態オブジェクト

• テキストやブロックやスタイルなど全部
• 編集前後の内容

主に、EditorState.getCurrentContent()で使うことができる
EditorStateは、undo/redoもContentStateの構成として保持する

細かいメソッドは省略