react-markdownのcodeblockにコピーボタンを配置する話

前回、react-markdownをカスタマイズしてコードをSyntaxHighlighterを適用する方法を書きました。
コードを表示するとクリップボードにコピーして利用することが多いと思いますのでコピーボタンを配置しておきます

クリップボードにコピーを行う方法

はじめにクリップボードに文字列をコピーする方法を書いておきます。

navigator.clipboard.writeText(code);

コピーボタンを設置する

次にコピーボタンを配置します。

今回は一番単純な方法でCodeBlockに直接書き込む方法を取ります

const copyToClipboard = (code: string) => {
    navigator.clipboard.writeText(code);
};
 
return (
    <div style={{ position: 'relative' }}>
        <span style={{ position: 'absolute', top: '10px', right: '16px' }}>
            <button onClick={() => copyToClipboard(children)}>Copy</button>
        </span>
        <SyntaxHighlighter
            style={atomDark}
            language={lang}
        >
            {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
    </div>
);

これによりコードの右上にコピーボタンが配置されました

終いに

　ReactMarkdownで表示したコードスタイルにコピーボタンを配置しました

デザイン的にボタン！設置とダサいですが
マウスオーバーするとボタンを表示させたり、
ボタンを押下すると数秒間「Copied … 」とか表示させるとか

色々できます

カスタマイズしてもっと楽しみましょう

参考