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>This has a &lt;span&gt; tag without a style attribute, so it’s thrown away.</span></p>
-        <p><span style="font-family: Comic Sans MS, Comic Sans">Comic Sans</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>
-        <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>
       `,
     })
   },

docs/src/docPages/api/extensions/font-family.md

@@ -1,5 +1,5 @@
 # FontFamily
-This extension enables you to set the font family in the editor.
+This extension enables you to set the font family in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.
 
 ## Installation
 ::: warning Use with TextStyle
@@ -16,8 +16,13 @@ yarn add @tiptap/extension-text-style @tiptap/extension-font-family
 
 ## Settings
 | Option | Type  | Default       | Description                                                              |
-| ------ | ----- | ------------- | --------------------------------------------------------------------- |
+| ------ | ----- | ------------- | ------------------------------------------------------------------------ |
-| types  | array | ['textStyle'] | A list of marks where the font family attribute should be applied to. |
+| types  | array | ['textStyle'] | A list of marks to which the font family attribute should be applied to. |
+
+## Commands
+| Command    | Parameters | Description                                   |
+| ---------- | ---------- | --------------------------------------------- |
+| fontFamily | fontFamily | Applies the given font family as inline style |
 
 ## Source code
 [packages/extension-font-family/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-font-family/)

docs/src/docPages/api/marks/text-style.md

@@ -10,6 +10,11 @@ npm install @tiptap/extension-text-style
 yarn add @tiptap/extension-text-style
 ```
 
+## Commands
+| Command              | Parameters | Description                                   |
+| -------------------- | ---------- | --------------------------------------------- |
+| removeEmptyTextStyle | –          | Remove `<span>` tags without an inline style. |
+
 ## Source code
 [packages/extension-text-style/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-style/)
 

docs/src/docPages/guide/build-custom-extensions.md

@@ -354,6 +354,9 @@ const CustomLink = Link.extend({
 ```
 
 ## Start from scratch
+You can also build your own extensions from scratch with the `createNode()`, `createMark()`, and `createExtension()` functions. Pass an option with your code and configuration.
+
+And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
 
 ### Create a node
 ```js

docs/src/links.yaml

@@ -119,7 +119,6 @@
           link: /api/marks/strike
         - title: TextStyle
           link: /api/marks/text-style
-          draft: true
         - title: Underline
           link: /api/marks/underline
     - title: Extensions
@@ -137,7 +136,6 @@
           link: /api/extensions/focus
         - title: FontFamily
           link: /api/extensions/font-family
-          draft: true
         - title: Gapcursor
           link: /api/extensions/gapcursor
         - title: History
@@ -152,7 +150,6 @@
       link: /api/events
     - title: Schema
       link: /api/schema
-      new: true
     - title: Keyboard Shortcuts
       link: /api/keyboard-shortcuts