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

draft-jsを使ってみる

htmlテキストとして状態を扱いたい

convertToRawとかはあるみたいだけど、
別途、nodeモジュールを読み込んでいる記事とかもある。
ちょっと調べる必要がありそう。

onChangeで、getCurrentContentを使って見たら、新しい入力の順序が頭にきてしまいうまく入力できなくなった。
そのまま状態保存している時には問題が起きない。これは課題でリーディングしていくか。

コードリーティング

コードを見つつ、ドキュメントを読む。

var DraftPublic = {
  Editor: DraftEditor,
  EditorBlock: DraftEditorBlock,
  EditorState: EditorState,

  CompositeDecorator: CompositeDraftDecorator,
  Entity: DraftEntity,
  EntityInstance: DraftEntityInstance,

  BlockMapBuilder: BlockMapBuilder,
  CharacterMetadata: CharacterMetadata,
  ContentBlock: ContentBlock,
  ContentState: ContentState,
  SelectionState: SelectionState,

  AtomicBlockUtils: AtomicBlockUtils,
  KeyBindingUtil: KeyBindingUtil,
  Modifier: DraftModifier,
  RichUtils: RichTextEditorUtil,

  DefaultDraftBlockRenderMap: DefaultDraftBlockRenderMap,
  DefaultDraftInlineStyle: DefaultDraftInlineStyle,

  convertFromHTML: convertFromHTMLToContentBlocks,
  convertFromRaw: convertFromRawToDraftState,
  convertToRaw: convertFromDraftStateToRaw,
  genKey: generateRandomKey,
  getDefaultKeyBinding: getDefaultKeyBinding,
  getVisibleSelectionRect: getVisibleSelectionRect
};

HTMLとの相互変換っぽいメソッドがありそう？？
ContentBlockとかいうものを概念的に理解するか。。若干億劫だけど一つずつ。

RichUtilsを使ってみた

• boldにしてみて問題なし
• コードはFlowTypeで書かれている
• わりと見やすい

handleKeyCommandを使ってみた

• 通常は問題なし
• draft-extendと併用したら、多分使い方が間違ってて、なんかコンソールにエラー（重複呼び出し）が出た

エンティティ

DOM情報＋アルファの状態の塊かな。この考え方大事。

気になる箇所

すべてのエンティティはContentStateレコードに格納されます
デコレータまたは カスタムブロックコンポーネントを使用すると、エンティティメタデータに基づいて豊富なレンダリングをエディタに追加できます。

気になるワード

コンテンツステート、デコレータ、カスタムブロックコンポーネント

エンティティの作成と取得

この辺、何してるのかいまいちわかってない
使いそうなメソッドが並んでる

• createEntity
• getLastCreatedEntityKey
• applyEntity
• getBlockForKey
• getEntityAt
• getCurrentContent
• getEntity
• getData

3つの「変更可能性」

変更可能、変更不可能、セグメント化された

セグメント化された状態がいまいちわからん。引用や言及みたいな時に不整合が起きないようなイメージ？

イニュータブルなエンティティ

マージと置き換えのメソッドは使えるが直接変更できないよ。

DraftEntity

DraftEntityが廃止されてContentStateに統合された的なことが述べられている
構造デコレータについてはいまいちよくわからん

デコレータ

プログラミングで、一般に、継承ではなく移譲を使ってオブジェクトの機能を拡張するパターン
実装としては、インターフェイスをつかい、インスタンスを動的に実行するクラス

ここでのデコレータは、、プログラミングでのデコレータと同じかどうかわからん
ただ、編集時に、装飾する範囲をカーソルの位置に限定せず特定してタグでくくって変更したりするみたい

例としては、compositDecoratorがあって、複数のデコレータをまとめて一つにしてる
オブジェクトとして、構造とコンポーネント（デコレータコンポーネント）とを引数として渡すみたい
順番も明示的で、最初に渡した指定を先に実行か。

findWithRegexで、該当文字列の頭と尻をみつけてcallbackに渡している
このコールバックがデコレータコンポーネント

デコレータコンポーネント

展開演算子（spread operator）が使われてる
props.childrenは開始と終了の間のテキストだとして「...props」はなんだ？？
デコレータの適用をタイプで制限したりもできるのかな

デコレータの設定の上書き

turnOffHandleDecorationsのような実装で、動的に設定を切り替えられる！！
おー！

関連モジュール

• https://github.com/draft-js-plugins/draft-js-plugins
  • 絵文字やハッシュタグ対応など。便利そう。
• https://github.com/lokiuz/redraft
  • draftjsの状態を変換したり抜き取ったりする処理をするっぽい。
  • 内部パーサーとか書いてる気もするし、もしかするといいかも。
• https://github.com/jpuri/draftjs-to-html
  • 名前の通りhtmlへの変換
• https://github.com/kadikraman/draftjs-md-converter
  • マークダウンとの相互変換
• https://github.com/jpuri/draftjs-utils
  • ユーティリティ