​​React​Clipboard API,GFM,Markdown,Playwright,TypeScript

Thumbnail of post image 065

見出しとセルを入力欄に入れると、その場で Markdown の表ができる React のコンポーネントを作りました。列の寄せ方、行と列の追加と削除、セルの中の | の書き方、コピーのボタンまで、4つの Markdown の実装と Ch ...

​​React​Clipboard API,Playwright,Pointer Events,TypeScript,アクセシビリティ

Thumbnail of post image 053

表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...

​​React​Clipboard API,File API,Playwright,TypeScript

Thumbnail of post image 149

入力欄に Ctrl+V で貼り付けた画像を、React で受け取って一覧に表示する方法です。onPaste で画像を取り出す方法、文字の貼り付けを邪魔しない書き方、表示用の URL の作り方と解放のしかたを確かめました。

​​React​Clipboard API,Playwright,TypeScript,アクセシビリティ,カスタムフック

Thumbnail of post image 048

コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...

カテゴリー