Angular から React への移行【その２】 では @Input のみがある単純な Angular コンポーネントを React コンポーネントに移行しました。 今回は、@Input だけでなく @Output も存在する Angular コンポーネントを React に移行します。

Angular から React への移行【その１】 で作成した Angular アプリを部分的に React にします。

初期状態:

選ぶと次のようになるようにしたい:

覚え書きです。

Angular + React の覚え書きです。 今回は directive 経由で実装します。

Angular + React の覚え書きです。

今回は emacs keybindings などを実現するための下準備として キーボードショートカットへの対応方法を調べます。

たとえば、 Ctrl + S したら検索（または保存処理）を実行、などという 機能を実現するために、そのキーイベントに反応させるには どうしたらいいかを調べます。

前回 Markdown Preview を追加したときに、bold や italic の マークアップは問題なくレンダリングできたのですが、 たとえば、リストアイテムのマークアップを入れると 意図通り作動しなくなっていました。

この問題を解決します。

React を使って、ボタンを押すとレイアウトが変わる仕組みをつくりたい。

初期状態はこれ。

前回 から 引き続き作業していきます。

今回は、Markdown Preview を追加しようと思います。

方針として、現状は Editor での編集結果を textarea へ渡していましたが、 それをやめて、代わりに React の Preview コンポーネントへ渡し Markdown テキストを良い感じにレンダリングさせます。

今回作成する React Preview コンポーネントは、 lexical のエディタ（LexicalComposer）を editable false の状態にして使います。 幸い、lexical は Markdownテキスト のレンダリングに最初から対応しているので、 それを活用します。

前回 から引き続いて 今回は、 エディタへの初期値のセットおよび エディタの内容が更新されたときに現在のエディタの内容を取得する部分を 改良します。

前々回 および 前回から引き続いて 今回は、 lexical の Editor で変更があったら index.html にそれを反映する 方法を調べます。