Add latest changes from gitlab-org/gitlab@master

6 files changed, 312 insertions, 336 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
index 186f5619b87..cc9790279cd 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
@@ -81,13 +81,14 @@ export default {
       :items="filteredSavedReplies"
       :toggle-text="__('Insert comment template')"
       text-sr-only
+      no-caret
       toggle-class="js-comment-template-toggle"
       icon="comment-lines"
       category="tertiary"
       placement="right"
       searchable
       size="small"
-      class="comment-template-dropdown"
+      class="comment-template-dropdown gl-mr-3"
       positioning-strategy="fixed"
       :searching="$apollo.queries.savedReplies.loading"
       @shown="fetchCommentTemplates"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue b/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue
index 645975ca565..5cf5fbd5323 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue
@@ -17,16 +17,20 @@ export default {
       return this.value === 'markdown';
     },
     text() {
-      return this.markdownEditorSelected ? __('Switch to rich text') : __('Switch to Markdown');
+      return this.markdownEditorSelected
+        ? __('Switch to rich text editing')
+        : __('Switch to plain text editing');
     },
   },
 };
 </script>
 <template>
-  <gl-button
-    class="btn btn-default btn-sm gl-button btn-default-tertiary"
-    data-qa-selector="editing_mode_switcher"
-    @click="$emit('input')"
-    >{{ text }}</gl-button
-  >
+  <div class="content-editor-switcher gl-display-inline-flex gl-align-items-center">
+    <gl-button
+      class="btn btn-default btn-sm gl-button btn-default-tertiary"
+      data-qa-selector="editing_mode_switcher"
+      @click="$emit('input')"
+      >{{ text }}</gl-button
+    >
+  </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index b5a31f42ec7..268352a9c9c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -68,10 +68,10 @@ export default {
       required: false,
       default: false,
     },
