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

draft-jsを使ってみる続き

エディタの状態は状況を追跡する

エディタ状態の変更は上位の状態に伝播しつつ行われる
ペーストなどの処理の際にもonChangeイベントハンドラを発火させることでテキストを解析して構造化できる

構造化する処理は、非同期なので、アトミックではないために競合状態を生み出してしまうかもしれない
異なる２つのハンドラーが同時に書き換えをした場合に、お互いが非同期なので最初の処理を後の処理が無視して上書きしてしまう
setTimeoutを使っても同様になる
データのロストが起きる場合にはこれを疑ってください

不可分操作 - Wikipedia
https://ja.wikipedia.org/wiki/%E4%B8%8D%E5%8F%AF%E5%88%86%E6%93%8D%E4%BD%9C

不可分操作（ふかぶんそうさ）あるいはアトミック操作 (英: atomic operation) とは、情報工学においていくつかの操作を組み合わせたもので、システムの他の部分から見てそれらがひとつの操作に見えるものをいう。
* 全操作が完了するまで、他のプロセスはその途中の状態を観測できない。
* 一部操作が失敗したら組合せ全体が失敗し、システムの状態は不可分操作を行う前の状態に戻る。

スレッドセーフ - Wikipedia
https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E3%82%BB%E3%83%BC%E3%83%95

共有データを何らかのアトミックな操作でアクセスすることで他のスレッドから同時アクセスされないことを保証する。これは一般に特別な命令を必要とするが、ライブラリがそのような機能をサポートしている場合がある。アトミック操作は多くの排他機構の基盤となっている。

ベストプラクティス

非同期の問題があるので、this.stateを参照する時には疑いをもち、EditorStateを扱うハンドルを利用してください

なるほどー。
ペーストの時には、一旦レンダリングを待って同期してからonChangeするってことかな。。
今ひとつ内部的な動きが理解できていないが、イベントを区別してハンドル関数を活用すればひとまずいいってことかな。

イシューと落とし穴

遅延状態の更新

setTimeoutなどで状態を更新するのは一般的
ただ、エディタでは更新が頻繁で競合が起きるため問題
このため、並列的な処理を切り出して、状態の更新に影響がないように、別プロセスにする必要がある

CSSの行方不明

デフォルトの挙動に関わるのでDraft.cssを使わない場合には同様のスタイル指定を独自記述する必要がある

これは別に落とし穴でもない気もするけど

カスタムOSXキーバインディング

キーバインドをカスタマイズしている場合には上手く動かなくなる

これも、問題っていうより普通だろうな

ブラウザ拡張

ブラウザ拡張により想定外の動きをすると、、

そりゃそうだ

IE問題

IE11だとなんかおかしいよ

そうか。。

モバイル対応

対応がまだ不完全
詳しくはiosとかandroidのタグのイシューをみてね

ポリフィル

babelでの変換によってポリフィル対応があるよ
ポリフィルはできるだけ早くロードしてね