my notebook

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

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

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

この問題を解決します。

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

初期状態はこれ。

state 1

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

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

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

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

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

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

前回から引き続いて lexical について調べていきます。今回は、エディタの初期テキストを index.html で指定する方法です。

lexicalのミニマムスタート。

このページ Getting Started with React の内容をやってみた備忘録です。

Python Web Framework の Bottle で GET/POST する方法を確認します。その後、React からPOSTを使うところまでの備忘録です。

bottle and react 2

JSON を POST して JSON を返すウェブサービスを Micronaut でつくる、クライアントはReact。

複数のアイテムがあり、それぞれのアイテムは非選択/選択状態を持つことができる、そういうUIを HTMLとReactを使ってつくります。

Node.js は使わないで、index.html に直接 JavaScript を書いていく方法でつくります。

step3

React でサーバとデータ連携する方法を調査中。取り急ぎ、前回はサーバから json を取得したので、今度はPOSTで送信してみます。送信する内容はフォームに入れた文字列とします。 React でフォーム処理する部分はこのドキュメントを参照のこと。