Adopt clipboard & clone controller to add copy in the URL Generator

wagtail/images/templates/wagtailimages/images/url_generator.html

@@ -17,11 +17,11 @@
 
     <div class="w-image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' image.id '__filterspec__' %}">
         <form class="w-image-url-generator__form w-mb-5">
-            {% formattedfield form.filter_method %}
+            {% include "wagtailadmin/shared/field.html" with field=form.filter_method %}
             {% field_row max_content=True %}
-                {% formattedfield form.width %}
-                {% formattedfield form.height %}
-                {% formattedfield form.closeness %}
+                {% include "wagtailadmin/shared/field.html" with field=form.width %}
+                {% include "wagtailadmin/shared/field.html" with field=form.height %}
+                {% include "wagtailadmin/shared/field.html" with field=form.closeness %}
             {% endfield_row %}
         </form>
 
@@ -35,8 +35,22 @@
         {% endpanel %}
 
         {% trans "URL" as heading %}
-        {% panel id="url" icon="link" heading=heading %}
-            <textarea class="w-image-url-generator__url" id="result-url" aria-labelledby="url-heading" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
+        {% panel id="url" heading=heading %}
+            <div class="w-relative" data-controller="w-clipboard w-clone" data-w-clone-auto-clear-value="5_000" data-action="w-clipboard:copy->w-clone#clear w-clipboard:copied->w-clone#add w-clipboard:error->w-clone#add">
+                <label class="w-sr-only" for="result-url">{% trans "Image URL" %}</label>
+                <textarea class="w-image-url-generator__url" id="result-url" rows="1" name="result-url" data-controller="w-action" data-action="focus->w-action#select" data-w-clipboard-target="value">
+                </textarea>
+                <button type="button" class="button button-secondary w-absolute w-top-3.5 w-right-3 w-bottom-auto w-left-auto" data-action="w-clipboard#copy" aria-describedby="clipboard-tooltip">
+                    {% trans "Copy URL" %}
+                </button>
+                <div class="clipboard-tooltip" data-w-clone-target="container" id="clipboard-tooltip" aria-atomic="true" aria-live="polite"></div>
+                <template data-w-clone-target="template" data-type="success">
+                    <span class="w-text-grey-50 w-absolute w-right-2 w-bg-positive-100 w-p-2 w-rounded-sm">{% trans 'Copied to clipboard' %}</span>
+                </template>
+                <template data-w-clone-target="template" data-type="error">
+                    <span class="w-text-grey-50 w-absolute w-right-2 w-bg-critical-100 w-p-2 w-rounded-sm">{% trans 'Copying to clipboard failed' %}</span>
+                </template>
+            </div>
         {% endpanel %}
     </div>
 {% endblock %}