update content

docs/src/demos/Extensions/FontFamily/index.spec.js

@@ -0,0 +1,5 @@
+context('/api/extensions/font-family', () => {
+  before(() => {
+    cy.visit('/api/extensions/font-family')
+  })
+})

docs/src/demos/Extensions/FontFamily/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().fontFamily('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' }) }">
+      Comic Sans
+    </button>
+    <button @click="editor.chain().focus().fontFamily('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' }) }">
+      monospace
+    </button>
+    <button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
+      cursive
+    </button>
+    <button @click="editor.chain().focus().fontFamily().run()">
+      Remove font-family
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TextStyle from '@tiptap/extension-text-style'
+import FontFamily from '@tiptap/extension-font-family'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        TextStyle(),
+        FontFamily(),
+      ],
+      content: `
+        <p><span style="font-family: Inter">Did you know that Inter is a really nice font for interfaces?</span></p>
+        <p><span style="font-family: Comic Sans MS, Comic Sans">It doesn’t look as professional as Comic Sans.</span></p>
+        <p><span style="font-family: serif">Serious people use serif fonts anyway.</span></p>
+        <p><span style="font-family: monospace">The cool kids can apply monospace fonts aswell.</span></p>
+        <p><span style="font-family: cursive">But hopefully we all can agree, that cursive fonts are the best.</span></p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

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

@@ -1,24 +1,5 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().fontFamily('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' }) }">
-      Comic Sans
-    </button>
-    <button @click="editor.chain().focus().fontFamily('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' }) }">
-      monospace
-    </button>
-    <button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
-      cursive
-    </button>
-    <button @click="editor.chain().focus().fontFamily().run()">
-      Remove font-family
-    </button>
-
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -30,7 +11,6 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import TextStyle from '@tiptap/extension-text-style'
-import FontFamily from '@tiptap/extension-font-family'
 
 export default {
   components: {
@@ -50,14 +30,10 @@ export default {
         Paragraph(),
         Text(),
         TextStyle(),
-        FontFamily(),
       ],
       content: `
-        <p><span style="font-family: Inter">Inter</span></p>
-        <p><span style="font-family: Comic Sans MS, Comic Sans">Comic Sans</span></p>
-        <p><span style="font-family: serif">serif</span></p>
-        <p><span style="font-family: monospace">monospace</span></p>
-        <p><span style="font-family: cursive">cursive</span></p>
+        <p><span>This has a &lt;span&gt; tag without a style attribute, so it’s thrown away.</span></p>
+        <p><span style="">But this one is wrapped in a &lt;span&gt; tag with an inline style attribute, so it’s kept - even if it’s empty for now.</span></p>
       `,
     })
   },