1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<script>
import { GlButtonGroup } from '@gitlab/ui';
import { BubbleMenu } from '@tiptap/vue-2';
import { BUBBLE_MENU_TRACKING_ACTION } from '../constants';
import trackUIControl from '../services/track_ui_control';
import Code from '../extensions/code';
import CodeBlockHighlight from '../extensions/code_block_highlight';
import Diagram from '../extensions/diagram';
import Frontmatter from '../extensions/frontmatter';
import ToolbarButton from './toolbar_button.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 exclude = [Code.name, CodeBlockHighlight.name, Diagram.name, Frontmatter.name];
return !exclude.some((type) => editor.isActive(type));
},
},
};
</script>
<template>
<bubble-menu
data-testid="formatting-bubble-menu"
class="gl-shadow gl-rounded-base"
:editor="tiptapEditor"
:should-show="shouldShow"
>
<gl-button-group>
<toolbar-button
data-testid="bold"
content-type="bold"
icon-name="bold"
editor-command="toggleBold"
category="primary"
size="medium"
:label="__('Bold text')"
@execute="trackToolbarControlExecution"
/>
<toolbar-button
data-testid="italic"
content-type="italic"
icon-name="italic"
editor-command="toggleItalic"
category="primary"
size="medium"
:label="__('Italic text')"
@execute="trackToolbarControlExecution"
/>
<toolbar-button
data-testid="strike"
content-type="strike"
icon-name="strikethrough"
editor-command="toggleStrike"
category="primary"
size="medium"
:label="__('Strikethrough')"
@execute="trackToolbarControlExecution"
/>
<toolbar-button
data-testid="code"
content-type="code"
icon-name="code"
editor-command="toggleCode"
category="primary"
size="medium"
:label="__('Code')"
@execute="trackToolbarControlExecution"
/>
</gl-button-group>
</bubble-menu>
</template>
|