-    quickActionsDocsPath: {
-      type: String,
+    supportsQuickActions: {
+      type: Boolean,
       required: false,
-      default: '',
+      default: false,
     },
     canAttachFile: {
       type: Boolean,
@@ -371,13 +371,12 @@ export default {
       :uploads-path="uploadsPath"
       :markdown-preview-path="markdownPreviewPath"
       :drawio-enabled="drawioEnabled"
+      :supports-quick-actions="supportsQuickActions"
       data-testid="markdownHeader"
       :restricted-tool-bar-items="restrictedToolBarItems"
-      :show-content-editor-switcher="showContentEditorSwitcher"
       @showPreview="showPreview"
       @hidePreview="hidePreview"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
-      @enableContentEditor="$emit('enableContentEditor')"
     />
     <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
@@ -391,9 +390,10 @@ export default {
         </a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"
-          :quick-actions-docs-path="quickActionsDocsPath"
           :can-attach-file="canAttachFile"
           :show-comment-tool-bar="showCommentToolBar"
+          :show-content-editor-switcher="showContentEditorSwitcher"
+          @enableContentEditor="$emit('enableContentEditor')"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index af0b34f1389..bf070943fe6 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -19,7 +19,6 @@ import { updateText } from '~/lib/utils/text_markdown';
 import ToolbarButton from './toolbar_button.vue';
 import DrawioToolbarButton from './drawio_toolbar_button.vue';
 import CommentTemplatesDropdown from './comment_templates_dropdown.vue';
-import EditorModeSwitcher from './editor_mode_switcher.vue';
 
 export default {
   components: {
@@ -29,7 +28,6 @@ export default {
     DrawioToolbarButton,
     CommentTemplatesDropdown,
     AiActionsDropdown: () => import('ee_component/ai/components/ai_actions_dropdown.vue'),
-    EditorModeSwitcher,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -91,7 +89,7 @@ export default {
       required: false,
       default: false,
     },
-    showContentEditorSwitcher: {
+    supportsQuickActions: {
       type: Boolean,
       required: false,
       default: false,
@@ -126,9 +124,6 @@ export default {
       const expandText = s__('MarkdownEditor|Click to expand');
       return [`<details><summary>${expandText}</summary>`, `{text}`, '</details>'].join('\n');
     },
-    showEditorModeSwitcher() {
-      return this.showContentEditorSwitcher && !this.previewMarkdown;
-    },
   },
   watch: {
     showSuggestPopover() {
@@ -208,9 +203,6 @@ export default {
         });
       }
     },
-    handleEditorModeChanged() {
-      this.$emit('enableContentEditor');
-    },
     switchPreview() {
       if (this.previewMarkdown) {
         this.hideMarkdownPreview();
@@ -236,233 +228,228 @@ export default {
 
 <template>
   <div class="md-header gl-bg-gray-50 gl-px-2 gl-rounded-base gl-mx-2 gl-mt-2">
-    <div
-      class="gl-display-flex gl-align-items-center gl-flex-wrap"
-      :class="{
-        'gl-justify-content-end': previewMarkdown,
-        'gl-justify-content-space-between': !previewMarkdown,
-      }"
-    >
+    <div class="gl-display-flex gl-align-items-center gl-flex-wrap">
       <div
         data-testid="md-header-toolbar"
-        class="md-header-toolbar gl-display-flex gl-py-2 gl-flex-wrap"
-        :class="{ 'gl-display-none!': previewMarkdown }"
+        class="md-header-toolbar gl-display-flex gl-py-2 gl-flex-wrap gl-row-gap-3"
       >
-        <template v-if="canSuggest">
-          <toolbar-button
-            ref="suggestButton"
-            :tag="mdSuggestion"
-            :prepend="true"
-            :button-title="__('Insert suggestion')"
-            :cursor-offset="4"
-            :tag-content="lineContent"
-            icon="doc-code"
-            data-qa-selector="suggestion_button"
-            class="js-suggestion-btn"
-            @click="handleSuggestDismissed"
-          />
-          <gl-popover
-            v-if="suggestPopoverVisible"
-            :target="$refs.suggestButton.$el"
-            :css-classes="['diff-suggest-popover']"
-            placement="bottom"
-            :show="suggestPopoverVisible"
-            triggers=""
-          >
-            <strong>{{ __('New! Suggest changes directly') }}</strong>
-            <p class="mb-2">
-              {{
-                __(
-                  'Suggest code changes which can be immediately applied in one click. Try it out!',
-                )
-              }}
-            </p>
-            <gl-button
-              variant="confirm"
-              category="primary"
-              size="small"
-              data-qa-selector="dismiss_suggestion_popover_button"
-              @click="handleSuggestDismissed"
-            >
-              {{ __('Got it') }}
-            </gl-button>
-          </gl-popover>
-        </template>
-        <ai-actions-dropdown
-          v-if="editorAiActions.length"
-          :actions="editorAiActions"
-          @input="insertIntoTextarea"
-        />
-        <toolbar-button
-          tag="**"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), {
-              modifierKey,
-            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-          "
-          :shortcuts="$options.shortcuts.bold"
-          icon="bold"
-        />
-        <toolbar-button
-          tag="_"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), {
-              modifierKey,
-            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-          "
-          :shortcuts="$options.shortcuts.italic"
-          icon="italic"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('strikethrough')"
-          tag="~~"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}⇧X)'), {
-              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-            })
-          "
-          :shortcuts="$options.shortcuts.strikethrough"
-          icon="strikethrough"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('quote')"
-          :prepend="true"
-          :tag="tag"
-          :button-title="__('Insert a quote')"
-          icon="quote"
-          @click="handleQuote"
-        />
-        <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
-        <toolbar-button
-          tag="[{text}](url)"
-          tag-select="url"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), {
-              modifierKey,
-            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-          "
-          :shortcuts="$options.shortcuts.link"
-          icon="link"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('bullet-list')"
-          :prepend="true"
-          tag="- "
-          :button-title="__('Add a bullet list')"
-          icon="list-bulleted"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('numbered-list')"
-          :prepend="true"
-          tag="1. "
-          :button-title="__('Add a numbered list')"
-          icon="list-numbered"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('task-list')"
-          :prepend="true"
-          tag="- [ ] "
-          :button-title="__('Add a checklist')"
-          icon="list-task"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('indent')"
-          class="gl-display-none"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
-              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-            })
-          "
-          :shortcuts="$options.shortcuts.indent"
-          command="indentLines"
-          icon="list-indent"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('outdent')"
-          class="gl-display-none"
-          :button-title="
-            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-            sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
-              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-            })
-          "
-          :shortcuts="$options.shortcuts.outdent"
-          command="outdentLines"
-          icon="list-outdent"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('collapsible-section')"
-          :tag="mdCollapsibleSection"
-          :prepend="true"
-          tag-select="Click to expand"
-          :button-title="__('Add a collapsible section')"
-          icon="details-block"
-        />
-        <toolbar-button
-          v-if="!restrictedToolBarItems.includes('table')"
-          :tag="mdTable"
-          :prepend="true"
-          :button-title="__('Add a table')"
-          icon="table"
-        />
-        <gl-button
-          v-if="!restrictedToolBarItems.includes('attach-file')"
-          v-gl-tooltip
-          :aria-label="__('Attach a file or image')"
-          :title="__('Attach a file or image')"
-          class="gl-mr-2"
-          data-testid="button-attach-file"
-          category="tertiary"
-          icon="paperclip"
-          size="small"
-          @click="handleAttachFile"
-        />
-        <drawio-toolbar-button
-          v-if="drawioEnabled"
-          :uploads-path="uploadsPath"
-          :markdown-preview-path="markdownPreviewPath"
-        />
-        <comment-templates-dropdown
-          v-if="newCommentTemplatePath && glFeatures.savedReplies"
-          :new-comment-template-path="newCommentTemplatePath"
-        />
-      </div>
-      <div class="switch-preview gl-py-2 gl-display-flex gl-align-items-center gl-ml-auto">
-        <editor-mode-switcher
-          v-if="showEditorModeSwitcher"
-          size="small"
-          class="gl-mr-2"
-          value="markdown"
-          @input="handleEditorModeChanged"
-        />
         <gl-button
           v-if="enablePreview"
           data-testid="preview-toggle"
           value="preview"
           :label="$options.i18n.previewTabTitle"
-          class="js-md-preview-button gl-flex-direction-row-reverse gl-align-items-center gl-font-weight-normal!"
+          class="js-md-preview-button gl-flex-direction-row-reverse gl-align-items-center gl-font-weight-normal! gl-mr-2"
           size="small"
           category="tertiary"
           @click="switchPreview"
           >{{ previewMarkdown ? $options.i18n.hidePreview : $options.i18n.preview }}</gl-button
         >
-        <gl-button
-          v-if="!restrictedToolBarItems.includes('full-screen')"
-          v-gl-tooltip
-          :class="{ 'gl-display-none!': previewMarkdown }"
-          class="js-zen-enter gl-ml-2"
-          category="tertiary"
-          icon="maximize"
-          size="small"
-          :title="__('Go full screen')"
-          :prepend="true"
-          :aria-label="__('Go full screen')"
-        />
+        <template v-if="!previewMarkdown">
+          <template v-if="canSuggest">
+            <toolbar-button
+              ref="suggestButton"
+              :tag="mdSuggestion"
+              :prepend="true"
+              :button-title="__('Insert suggestion')"
+              :cursor-offset="4"
+              :tag-content="lineContent"
+              icon="doc-code"
+              data-qa-selector="suggestion_button"
+              class="js-suggestion-btn"
+              @click="handleSuggestDismissed"
+            />
+            <gl-popover
+              v-if="suggestPopoverVisible"
+              :target="$refs.suggestButton.$el"
+              :css-classes="['diff-suggest-popover']"
+              placement="bottom"
+              :show="suggestPopoverVisible"
+              triggers=""
+            >
+              <strong>{{ __('New! Suggest changes directly') }}</strong>
+              <p class="mb-2">
+                {{
+                  __(
+                    'Suggest code changes which can be immediately applied in one click. Try it out!',
+                  )
+                }}
+              </p>
+              <gl-button
+                variant="confirm"
+                category="primary"
+                size="small"
+                data-qa-selector="dismiss_suggestion_popover_button"
+                @click="handleSuggestDismissed"
+              >
+                {{ __('Got it') }}
+              </gl-button>
+            </gl-popover>
+          </template>
+          <ai-actions-dropdown
+            v-if="editorAiActions.length"
+            :actions="editorAiActions"
+            @input="insertIntoTextarea"
+          />
+          <toolbar-button
+            tag="**"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), {
+                modifierKey,
+              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+            "
+            :shortcuts="$options.shortcuts.bold"
+            icon="bold"
+          />
+          <toolbar-button
+            tag="_"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), {
+                modifierKey,
+              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+            "
+            :shortcuts="$options.shortcuts.italic"
+            icon="italic"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('strikethrough')"
+            tag="~~"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}⇧X)'), {
+                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+              })
+            "
+            :shortcuts="$options.shortcuts.strikethrough"
+            icon="strikethrough"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('quote')"
+            :prepend="true"
+            :tag="tag"
+            :button-title="__('Insert a quote')"
+            icon="quote"
+            @click="handleQuote"
+          />
+          <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
+          <toolbar-button
+            tag="[{text}](url)"
+            tag-select="url"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), {
+                modifierKey,
+              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+            "
+            :shortcuts="$options.shortcuts.link"
+            icon="link"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('bullet-list')"
+            :prepend="true"
+            tag="- "
+            :button-title="__('Add a bullet list')"
+            icon="list-bulleted"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('numbered-list')"
+            :prepend="true"
+            tag="1. "
+            :button-title="__('Add a numbered list')"
+            icon="list-numbered"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('task-list')"
+            :prepend="true"
+            tag="- [ ] "
+            :button-title="__('Add a checklist')"
+            icon="list-task"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('indent')"
+            class="gl-display-none"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
+                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+              })
+            "
+            :shortcuts="$options.shortcuts.indent"
+            command="indentLines"
+            icon="list-indent"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('outdent')"
+            class="gl-display-none"
+            :button-title="
+              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+              sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
+                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+              })
+            "
+            :shortcuts="$options.shortcuts.outdent"
+            command="outdentLines"
+            icon="list-outdent"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('collapsible-section')"
+            :tag="mdCollapsibleSection"
+            :prepend="true"
+            tag-select="Click to expand"
+            :button-title="__('Add a collapsible section')"
+            icon="details-block"
+          />
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('table')"
+            :tag="mdTable"
+            :prepend="true"
+            :button-title="__('Add a table')"
+            icon="table"
+          />
+          <gl-button
+            v-if="!restrictedToolBarItems.includes('attach-file')"
+            v-gl-tooltip
+            :aria-label="__('Attach a file or image')"
+            :title="__('Attach a file or image')"
+            class="gl-mr-3"
+            data-testid="button-attach-file"
+            category="tertiary"
+            icon="paperclip"
+            size="small"
+            @click="handleAttachFile"
+          />
+          <drawio-toolbar-button
+            v-if="drawioEnabled"
+            :uploads-path="uploadsPath"
+            :markdown-preview-path="markdownPreviewPath"
+          />
+          <!-- TODO Add icon and trigger functionality from here -->
+          <toolbar-button
+            v-if="supportsQuickActions"
+            :prepend="true"
+            tag="/"
+            :button-title="__('Add a quick action')"
+            icon="quick-actions"
+          />
+          <comment-templates-dropdown
+            v-if="newCommentTemplatePath && glFeatures.savedReplies"
+            :new-comment-template-path="newCommentTemplatePath"
+          />
+          <div class="full-screen">
+            <gl-button
+              v-if="!restrictedToolBarItems.includes('full-screen')"
+              v-gl-tooltip
+              class="js-zen-enter"
+              category="tertiary"
+              icon="maximize"
+              size="small"
+              :title="__('Go full screen')"
+              :prepend="true"
+              :aria-label="__('Go full screen')"
+            />
+          </div>
+        </template>
       </div>
     </div>
   </div>
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 9fd606d775d..dbbcb8a6424 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
@@ -80,11 +80,6 @@ export default {
       required: false,
       default: '',
     },
