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
|
<script>
import { GlTooltip, GlDisclosureDropdown } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { __ } from '~/locale';
export default {
components: {
GlDisclosureDropdown,
GlTooltip,
},
inject: ['tiptapEditor'],
data() {
return {
toggleId: uniqueId('dropdown-toggle-btn-'),
items: [
{
text: __('Comment'),
action: () => this.insert('comment'),
},
{
text: __('Code block'),
action: () => this.insert('codeBlock'),
},
{
text: __('Details block'),
action: () => this.insertList('details', 'detailsContent'),
},
{
text: __('Bullet list'),
action: () => this.insertList('bulletList', 'listItem'),
wrapperClass: 'gl-sm-display-none!',
},
{
text: __('Ordered list'),
action: () => this.insertList('orderedList', 'listItem'),
wrapperClass: 'gl-sm-display-none!',
},
{
text: __('Task list'),
action: () => this.insertList('taskList', 'taskItem'),
wrapperClass: 'gl-sm-display-none!',
},
{
text: __('Horizontal rule'),
action: () => this.execute('setHorizontalRule', 'horizontalRule'),
},
{
text: __('Mermaid diagram'),
action: () => this.insert('diagram', { language: 'mermaid' }),
},
{
text: __('PlantUML diagram'),
action: () => this.insert('diagram', { language: 'plantuml' }),
},
{
text: __('Create or edit diagram'),
action: () => this.execute('createOrEditDiagram', 'drawioDiagram'),
},
{
text: __('Table of contents'),
action: () => this.execute('insertTableOfContents', 'tableOfContents'),
},
],
};
},
methods: {
insert(contentType, ...args) {
this.tiptapEditor
.chain()
.focus()
.setNode(contentType, ...args)
.run();
this.$emit('execute', { contentType });
},
insertList(listType, listItemType) {
if (!this.tiptapEditor.isActive(listType))
this.tiptapEditor.chain().focus().toggleList(listType, listItemType).run();
this.$emit('execute', { contentType: listType });
},
execute(command, contentType, ...args) {
this.tiptapEditor
.chain()
.focus()
[command](...args)
.run();
this.$emit('execute', { contentType });
},
},
};
</script>
<template>
<div class="gl-display-inline-flex gl-vertical-align-middle">
<gl-disclosure-dropdown
:items="items"
:toggle-id="toggleId"
size="small"
category="tertiary"
icon="plus"
:toggle-text="__('More options')"
text-sr-only
right
/>
<gl-tooltip :target="toggleId" placement="top">{{ __('More options') }}</gl-tooltip>
</div>
</template>
|
