diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components')
3 files changed, 46 insertions, 27 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> diff --git a/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue b/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue index 2bf32a70cd1..9c1d1faca48 100644 --- a/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue +++ b/app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue @@ -1,13 +1,12 @@ <script> -import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui'; +import { GlTooltipDirective as GlTooltip, GlCollapsibleListbox } 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, + GlCollapsibleListbox, EditorStateObserver, }, directives: { @@ -25,15 +24,26 @@ export default { return activeItem ? activeItem.label : this.$options.i18n.placeholder; }, + listboxItems() { + 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-collapsible-listbox + v-gl-tooltip.hover="$options.i18n.placeholder" + :items="listboxItems" + :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> |