Reactで、表の入力欄からMarkdownの表を作る方法
見出しとセルを入力欄に入れると、その場で Markdown の表ができる React のコンポーネントを作りました。列の寄せ方、行と列の追加と削除、セルの中の | の書き方、コピーのボタンまで、4つの Markdown の実装と Ch ...
Reactで、表のセルをドラッグで範囲選択する方法
表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...
Reactで、貼り付けた画像を受け取って表示する方法
入力欄に Ctrl+V で貼り付けた画像を、React で受け取って一覧に表示する方法です。onPaste で画像を取り出す方法、文字の貼り付けを邪魔しない書き方、表示用の URL の作り方と解放のしかたを確かめました。
Reactで、クリップボードにコピーするボタンを作る方法
コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...
