diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown/field.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/field.vue | 59 |
1 files changed, 29 insertions, 30 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index a48c279d0e3..65116ed8ca3 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -25,6 +25,18 @@ export default { }, mixins: [glFeatureFlagsMixin()], props: { + /** + * This prop should be bound to the value of the `<textarea>` element + * that is rendered as a child of this component (in the `textarea` slot) + */ + textareaValue: { + type: String, + required: true, + }, + markdownDocsPath: { + type: String, + required: true, + }, isSubmitting: { type: Boolean, required: false, @@ -35,10 +47,6 @@ export default { required: false, default: '', }, - markdownDocsPath: { - type: String, - required: true, - }, addSpacingClasses: { type: Boolean, required: false, @@ -84,12 +92,6 @@ export default { required: false, default: false, }, - // This prop is used as a fallback in case if textarea.elm is undefined - textareaValue: { - type: String, - required: false, - default: '', - }, }, data() { return { @@ -165,17 +167,20 @@ export default { }, mounted() { // GLForm class handles all the toolbar buttons - return new GLForm($(this.$refs['gl-form']), { - emojis: this.enableAutocomplete, - members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - epics: this.enableAutocomplete, - milestones: this.enableAutocomplete, - labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - snippets: this.enableAutocomplete, - vulnerabilities: this.enableAutocomplete, - }); + return new GLForm( + $(this.$refs['gl-form']), + { + emojis: this.enableAutocomplete, + members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, + issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, + mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, + epics: this.enableAutocomplete, + milestones: this.enableAutocomplete, + labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, + snippets: this.enableAutocomplete, + }, + true, + ); }, beforeDestroy() { const glForm = $(this.$refs['gl-form']).data('glForm'); @@ -189,17 +194,11 @@ export default { this.previewMarkdown = true; - /* - Can't use `$refs` as the component is technically in the parent component - so we access the VNode & then get the element - */ - const text = this.$slots.textarea[0]?.elm?.value || this.textareaValue; - - if (text) { + if (this.textareaValue) { this.markdownPreviewLoading = true; this.markdownPreview = __('Loading…'); axios - .post(this.markdownPreviewPath, { text }) + .post(this.markdownPreviewPath, { text: this.textareaValue }) .then(response => this.renderMarkdown(response.data)) .catch(() => new Flash(__('Error loading markdown preview'))); } else { @@ -234,7 +233,7 @@ export default { <div ref="gl-form" :class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }" - class="js-vue-markdown-field md-area position-relative" + class="js-vue-markdown-field md-area position-relative gfm-form" > <markdown-header :preview-markdown="previewMarkdown" |