[wp-trac] [WordPress Trac] #44588: Denote the Copy action is complete by updating the Copy button to state 'Copied'

[WordPress Trac]

#44588: Denote the Copy action is complete by updating the Copy button to state
'Copied'
-------------------------------------------------+-------------------------
 Reporter:  garrett-eclipse                      |       Owner:  garrett-
                                                 |  eclipse
     Type:  enhancement                          |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.4
Component:  Privacy                              |     Version:  4.9.6
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-screenshots needs-     |     Focuses:
  testing dev-feedback 2nd-opinion               |  administration
-------------------------------------------------+-------------------------

Comment (by xkon):

 Following up after a brief DM over Slack and looking further into this.

 I played around with copy/pasting on various mediums (offline/online
 document editors) & Gutenberg.

 It seems that there are some issues when using the `data-clipboard-text`
 due to various tabs and all other special chars used in each section here.

 I've tried converting the text striping out anything that's not needed
 like "\r\n" and tabs etc but then the copy/paste styling seemed to not be
 respected by all mediums. I couldn't pinpoint why but there wasn't any
 need to go further with this approach since it kinda broke from scratch.
 Note that the issue was for the policies that plugins might add, the
 default policy worked just fine :).

 Also, the `text` data-clipboard parameter practically adds all of the text
 that we wanted to copy again in the HTML source and that didn't seem right
 to me since there's no difference in the HTML as we actually want to keep
 the formatting here. Essentially on this implementation, the `data-
 clipboard-text` was printing the same content a second time just for the
 usage of the copy method creating a bigger HTML source without any actual
 need.


 In [attachment:"44588.4.diff"] I've converted the patch to use `data-
 clipboard-target` instead of the `data-clipboard-text`.

 Each section now has its own unique ID that is generated by the source
 name like `id="policy-text-PLUGINNAME"`. This makes it easier to add
 targets to clipboard.js so each copy button can target the specific
 section it belongs to and copy it.

 This way there's no need to output double HTML inside data placeholders
 and the styling/formatting seems to be working fine on various mediums /
 Gutenberg / Google Docs as expected.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44588#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform