membershipworks: Simplify WordPress post generator clipboard JS

Firefox supports the newer Clipboard API now, and WordPress actually
seems to behave better with just `text/plain`. `text/html` was causing
annoying behaviour by wrapping the raw html with `html` and `body`
tags, which confused WordPress.

membershipworks/templates/membershipworks/upcoming_events.dj.html

@@ -8,11 +8,11 @@
     <div id="preview">
       <!-- wp:image {"align":"center","id":2319} -->
       <figure class="wp-block-image aligncenter">
+        {# djlint:off H006 #}
         <img src="https://claremontmakerspace.org/wp-content/uploads/2019/03/CMS-Logo-b-y-g-300x168.png"
-             width="300"
-             height="168"
              alt="CMS Logo"
              class="wp-image-2319" />
+        {# djlint:on #}
       </figure>
       <!-- /wp:image -->
 
@@ -65,21 +65,28 @@
             {% with url="https://claremontmakerspace.org/events/#!event/register/"|add:event.url %}
               <!-- wp:group {"tagName":"section","layout":{"type":"constrained"}} -->
               <section class="wp-block-group">
+
+                {% if "lgo" in event %}
+                  <!-- wp:image {"width":"400px","height":"auto","sizeSlug":"large","linkDestination":"media","align":"{% cycle 'left' 'right' %}"} -->
+                  <figure class="wp-block-image {% cycle 'alignleft' 'alignright' %} size-large is-resized">
+                    <a href="{{ url }}">
+                      {# djlint:off H006 #}
+                      <img src="{{ event.lgo.l }}"
+                           alt="Image for {{ event.ttl|nh3:"" }}"
+                           style="width:400px;
+                                  height:auto" />
+                      {# djlint:on #}
+                    </a>
+                  </figure>
+                  <!-- /wp:image -->
+                {% endif %}
+
                 <!-- wp:heading {"align":"center"} -->
                 <h2 class="wp-block-heading">
-                  <a href="{{ url }}">
+                  <a href="{{ url }}">{{ event.ttl|nh3 }}</a>
-                    {% if "lgo" in event %}
-                      {# djlint:off H006 #}
-                      <img class="{% cycle 'alignleft' 'alignright' %}"
-                           width="400"
-                           alt="Image for {{ event.ttl|nh3:"" }}"
-                           src="{{ event.lgo.l }}">
-                      {# djlint:on #}
-                    {% endif %}
-                    <span>{{ event.ttl|nh3 }}</span>
-                  </a>
                 </h2>
                 <!-- /wp:heading -->
+
                 <!-- wp:paragraph -->
                 <p>
                   {# wordpress is very annoying with spacing here #}
@@ -110,7 +117,7 @@
       {% endfor %}
 
       <!-- wp:paragraph -->
-      <p style="clear: both;">Happy Makin’!</p>
+      <p>Happy Makin’!</p>
       <!-- /wp:paragraph -->
       <!-- wp:paragraph -->
       <p>
@@ -132,34 +139,14 @@
 {% block script %}
   <script>
     async function copyToClipboard(event) {
-      const rich = document.getElementById("preview").innerHTML;
+      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
-      const plain = document.getElementById("preview").innerHTML;
+      const data = new ClipboardItem({
-
+        "text/plain": new Blob(
-      // from https://stackoverflow.com/a/77305170
+          [document.getElementById("preview").innerHTML], {
-      if (typeof ClipboardItem !== "undefined") {
+            type: "text/plain"
-        // Shiny new Clipboard API, not fully supported in Firefox.
+          })
-        // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#browser_compatibility
+      });
-        const html = new Blob([rich], {
+      await navigator.clipboard.write([data]);
-          type: "text/html"
-        });
-        const text = new Blob([plain], {
-          type: "text/plain"
-        });
-        const data = new ClipboardItem({
-          "text/html": html,
-          "text/plain": text
-        });
-        await navigator.clipboard.write([data]);
-      } else {
-        const cb = e => {
-          e.clipboardData.setData("text/html", rich);
-          e.clipboardData.setData("text/plain", plain);
-          e.preventDefault();
-        };
-        document.addEventListener("copy", cb);
-        document.execCommand("copy");
-        document.removeEventListener("copy", cb);
-      }
 
       bootstrap.Popover.getInstance(event.target).show();
       setTimeout(() => bootstrap.Popover.getInstance(event.target).hide(), 1000);