Add latest changes from gitlab-org/gitlab@master

2 files changed, 21 insertions, 2 deletions

diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index 53a37fc0c51..237808983ee 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -168,7 +168,12 @@ export default {
         class="md-area"
         :class="{ 'is-focused': focused }"
       >
-        <formatting-toolbar v-if="!useBottomToolbar" ref="toolbar" class="gl-border-b" />
+        <formatting-toolbar
+          v-if="!useBottomToolbar"
+          ref="toolbar"
+          class="gl-border-b"
+          @enableMarkdownEditor="$emit('enableMarkdownEditor')"
+        />
         <div class="gl-relative gl-mt-4">
           <formatting-bubble-menu />
           <code-block-bubble-menu />
@@ -181,7 +186,12 @@ export default {
           />
           <loading-indicator v-if="isLoading" />
         </div>
-        <formatting-toolbar v-if="useBottomToolbar" ref="toolbar" class="gl-border-t" />
+        <formatting-toolbar
+          v-if="useBottomToolbar"
+          ref="toolbar"
+          class="gl-border-t"
+          @enableMarkdownEditor="$emit('enableMarkdownEditor')"
+        />
       </div>
     </div>
   </content-editor-provider>
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index 8a25ad3fd96..36ca3b8cfb6 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -1,4 +1,5 @@
 <script>
+import EditorModeDropdown from '~/vue_shared/components/markdown/editor_mode_dropdown.vue';
 import trackUIControl from '../services/track_ui_control';
 import ToolbarButton from './toolbar_button.vue';
 import ToolbarImageButton from './toolbar_image_button.vue';
@@ -9,6 +10,7 @@ import ToolbarMoreDropdown from './toolbar_more_dropdown.vue';
 
 export default {
   components: {
+    EditorModeDropdown,
     ToolbarButton,
     ToolbarTextStyleDropdown,
     ToolbarLinkButton,
@@ -20,6 +22,11 @@ export default {
     trackToolbarControlExecution({ contentType, value }) {
       trackUIControl({ property: contentType, value });
     },
+    handleEditorModeChanged(mode) {
+      if (mode === 'markdown') {
+        this.$emit('enableMarkdownEditor');
+      }
+    },
   },
 };
 </script>
@@ -101,6 +108,8 @@ export default {
     />
     <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
     <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
+
+    <editor-mode-dropdown class="gl-ml-auto" value="richText" @input="handleEditorModeChanged" />
   </div>
 </template>
 <style>