チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する - Qiita

Qiita Teamでは、タスク管理なども行いやすいように、記事中のチェックボックスを押すとマークダウンも変更されるようになっています。 今回、元々この処理の一部がjQueryで書かれていたのをReactで書き直したので、整理も兼ねて記事に起こしています。 構成としてはすごく簡易的に書くと下記の図のような感じになっています（コンフリクトなどによるエラー処理などは説明の簡潔化のため省略）。 ブラウザ側でどうマークダウンを変換するのか？という部分まで担当してもらい、サーバーは更新するのみという構成です。 具体的な実装を見ていきましょう。 ページを描画する まずはページを描画しましょう。インポートは省略しています。 interface Props { item: { rawBody: string body: string updatedAt: string // コンフリクト検知用 id: s