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

draft-jsを使ってみる続き

example

ハンドルオフがうまくいかない

キーバインド

コードのコメントにAltとCtrlを使った時のAltGraphはバインドしないほうがいいというような記載あり。

カスタムコンポーネント

https://draftjs.org/docs/advanced-topics-block-components.html
https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/media/media.html

残課題

カスタムコンポーネントがまだ動かせていない

デコレーターの切り替えがうまくいかなかった

DraftJSとツールバー

プラグインをまとめたモジュールはよさげ

https://github.com/draft-js-plugins/draft-js-plugins
https://www.draft-js-plugins.com/plugin/static-toolbar

draft-jsはツールバーとかは提供せずに純粋なエディタ部分のみなのね。
その辺を追加したのが似たような名前のモジュールとして公開されてたりするってことか。
一旦、ボタンタグでいくか。

propTypes

サンプルを実装していたら、SDKから怒られたので調べた。

React.jsのProp - Qiita
https://qiita.com/koba04/items/bc13d1f42964278ae14e

古い記事だけど分かりやすい。
外部との普遍なインターフェイスなので型チェックする仕組みってことね

Typechecking With PropTypes - React
https://reactjs.org/docs/typechecking-with-proptypes.html

その後、モジュール化されたと。

参考事例

30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita
https://qiita.com/mottox2/items/9534f8efb4b09093a304