Merge branch 'es-module-copy_as_gfm' into 'master'

Convert copy_as_gfm into ES module and move to behaviors

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

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

 /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */
+
 import _ from 'underscore';
-import { insertText, getSelectedFragment, nodeMatchesSelector } from './lib/utils/common_utils';
-import { placeholderImage } from './lazy_loader';
+import { insertText, getSelectedFragment, nodeMatchesSelector } from '../lib/utils/common_utils';
+import { placeholderImage } from '../lazy_loader';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
@@ -284,7 +285,7 @@ const gfmRules = {
   },
 };
 
-class CopyAsGFM {
+export class CopyAsGFM {
   constructor() {
     $(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
     $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
@@ -469,7 +470,12 @@ class CopyAsGFM {
   }
 }
 
-window.gl = window.gl || {};
-window.gl.CopyAsGFM = CopyAsGFM;
+// Export CopyAsGFM as a global for rspec to access
+// see /spec/features/copy_as_gfm_spec.rb
+if (process.env.NODE_ENV !== 'production') {
+  window.CopyAsGFM = CopyAsGFM;
+}
 
-new CopyAsGFM();
+export default function initCopyAsGFM() {
+  return new CopyAsGFM();
+}

app/assets/javascripts/behaviors/index.js

 import './autosize';
 import './bind_in_out';
+import initCopyAsGFM from './copy_as_gfm';
 import './details_behavior';
 import installGlEmojiElement from './gl_emoji';
 import './quick_submit';
@@ -7,3 +8,4 @@ import './requires_input';
 import './toggler_behavior';
 
 installGlEmojiElement();
+initCopyAsGFM();

app/assets/javascripts/main.js

@@ -46,7 +46,6 @@ import './commits';
 import './compare';
 import './compare_autocomplete';
 import './confirm_danger_modal';
-import './copy_as_gfm';
 import './copy_to_clipboard';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';

app/assets/javascripts/shortcuts_issuable.js

@@ -4,6 +4,7 @@
 import _ from 'underscore';
 import 'mousetrap';
 import ShortcutsNavigation from './shortcuts_navigation';
+import { CopyAsGFM } from './behaviors/copy_as_gfm';
 
 export default class ShortcutsIssuable extends ShortcutsNavigation {
   constructor(isMergeRequest) {
@@ -33,8 +34,8 @@ export default class ShortcutsIssuable extends ShortcutsNavigation {
       return false;
     }
 
-    const el = window.gl.CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
-    const selected = window.gl.CopyAsGFM.nodeToGFM(el);
+    const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
+    const selected = CopyAsGFM.nodeToGFM(el);
 
     if (selected.trim() === '') {
       return false;

spec/features/copy_as_gfm_spec.rb

@@ -664,7 +664,7 @@ describe 'Copy as GFM', :js do
   def html_to_gfm(html, transformer = 'transformGFMSelection', target: nil)
     js = <<-JS.strip_heredoc
       (function(html) {
-        var transformer = window.gl.CopyAsGFM[#{transformer.inspect}];
+        var transformer = window.CopyAsGFM[#{transformer.inspect}];
 
         var node = document.createElement('div');
         $(html).each(function() { node.appendChild(this) });
@@ -678,7 +678,7 @@ describe 'Copy as GFM', :js do
         node = transformer(node, target);
         if (!node) return null;
 
-        return window.gl.CopyAsGFM.nodeToGFM(node);
+        return window.CopyAsGFM.nodeToGFM(node);
       })("#{escape_javascript(html)}")
     JS
     page.evaluate_script(js)

spec/javascripts/behaviors/copy_as_gfm_spec.js

+import { CopyAsGFM } from '~/behaviors/copy_as_gfm';
+
+describe('CopyAsGFM', () => {
+  describe('CopyAsGFM.pasteGFM', () => {
+    function callPasteGFM() {
+      const e = {
+        originalEvent: {
+          clipboardData: {
+            getData(mimeType) {
+              // When GFM code is copied, we put the regular plain text
+              // on the clipboard as `text/plain`, and the GFM as `text/x-gfm`.
+              // This emulates the behavior of `getData` with that data.
+              if (mimeType === 'text/plain') {
+                return 'code';
+              }
+              if (mimeType === 'text/x-gfm') {
+                return '`code`';
+              }
+              return null;
+            },
+          },
+        },
+        preventDefault() {},
+      };
+
+      CopyAsGFM.pasteGFM(e);
+    }
+
+    it('wraps pasted code when not already in code tags', () => {
+      spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
+        const insertedText = textFunc('This is code: ', '');
+        expect(insertedText).toEqual('`code`');
+      });
+
+      callPasteGFM();
+    });
+
+    it('does not wrap pasted code when already in code tags', () => {
+      spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
+        const insertedText = textFunc('This is code: `', '`');
+        expect(insertedText).toEqual('code');
+      });
+
+      callPasteGFM();
+    });
+  });
+});

spec/javascripts/copy_as_gfm_spec.js

-import '~/copy_as_gfm';
-
-(() => {
-  describe('gl.CopyAsGFM', () => {
-    describe('gl.CopyAsGFM.pasteGFM', () => {
-      function callPasteGFM() {
-        const e = {
-          originalEvent: {
-            clipboardData: {
-              getData(mimeType) {
-                // When GFM code is copied, we put the regular plain text
-                // on the clipboard as `text/plain`, and the GFM as `text/x-gfm`.
-                // This emulates the behavior of `getData` with that data.
-                if (mimeType === 'text/plain') {
-                  return 'code';
-                }
-                if (mimeType === 'text/x-gfm') {
-                  return '`code`';
-                }
-                return null;
-              },
-            },
-          },
-          preventDefault() {},
-        };
-
-        window.gl.CopyAsGFM.pasteGFM(e);
-      }
-
-      it('wraps pasted code when not already in code tags', () => {
-        spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
-          const insertedText = textFunc('This is code: ', '');
-          expect(insertedText).toEqual('`code`');
-        });
-
-        callPasteGFM();
-      });
-
-      it('does not wrap pasted code when already in code tags', () => {
-        spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
-          const insertedText = textFunc('This is code: `', '`');
-          expect(insertedText).toEqual('code');
-        });
-
-        callPasteGFM();
-      });
-    });
-  });
-})();

spec/javascripts/shortcuts_issuable_spec.js

-import '~/copy_as_gfm';
+import initCopyAsGFM from '~/behaviors/copy_as_gfm';
 import ShortcutsIssuable from '~/shortcuts_issuable';
 
+initCopyAsGFM();
+
 describe('ShortcutsIssuable', () => {
   const fixtureName = 'merge_requests/diff_comment.html.raw';
   preloadFixtures(fixtureName);