-    quickActionsDocsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     drawioEnabled: {
       type: Boolean,
       required: false,
@@ -245,7 +240,7 @@ export default {
       :enable-autocomplete="enableAutocomplete"
       :autocomplete-data-sources="autocompleteDataSources"
       :markdown-docs-path="markdownDocsPath"
-      :quick-actions-docs-path="quickActionsDocsPath"
+      :supports-quick-actions="supportsQuickActions"
       :show-content-editor-switcher="enableContentEditor"
       :drawio-enabled="drawioEnabled"
       :restricted-tool-bar-items="markdownFieldRestrictedToolBarItems"
@@ -272,9 +267,10 @@ export default {
       <content-editor
         ref="contentEditor"
         :render-markdown="renderMarkdown"
+        :markdown-docs-path="markdownDocsPath"
         :uploads-path="uploadsPath"
         :markdown="markdown"
-        :quick-actions-docs-path="quickActionsDocsPath"
+        :supports-quick-actions="supportsQuickActions"
         :autofocus="contentEditorAutofocused"
         :placeholder="formFieldProps.placeholder"
         :drawio-enabled="drawioEnabled"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 4733afb7504..9cf0d0bafb1 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,24 +1,20 @@
 <script>
-import { GlButton, GlLink, GlLoadingIcon, GlSprintf, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlSprintf, GlIcon } from '@gitlab/ui';
+import EditorModeSwitcher from './editor_mode_switcher.vue';
 
 export default {
   components: {
     GlButton,
-    GlLink,
     GlLoadingIcon,
     GlSprintf,
     GlIcon,
+    EditorModeSwitcher,
   },
   props: {
     markdownDocsPath: {
       type: String,
       required: true,
     },
-    quickActionsDocsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     canAttachFile: {
       type: Boolean,
       required: false,
@@ -29,10 +25,20 @@ export default {
       required: false,
       default: true,
     },
+    showContentEditorSwitcher: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
-    hasQuickActionsDocsPath() {
-      return this.quickActionsDocsPath !== '';
+    showEditorModeSwitcher() {
+      return this.showContentEditorSwitcher && !this.previewMarkdown;
+    },
+  },
+  methods: {
+    handleEditorModeChanged() {
+      this.$emit('enableContentEditor');
     },
   },
 };
@@ -41,94 +47,76 @@ export default {
 <template>
   <div
     v-if="showCommentToolBar"
-    class="comment-toolbar gl-mx-2 gl-mb-2 gl-px-4 gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base clearfix"
+    class="comment-toolbar gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mx-2 gl-mb-2 gl-px-2 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
+    :class="{ 'gl-bg-gray-10': showContentEditorSwitcher }"
   >
-    <div class="toolbar-text gl-font-sm">
-      <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-sprintf
-          :message="
-            s__('MarkdownToolbar|Supports %{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd}')
-          "
-        >
-          <template #markdownDocsLink="{ content }">
-            <gl-link :href="markdownDocsPath" target="_blank" class="gl-font-sm">{{
-              content
-            }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </template>
-      <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-sprintf
-          :message="
-            s__(
-              'NoteToolbar|Supports %{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd}. For %{quickActionsDocsLinkStart}quick actions%{quickActionsDocsLinkEnd}, type %{keyboardStart}/%{keyboardEnd}.',
-            )
-          "
-        >
-          <template #markdownDocsLink="{ content }">
-            <gl-link :href="markdownDocsPath" target="_blank" class="gl-font-sm">{{
-              content
-            }}</gl-link>
-          </template>
-          <template #keyboard="{ content }">
-            <kbd>{{ content }}</kbd>
-          </template>
-          <template #quickActionsDocsLink="{ content }">
-            <gl-link :href="quickActionsDocsPath" target="_blank" class="gl-font-sm">{{
-              content
-            }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </template>
-    </div>
-    <span v-if="canAttachFile" class="uploading-container gl-font-sm gl-line-height-32">
-      <span class="uploading-progress-container hide">
-        <gl-icon name="paperclip" />
-        <span class="attaching-file-message"></span>
-        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-        <span class="uploading-progress">0%</span>
-        <gl-loading-icon size="sm" inline />
-      </span>
-      <span class="uploading-error-container hide">
-        <span class="uploading-error-icon">
+    <editor-mode-switcher
+      v-if="showEditorModeSwitcher"
+      size="small"
+      value="markdown"
+      @input="handleEditorModeChanged"
+    />
+    <div>
+      <div class="toolbar-text gl-font-sm">
+        <template v-if="markdownDocsPath">
+          <gl-button
+            icon="markdown-mark"
+            :href="markdownDocsPath"
+            target="_blank"
+            category="tertiary"
+            size="small"
+          />
+        </template>
+      </div>
+      <span v-if="canAttachFile" class="uploading-container gl-font-sm gl-line-height-32">
+        <span class="uploading-progress-container hide">
           <gl-icon name="paperclip" />
+          <span class="attaching-file-message"></span>
+          <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+          <span class="uploading-progress">0%</span>
+          <gl-loading-icon size="sm" inline />
         </span>
-        <span class="uploading-error-message"></span>
+        <span class="uploading-error-container hide">
+          <span class="uploading-error-icon">
+            <gl-icon name="paperclip" />
+          </span>
+          <span class="uploading-error-message"></span>
 
-        <gl-sprintf
-          :message="
-            __(
-              '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}.',
-            )
-          "
+          <gl-sprintf
+            :message="
+              __(
+                '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}.',
+              )
+            "
+          >
+            <template #retryButton="{ content }">
+              <gl-button
+                variant="link"
+                category="primary"
+                class="retry-uploading-link gl-vertical-align-baseline gl-font-sm!"
+              >
+                {{ content }}
+              </gl-button>
+            </template>
+            <template #newFileButton="{ content }">
+              <gl-button
+                variant="link"
+                category="primary"
+                class="markdown-selector attach-new-file gl-vertical-align-baseline gl-font-sm!"
+              >
+                {{ content }}
+              </gl-button>
+            </template>
+          </gl-sprintf>
+        </span>
+        <gl-button
+          variant="link"
+          category="primary"
+          class="button-cancel-uploading-files gl-vertical-align-baseline hide gl-font-sm!"
         >
-          <template #retryButton="{ content }">
-            <gl-button
-              variant="link"
-              category="primary"
-              class="retry-uploading-link gl-vertical-align-baseline gl-font-sm!"
-            >
-              {{ content }}
-            </gl-button>
-          </template>
-          <template #newFileButton="{ content }">
-            <gl-button
-              variant="link"
-              category="primary"
-              class="markdown-selector attach-new-file gl-vertical-align-baseline gl-font-sm!"
-            >
-              {{ content }}
-            </gl-button>
-          </template>
-        </gl-sprintf>
+          {{ __('Cancel') }}
+        </gl-button>
       </span>
-      <gl-button
-        variant="link"
-        category="primary"
-        class="button-cancel-uploading-files gl-vertical-align-baseline hide gl-font-sm!"
-      >
-        {{ __('Cancel') }}
-      </gl-button>
-    </span>
+    </div>
   </div>
 </template>