diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown')
3 files changed, 37 insertions, 2 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/eventhub.js b/app/assets/javascripts/vue_shared/components/markdown/eventhub.js new file mode 100644 index 00000000000..e31806ad199 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/markdown/eventhub.js @@ -0,0 +1,3 @@ +import createEventHub from '~/helpers/event_hub_factory'; + +export default createEventHub(); 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 52d8aab30d5..6ffebc51ef8 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue @@ -3,8 +3,13 @@ import Autosize from 'autosize'; import axios from '~/lib/utils/axios_utils'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { updateDraft, clearDraft, getDraft } from '~/lib/utils/autosave'; -import { EDITING_MODE_MARKDOWN_FIELD, EDITING_MODE_CONTENT_EDITOR } from '../../constants'; +import { + EDITING_MODE_MARKDOWN_FIELD, + EDITING_MODE_CONTENT_EDITOR, + CLEAR_AUTOSAVE_ENTRY_EVENT, +} from '../../constants'; import MarkdownField from './field.vue'; +import eventHub from './eventhub'; export default { components: { @@ -124,6 +129,11 @@ export default { getValue: () => this.getValue(), setValue: (val) => this.setValue(val), }); + + eventHub.$on(CLEAR_AUTOSAVE_ENTRY_EVENT, this.clearDraft); + }, + beforeDestroy() { + eventHub.$off(CLEAR_AUTOSAVE_ENTRY_EVENT, this.clearDraft); }, methods: { getValue() { @@ -183,6 +193,10 @@ export default { if (this.markdown) updateDraft(this.autosaveKey, this.markdown); else clearDraft(this.autosaveKey); }, + clearDraft(key) { + if (!this.autosaveKey || key !== this.autosaveKey) return; + clearDraft(this.autosaveKey); + }, togglePreview(value) { if (this.editingMode === EDITING_MODE_MARKDOWN_FIELD) { this.$refs.markdownField.previewMarkdown = value; diff --git a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js index 0f2a46f78f7..b0e609e2433 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js +++ b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js @@ -1,6 +1,8 @@ import Vue from 'vue'; import { queryToObject, objectToQuery } from '~/lib/utils/url_utility'; +import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '../../constants'; import MarkdownEditor from './markdown_editor.vue'; +import eventHub from './eventhub'; const MR_SOURCE_BRANCH = 'merge_request[source_branch]'; const MR_TARGET_BRANCH = 'merge_request[target_branch]'; @@ -35,6 +37,19 @@ function getSearchTerm(newIssuePath) { return newIssuePath === pathname ? '' : format(search); } +function mountAutosaveClearOnSubmit(autosaveKey) { + const resetAutosaveButtons = document.querySelectorAll('.js-reset-autosave'); + if (resetAutosaveButtons.length === 0) { + return; + } + + for (const resetAutosaveButton of resetAutosaveButtons) { + resetAutosaveButton.addEventListener('click', () => { + eventHub.$emit(CLEAR_AUTOSAVE_ENTRY_EVENT, autosaveKey); + }); + } +} + export function mountMarkdownEditor() { const el = document.querySelector('.js-markdown-editor'); @@ -65,6 +80,7 @@ export function mountMarkdownEditor() { }; const setFacade = (props) => Object.assign(facade, props); + const autosaveKey = `autosave/${document.location.pathname}/${searchTerm}/description`; // eslint-disable-next-line no-new new Vue({ @@ -85,7 +101,7 @@ export function mountMarkdownEditor() { class: formFieldClasses, 'data-qa-selector': qaSelector, }, - autosaveKey: `autosave/${document.location.pathname}/${searchTerm}/description`, + autosaveKey, enableAutocomplete: true, autocompleteDataSources: gl.GfmAutoComplete?.dataSources, supportsQuickActions: true, @@ -95,5 +111,7 @@ export function mountMarkdownEditor() { }, }); + mountAutosaveClearOnSubmit(autosaveKey); + return facade; } |