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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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>
|
