From 262ff88e59caf6c30794895aa2835babba736896 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 12 Nov 2020 16:36:29 +0100
Subject: [PATCH] update content

---
 .../demos/Extensions/FontFamily/index.spec.js |  5 ++
 .../src/demos/Extensions/FontFamily/index.vue | 69 +++++++++++++++++++
 docs/src/demos/Marks/TextStyle/index.vue      | 28 +-------
 .../docPages/api/extensions/font-family.md    | 13 ++--
 docs/src/docPages/api/marks/text-style.md     |  5 ++
 .../docPages/guide/build-custom-extensions.md |  3 +
 docs/src/links.yaml                           |  3 -
 7 files changed, 93 insertions(+), 33 deletions(-)
 create mode 100644 docs/src/demos/Extensions/FontFamily/index.spec.js
 create mode 100644 docs/src/demos/Extensions/FontFamily/index.vue

diff --git a/docs/src/demos/Extensions/FontFamily/index.spec.js b/docs/src/demos/Extensions/FontFamily/index.spec.js
new file mode 100644
index 000000000..66cd612e5
--- /dev/null
+++ b/docs/src/demos/Extensions/FontFamily/index.spec.js
@@ -0,0 +1,5 @@
+context('/api/extensions/font-family', () => {
+  before(() => {
+    cy.visit('/api/extensions/font-family')
+  })
+})
diff --git a/docs/src/demos/Extensions/FontFamily/index.vue b/docs/src/demos/Extensions/FontFamily/index.vue
new file mode 100644
index 000000000..a76515b3d
--- /dev/null
+++ b/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>
diff --git a/docs/src/demos/Marks/TextStyle/index.vue b/docs/src/demos/Marks/TextStyle/index.vue
index b80436b01..32cfbe851 100644
--- a/docs/src/demos/Marks/TextStyle/index.vue
+++ b/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>
       `,
     })
   },
diff --git a/docs/src/docPages/api/extensions/font-family.md b/docs/src/docPages/api/extensions/font-family.md
index 08c86b2a1..b5f19940e 100644
--- a/docs/src/docPages/api/extensions/font-family.md
+++ b/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
@@ -15,9 +15,14 @@ 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. |
+| Option | Type  | Default       | Description                                                              |
+| ------ | ----- | ------------- | ------------------------------------------------------------------------ |
+| 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/)
diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md
index 0251ecd49..e620235a7 100644
--- a/docs/src/docPages/api/marks/text-style.md
+++ b/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/)
 
diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-custom-extensions.md
index b5d819cd3..2a2c1ed47 100644
--- a/docs/src/docPages/guide/build-custom-extensions.md
+++ b/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
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 8fa7a0a4d..12aacccf1 100644
--- a/docs/src/links.yaml
+++ b/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