Merge branch 'tz-fix-copy-as-gfm-firefox' into 'master'

Transforming Gfm also on paste so it works also in FF

Closes #57561

See merge request gitlab-org/gitlab-ce!25146

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -36,13 +36,20 @@ export class CopyAsGFM {
     div.appendChild(el.cloneNode(true));
     const html = div.innerHTML;
 
+    clipboardData.setData('text/plain', el.textContent);
+    clipboardData.setData('text/html', html);
+    // We are also setting this as fallback to transform the selection to gfm on paste
+    clipboardData.setData('text/x-gfm-html', html);
+
     CopyAsGFM.nodeToGFM(el)
       .then(res => {
-        clipboardData.setData('text/plain', el.textContent);
         clipboardData.setData('text/x-gfm', res);
-        clipboardData.setData('text/html', html);
       })
-      .catch(() => {});
+      .catch(() => {
+        // Not showing the error as Firefox might doesn't allow
+        // it or other browsers who have a time limit on the execution
+        // of the copy event
+      });
   }
 
   static pasteGFM(e) {
@@ -51,11 +58,28 @@ export class CopyAsGFM {
 
     const text = clipboardData.getData('text/plain');
     const gfm = clipboardData.getData('text/x-gfm');
-    if (!gfm) return;
+    const gfmHtml = clipboardData.getData('text/x-gfm-html');
+    if (!gfm && !gfmHtml) return;
 
     e.preventDefault();
 
-    window.gl.utils.insertText(e.target, textBefore => {
+    // We have the original selection already converted to gfm
+    if (gfm) {
+      CopyAsGFM.insertPastedText(e.target, text, gfm);
+    } else {
+      // Due to the async copy call we are not able to produce gfm so we transform the cached HTML
+      const div = document.createElement('div');
+      div.innerHTML = gfmHtml;
+      CopyAsGFM.nodeToGFM(div)
+        .then(transformedGfm => {
+          CopyAsGFM.insertPastedText(e.target, text, transformedGfm);
+        })
+        .catch(() => {});
+    }
+  }
+
+  static insertPastedText(target, text, gfm) {
+    window.gl.utils.insertText(target, textBefore => {
       // If the text before the cursor contains an odd number of backticks,
       // we are either inside an inline code span that starts with 1 backtick
       // or a code block that starts with 3 backticks.