experiments: add font color extension

docs/src/demos/Experiments/FontColor/font-color.ts

@@ -0,0 +1,73 @@
+import { Extension } from '@tiptap/core'
+import '@tiptap/extension-text-style'
+
+type FontColorOptions = {
+  types: string[],
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontColor: {
+      /**
+       * Set the font color
+       */
+      setFontColor: (fontColor: string) => ReturnType,
+      /**
+       * Unset the font color
+       */
+      unsetFontColor: () => ReturnType,
+    }
+  }
+}
+
+export const FontColor = Extension.create<FontColorOptions>({
+  name: 'fontColor',
+
+  defaultOptions: {
+    types: ['textStyle'],
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontColor: {
+            default: null,
+            renderHTML: attributes => {
+              if (!attributes.fontColor) {
+                return {}
+              }
+
+              return {
+                style: `color: ${attributes.fontColor}`,
+              }
+            },
+            parseHTML: element => {
+              console.log('FOO', element.style)
+              return {
+                fontColor: element.style.color.replace(/['"]+/g, ''),
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setFontColor: fontColor => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontColor })
+          .run()
+      },
+      unsetFontColor: () => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontColor: null })
+          .removeEmptyTextStyle()
+          .run()
+      },
+    }
+  },
+})

docs/src/demos/Experiments/FontColor/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().setFontColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#958DF1' })}">
+      purple
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#F98181').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#F98181' })}">
+      red
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#FBBC88').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#FBBC88' })}">
+      orange
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#FAF594').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#FAF594' })}">
+      yellow
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#70CFF8').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#70CFF8' })}">
+      blue
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#94FADB').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#94FADB' })}">
+      teal
+    </button>
+    <button @click="editor.chain().focus().setFontColor('#B9F18D').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#B9F18D' })}">
+      green
+    </button>
+    <button @click="editor.chain().focus().unsetFontColor().run()">
+      remove color
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+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 { FontColor } from './font-color'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        TextStyle,
+        FontColor,
+      ],
+      content: `
+        <p><span style="color: #958DF1">Oh, that’s purple for some reason.</span></p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/docPages/experiments.md

@@ -13,3 +13,4 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
 * [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
 * [@tiptap/extension-trailing-node](/experiments/trailing-node)
 * [@tiptap/extension-figure](/experiments/figure)
+* [@tiptap/extension-font-color](/experiments/font-color)

docs/src/docPages/experiments/font-color.md

@@ -0,0 +1,32 @@
+# FontFamily
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-font-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-font-color)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-font-color.svg)](https://npmcharts.com/compare/@tiptap/extension-font-color?minimal=true)
+
+This extension enables you to set the font color in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag (and only that). The font color is applied as inline style then, for example `<span style="color: #958DF1">`.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-text-style @tiptap/extension-font-color
+
+# with Yarn
+yarn add @tiptap/extension-text-style @tiptap/extension-font-color
+```
+
+This extension requires the [`TextStyle`](/api/marks/text-style) mark.
+
+## Settings
+| 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                                   |
+| ---------- | ---------- | --------------------------------------------- |
+| fontColor | fontColor | Applies the given font color as inline style |
+
+## Source code
+[packages/extension-font-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-color/)
+
+## Usage
+<demo name="Experiments/FontColor" />