Locker service - copy to clipboard

Question

I need a functionality to copy table data to clipboard. With locker enabled I don't have access to :

document.queryCommandSupported('copy')
document.execCommand('copy');

How else can I deliver this functionality. Will Flash work with lightning. I suppose not.

Answer 1

I have also faced the same issue. If you use Salesforce CLI to scan your code. It will say that document.execCommand('copy'); is not a secure document function.

Only possible solution I can think of is to use a prompt(window.prompt is not supported) with a input box which will show a input selected text and focused. There will be a message over input text 'Please press Ctrl+C to Copy' and on press 'Ctrl+C' prompt will close.

We have already implemented a prompt for our package but I am not sure how good will be the UX of this solution.

Please let me know your thoughts.

PS: ui:copy is not supported on salesforce. For supported APIs please go to https://your-org-domain.lightning.force.com/auradocs

Answer 2

I tried to do

var doc = document;
doc.queryCommandSupported('copy');
doc.execCommand('copy');

It doesn't gives me Lightning CLI errors and it executes fine. Will this work in this case.

Answer 3

The aura framework has a ui:copy event where you can handle when the user has copied content to the clipboard.

See here: http://documentation.auraframework.org/auradocs#reference?descriptor=ui:copy&defType=event

Answer 4

I have solved this issue by using hidden textarea element.

modalBody is the text that will be copied.

<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
    <p>{!v.modalBody}</p>

    <TEXTAREA ID="holdtext" style="width: 0px; height: 0px; opacity: 0;">
        {!v.modalBody}
    </TEXTAREA>
</div>
<footer class="slds-modal__footer">
    <lightning:button aura:id="copy" variant="neutral" label="Close" iconName="action:close" iconPosition="left" onclick="{! c.close }" />
    <lightning:button variant="brand" label="Copy" iconName="utility:copy_to_clipboard" iconPosition="left" onclick="{! c.copy }" />
</footer>

On the controller:

copy : function(component, event, helper) {
    var holdtxt = document.getElementById("holdtext");
    holdtxt.select();
    document.queryCommandSupported('copy');
    document.execCommand('copy');

    var source = event.getSource();
    source.set('v.label','COPIED!');

    setTimeout(function(){
        component.set("v.showModal", false);
    }, 1500);
}