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>
<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
</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
</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
</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
</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
</button>
<button @click="editor.chain().focus().fontFamily().run()">
<button @click="editor.chain().focus().unsetFontFamily().run()">
Remove font-family
</button>

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

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