Fix formatting bubble menu in Content Editor

The formatting bubble menu does not appear
when the user selects text.

Changelog: fixed

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -100,11 +100,13 @@ export default {
         :class="{ 'is-focused': focused }"
       >
         <top-toolbar ref="toolbar" class="gl-mb-4" />
-        <formatting-bubble-menu />
         <div v-if="isLoadingContent" class="gl-w-full gl-display-flex gl-justify-content-center">
           <gl-loading-icon size="sm" />
         </div>
-        <tiptap-editor-content v-else class="md" :editor="contentEditor.tiptapEditor" />
+        <template v-else>
+          <formatting-bubble-menu />
+          <tiptap-editor-content class="md" :editor="contentEditor.tiptapEditor" />
+        </template>
       </div>
     </div>
   </content-editor-provider>

app/assets/javascripts/content_editor/components/formatting_bubble_menu.vue

@@ -20,7 +20,11 @@ export default {
 };
 </script>
 <template>
-  <bubble-menu class="gl-shadow gl-rounded-base" :editor="tiptapEditor">
+  <bubble-menu
+    data-testid="formatting-bubble-menu"
+    class="gl-shadow gl-rounded-base"
+    :editor="tiptapEditor"
+  >
     <gl-button-group>
       <toolbar-button
         data-testid="bold"

spec/frontend/content_editor/components/content_editor_spec.js

@@ -6,6 +6,7 @@ import ContentEditor from '~/content_editor/components/content_editor.vue';
 import ContentEditorError from '~/content_editor/components/content_editor_error.vue';
 import ContentEditorProvider from '~/content_editor/components/content_editor_provider.vue';
 import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
+import FormattingBubbleMenu from '~/content_editor/components/formatting_bubble_menu.vue';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
 import {
   LOADING_CONTENT_EVENT,
@@ -25,6 +26,7 @@ describe('ContentEditor', () => {
   const findEditorElement = () => wrapper.findByTestId('content-editor');
   const findEditorContent = () => wrapper.findComponent(EditorContent);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findBubbleMenu = () => wrapper.findComponent(FormattingBubbleMenu);
 
   const createWrapper = (propsData = {}) => {
     renderMarkdown = jest.fn();
@@ -131,6 +133,10 @@ describe('ContentEditor', () => {
     it('hides EditorContent component', () => {
       expect(findEditorContent().exists()).toBe(false);
     });
+
+    it('hides formatting bubble menu', () => {
+      expect(findBubbleMenu().exists()).toBe(false);
+    });
   });
 
   describe('when loading content succeeds', () => {
@@ -171,5 +177,9 @@ describe('ContentEditor', () => {
     it('displays EditorContent component', () => {
       expect(findEditorContent().exists()).toBe(true);
     });
+
+    it('displays formatting bubble menu', () => {
+      expect(findBubbleMenu().exists()).toBe(true);
+    });
   });
 });

spec/support/shared_examples/features/content_editor_shared_examples.rb

+# frozen_string_literal: true
+
+RSpec.shared_examples 'edits content using the content editor' do
+  it 'formats text as bold using bubble menu' do
+    content_editor_testid = '[data-testid="content-editor"] [contenteditable]'
+
+    expect(page).to have_css(content_editor_testid)
+
+    find(content_editor_testid).send_keys 'Typing text in the content editor'
+    find(content_editor_testid).send_keys [:shift, :left]
+
+    expect(page).to have_css('[data-testid="formatting-bubble-menu"]')
+  end
+end

spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb

@@ -136,6 +136,14 @@ RSpec.shared_examples 'User updates wiki page' do
         expect(find('textarea#wiki_content').value).to eq('Updated Wiki Content')
       end
     end
+
+    context 'when using the content editor' do
+      before do
+        click_button 'Use the new editor'
+      end
+
+      it_behaves_like 'edits content using the content editor'
+    end
   end
 
   context 'when the page is in a subdir', :js do