-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
font-family.ts
83 lines (75 loc) · 1.87 KB
/
font-family.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
import '@tiptap/extension-text-style'
import { Extension } from '@tiptap/core'
export type FontFamilyOptions = {
/**
* A list of node names where the font family can be applied.
* @default ['textStyle']
* @example ['heading', 'paragraph']
*/
types: string[],
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
fontFamily: {
/**
* Set the font family
* @param fontFamily The font family
* @example editor.commands.setFontFamily('Arial')
*/
setFontFamily: (fontFamily: string) => ReturnType,
/**
* Unset the font family
* @example editor.commands.unsetFontFamily()
*/
unsetFontFamily: () => ReturnType,
}
}
}
/**
* This extension allows you to set a font family for text.
* @see https://www.tiptap.dev/api/extensions/font-family
*/
export const FontFamily = Extension.create<FontFamilyOptions>({
name: 'fontFamily',
addOptions() {
return {
types: ['textStyle'],
}
},
addGlobalAttributes() {
return [
{
types: this.options.types,
attributes: {
fontFamily: {
default: null,
parseHTML: element => element.style.fontFamily?.replace(/['"]+/g, ''),
renderHTML: attributes => {
if (!attributes.fontFamily) {
return {}
}
return {
style: `font-family: ${attributes.fontFamily}`,
}
},
},
},
},
]
},
addCommands() {
return {
setFontFamily: fontFamily => ({ chain }) => {
return chain()
.setMark('textStyle', { fontFamily })
.run()
},
unsetFontFamily: () => ({ chain }) => {
return chain()
.setMark('textStyle', { fontFamily: null })
.removeEmptyTextStyle()
.run()
},
}
},
})