Copy To Clipboard failed

Ask for Help
1

Hi everybody.

I was trying a custom widget for “Copy To Clipboard”.
The sample here “execCommand(‘copy’)” was already deprecated.
So I decided to use “clipboard.writeText”.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Copy To Clipboard</title>
    <script src="https://cdn.tailwindcss.com/"></script>
   <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
  </head>
  <body>
    <div class="content" x-data="{
      btnMes: 'Copy Text',
	    tex: '',
	    showErrMes: false,
	    async copyToClipboard() { await navigator.clipboard.writeText(this.tex); console.log('Copied to clipboard!'); } ,

	  }">

      <button id="copy" x-text="btnMes" class="bg-green-900 hover:bg-red-800 text-white rounded px-4 py-2"   @click="copyToClipboard(), btnMes = 'Copied'"></button>
      
      <textarea id="textArea" class="bg-yellow-700 hover:bg-red-800 text-white rounded px-4 py-2" x-model="tex"></textarea>

      <div id="error" x-show='showErrMes' class="bg-amber-200 w-1/12 " >Select a column to copy using the Creator Panel.</div>

    </div>
  </body>
</html>

This program works on its own. However, if you install it as a custom widget, It makes error.
Uncaught (in promise) DOMException: Failed to execute 'writeText' on 'Clipboard': The Clipboard API has been blocked because of a permissions policy applied to the current document.
I would like to know if this error can be avoided.

Thanks in advance.

2

Hi @naoya.takahashi.

I suspect we need to add some attributes to the custom widget iframes on our end to allow clipboard read and write access. The cross-origin nature of custom widgets may complicate things, but hopefully it’s a simple fix. I’ve filed an issue in our internal backlog to investigate further.

George