From 183ec09266eaa4110ebda1f02c71299417a1f4c3 Mon Sep 17 00:00:00 2001
From: Himanshu Kapoor <hkapoor@gitlab.com>
Date: Tue, 14 Mar 2023 15:01:21 +0700
Subject: [PATCH 1/2] Add support for content editor in replies

Add support for using content editor to edit and create new replies.
---
 .../notes/components/note_body.vue            |  14 ---
 .../notes/components/note_form.vue            | 107 +++++++++--------
 .../notes/components/noteable_note.vue        |   2 -
 .../components/markdown/markdown_editor.vue   |   2 +-
 .../notes/components/comment_form_spec.js     |   3 +
 .../notes/components/note_body_spec.js        |   8 --
 .../notes/components/note_form_spec.js        | 108 ++++--------------
 .../markdown/markdown_editor_spec.js          |   4 +-
 8 files changed, 82 insertions(+), 166 deletions(-)

diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index eef011db7d2926..b4e5129ca0efc0 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -5,7 +5,6 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
-import autosave from '../mixins/autosave';
 import NoteAttachment from './note_attachment.vue';
 import NoteAwardsList from './note_awards_list.vue';
 import NoteEditedText from './note_edited_text.vue';
@@ -22,7 +21,6 @@ export default {
   directives: {
     SafeHtml,
   },
-  mixins: [autosave],
   props: {
     note: {
       type: Object,
@@ -96,21 +94,9 @@ export default {
   },
   mounted() {
     this.renderGFM();
-
-    if (this.isEditing) {
-      this.initAutoSave(this.note);
-    }
   },
   updated() {
     this.renderGFM();
-
-    if (this.isEditing) {
-      if (!this.autosave) {
-        this.initAutoSave(this.note);
-      } else {
-        this.setAutoSave();
-      }
-    }
   },
   methods: {
     ...mapActions([
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index b6ede10d02b7ae..fb1dc8efc81ac6 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,10 +1,10 @@
 <script>
 import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { getDraft, updateDraft } from '~/lib/utils/autosave';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import glFeaturesFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
 import issuableStateMixin from '../mixins/issuable_state';
 import resolvable from '../mixins/resolvable';
@@ -15,13 +15,13 @@ export default {
   i18n: COMMENT_FORM,
   name: 'NoteForm',
   components: {
-    MarkdownField,
+    MarkdownEditor,
     CommentFieldLayout,
     GlButton,
     GlSprintf,
     GlLink,
   },
-  mixins: [issuableStateMixin, resolvable],
+  mixins: [issuableStateMixin, resolvable, glFeaturesFlagMixin()],
   props: {
     noteBody: {
       type: String,
@@ -95,20 +95,22 @@ export default {
     },
   },
   data() {
-    let updatedNoteBody = this.noteBody;
-
-    if (!updatedNoteBody && this.autosaveKey) {
-      updatedNoteBody = getDraft(this.autosaveKey) || '';
-    }
-
     return {
-      updatedNoteBody,
+      updatedNoteBody: this.noteBody,
       conflictWhileEditing: false,
       isSubmitting: false,
       isResolving: this.resolveDiscussion,
       isUnresolving: !this.resolveDiscussion,
       resolveAsThread: true,
       isSubmittingWithKeydown: false,
+      formFieldProps: {
+        id: 'note_note',
+        name: 'note[note]',
+        'aria-label': __('Reply to comment'),
+        placeholder: this.$options.i18n.bodyPlaceholder,
+        class: 'note-textarea js-gfm-input js-note-text markdown-area js-vue-issue-note-form',
+        'data-qa-selector': 'reply_field',
+      },
     };
   },
   computed: {
@@ -135,11 +137,6 @@ export default {
           .some((n) => n.current_user?.can_resolve_discussion) || this.isDraft
       );
     },
-    textareaPlaceholder() {
-      return this.discussionNote?.internal
-        ? this.$options.i18n.bodyPlaceholderInternal
-        : this.$options.i18n.bodyPlaceholder;
-    },
     noteHash() {
       if (this.noteId) {
         return `#note_${this.noteId}`;
@@ -214,8 +211,17 @@ export default {
         placeholder: { link: ['startTag', 'endTag'] },
       };
     },
+    enableContentEditor() {
+      return Boolean(this.glFeatures.contentEditorOnIssues);
+    },
   },
   watch: {
+    isSubmitting(val) {
+      if (val) this.formFieldProps.disabled = 'disabled';
+      else delete this.formFieldProps.disabled;
+
+      this.formFieldProps = { ...this.formFieldProps };
+    },
     noteBody() {
       if (this.updatedNoteBody === this.noteBody) {
         this.updatedNoteBody = this.noteBody;
@@ -225,7 +231,7 @@ export default {
     },
   },
   mounted() {
-    this.$refs.textarea.focus();
+    this.updatePlaceholder();
   },
   methods: {
     ...mapActions(['toggleResolveNote']),
@@ -252,19 +258,21 @@ export default {
     },
     cancelHandler(shouldConfirm = false) {
       // check if any dropdowns are active before sending the cancelation event
-      if (!this.$refs.textarea.classList.contains('at-who-active')) {
+      if (
+        !this.$refs.markdownEditor.$el
+          .querySelector('textarea')
+          ?.classList.contains('at-who-active')
+      ) {
         this.$emit('cancelForm', shouldConfirm, this.noteBody !== this.updatedNoteBody);
       }
     },
-    onInput() {
-      if (this.isSubmittingWithKeydown) {
-        return;
-      }
-
-      if (this.autosaveKey) {
-        const { autosaveKey, updatedNoteBody: text } = this;
-        updateDraft(autosaveKey, text);
-      }
+    updatePlaceholder() {
+      this.formFieldProps.placeholder = this.discussionNote?.internal
+        ? this.$options.i18n.bodyPlaceholderInternal
+        : this.$options.i18n.bodyPlaceholder;
+    },
+    onInput(value) {
+      this.updatedNoteBody = value;
     },
     handleKeySubmit() {
       if (this.showBatchCommentsActions) {
@@ -273,6 +281,7 @@ export default {
         this.isSubmittingWithKeydown = true;
         this.handleUpdate();
       }
+      this.updatedNoteBody = '';
     },
     handleUpdate(shouldResolve) {
       const beforeSubmitDiscussionState = this.discussionResolved;
@@ -333,41 +342,31 @@ export default {
         :noteable-data="getNoteableData"
         :is-internal-note="discussion.internal"
       >
-        <markdown-field
-          :markdown-preview-path="markdownPreviewPath"
+        <markdown-editor
+          ref="markdownEditor"
+          :enable-content-editor="enableContentEditor"
+          :value="updatedNoteBody"
+          :render-markdown-path="markdownPreviewPath"
           :markdown-docs-path="markdownDocsPath"
-          :quick-actions-docs-path="quickActionsDocsPath"
           :line="line"
           :lines="lines"
-          :note="discussionNote"
           :can-suggest="canSuggest"
           :add-spacing-classes="false"
           :help-page-path="helpPagePath"
+          :note="discussionNote"
+          :form-field-props="formFieldProps"
           :show-suggest-popover="showSuggestPopover"
-          :textarea-value="updatedNoteBody"
+          :quick-actions-docs-path="quickActionsDocsPath"
+          :autosave-key="autosaveKey"
+          supports-quick-actions
+          autofocus
+          @keydown.meta.enter="handleKeySubmit()"
+          @keydown.ctrl.enter="handleKeySubmit()"
+          @keydown.exact.up="editMyLastNote()"
+          @keydown.exact.esc="cancelHandler(true)"
+          @input="onInput"
           @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
-        >
-          <template #textarea>
-            <textarea
-              id="note_note"
-              ref="textarea"
-              v-model="updatedNoteBody"
-              :disabled="isSubmitting"
-              data-supports-quick-actions="true"
-              name="note[note]"
-              class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form"
-              data-qa-selector="reply_field"
-              dir="auto"
-              :aria-label="__('Reply to comment')"
-              :placeholder="textareaPlaceholder"
-              @keydown.meta.enter="handleKeySubmit()"
-              @keydown.ctrl.enter="handleKeySubmit()"
-              @keydown.exact.up="editMyLastNote()"
-              @keydown.exact.esc="cancelHandler(true)"
-              @input="onInput"
-            ></textarea>
-          </template>
-        </markdown-field>
+        />
       </comment-field-layout>
       <div class="note-form-actions">
         <template v-if="showBatchCommentsActions">
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 80025d6f98ac2a..d9340556012be5 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -294,7 +294,6 @@ export default {
       this.isRequesting = false;
       this.oldContent = null;
       renderGFM(this.$refs.noteBody.$el);
-      this.$refs.noteBody.resetAutoSave();
       this.$emit('updateSuccess');
     },
     formUpdateHandler({ noteText, callback, resolveDiscussion }) {
@@ -383,7 +382,6 @@ export default {
         });
         if (!confirmed) return;
       }
-      this.$refs.noteBody.resetAutoSave();
       if (this.oldContent) {
         // eslint-disable-next-line vue/no-mutating-props
         this.note.note_html = this.oldContent;
diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
index 93583907a11a55..24a67ad9342adb 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
@@ -97,6 +97,7 @@ export default {
   mounted() {
     this.autofocusTextarea();
 
+    this.$emit('input', this.markdown);
     this.saveDraft();
   },
   methods: {
@@ -176,7 +177,6 @@ export default {
       :quick-actions-docs-path="quickActionsDocsPath"
       :show-content-editor-switcher="enableContentEditor"
       :drawio-enabled="drawioEnabled"
-      class="bordered-box"
       @enableContentEditor="onEditingModeChange('contentEditor')"
     >
       <template #textarea>
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 062cd0986407b8..891b5c751fb002 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -5,6 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { createAlert } from '~/alert';
@@ -27,6 +28,8 @@ jest.mock('~/alert');
 Vue.use(Vuex);
 
 describe('issue_comment_form component', () => {
+  useLocalStorageSpy();
+
   let store;
   let wrapper;
   let axiosMock;
diff --git a/spec/frontend/notes/components/note_body_spec.js b/spec/frontend/notes/components/note_body_spec.js
index b4f185004bba1e..c4f8e50b969c1c 100644
--- a/spec/frontend/notes/components/note_body_spec.js
+++ b/spec/frontend/notes/components/note_body_spec.js
@@ -7,10 +7,7 @@ import NoteAwardsList from '~/notes/components/note_awards_list.vue';
 import NoteForm from '~/notes/components/note_form.vue';
 import createStore from '~/notes/stores';
 import notes from '~/notes/stores/modules/index';
-import Autosave from '~/autosave';
-
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
-
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
 jest.mock('~/autosave');
@@ -82,11 +79,6 @@ describe('issue_note_body component', () => {
       expect(wrapper.findComponent(NoteForm).props('saveButtonTitle')).toBe(buttonText);
     });
 
-    it('adds autosave', () => {
-      // passing undefined instead of an element because of shallowMount
-      expect(Autosave).toHaveBeenCalledWith(undefined, ['Note', note.noteable_type, note.id]);
-    });
-
     describe('isInternalNote', () => {
       beforeEach(() => {
         wrapper.setProps({ isInternalNote: true });
diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js
index 59362e18098778..12c3b154fc7801 100644
--- a/spec/frontend/notes/components/note_form_spec.js
+++ b/spec/frontend/notes/components/note_form_spec.js
@@ -2,7 +2,6 @@ import { GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
-import { getDraft, updateDraft } from '~/lib/utils/autosave';
 import NoteForm from '~/notes/components/note_form.vue';
 import createStore from '~/notes/stores';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -12,30 +11,25 @@ import { noteableDataMock, notesDataMock, discussionMock, note } from '../mock_d
 jest.mock('~/lib/utils/autosave');
 
 describe('issue_note_form component', () => {
-  const dummyAutosaveKey = 'some-autosave-key';
-  const dummyDraft = 'dummy draft content';
-
   let store;
   let wrapper;
   let props;
+  let features;
 
   const createComponentWrapper = () => {
     return mount(NoteForm, {
       store,
       propsData: props,
+      provide: {
+        glFeatures: features || {},
+      },
     });
   };
 
   const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
 
   beforeEach(() => {
-    getDraft.mockImplementation((key) => {
-      if (key === dummyAutosaveKey) {
-        return dummyDraft;
-      }
-
-      return null;
-    });
+    features = {};
 
     store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
@@ -68,6 +62,20 @@ describe('issue_note_form component', () => {
     });
   });
 
+  it('hides content editor switcher if feature flag content_editor_on_issues is off', () => {
+    features = { contentEditorOnIssues: false };
+    wrapper = createComponentWrapper();
+
+    expect(wrapper.text()).not.toContain('Rich text');
+  });
+
+  it('shows content editor switcher if feature flag content_editor_on_issues is on', () => {
+    features = { contentEditorOnIssues: true };
+    wrapper = createComponentWrapper();
+
+    expect(wrapper.text()).toContain('Rich text');
+  });
+
   describe('conflicts editing', () => {
     beforeEach(() => {
       wrapper = createComponentWrapper();
@@ -117,13 +125,15 @@ describe('issue_note_form component', () => {
       ${true}  | ${'Write an internal note or drag your files here…'}
     `(
       'should set correct textarea placeholder text when discussion confidentiality is $internal',
-      ({ internal, placeholder }) => {
+      async ({ internal, placeholder }) => {
         props.note = {
           ...note,
           internal,
         };
         wrapper = createComponentWrapper();
 
+        await nextTick();
+
         expect(wrapper.find('textarea').attributes('placeholder')).toBe(placeholder);
       },
     );
@@ -204,7 +214,7 @@ describe('issue_note_form component', () => {
         });
         await nextTick();
 
-        const textareaEl = wrapper.vm.$refs.textarea;
+        const textareaEl = wrapper.vm.$refs.markdownEditor.$el.querySelector('textarea');
         const cancelButton = findCancelButton();
         textareaEl.classList.add(AT_WHO_ACTIVE_CLASS);
         cancelButton.vm.$emit('click');
@@ -229,78 +239,6 @@ describe('issue_note_form component', () => {
     });
   });
 
-  describe('with autosaveKey', () => {
-    describe('with draft', () => {
-      beforeEach(() => {
-        Object.assign(props, {
-          noteBody: '',
-          autosaveKey: dummyAutosaveKey,
-        });
-        wrapper = createComponentWrapper();
-
-        return nextTick();
-      });
-
-      it('displays the draft in textarea', () => {
-        const textarea = wrapper.find('textarea');
-
-        expect(textarea.element.value).toBe(dummyDraft);
-      });
-    });
-
-    describe('without draft', () => {
-      beforeEach(() => {
-        Object.assign(props, {
-          noteBody: '',
-          autosaveKey: 'some key without draft',
-        });
-        wrapper = createComponentWrapper();
-
-        return nextTick();
-      });
-
-      it('leaves the textarea empty', () => {
-        const textarea = wrapper.find('textarea');
-
-        expect(textarea.element.value).toBe('');
-      });
-    });
-
-    it('updates the draft if textarea content changes', () => {
-      Object.assign(props, {
-        noteBody: '',
-        autosaveKey: dummyAutosaveKey,
-      });
-      wrapper = createComponentWrapper();
-      const textarea = wrapper.find('textarea');
-      const dummyContent = 'some new content';
-
-      textarea.setValue(dummyContent);
-
-      expect(updateDraft).toHaveBeenCalledWith(dummyAutosaveKey, dummyContent);
-    });
-
-    it('does not save draft when ctrl+enter is pressed', () => {
-      const options = {
-        noteBody: '',
-        autosaveKey: dummyAutosaveKey,
-      };
-
-      props = { ...props, ...options };
-      wrapper = createComponentWrapper();
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ isSubmittingWithKeydown: true });
-
-      const textarea = wrapper.find('textarea');
-      textarea.setValue('some content');
-      textarea.trigger('keydown.enter', { metaKey: true });
-
-      expect(updateDraft).not.toHaveBeenCalled();
-    });
-  });
-
   describe('with batch comments', () => {
     beforeEach(() => {
       store.registerModule('batchComments', batchComments());
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
index 681ff6c8dd341d..7bda37bcaa803c 100644
--- a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
@@ -275,7 +275,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
 
       await findTextarea().setValue(newValue);
 
-      expect(wrapper.emitted('input')).toEqual([[newValue]]);
+      expect(wrapper.emitted('input')).toEqual([[value], [newValue]]);
     });
 
     it('autosaves the markdown value to local storage', async () => {
@@ -370,7 +370,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
 
       await findContentEditor().vm.$emit('change', { markdown: newValue });
 
-      expect(wrapper.emitted('input')).toEqual([[newValue]]);
+      expect(wrapper.emitted('input')).toEqual([[value], [newValue]]);
     });
 
     it('autosaves the content editor value to local storage', async () => {
-- 
GitLab


From 3e2a11af0c0c2b2d83e63ba4ec356a5ad7f7708a Mon Sep 17 00:00:00 2001
From: Himanshu Kapoor <hkapoor@gitlab.com>
Date: Thu, 16 Mar 2023 09:19:46 +0700
Subject: [PATCH 2/2] Fix autosave in diff notes

---
 .../diffs/components/diff_line_note_form.vue  | 40 +++++++++++--------
 .../notes/components/note_form.vue            |  7 +---
 .../javascripts/notes/mixins/autosave.js      | 30 --------------
 .../components/markdown/markdown_editor.vue   |  1 +
 .../components/diff_line_note_form_spec.js    | 17 --------
 5 files changed, 26 insertions(+), 69 deletions(-)
 delete mode 100644 app/assets/javascripts/notes/mixins/autosave.js

diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index f63ab1bb0675d9..43ba527dad8bd4 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -8,7 +8,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
 import { commentLineOptions, formatLineRange } from '~/notes/components/multiline_comment_utils';
 import NoteForm from '~/notes/components/note_form.vue';
-import autosave from '~/notes/mixins/autosave';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import {
   DIFF_NOTE_TYPE,
   INLINE_DIFF_LINES_KEY,
@@ -21,7 +21,7 @@ export default {
     NoteForm,
     MultilineCommentForm,
   },
-  mixins: [autosave, diffLineNoteFormMixin, glFeatureFlagsMixin()],
+  mixins: [diffLineNoteFormMixin, glFeatureFlagsMixin()],
   props: {
     diffFileHash: {
       type: String,
@@ -146,6 +146,27 @@ export default {
 
       return lines;
     },
+    autosaveKey() {
+      if (!this.isLoggedIn) return '';
+
+      const {
+        id,
+        noteable_type: noteableTypeUnderscored,
+        noteableType,
+        diff_head_sha: diffHeadSha,
+        source_project_id: sourceProjectId,
+      } = this.noteableData;
+
+      return [
+        s__('Autosave|Note'),
+        capitalizeFirstCharacter(noteableTypeUnderscored || noteableType),
+        id,
+        diffHeadSha,
+        DIFF_NOTE_TYPE,
+        sourceProjectId,
+        this.line.line_code,
+      ].join('/');
+    },
   },
   created() {
     if (this.range) {
@@ -155,17 +176,6 @@ export default {
     }
   },
   mounted() {
-    if (this.isLoggedIn) {
-      const keys = [
-        this.noteableData.diff_head_sha,
-        DIFF_NOTE_TYPE,
-        this.noteableData.source_project_id,
-        this.line.line_code,
-      ];
-
-      this.initAutoSave(this.noteableData, keys);
-    }
-
     if (this.selectedCommentPosition) {
       this.commentLineStart = this.selectedCommentPosition.start;
     }
@@ -196,9 +206,6 @@ export default {
         lineCode: this.line.line_code,
         fileHash: this.diffFileHash,
       });
-      this.$nextTick(() => {
-        this.resetAutoSave();
-      });
     }),
     handleSaveNote(note) {
       return this.saveDiffDiscussion({ note, formData: this.formData }).then(() =>
@@ -232,6 +239,7 @@ export default {
       :diff-file="diffFile"
       :show-suggest-popover="showSuggestPopover"
       :save-button-title="__('Comment')"
+      :autosave-key="autosaveKey"
       class="diff-comment-form gl-mt-3"
       @handleFormUpdateAddToReview="addToReview"
       @cancelForm="handleCancelCommentForm"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index fb1dc8efc81ac6..bde645a4f4171f 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -216,12 +216,6 @@ export default {
     },
   },
   watch: {
-    isSubmitting(val) {
-      if (val) this.formFieldProps.disabled = 'disabled';
-      else delete this.formFieldProps.disabled;
-
-      this.formFieldProps = { ...this.formFieldProps };
-    },
     noteBody() {
       if (this.updatedNoteBody === this.noteBody) {
         this.updatedNoteBody = this.noteBody;
@@ -358,6 +352,7 @@ export default {
           :show-suggest-popover="showSuggestPopover"
           :quick-actions-docs-path="quickActionsDocsPath"
           :autosave-key="autosaveKey"
+          :disabled="isSubmitting"
           supports-quick-actions
           autofocus
           @keydown.meta.enter="handleKeySubmit()"
diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js
deleted file mode 100644
index 17272d5abef2d1..00000000000000
--- a/app/assets/javascripts/notes/mixins/autosave.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { s__ } from '~/locale';
-import Autosave from '~/autosave';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-
-export default {
-  methods: {
-    initAutoSave(noteable, extraKeys = []) {
-      let keys = [
-        s__('Autosave|Note'),
-        capitalizeFirstCharacter(noteable.noteable_type || noteable.noteableType),
-        noteable.id,
-      ];
-
-      if (extraKeys) {
-        keys = keys.concat(extraKeys);
-      }
-
-      this.autosave = new Autosave(this.$refs.noteForm.$refs.textarea, keys);
-    },
-    resetAutoSave() {
-      this.autosave.reset();
-    },
-    setAutoSave() {
-      this.autosave.save();
-    },
-    disposeAutoSave() {
-      this.autosave.dispose();
-    },
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
index 24a67ad9342adb..5bfc4e3c7b5080 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
@@ -178,6 +178,7 @@ export default {
       :show-content-editor-switcher="enableContentEditor"
       :drawio-enabled="drawioEnabled"
       @enableContentEditor="onEditingModeChange('contentEditor')"
+      @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
     >
       <template #textarea>
         <textarea
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index bd0e3455872322..eb895bd90573ac 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Vuex from 'vuex';
-import Autosave from '~/autosave';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
 import { createModules } from '~/mr_notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
@@ -11,7 +10,6 @@ import { noteableDataMock } from 'jest/notes/mock_data';
 import { getDiffFileMock } from '../mock_data/diff_file';
 
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
-jest.mock('~/autosave');
 
 describe('DiffLineNoteForm', () => {
   let wrapper;
@@ -77,7 +75,6 @@ describe('DiffLineNoteForm', () => {
   const findCommentForm = () => wrapper.findComponent(MultilineCommentForm);
 
   beforeEach(() => {
-    Autosave.mockClear();
     createComponent();
   });
 
@@ -100,19 +97,6 @@ describe('DiffLineNoteForm', () => {
     });
   });
 
-  it('should init autosave', () => {
-    // we're using shallow mount here so there's no element to pass to Autosave
-    expect(Autosave).toHaveBeenCalledWith(undefined, [
-      'Note',
-      'Issue',
-      98,
-      undefined,
-      'DiffNote',
-      undefined,
-      '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
-    ]);
-  });
-
   describe('when cancelling form', () => {
     afterEach(() => {
       confirmAction.mockReset();
@@ -146,7 +130,6 @@ describe('DiffLineNoteForm', () => {
         await nextTick();
 
         expect(getSelectedLine().hasForm).toBe(false);
-        expect(Autosave.mock.instances[0].reset).toHaveBeenCalled();
       });
     });
 
-- 
GitLab