memo
wysiwyg

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

More than 1 year has passed since last update.

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を使ってみた

https://draftjs.org/docs/quickstart-rich-styling.html#content

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

handleKeyCommandを使ってみた

https://draftjs.org/docs/quickstart-rich-styling.html#content

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

エンティティ

https://draftjs.org/docs/advanced-topics-entities.html#content

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

気になる箇所

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

気になるワード

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

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

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

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

3つの「変更可能性」

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

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

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

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

DraftEntity

https://draftjs.org/docs/v0-10-api-migration.html#content

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

デコレータ

http://d.hatena.ne.jp/shimooka/20141217/1418788239

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

https://draftjs.org/docs/advanced-topics-decorators.html#content

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

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

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

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

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

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

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

関連モジュール