Reduce Bundle Size by lazy loading markdown-it

2 files changed, 45 insertions, 30 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 947d019c725..52d9f2f0322 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -1,8 +1,5 @@
 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() {
@@ -39,9 +36,13 @@ export class CopyAsGFM {
     div.appendChild(el.cloneNode(true));
     const html = div.innerHTML;
 
-    clipboardData.setData('text/plain', el.textContent);
-    clipboardData.setData('text/x-gfm', this.nodeToGFM(el));
-    clipboardData.setData('text/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(() => {});
   }
 
   static pasteGFM(e) {
@@ -137,11 +138,21 @@ export class CopyAsGFM {
   }
 
   static nodeToGFM(node) {
-    const wrapEl = document.createElement('div');
-    wrapEl.appendChild(node.cloneNode(true));
-    const doc = DOMParser.fromSchema(schema).parse(wrapEl);
-
-    return markdownSerializer.serialize(doc);
+    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(() => {});
   }
 }
 
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
index 0eb067d4963..680f2031409 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
@@ -64,26 +64,30 @@ export default class ShortcutsIssuable extends Shortcuts {
     const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
     const blockquoteEl = document.createElement('blockquote');
     blockquoteEl.appendChild(el);
-    const text = CopyAsGFM.nodeToGFM(blockquoteEl);
-
-    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);
+    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();
 
-    // Focus the input field
-    $replyField.focus();
+        return false;
+      })
+      .catch(() => {});
 
     return false;
   }