Anki add-on: Clippy: 1-Click Text Copy

While reviewing foreign language study cards, I've found myself copying text from the card to paste into google translate or a dictionary. This takes several steps, Mouse click > Drag to select relevant text > Right click > Copy , which becomes tiring. Clippy makes such use cases as easy as 1-click. In the card template, wrap text with a markup. Clippy will draw a faint border around the text and show a clipboard icon next to it. Click the text or the icon to copy the text. Examples Example #1: Wrap a field name, to 1-click copy. {{Front}} Answer : {{Back}} <clip>{{GoogleMapsPlusCode}}</clip> Example #2 : Wrap multiple text blocks in a card. Each <clip> element gets its own clipboard icon. <clip>{{GoogleMapsPlusCode}}</clip> <clip>http://wikipedia.com/{{Location Name}}</clip> Example #3 : Highlight text & icon using Anki CSS class. Add correcponding CSS in your card styling section. <clip class="class-x">{{GoogleMapsPlusCode}}</clip> <clip class="classy">http://wikipedia.com/{{Location Name}}</clip> Example #4 : Use CSS selectors to style the text and the icon /* Show icon when mouse is over clipboard */ .copy-icon { cursor: help; } /* Style the clip text */ clip.class-x { color: blue; } /* If desired icon can be styled different from text */ clip.class-x .copy-icon { color: #007bff; } Testing & Validation This addon on was tested on MacOS Anki Desktop Version 25.02.5 . Background information Wouldn't it be simpler to use javascript in the card template to copy to the clipboard? Anki (or the underlying QT engine) does not permit javascript writes to the clipboard. Somethiing simple like the below, used in traditional web development, fails with a Not AllowedError: Write permission denied <span onclick="navigator.clipboard.writeText(text)">Click to copy</span> There is a legacy technique using document.execCommand("copy") that still works. This approach is a kludge (see code snippet below). Moreover, this command has been deprecated in browser engines. <span onclick="copyText(this.innerText)"> Click to copy </span> <script> function copyText(text) { const textarea = document.createElement("textarea"); textarea.value = text; textarea.style.position = "fixed"; // prevent scrolling textarea.style.opacity = "0"; document.body.appendChild(textarea); textarea.select(); try { const successful = document.execCommand("copy"); alert(successful ? "Copied" : "Copy failed"); } catch (err) { alert("execCommand error: " + err); } document.body.removeChild(textarea); } </script>