Add latest changes from gitlab-org/gitlab@master

3 files changed, 12 insertions, 8 deletions

diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index 22381377389..53a37fc0c51 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -11,7 +11,7 @@ import FormattingBubbleMenu from './bubble_menus/formatting_bubble_menu.vue';
 import CodeBlockBubbleMenu from './bubble_menus/code_block_bubble_menu.vue';
 import LinkBubbleMenu from './bubble_menus/link_bubble_menu.vue';
 import MediaBubbleMenu from './bubble_menus/media_bubble_menu.vue';
-import TopToolbar from './top_toolbar.vue';
+import FormattingToolbar from './formatting_toolbar.vue';
 import LoadingIndicator from './loading_indicator.vue';
 
 export default {
@@ -20,7 +20,7 @@ export default {
     ContentEditorAlert,
     ContentEditorProvider,
     TiptapEditorContent,
-    TopToolbar,
+    FormattingToolbar,
     FormattingBubbleMenu,
     CodeBlockBubbleMenu,
     LinkBubbleMenu,
@@ -57,6 +57,11 @@ export default {
       default: false,
       validator: (autofocus) => TIPTAP_AUTOFOCUS_OPTIONS.includes(autofocus),
     },
+    useBottomToolbar: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -163,8 +168,8 @@ export default {
         class="md-area"
         :class="{ 'is-focused': focused }"
       >
-        <top-toolbar ref="toolbar" class="gl-mb-4" />
-        <div class="gl-relative">
+        <formatting-toolbar v-if="!useBottomToolbar" ref="toolbar" class="gl-border-b" />
+        <div class="gl-relative gl-mt-4">
           <formatting-bubble-menu />
           <code-block-bubble-menu />
           <link-bubble-menu />
@@ -176,6 +181,7 @@ export default {
           />
           <loading-indicator v-if="isLoading" />
         </div>
+        <formatting-toolbar v-if="useBottomToolbar" ref="toolbar" class="gl-border-t" />
       </div>
     </div>
   </content-editor-provider>
diff --git a/app/assets/javascripts/content_editor/components/top_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index 460368b6a11..8a25ad3fd96 100644
--- a/app/assets/javascripts/content_editor/components/top_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -24,9 +24,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="gl-display-flex gl-flex-wrap gl-pb-3 gl-pt-3 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
-  >
+  <div class="gl-display-flex gl-flex-wrap gl-pb-3 gl-pt-3">
     <toolbar-text-style-dropdown
       data-testid="text-styles"
       class="gl-mr-3"
diff --git a/app/assets/javascripts/content_editor/extensions/reference_label.js b/app/assets/javascripts/content_editor/extensions/reference_label.js
index 716e191c3d5..9dff0b7a689 100644
--- a/app/assets/javascripts/content_editor/extensions/reference_label.js
+++ b/app/assets/javascripts/content_editor/extensions/reference_label.js
@@ -1,5 +1,5 @@
 import { VueNodeViewRenderer } from '@tiptap/vue-2';
-import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
+import { SCOPED_LABEL_DELIMITER } from '~/sidebar/components/labels/labels_select_widget/constants';
 import LabelWrapper from '../components/wrappers/label.vue';
 import Reference from './reference';