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

いまのところドキュメントを読んでるだけ。。

draft-jsを使ってみる続き

ブロックスタイリング

blockStyleFnを定義することで実現する。これはキーバインドと同じだな。

デフォルトcssが用意されている。
このcssの指定に「/」の文字が使われているけど、cssってこんな指定できるんだな。

[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類
https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

HTML Living Standard (通称 HTML 5) ではid属性値、class属性値に対して空白文字を除く全ての文字を使用できます。 id属性値の「名前が一意でなければならない」のは HTML 4.01 と同様です。

CSSの変態向き - ID, classを顔文字でコーディングする方法｜Web Design KOJIKA17
http://kojika17.com/2013/03/kaomoji_selectors.html

HTMLのID, classを顔文字、または日本語で書きます。

blockStyleFnで定義して、ハンドルはなくてcssファイルに記述されたスタイルを適用する。。
domのタグやclassで指定するわけじゃなくここで指定する？？いまいちわかってない。

カスタムブロックのレンダのマップ

convertFromHTMLで変換された時、コピペで貼り付けされたとき、マップを照合して変換処理が行われる。
このマップにも、デフォルトのマップがある。これにマッチしないとスタイルなしとして処理される。
実装は、blockRenderMap属性にImmutable.Mapを指定して上書きできる。

デフォルトのマップにマージして拡張することもできる。
Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

あるタグが貼り付けられた時に未定義ではなく別のタグにマップするにはaliasedElementsで指定できる。

カスタムブロックのラッパー

若干、自信ないけど、、
liをulで包むようなラッパー処理やもっと複雑な処理を書くときにクラスを定義して、
wrapperとして指定することで実行させることができるってことかな。

カスタムブロックコンポーネント

マッピングだけじゃなくて、レンダリングの処理自体を拡張したいときに使うのかな

blockRendererFnに指定することで、レンダリングの処理を拡張できる
デフォルトはDraftEditorBlockが使われている

カスタムブロックコンポーネントでのテキスト処理はDraftEditorBlockを内部で定義することで可能

カスタムブロックコンポーネントの定義

render()メソッドの内部でメタデータを状態を取ってくる処理を記述する
面倒な手続きだが、踏む価値がある

注意など

マウスイベントをつかうときには読み込み専用にしてエディタ編集をとめましょう

ノートのエディタでは画像メディアの編集などはサポートせずに、画像メディアのコンポーネントに実装する
（翻訳がわからん）

複雑なインラインスタイル

文字レベルでオブジェクトを定義して行く、便宜上、配列として考えられる
挙動としては、同じ不変オブジェクトを使いまわす実装になっている
また、同じスタイルの文字を探し出して、まとめてレンダリングする

なるほど、、スタイルデータが実態データと分けて定義されているわけか。
わざわざそうしてみたいなので、効果的なのかなあ。。

スタイルの拡張や、マップの定義の上書きができる。

文字ごとにスタイルを指定した状態を保たせる感じかな。
でも、レンダリングではまとまったものをまとめてくくる？

<span data-offset-key="8g65c-0-2" style="font-weight: bold;">
<span data-text="true">ぇ</span>
</span>

ネストされたリスト

onTabメソッドをつかってTabまわりのキーボード入力の処理を処理できる

テキストの方向

言語によって、RTLとLTRがあり、それらを判別してテキストの方向を処理します。

テキストの寄せ

textAlignmentを使って明示的に指定できる。（デフィルトは言語と文字セットで判別）