Open lukewarlow opened 9 months ago
I think this should initially only work for text data. But potentially if it points to an it should copy that image data? Happy to discuss further.
Oh yeah this would be an amazing addition! GitHub maintains https://github.com/github/clipboard-copy-element which allows the following patterns:
<clipboard-copy for="blob-path">
Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div> <!-- `src/index.js` gets copied -->
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js"> <!-- `src/index.js` gets copied -->
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
<clipboard-copy value="src/index.js">Copy</clipboard-copy> <!-- `src/index.js` gets copied -->
I'd happily sacrifice the last one if we could retain the others. Or perhaps we can leverage mime types to copy the plain text in the text/plain
mime and the outerHTML of an element in the text/html
mime?
https://codepen.io/lukewarlow/pen/dyaZJjj
Here's a naive implementation (Chrome Canary or Firefox nightly will be needed) that uses JS to achieve this.
I think the main questions here are around the exact specifics of copying when it's more than just copy the innerText of an element.
@keithamus I think your top two for sure are possible. I think the third one is interesting and might require some research of various copy button implementations to see what should happen. The fourth one as you say wouldn't work.
...unless and this might be an awful idea, what if the invoketarget was the invoker itself...
...unless and this might be an awful idea, what if the invoketarget was the invoker itself...
If the heuristic was "for form control elements, the value is copied, for everything else the textContent is copied" then this would make the last option possible by adding a value
to the invoker button, and as you say, have it target itself. A bit weird but I dig it.
We may be onto something here...
See https://shoelace.style/components/copy-button/#properties
To copy an attribute, append the attribute name wrapped in square brackets, e.g. from="el[value]". To copy a property, append a dot and the property name, e.g. from="el.value".
This is a neat solution to choosing the behaviour. Idk if we'd get away with doing it for the defaults but cool nonetheless.
The Open UI Community Group just discussed [invokers] Clipboard `invokeaction` defaults
, and agreed to the following:
RESOLVED: Pursue copy invoke action but not as part of initial landing of invokers.
RESOLVED: Invokers v1 will be popover and dialog invoking.
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
While thinking on common patterns that might benefit from an invokeaction the topic of clipboard actions came to mind.
I'm thinking at least a "copy" action would be useful for copying the text contents of an element, be it a textarea, input or just a general html element displaying text.
This should require a user gesture to work (and follow any existing permission policy restrictions)
A paste or cut event could also be useful but (especially paste) may require further thought from a security POV.
Examples