add basic font-family extension

docs/src/demos/Marks/TextStyle/index.vue

@@ -1,5 +1,12 @@
 <template>
   <div v-if="editor">
+    <button @click="editor.chain().focus().fontFamily('Inter').run()">
+      Inter
+    </button>
+    <button @click="editor.chain().focus().fontFamily('Comic Sans MS').run()">
+      Comic Sans
+    </button>
+
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -12,6 +19,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Heading from '@tiptap/extension-heading'
 import TextStyle from '@tiptap/extension-text-style'
+import FontFamily from '@tiptap/extension-font-family'
 
 export default {
   components: {
@@ -32,6 +40,7 @@ export default {
         Text(),
         Heading(),
         TextStyle(),
+        FontFamily(),
       ],
       content: `
         <h2>Hello</h2>

packages/extension-font-family/index.ts

@@ -0,0 +1,46 @@
+import { Command, createExtension } from '@tiptap/core'
+
+type FontFamilyOptions = {
+  types: string[],
+}
+
+const FontFamily = createExtension({
+  defaultOptions: <FontFamilyOptions>{
+    types: ['textStyle'],
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            renderHTML: attributes => ({
+              style: `font-family: ${attributes.fontFamily}`,
+            }),
+            parseHTML: element => ({
+              fontFamily: element.style.fontFamily,
+            }),
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      fontFamily: (fontFamily: string): Command => ({ commands }) => {
+        return commands.updateMarkAttributes('textStyle', { fontFamily })
+      },
+    }
+  },
+})
+
+export default FontFamily
+
+declare module '@tiptap/core/src/Editor' {
+  interface AllExtensions {
+    FontFamily: typeof FontFamily,
+  }
+}

packages/extension-font-family/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@tiptap/extension-font-family",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-font-family.js",
+  "umd:main": "dist/tiptap-extension-font-family.umd.js",
+  "module": "dist/tiptap-extension-font-family.mjs",
+  "unpkg": "dist/tiptap-extension-font-family.js",
+  "jsdelivr": "dist/tiptap-extension-font-family.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  }
+}