packages: add a new color extension to set the text color (#1744)

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

@@ -1,70 +0,0 @@
-<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/demos/Extensions/Color/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Extensions/Color', () => {
+  before(() => {
+    cy.visit('/demos/Extensions/Color')
+  })
+
+  // TODO: Write tests
+})

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

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

docs/src/docPages/api/extensions.md

@@ -13,6 +13,7 @@ There are also some extensions with more capabilities. We call them [nodes](/api
 | [CharacterCount](/api/extensions/character-count)           | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/)      |
 | [Collaboration](/api/extensions/collaboration)              | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/)        |
 | [CollaborationCursor](/api/extensions/collaboration-cursor) | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) |
+| [Color](/api/extensions/color)                              | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)                |
 | [Dropcursor](/api/extensions/dropcursor)                    | Included                                         | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)           |
 | [Focus](/api/extensions/focus)                              | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/)                |
 | [FontFamily](/api/extensions/font-family)                   | –                                                | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/)          |

docs/src/docPages/api/extensions/color.md

@@ -0,0 +1,32 @@
+# Color
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-color)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-color.svg)](https://npmcharts.com/compare/@tiptap/extension-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-color
+
+# with Yarn
+yarn add @tiptap/extension-text-style @tiptap/extension-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                                  |
+| ------- | ---------- | -------------------------------------------- |
+| color   | color      | Applies the given font color as inline style |
+
+## Source code
+[packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)
+
+## Usage
+<demo name="Extensions/Color" />

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

@@ -2,7 +2,7 @@
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-text-style.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-style)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-style.svg)](https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true)
 
-This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or font-color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family).
+This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family) or [`Color`](/api/extensions/color).
 
 ## Installation
 ```bash

docs/src/docPages/experiments.md

@@ -14,4 +14,3 @@ 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

@@ -1,32 +0,0 @@
-# FontColor
-[![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" />

docs/src/links.yaml

@@ -132,7 +132,6 @@
       items:
         - title: blur
           link: /api/commands/blur
-          type: new
         - title: clearContent
           link: /api/commands/clear-content
         - title: clearNodes
@@ -195,7 +194,6 @@
           type: draft
         - title: selectAll
           link: /api/commands/select-all
-          type: new
         - title: selectNodeBackward
           link: /api/commands/select-node-backward
           type: draft
@@ -321,10 +319,8 @@
           link: /api/marks/strike
         - title: Subscript
           link: /api/marks/subscript
-          type: new
         - title: Superscript
           link: /api/marks/superscript
-          type: new
         - title: TextStyle
           link: /api/marks/text-style
         - title: Underline
@@ -340,6 +336,9 @@
           link: /api/extensions/collaboration
         - title: CollaborationCursor
           link: /api/extensions/collaboration-cursor
+        - title: Color
+          link: /api/extensions/color
+          type: new
         - title: Dropcursor
           link: /api/extensions/dropcursor
         - title: FloatingMenu
@@ -356,7 +355,6 @@
           link: /api/extensions/placeholder
         - title: StarterKit
           link: /api/extensions/starter-kit
-          type: new
         - title: TextAlign
           link: /api/extensions/text-align
         - title: Typography

packages/extension-color/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-color
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-color)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-color.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-color.svg)](https://www.npmjs.com/package/@tiptap/extension-color)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

packages/extension-color/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tiptap/extension-color",
+  "description": "text color extension for tiptap",
+  "version": "2.0.0-beta.1",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-color.cjs.js",
+  "umd": "dist/tiptap-extension-color.umd.js",
+  "module": "dist/tiptap-extension-color.esm.js",
+  "types": "dist/packages/extension-color/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1",
+    "@tiptap/extension-text-style": "^2.0.0-beta.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-color"
+  }
+}

packages/extension-color/src/color.ts

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

packages/extension-color/src/index.ts

@@ -0,0 +1,5 @@
+import { Color } from './color'
+
+export * from './color'
+
+export default Color