Merge branch 'tz-load-gfm-input-optionally' into 'master'

Made initialization for GFM input conditional

See merge request gitlab-org/gitlab!41653

app/assets/javascripts/behaviors/index.js

+import $ from 'jquery';
 import './autosize';
 import './bind_in_out';
 import './markdown/render_gfm';
-import initGFMInput from './markdown/gfm_auto_complete';
 import initCopyAsGFM from './markdown/copy_as_gfm';
 import initCopyToClipboard from './copy_to_clipboard';
 import './details_behavior';
@@ -15,9 +15,27 @@ import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resi
 import initSelect2Dropdowns from './select2';
 
 installGlEmojiElement();
-initGFMInput();
+
 initCopyAsGFM();
 initCopyToClipboard();
+
 initPageShortcuts();
 initCollapseSidebarOnWindowResize();
 initSelect2Dropdowns();
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.requestIdleCallback(
+    () => {
+      // Check if we have to Load GFM Input
+      const $gfmInputs = $('.js-gfm-input:not(.js-gfm-input-initialized)');
+      if ($gfmInputs.length) {
+        import(/* webpackChunkName: 'initGFMInput' */ './markdown/gfm_auto_complete')
+          .then(({ default: initGFMInput }) => {
+            initGFMInput($gfmInputs);
+          })
+          .catch(() => {});
+      }
+    },
+    { timeout: 500 },
+  );
+});

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

@@ -2,8 +2,8 @@ import $ from 'jquery';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
-export default function initGFMInput() {
-  $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => {
+export default function initGFMInput($els) {
+  $els.each((i, el) => {
     const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
     const enableGFM = parseBoolean(el.dataset.supportsAutocomplete);
 

app/assets/javascripts/gfm_auto_complete.js

@@ -71,12 +71,15 @@ class GfmAutoComplete {
   setupLifecycle() {
     this.input.each((i, input) => {
       const $input = $(input);
+      if (!$input.hasClass('js-gfm-input-initialized')) {
         $input.off('focus.setupAtWho').on('focus.setupAtWho', this.setupAtWho.bind(this, $input));
         $input.on('change.atwho', () => input.dispatchEvent(new Event('input')));
         // This triggers at.js again
         // Needed for quick actions with suffixes (ex: /label ~)
         $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
         $input.on('clear-commands-cache.atwho', () => this.clearCache());
+        $input.addClass('js-gfm-input-initialized');
+      }
     });
   }
 

app/assets/javascripts/notes/components/comment_form.vue

@@ -380,7 +380,7 @@ export default {
                 dir="auto"
                 :disabled="isSubmitting"
                 name="note[note]"
-                class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
+                class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area qa-comment-input"
                 data-supports-quick-actions="true"
                 :aria-label="__('Description')"
                 :placeholder="__('Write a comment or drag your files here…')"

app/assets/javascripts/notes/components/note_form.vue

@@ -337,7 +337,7 @@ export default {
           v-model="updatedNoteBody"
           :data-supports-quick-actions="!isEditing"
           name="note[note]"
-          class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
+          class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form qa-reply-input"
           dir="auto"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -41,7 +41,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
           >
             <textarea
               aria-label="Description"
-              class="note-textarea js-gfm-input js-autosize markdown-area"
+              class="note-textarea js-gfm-input js-autosize markdown-area js-gfm-input-initialized"
               data-qa-selector="snippet_description_field"
               data-supports-quick-actions="false"
               dir="auto"