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.