ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add fontFamily commands

Browse Source
This commit is contained in:
Philipp Kühn
2020-11-18 12:09:04 +01:00
parent 116b189a93
commit fbee7656c8
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/src/demos/Extensions/FontFamily/index.vue
View File

@@ -1,21 +1,21 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().fontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }"> <button @click="editor.chain().focus().setFontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
Inter Inter
</button> </button>
<button @click="editor.chain().focus().fontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }"> <button @click="editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
Comic Sans Comic Sans
</button> </button>
<button @click="editor.chain().focus().fontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }"> <button @click="editor.chain().focus().setFontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
serif serif
</button> </button>
<button @click="editor.chain().focus().fontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }"> <button @click="editor.chain().focus().setFontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
monospace monospace
</button> </button>
<button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }"> <button @click="editor.chain().focus().setFontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
cursive cursive
</button> </button>
<button @click="editor.chain().focus().fontFamily().run()"> <button @click="editor.chain().focus().unsetFontFamily().run()">
Remove font-family Remove font-family
</button> </button>

12
packages/extension-font-family/src/index.ts
View File

@@ -38,11 +38,19 @@ const FontFamily = Extension.create({
addCommands() { addCommands() {
return { return {
/** /**
* Update the font family * Set the font family
*/ */
fontFamily: (fontFamily: string | null = null): Command => ({ chain }) => { setFontFamily: (fontFamily: string): Command => ({ chain }) => {
return chain() return chain()
.addMark('textStyle', { fontFamily }) .addMark('textStyle', { fontFamily })
.run()
},
/**
* Unset the font family
*/
unsetFontFamily: (): Command => ({ chain }) => {
return chain()
.addMark('textStyle', { fontFamily: null })
.removeEmptyTextStyle() .removeEmptyTextStyle()
.run() .run()
}, },