diff options
Diffstat (limited to 'app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue')
-rw-r--r-- | app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue | 55 |
1 files changed, 37 insertions, 18 deletions
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue index 3c22844434d..9d7d9e376cf 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -9,6 +9,7 @@ import { GlFormGroup, GlFormInput, GlFormSelect, + GlSegmentedControl, } from '@gitlab/ui'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import axios from '~/lib/utils/axios_utils'; @@ -81,9 +82,11 @@ export default { newPage: s__('WikiPage|Create page'), }, cancel: s__('WikiPage|Cancel'), - editSourceButtonText: s__('WikiPage|Edit source'), - editRichTextButtonText: s__('WikiPage|Edit rich text'), }, + switchEditingControlOptions: [ + { text: s__('Wiki Page|Source'), value: 'source' }, + { text: s__('Wiki Page|Rich text'), value: 'richText' }, + ], components: { GlAlert, GlIcon, @@ -94,6 +97,7 @@ export default { GlSprintf, GlLink, GlButton, + GlSegmentedControl, MarkdownField, LocalStorageSync, ContentEditor: () => @@ -105,14 +109,15 @@ export default { inject: ['formatOptions', 'pageInfo'], data() { return { + editingMode: 'source', title: this.pageInfo.title?.trim() || '', format: this.pageInfo.format || 'markdown', content: this.pageInfo.content || '', - useContentEditor: false, commitMessage: '', isDirty: false, contentEditorRenderFailed: false, contentEditorEmpty: false, + switchEditingControlDisabled: false, }; }, computed: { @@ -177,6 +182,9 @@ export default { isContentEditorActive() { return this.isMarkdownFormat && this.useContentEditor; }, + useContentEditor() { + return this.editingMode === 'richText'; + }, }, mounted() { this.updateCommitMessage(); @@ -193,16 +201,15 @@ export default { .then(({ data }) => data.body); }, - toggleEditingMode() { - if (this.useContentEditor) { + toggleEditingMode(editingMode) { + this.editingMode = editingMode; + if (!this.useContentEditor && this.contentEditor) { this.content = this.contentEditor.getSerializedContent(); } - - this.useContentEditor = !this.useContentEditor; }, - setUseContentEditor(value) { - this.useContentEditor = value; + setEditingMode(value) { + this.editingMode = value; }, async handleFormSubmit(e) { @@ -294,6 +301,14 @@ export default { }, }); }, + + enableSwitchEditingControl() { + this.switchEditingControlDisabled = false; + }, + + disableSwitchEditingControl() { + this.switchEditingControlDisabled = true; + }, }, }; </script> @@ -372,20 +387,21 @@ export default { <div class="row" data-testid="wiki-form-content-fieldset"> <div class="col-sm-12 row-sm-5"> <gl-form-group> - <div v-if="isMarkdownFormat" class="gl-display-flex gl-justify-content-end gl-mb-3"> - <gl-button + <div v-if="isMarkdownFormat" class="gl-display-flex gl-justify-content-start gl-mb-3"> + <gl-segmented-control data-testid="toggle-editing-mode-button" data-qa-selector="editing_mode_button" - :data-qa-mode="toggleEditingModeButtonText" - variant="link" - @click="toggleEditingMode" - >{{ toggleEditingModeButtonText }}</gl-button - > + class="gl-display-flex" + :checked="editingMode" + :options="$options.switchEditingControlOptions" + :disabled="switchEditingControlDisabled" + @input="toggleEditingMode" + /> </div> <local-storage-sync storage-key="gl-wiki-content-editor-enabled" - :value="useContentEditor" - @input="setUseContentEditor" + :value="editingMode" + @input="setEditingMode" /> <markdown-field v-if="!isContentEditorActive" @@ -422,6 +438,9 @@ export default { :uploads-path="pageInfo.uploadsPath" @initialized="loadInitialContent" @change="handleContentEditorChange" + @loading="disableSwitchEditingControl" + @loadingSuccess="enableSwitchEditingControl" + @loadingError="enableSwitchEditingControl" /> <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" /> </div> |