Merge branch '519126-refactor-clipboard-code' into 'master'

Remove jQuery from clipboard

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181278



Merged-by: Briley Sandlin <bsandlin@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Co-authored-by: Payton Burdette <pburdette@gitlab.com>

app/assets/javascripts/behaviors/copy_to_clipboard.js

-import ClipboardJS from 'clipboard';
-import $ from 'jquery';
-
+import Clipboard from 'clipboard';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { fixTitle, add, show, hide, once } from '~/tooltips';
@@ -55,41 +53,51 @@ function genericError(e) {
   }
 }
 
-export default function initCopyToClipboard() {
-  const clipboard = new ClipboardJS('[data-clipboard-target], [data-clipboard-text]');
-  clipboard.on('success', genericSuccess);
-  clipboard.on('error', genericError);
+/**
+ * This a workaround around Clipboard limitations to allow the context-specific copy/pasting
+ * of plain text or GFM. The Ruby `clipboard_button` helper sneaks a JSON hash with `text` and
+ * `gfm` keys into the `data-clipboard-text` attribute that Clipboard reads from.
+ * When Clipboard creates a new `textarea` (directly inside `body`, with a `readonly`
+ * attribute`), sets its value to the value of this data attribute, focusses on it, and finally
+ * programmatically issues the 'Copy' command, this code intercepts the copy command/event at
+ * the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy
+ * data types to the intended values.
+ */
+const handleCopyEvent = (e) => {
+  const { target } = e;
 
-  /**
-   * This a workaround around ClipboardJS limitations to allow the context-specific copy/pasting
-   * of plain text or GFM. The Ruby `clipboard_button` helper sneaks a JSON hash with `text` and
-   * `gfm` keys into the `data-clipboard-text` attribute that ClipboardJS reads from.
-   * When ClipboardJS creates a new `textarea` (directly inside `body`, with a `readonly`
-   * attribute`), sets its value to the value of this data attribute, focusses on it, and finally
-   * programmatically issues the 'Copy' command, this code intercepts the copy command/event at
-   * the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy
-   * data types to the intended values.
-   */
-  $(document).on('copy', 'body > textarea[readonly]', (e) => {
-    const { clipboardData } = e.originalEvent;
-    if (!clipboardData) return;
-
-    const text = e.target.value;
-
-    let json;
-    try {
-      json = JSON.parse(text);
-    } catch (ex) {
-      return;
-    }
+  if (target !== document.querySelector('body > textarea[readonly]')) {
+    return;
+  }
 
-    if (!json.text || !json.gfm) return;
+  const { clipboardData } = e;
+  if (!clipboardData) return;
 
-    e.preventDefault();
+  const text = target.value;
 
-    clipboardData.setData('text/plain', json.text);
-    clipboardData.setData('text/x-gfm', json.gfm);
-  });
+  let json;
+
+  try {
+    json = JSON.parse(text);
+  } catch {
+    return;
+  }
+
+  if (!json.text || !json.gfm) return;
+
+  e.preventDefault();
+
+  clipboardData.setData('text/plain', json.text);
+  clipboardData.setData('text/x-gfm', json.gfm);
+};
+
+export default function initCopyToClipboard() {
+  const clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
+
+  clipboard.on('success', genericSuccess);
+  clipboard.on('error', genericError);
+
+  document.addEventListener('copy', handleCopyEvent);
 
   return clipboard;
 }

app/assets/javascripts/vue_shared/components/clipboard_button.vue

 <script>
 /**
- * Falls back to the code used in `copy_to_clipboard.js`
+ * Falls back to the code used in `javascripts/behaviors/copy_to_clipboard.js`
  *
  * Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
  * when clicked.