feat(admin-form): copy form shortcode to clipboard via button

[mehul0810]

User Story

As a user, I want a quick and clean way to copy a shortcode so that the UI is less cluttered and it's easier to copy the shortcode in a single click.

Acceptance Criteria

• clipboard.js has been registered as an npm dependency.
• A ShortcodeButton JS class has been created which imports ClipboardJS as a module.
• The button text reads Copy Shortcode.
• The tooltip reads [give_form id="#"].
• On click, the shortcode is copied to clipboard and the tooltip text is updated to read Copied!.
• One mouseout, the button resets to its initial state.
• The shortcode field in the admin forms table has been replaced with the new button.
• The shortcode field in the single form edit screen has been replaced with the new button.

Visuals

Visual reference of the shortcode button in WPBR:

Replace these shortcode fields with new shortcode button:

Related

https://clipboardjs.com/

[kevinwhoffman]

@Sidsector9 I have implemented this functionality in WP Business Reviews using clipboard.js and Hint.css. Use the work done in WPBR as your starting point.

• PHP to generate the button
• ShortcodeButton JS class

Let's do a call on this when you are ready to begin.