Revert "Merge branch '56989-reduce-bundle-size-by-loading-markdown-it-only-when-needed' into 'master'"revert-3f3067fc

This reverts merge request !24763

5 files changed, 74 insertions, 177 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 52d9f2f0322..947d019c725 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -1,5 +1,8 @@
 import $ from 'jquery';
+import { DOMParser } from 'prosemirror-model';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
+import schema from './schema';
+import markdownSerializer from './serializer';
 
 export class CopyAsGFM {
   constructor() {
@@ -36,13 +39,9 @@ export class CopyAsGFM {
     div.appendChild(el.cloneNode(true));
     const html = div.innerHTML;
 
-    CopyAsGFM.nodeToGFM(el)
-      .then(res => {
-        clipboardData.setData('text/plain', el.textContent);
-        clipboardData.setData('text/x-gfm', res);
-        clipboardData.setData('text/html', html);
-      })
-      .catch(() => {});
+    clipboardData.setData('text/plain', el.textContent);
+    clipboardData.setData('text/x-gfm', this.nodeToGFM(el));
+    clipboardData.setData('text/html', html);
   }
 
   static pasteGFM(e) {
@@ -138,21 +137,11 @@ export class CopyAsGFM {
   }
 
   static nodeToGFM(node) {
-    return Promise.all([
-      import(/* webpackChunkName: 'gfm_copy_extra' */ 'prosemirror-model'),
-      import(/* webpackChunkName: 'gfm_copy_extra' */ './schema'),
-      import(/* webpackChunkName: 'gfm_copy_extra' */ './serializer'),
-    ])
-      .then(([prosemirrorModel, schema, markdownSerializer]) => {
-        const { DOMParser } = prosemirrorModel;
-        const wrapEl = document.createElement('div');
-        wrapEl.appendChild(node.cloneNode(true));
-        const doc = DOMParser.fromSchema(schema.default).parse(wrapEl);
-
-        const res = markdownSerializer.default.serialize(doc);
-        return res;
-      })
-      .catch(() => {});
+    const wrapEl = document.createElement('div');
+    wrapEl.appendChild(node.cloneNode(true));
+    const doc = DOMParser.fromSchema(schema).parse(wrapEl);
+
+    return markdownSerializer.serialize(doc);
   }
 }
 
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
index 680f2031409..0eb067d4963 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
@@ -64,30 +64,26 @@ export default class ShortcutsIssuable extends Shortcuts {
     const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
     const blockquoteEl = document.createElement('blockquote');
     blockquoteEl.appendChild(el);
-    CopyAsGFM.nodeToGFM(blockquoteEl)
-      .then(text => {
-        if (text.trim() === '') {
-          return false;
-        }
-
-        // If replyField already has some content, add a newline before our quote
-        const separator = ($replyField.val().trim() !== '' && '\n\n') || '';
-        $replyField
-          .val((a, current) => `${current}${separator}${text}\n\n`)
-          .trigger('input')
-          .trigger('change');
-
-        // Trigger autosize
-        const event = document.createEvent('Event');
-        event.initEvent('autosize:update', true, false);
-        $replyField.get(0).dispatchEvent(event);
-
-        // Focus the input field
-        $replyField.focus();
+    const text = CopyAsGFM.nodeToGFM(blockquoteEl);
 
-        return false;
-      })
-      .catch(() => {});
+    if (text.trim() === '') {
+      return false;
+    }
+
+    // If replyField already has some content, add a newline before our quote
+    const separator = ($replyField.val().trim() !== '' && '\n\n') || '';
+    $replyField
+      .val((a, current) => `${current}${separator}${text}\n\n`)
+      .trigger('input')
+      .trigger('change');
+
+    // Trigger autosize
+    const event = document.createEvent('Event');
+    event.initEvent('autosize:update', true, false);
+    $replyField.get(0).dispatchEvent(event);
+
+    // Focus the input field
+    $replyField.focus();
 
     return false;
   }
diff --git a/spec/features/markdown/copy_as_gfm_spec.rb b/spec/features/markdown/copy_as_gfm_spec.rb
index 60ddb02da2c..16754035076 100644
--- a/spec/features/markdown/copy_as_gfm_spec.rb
+++ b/spec/features/markdown/copy_as_gfm_spec.rb
@@ -843,7 +843,6 @@ describe 'Copy as GFM', :js do
     def verify(selector, gfm, target: nil)
       html = html_for_selector(selector)
       output_gfm = html_to_gfm(html, 'transformCodeSelection', target: target)
-      wait_for_requests
       expect(output_gfm.strip).to eq(gfm.strip)
     end
   end
@@ -862,9 +861,6 @@ describe 'Copy as GFM', :js do
   def html_to_gfm(html, transformer = 'transformGFMSelection', target: nil)
     js = <<~JS
       (function(html) {
-        // Setting it off so the import already starts
-        window.CopyAsGFM.nodeToGFM(document.createElement('div'));
-
         var transformer = window.CopyAsGFM[#{transformer.inspect}];
 
         var node = document.createElement('div');
@@ -879,18 +875,9 @@ describe 'Copy as GFM', :js do
         node = transformer(node, target);
         if (!node) return null;
 
-
-        window.gfmCopytestRes = null;
-        window.CopyAsGFM.nodeToGFM(node)
-        .then((res) => {
-          window.gfmCopytestRes = res;
-        });
+        return window.CopyAsGFM.nodeToGFM(node);
       })("#{escape_javascript(html)}")
     JS
-    page.execute_script(js)
-
-    loop until page.evaluate_script('window.gfmCopytestRes !== null')
-
-    page.evaluate_script('window.gfmCopytestRes')
+    page.evaluate_script(js)
   end
 end
diff --git a/spec/javascripts/behaviors/copy_as_gfm_spec.js b/spec/javascripts/behaviors/copy_as_gfm_spec.js
index ca849f75860..6179a02ce16 100644
--- a/spec/javascripts/behaviors/copy_as_gfm_spec.js
+++ b/spec/javascripts/behaviors/copy_as_gfm_spec.js
@@ -1,4 +1,4 @@
-import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
+import { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
 
 describe('CopyAsGFM', () => {
   describe('CopyAsGFM.pasteGFM', () => {
@@ -79,46 +79,27 @@ describe('CopyAsGFM', () => {
       return clipboardData;
     };
 
-    beforeAll(done => {
-      initCopyAsGFM();
-
-      // Fake call to nodeToGfm so the import of lazy bundle happened
-      CopyAsGFM.nodeToGFM(document.createElement('div'))
-        .then(() => {
-          done();
-        })
-        .catch(done.fail);
-    });
-
     beforeEach(() => spyOn(clipboardData, 'setData'));
 
     describe('list handling', () => {
-      it('uses correct gfm for unordered lists', done => {
+      it('uses correct gfm for unordered lists', () => {
         const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'UL');
-
         spyOn(window, 'getSelection').and.returnValue(selection);
         simulateCopy();
 
-        setTimeout(() => {
-          const expectedGFM = '* List Item1\n\n* List Item2';
+        const expectedGFM = '* List Item1\n\n* List Item2';
 
-          expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);
-          done();
-        });
+        expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);
       });
 
-      it('uses correct gfm for ordered lists', done => {
+      it('uses correct gfm for ordered lists', () => {
         const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'OL');
-
         spyOn(window, 'getSelection').and.returnValue(selection);
         simulateCopy();
 
-        setTimeout(() => {
-          const expectedGFM = '1. List Item1\n\n1. List Item2';
+        const expectedGFM = '1. List Item1\n\n1. List Item2';
 
-          expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);
-          done();
-        });
+        expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);
       });
     });
   });
diff --git a/spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js b/spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js
index 4843a0386b5..fe827bb1e18 100644
--- a/spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js
@@ -3,26 +3,17 @@
 */
 
 import $ from 'jquery';
-import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
+import initCopyAsGFM from '~/behaviors/markdown/copy_as_gfm';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 
+initCopyAsGFM();
+
 const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form';
 
 describe('ShortcutsIssuable', function() {
   const fixtureName = 'snippets/show.html.raw';
   preloadFixtures(fixtureName);
 
-  beforeAll(done => {
-    initCopyAsGFM();
-
-    // Fake call to nodeToGfm so the import of lazy bundle happened
-    CopyAsGFM.nodeToGFM(document.createElement('div'))
-      .then(() => {
-        done();
-      })
-      .catch(done.fail);
-  });
-
   beforeEach(() => {
     loadFixtures(fixtureName);
     $('body').append(
@@ -72,22 +63,17 @@ describe('ShortcutsIssuable', function() {
         stubSelection('<p>Selected text.</p>');
       });
 
-      it('leaves existing input intact', done => {
+      it('leaves existing input intact', () => {
         $(FORM_SELECTOR).val('This text was already here.');
 
         expect($(FORM_SELECTOR).val()).toBe('This text was already here.');
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe(
-            'This text was already here.\n\n> Selected text.\n\n',
-          );
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('This text was already here.\n\n> Selected text.\n\n');
       });
 
-      it('triggers `input`', done => {
+      it('triggers `input`', () => {
         let triggered = false;
         $(FORM_SELECTOR).on('input', () => {
           triggered = true;
@@ -95,48 +81,36 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(triggered).toBe(true);
-          done();
-        });
+        expect(triggered).toBe(true);
       });
 
-      it('triggers `focus`', done => {
+      it('triggers `focus`', () => {
         const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
     });
 
     describe('with a one-line selection', () => {
-      it('quotes the selection', done => {
+      it('quotes the selection', () => {
         stubSelection('<p>This text has been selected.</p>');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('> This text has been selected.\n\n');
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('> This text has been selected.\n\n');
       });
     });
 
     describe('with a multi-line selection', () => {
-      it('quotes the selected lines as a group', done => {
+      it('quotes the selected lines as a group', () => {
         stubSelection(
           '<p>Selected line one.</p>\n<p>Selected line two.</p>\n<p>Selected line three.</p>',
         );
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe(
-            '> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n',
-          );
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe(
+          '> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n',
+        );
       });
     });
 
@@ -145,23 +119,17 @@ describe('ShortcutsIssuable', function() {
         stubSelection('<p>Selected text.</p>', true);
       });
 
-      it('does not add anything to the input', done => {
+      it('does not add anything to the input', () => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('');
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('');
       });
 
-      it('triggers `focus`', done => {
+      it('triggers `focus`', () => {
         const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
     });
 
@@ -170,26 +138,20 @@ describe('ShortcutsIssuable', function() {
         stubSelection('<div class="md">Selected text.</div><p>Invalid selected text.</p>', true);
       });
 
-      it('only adds the valid part to the input', done => {
+      it('only adds the valid part to the input', () => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('> Selected text.\n\n');
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('> Selected text.\n\n');
       });
 
-      it('triggers `focus`', done => {
+      it('triggers `focus`', () => {
         const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
 
-      it('triggers `input`', done => {
+      it('triggers `input`', () => {
         let triggered = false;
         $(FORM_SELECTOR).on('input', () => {
           triggered = true;
@@ -197,10 +159,7 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(triggered).toBe(true);
-          done();
-        });
+        expect(triggered).toBe(true);
       });
     });
 
@@ -224,26 +183,20 @@ describe('ShortcutsIssuable', function() {
         });
       });
 
-      it('adds the quoted selection to the input', done => {
+      it('adds the quoted selection to the input', () => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('> *Selected text.*\n\n');
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('> *Selected text.*\n\n');
       });
 
-      it('triggers `focus`', done => {
+      it('triggers `focus`', () => {
         const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
 
-      it('triggers `input`', done => {
+      it('triggers `input`', () => {
         let triggered = false;
         $(FORM_SELECTOR).on('input', () => {
           triggered = true;
@@ -251,10 +204,7 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(triggered).toBe(true);
-          done();
-        });
+        expect(triggered).toBe(true);
       });
     });
 
@@ -278,23 +228,17 @@ describe('ShortcutsIssuable', function() {
         });
       });
 
-      it('does not add anything to the input', done => {
+      it('does not add anything to the input', () => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('');
-          done();
-        });
+        expect($(FORM_SELECTOR).val()).toBe('');
       });
 
-      it('triggers `focus`', done => {
+      it('triggers `focus`', () => {
         const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
     });
   });