/
font-size.ts
128 lines (113 loc) · 3.4 KB
/
font-size.ts
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
124
125
126
127
128
import { Extension } from '@tiptap/core'
import type { Item } from './components/ActionMenuButton.vue'
import ActionMenuButton from './components/ActionMenuButton.vue'
import { DEFAULT_FONT_SIZE_LIST, DEFAULT_FONT_SIZE_VALUUE } from '@/constants/define'
import type { GeneralOptions } from '@/type'
import { getCssUnitWithDefault } from '@/utils/utils'
/**
* Represents the interface for font size options, extending GeneralOptions.
*/
export interface FontSizeOptions extends GeneralOptions<FontSizeOptions> {
types: string[]
/**
* List of available font size values
*
* @default DEFAULT_FONT_SIZE_LIST
*/
fontSizes: number[]
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
fontSize: {
/**
* Set the font size
*/
setFontSize: (fontSize: string) => ReturnType
/**
* Unset the font size
*/
unsetFontSize: () => ReturnType
}
}
}
export const FontSize = /* @__PURE__*/ Extension.create<FontSizeOptions>({
name: 'fontSize',
addOptions() {
return {
...this.parent?.(),
types: ['textStyle'],
fontSizes: [...DEFAULT_FONT_SIZE_LIST],
button: ({ editor, extension, t }) => {
const fontSizes = (extension.options?.fontSizes as FontSizeOptions['fontSizes']) || []
const items: Item[] = [DEFAULT_FONT_SIZE_VALUUE, ...fontSizes].map(k => ({
title: k === DEFAULT_FONT_SIZE_VALUUE ? t('editor.default') : String(k),
isActive: () => {
const { fontSize } = editor.getAttributes('textStyle')
const isDefault = k === DEFAULT_FONT_SIZE_VALUUE
const notFontSize = fontSize === undefined
if (isDefault && notFontSize) {
return true
}
return editor.isActive({ fontSize: String(k) }) || false
},
action: () => {
if (k === DEFAULT_FONT_SIZE_VALUUE) {
editor.commands.unsetFontSize()
return
}
editor.commands.setFontSize(String(k))
},
disabled: !editor.can().setFontSize(String(k)),
divider: k === DEFAULT_FONT_SIZE_VALUUE ?? false,
default: k === DEFAULT_FONT_SIZE_VALUUE ?? false
}))
const disabled = items.filter(k => k.disabled).length === items.length
return {
component: ActionMenuButton,
componentProps: {
icon: 'fontSize',
tooltip: t('editor.fontSize.tooltip'),
disabled,
items,
maxHeight: 280
}
}
}
}
},
addGlobalAttributes() {
return [
{
types: this.options.types,
attributes: {
fontSize: {
default: null,
parseHTML: element => element.style.fontSize || '',
renderHTML: attributes => {
if (!attributes.fontSize) {
return {}
}
return {
style: `font-size: ${getCssUnitWithDefault(attributes.fontSize)}`
}
}
}
}
}
]
},
addCommands() {
return {
setFontSize:
fontSize =>
({ chain }) => {
return chain().setMark('textStyle', { fontSize }).run()
},
unsetFontSize:
() =>
({ chain }) => {
return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run()
}
}
}
})