improve text style extension

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

@@ -1,11 +1,14 @@
 <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()">
+    <button
+      @click="editor.chain().focus().fontFamily('Comic Sans MS').run()"
+      :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS' }) }"
+    >
       Comic Sans
     </button>
+    <button @click="editor.chain().focus().fontFamily().run()">
+      Remove font-family
+    </button>
 
     <editor-content :editor="editor" />
   </div>
@@ -17,7 +20,6 @@ import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 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'
 
@@ -38,13 +40,11 @@ export default {
         Document(),
         Paragraph(),
         Text(),
-        Heading(),
         TextStyle(),
         FontFamily(),
       ],
       content: `
-        <h2>Hello</h2>
-        <p>This is text.</p>
+        <p><span style="font-family: Comic Sans MS">Welcome to the internet.</span></p>
       `,
     })
   },

packages/extension-font-family/index.ts

@@ -16,11 +16,17 @@ const FontFamily = createExtension({
         attributes: {
           fontFamily: {
             default: null,
-            renderHTML: attributes => ({
-              style: `font-family: ${attributes.fontFamily}`,
-            }),
+            renderHTML: attributes => {
+              if (!attributes.fontFamily) {
+                return {}
+              }
+
+              return {
+                style: `font-family: ${attributes.fontFamily}`,
+              }
+            },
             parseHTML: element => ({
-              fontFamily: element.style.fontFamily,
+              fontFamily: element.style.fontFamily.replace(/['"]+/g, ''),
             }),
           },
         },
@@ -30,8 +36,11 @@ const FontFamily = createExtension({
 
   addCommands() {
     return {
-      fontFamily: (fontFamily: string): Command => ({ commands }) => {
-        return commands.updateMarkAttributes('textStyle', { fontFamily })
+      fontFamily: (fontFamily: string | null = null): Command => ({ chain }) => {
+        return chain()
+          .updateMarkAttributes('textStyle', { fontFamily })
+          .removeEmptyTextStyle()
+          .run()
       },
     }
   },

packages/extension-text-style/index.ts

@@ -1,4 +1,4 @@
-import { createMark } from '@tiptap/core'
+import { Command, createMark, getMarkAttrs } from '@tiptap/core'
 
 const TextStyle = createMark({
   name: 'textStyle',
@@ -7,6 +7,15 @@ const TextStyle = createMark({
     return [
       {
         tag: 'span',
+        getAttrs: element => {
+          const hasStyles = (element as HTMLElement).hasAttribute('style')
+
+          if (!hasStyles) {
+            return false
+          }
+
+          return {}
+        },
       },
     ]
   },
@@ -14,6 +23,22 @@ const TextStyle = createMark({
   renderHTML({ attributes }) {
     return ['span', attributes, 0]
   },
+
+  addCommands() {
+    return {
+      removeEmptyTextStyle: (): Command => ({ state, commands }) => {
+        const attributes = getMarkAttrs(state, this.type)
+        const hasStyles = Object.entries(attributes).every(([, value]) => !!value)
+
+        if (hasStyles) {
+          return true
+        }
+
+        return commands.removeMark('textStyle')
+      },
+    }
+  },
+
 })
 
 export default TextStyle