diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
commit | 6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch) | |
tree | dc4d20fe6064752c0bd323187252c77e0a89144b /app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue | |
parent | 9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff) |
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue new file mode 100644 index 00000000000..327b0967229 --- /dev/null +++ b/app/assets/javascripts/content_editor/components/bubble_menus/formatting_bubble_menu.vue @@ -0,0 +1,123 @@ +<script> +import { GlButtonGroup } from '@gitlab/ui'; +import { BUBBLE_MENU_TRACKING_ACTION } from '../../constants'; +import trackUIControl from '../../services/track_ui_control'; +import Paragraph from '../../extensions/paragraph'; +import Heading from '../../extensions/heading'; +import Audio from '../../extensions/audio'; +import Video from '../../extensions/video'; +import Image from '../../extensions/image'; +import ToolbarButton from '../toolbar_button.vue'; +import BubbleMenu from './bubble_menu.vue'; + +export default { + components: { + BubbleMenu, + GlButtonGroup, + ToolbarButton, + }, + inject: ['tiptapEditor'], + methods: { + trackToolbarControlExecution({ contentType, value }) { + trackUIControl({ action: BUBBLE_MENU_TRACKING_ACTION, property: contentType, value }); + }, + + shouldShow: ({ editor, from, to }) => { + if (from === to) return false; + + const includes = [Paragraph.name, Heading.name]; + const excludes = [Image.name, Audio.name, Video.name]; + + return ( + includes.some((type) => editor.isActive(type)) && + !excludes.some((type) => editor.isActive(type)) + ); + }, + }, + toggleLinkCommandParams: { + href: '', + }, +}; +</script> +<template> + <bubble-menu + data-testid="formatting-bubble-menu" + class="gl-shadow gl-rounded-base gl-bg-white" + :should-show="shouldShow" + :plugin-key="'formatting'" + > + <gl-button-group> + <toolbar-button + data-testid="bold" + content-type="bold" + icon-name="bold" + editor-command="toggleBold" + category="tertiary" + size="medium" + :label="__('Bold text')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="italic" + content-type="italic" + icon-name="italic" + editor-command="toggleItalic" + category="tertiary" + size="medium" + :label="__('Italic text')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="strike" + content-type="strike" + icon-name="strikethrough" + editor-command="toggleStrike" + category="tertiary" + size="medium" + :label="__('Strikethrough')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="code" + content-type="code" + icon-name="code" + editor-command="toggleCode" + category="tertiary" + size="medium" + :label="__('Code')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="superscript" + content-type="superscript" + icon-name="superscript" + editor-command="toggleSuperscript" + category="tertiary" + size="medium" + :label="__('Superscript')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="subscript" + content-type="subscript" + icon-name="subscript" + editor-command="toggleSubscript" + category="tertiary" + size="medium" + :label="__('Subscript')" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="link" + content-type="link" + icon-name="link" + editor-command="toggleLink" + :editor-command-params="$options.toggleLinkCommandParams" + category="tertiary" + size="medium" + :label="__('Insert link')" + @execute="trackToolbarControlExecution" + /> + </gl-button-group> + </bubble-menu> +</template> |