Clipboard APIを使用して、リッチテキストコピーを実装する方法

const { createRoot } = ReactDOM;
const { LinkOutlined, SnippetsOutlined, CheckOutlined } = icons;
const { Typography, Avatar, List, Radio, Space } = antd;
const { Paragraph, Text } = Typography;

const data = [
  {
    title: 'ページトップへ戻るボタンの作り方【JavaScript】',
    postUrl: "https://sinpe-pgm.com/pagetop-button-js/",
    description: "JavaScriptで作るにはどうしたらいいんだろう？"
  },
  {
    title: '【コピペOK】複数のモーダルを同じクラス名で設置する方法',
    postUrl: "https://sinpe-pgm.com/multiple-modals/",
    description: "複数のモーダルを実装するの難しい。これまで2~3個だったから#modal01、#modal02とかしていたけど、今回10個以上あるから全部にid割り振ってられないよ、、"
  },
  //  略...
];

const firstItem = data[0];
const url = firstItem.postUrl;
const name = firstItem.title;
const encodedUrl = encodeURI(url);

const handleCopyToClipboard = async (richText) => {
  const blob = new Blob([richText], { type: 'text/html' });
  const blobPlain = new Blob([richText], { type: 'text/plain' });

  const item = [new ClipboardItem({ 'text/html': blob, 'text/plain': blobPlain })];

  try {
    await navigator.clipboard.write(item);
    message.success('コピーされました');
  } catch (error) {
    console.error('Error copying rich text to clipboard:', error);
  }
};

const App = () => {
  const handleCopyToClipboardRichText = (postUrl, title) => {
    const richText = `<a href="${postUrl}" target="_blank">${title}</a>`;
    handleCopyToClipboard(richText);
  };

  const renderItem = (item, index) => (
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
        title={<a target="_blank" href={item.postUrl}>{item.title}</a>}
        description={item.description}
      />
      <div className="icon-wrap">
        <Paragraph
          className="icon"
          copyable={{
            text: item.postUrl,
            icon: [<LinkOutlined key="copy-icon" />, <CheckOutlined key="copied-icon" />],
            tooltips: ['テキスト', 'clicked!!'],
          }}
        ></Paragraph>
        <Paragraph
          className="icon"
          copyable={{
            icon: [<SnippetsOutlined key="copy-icon" />, <CheckOutlined key="copied-icon" />],
            tooltips: ['リッチテキスト', 'clicked!!'],
            onCopy: () => {
              handleCopyToClipboardRichText(item.postUrl, item.title);
            },
          }}
        ></Paragraph>
      </div>
    </List.Item>
  );

  return (
    <>
      <Typography.Title level={2}>リッチテキストをクリップボードにコピーするサンプル</Typography.Title>
      <Space
        direction="vertical"
        style={{
          marginBottom: '20px',
        }}
        size="middle"
      >
      </Space>
      <List
        pagination={{
          defaultPageSize: 5
        }}
        dataSource={data}
        renderItem={renderItem}
      />
    </>
  );
};

const ComponentDemo = App;

createRoot(mountNode).render(<ComponentDemo />);

const encodedUrl = encodeURI(url);