I2I: Create an Bento component for copy to clipboard functionality

Summary

This I2I proposes the copy to clipboard button. This button will allow users to copy any (specified in button attribute) content present in the document/page to the clipboard.

Design Document

We would like to introduce a new component amp-copy which will copy specified content into the clipboard.

Attributes:

• sourceId - In this attribute, we can specify from where the content should get copied. This can be the id of any HTML tag (e.g div, p, pre, code etc.) from where we want to fetch the content. We can also provide the id of any input tag here.
• text - Any text passed to this attribute will get copied to the clipboard. Preference will be given to the sourceId attribute. If sourceId is not specified, we will look for the text attribute.

Examples of both the attributes:

• Copy content from the div tag

<div id="myDiv1">
    <p> hello world </p>
</div>
<amp-copy width="100" height="20" source-id="myDiv1">
   Copy Content
</amp-copy>

• Copy content from the text tag

<amp-copy width="100" height="20" text="copy this line">
    Copy Content
</amp-copy>

This component doesn’t expose a postMessage interface.

Motivation

Currently, there’s no direct way to add the copy to clipboard button on pages. We need a simple way to add such buttons on pages that will allow a wide range of users/publishers to allow their audience/users to copy content which just a single click.

Alternative Solutions

There’s a way to add the copy button button on AMP pages. This solution involves adding an iframe to the page. Using iframe for copy seems to be overkill.

Launch Tracker

No response

Notifications

/cc @ampproject/wg-approvers

[mangesh]

Thank you for the detailed reply. This approach makes more sense. Let me give it a try. Let me check the feasibility of this approach and I will get back to you.

[caroqliu]

If I recall correctly, the AMP action approach for providing a copy to the clipboard was preferred from the discussion.

Yes, but it was not confirmed in the meeting. The decision was pending. If we use AMP action, we need to consider the CSS classes which will get assigned to the HTML element (e.g success when content is copied or error when copying to the clipboard is not supported).

Do you think it will be possible to update those classes with the AMP action approach? If yes, the AMP action approach will be more useful than the bento component.

Can you tell me more about the CSS classes? Could we for instance also expose events to cover this interaction? Since toggleClass is an action, I can imagine an API like this:

<button id="copy" on="tap:copy.copyToClipboard(text='Target text'),copySuccess:success.toggleClass('show')">
  Copy
</button>
<div id="success">Success!</div>

You could also have a button that copies the textContent from something else:

<div id="target" on="copySuccess:success.toggleClass('show')">Target text</div>
<button on="tap:target.copyToClipboard">
  Copy
</button>
<div id="success">Success!</div>

Note that the copySuccess event would (in this example, at least) fire on the target element for copyToClipboard. Maybe it would make more sense on the element that calls it, not sure.