draft-jsを使ってみる続き
beforeInputの挙動
'not-handled'を返すとデフォルトイベントを継続
'handled'を返すとデフォルトイベントが防止される
onChangeが働かないだけなのか、他にもあるのか。。
コードを見るとドキュメントの記載のように、実際にpreventDefault()を実行しているみたい。
ざっと翻訳して調べてみたけど、onChangeイベントを許可するかの判断があって、
その後にデータのレンダリングを待ってからonChangeイベントが発火するみたいだな。
onBeforeイベントトリガーを使うときはこの挙動で、
beforeInputhandleはこの中の一部だけだが、、
ハンドルで文字列を変更しても多分挿入を待ってonChangeしそうだな。
native insertionの推奨がイマイチわかってないけど、遅延して発火するならまあいいや。
この一連の処理で考慮されているのはonChangeイベントだけっぽいな。
onChangeの中身をメソッドにしておいて、beforeInputから必要なぶんだけ呼ぶ、
同期的にするべきなら'not-handled'で通常通り動かす。
みたいな感じだろうか。
onBeforeinput周りのコメントを翻訳
DraftEditorProps.js.flow
Handle intended text insertion before the insertion occurs. This may be
useful in cases where the user has entered characters that you would like
to trigger some special behavior. E.g. immediately converting `:)` to an
emoji Unicode character, or replacing ASCII quote characters with smart
quotes.
挿入が行われる前に意図したテキストの挿入を処理します。
これは、ユーザーが特殊な動作をトリガーしたい文字を入力した場合に役立ちます。
例えば。
emoji Unicode文字に直ちに `：）`を変換するか、
またはASCII引用符文字をスマート引用符で置き換えます。
node_modules/draft-js/lib/DraftEditorEditHandler.js
When `onBeforeInput` executes, the browser is attempting to insert a
character into the editor. Apply this character data to the document,
allowing native insertion if possible.
`onBeforeInput`が実行されると、ブラウザは文字をエディタに挿入しようとしています。
この文字データを文書に適用し、可能であればネイティブ挿入を可能にする。
Native insertion is encouraged in order to limit re-rendering and to
preserve spellcheck highlighting, which disappears or flashes if re-render
occurs on the relevant text nodes.
再レンダリングを制限し、スペルチェックハイライトを保持するためにネイティブ挿入が推奨されています。
スペルチェックハイライトは、関連するテキストノードで再レンダリングが行われた場合に消えたり、点滅したりします。
In some cases (ex: IE ideographic space insertion) no character data
is provided. There's nothing to do when this happens.
場合によっては（例：IE表意文字スペースの挿入）、文字データは提供されません。
これが起こるときには何もしません。
Allow the top-level component to handle the insertion manually. This is
useful when triggering interesting behaviors for a character insertion,
Simple examples: replacing a raw text ':)' with a smile emoji or image
decorator, or setting a block to be a list item after typing '- ' at the
start of the block.
最上位コンポーネントが挿入を手動で処理できるようにします。
これは、文字挿入のための興味深い動作をトリガする場合に便利です。
単純な例：生のテキスト ':)を笑顔の絵文字またはイメージデコレータで置き換えるか、
またはブロックの先頭に' - 'を入力してブロックをリスト項目に設定する ブロック。
If selection is collapsed, conditionally allow native behavior. This
reduces re-renders and preserves spellcheck highlighting. If the selection
is not collapsed, we will re-render.
選択が折りたたまれている場合は、条件付きでネイティブの動作を許可します。
これにより、再レンダリングが削減され、スペルチェックの強調表示が保持されます。
選択が折りたたまれていない場合は、再レンダリングします。
Check the old and new "fingerprints" of the current block to determine
whether this insertion requires any addition or removal of text nodes,
in which case we would prevent the native character insertion.
現在のブロックの新しい"フィンガープリント"をチェックして、
この挿入がテキストノードの追加または削除を必要としているかどうかを判断します。
この場合、ネイティブ文字の挿入が防止されます。
The native event is allowed to occur. To allow user onChange handlers to
change the inserted text, we wait until the text is actually inserted
before we actually update our state. That way when we rerender, the text
we see in the DOM will already have been inserted properly.
ネイティブイベントが発生することが許可されます。
ユーザーのonChangeハンドラが挿入されたテキストを変更できるように、実際に状態を更新する前にテキストが実際に挿入されるまで待ちます。
その方法でレンダリングすると、DOMで表示されるテキストは既に適切に挿入されています。
handleBeforeInputの発火はだれがする？
ブラウザに実装されたイベント？Reactのイベント？それともDraftのイベント？onChangeの頭で呼び出すとか？
古い記事だけど、、ブラウザ依存があるのかもな。
keyupで発火してる（してた）のかな？？
Reactに同じ名前のイベントがありそうな。。
https://github.com/facebook/react/issues/9390
Reactのドキュメントには記載がなさそうな。。
https://reactjs.org/docs/events.html
たぶん、このページで追加がアナウンスされてるイベントかな、すごく昔じゃないか。
React v0.11 RC - React Blog
https://reactjs.org/blog/2014/07/13/react-v0.11-rc1.html
うーむ、ドキュメントには書いていないイベント、そういうものなのかな。。
挙動は安定してないのかもな。
handleBeforeInputの使用目的の想定
msの記事で同じような命名のtriggerがあって、それは変更イベントの可否のみ判断する目的だった。
slateというjsでも同じ名前のイベントがありそう。
draft使う時に想定外の使い方をしないように。。できる範囲で。
DraftEditorProps.handleBeforeInput
のコメントがあった
Handle intended text insertion before the insertion occurs. This may be
useful in cases where the user has entered characters that you would like
to trigger some special behavior. E.g. immediately converting:)to an
emoji Unicode character, or replacing ASCII quote characters with smart
quotes.
挿入が行われる前に意図したテキストの挿入を処理します。
これは、ユーザーが特殊な動作をトリガーしたい文字を入力した場合に役立ちます。
例えば。
emoji Unicode文字に直ちに ：）を変換するか、
またはASCII引用符文字をスマート引用符で置き換えます。
EdgeブラウザだとbeforeInputの挙動が違ってバグになっているっぽい
keydownイベントについての記事
onKeyDown イベントは handlers/edit/editOnKeyDown.js にて実装されている。基本的には
Draft.js がデフォルトで提供しているKeyが入力されたかどうかを判定
ユーザーが ‘keyBindingFn’ で定義した独自のKey入力ロジックかどうかを判定
editor.props.handleKeyCommand() にコマンドを渡して独自のKey入力ロジックを呼び出す
editor.update() でEditorの内容を更新
ということをやっている。s