Migrate GlDropdown toolbar_text_style_dropdown.vue

What does this MR do and why?

Migrating GlDropdown & GlDropdownItem to GlListbox component.

Pipeline failed for a test in spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js (changed recently), so I added a quick fix as well.

Screenshots or screen recordings

before	after

How to set up and validate locally

To access a project wiki:

1. On the top bar, select Main menu > Projects and find your project.
2. On the left sidebar, select Wiki.

If Wiki is not listed in the left sidebar of your project, a project administrator has disabled it.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #384269 (closed)

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

 <script>
-import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlTooltipDirective as GlTooltip, GlListbox } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { TEXT_STYLE_DROPDOWN_ITEMS } from '../constants';
 import EditorStateObserver from './editor_state_observer.vue';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlListbox,
     EditorStateObserver,
   },
   directives: {
@@ -25,15 +24,26 @@ export default {
 
       return activeItem ? activeItem.label : this.$options.i18n.placeholder;
     },
+    dropdownItems() {
+      return this.$options.items.map((item) => {
+        return {
+          value: item.label,
+          text: item.label,
+        };
+      });
+    },
   },
   methods: {
+    mapDropdownItemToCommand(dropdownItem) {
+      return this.$options.items.find((option) => option.label === dropdownItem);
+    },
     updateActiveItem({ editor }) {
       this.activeItem = TEXT_STYLE_DROPDOWN_ITEMS.find((item) =>
         editor.isActive(item.contentType, item.commandParams),
       );
     },
     execute(item) {
-      const { editorCommand, contentType, commandParams } = item;
+      const { editorCommand, contentType, commandParams } = this.mapDropdownItemToCommand(item);
       const value = commandParams?.level;
 
       if (editorCommand) {
@@ -46,8 +56,8 @@ export default {
 
       this.$emit('execute', { contentType, value });
     },
-    isActive(item) {
-      return this.tiptapEditor.isActive(item.contentType, item.commandParams);
+    isActive(dropdownItem) {
+      return this.tiptapEditor.isActive(dropdownItem.contentType, dropdownItem.commandParams);
     },
   },
   items: TEXT_STYLE_DROPDOWN_ITEMS,
@@ -58,25 +68,15 @@ export default {
 </script>
 <template>
   <editor-state-observer @transaction="updateActiveItem">
-    <gl-dropdown
-      v-gl-tooltip="$options.i18n.placeholder"
-      size="small"
-      data-qa-selector="text_style_dropdown"
+    <gl-listbox
+      v-gl-tooltip.hover="$options.i18n.placeholder"
+      :items="dropdownItems"
+      :toggle-text="activeItemLabel"
+      :selected="activeItemLabel"
       :disabled="!activeItem"
-      :text="activeItemLabel"
-      lazy
-    >
-      <gl-dropdown-item
-        v-for="(item, index) in $options.items"
-        :key="index"
-        is-check-item
-        :is-checked="isActive(item)"
-        data-qa-selector="text_style_menu_item"
-        :data-qa-text-style="item.label"
-        @click="execute(item)"
-      >
-        {{ item.label }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      :data-qa-text-style="activeItemLabel"
+      data-qa-selector="text_style_dropdown"
+      @select="execute"
+    />
   </editor-state-observer>
 </template>