Figma のプラグイン(あるいは navigator.clipboard がない環境)で MIME type 付きでコピーする方法

Figma のプラグイン環境では navigator.clipboard が使えません。

なのでワークアラウンドとして document.execCommand('copy')　を使う必要があります。(方々で deprecated だから使うなと言われていますが、私たちにはこれしかないんです。)

// textarea を作ってコピーしたいテキストを value にセット
let textArea = document.createElement('textarea');
textArea.value = textToCopy;

// 一応画面外に飛ばしとく
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);

// select して実行
textArea.focus();
textArea.select();
document.execCommand('copy')

ただ困ったのがこれだと　text/plain 以外の MIME type を指定することができないことです。

結論を言いますと　copy event listner を設定して clipboardData を取るようにできれば実行できました。

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

function copyListener(data, e) {
  e.clipboardData.setData('your-mime-type', data);
  e.preventDefault();
}

const listener = copyListener.bind(this, JSON.stringify(obj));
document.addEventListener('copy', listener);

try {
  document.execCommand('copy');
} finally {
  document.removeEventListener('copy', listener);
  const msg = { type: 'notify-copy-success' };
  parent.postMessage({ pluginMessage: msg }, '*');
}