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

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

@@ -0,0 +1,72 @@
+import { Extension } from '@tiptap/core'
+import '@tiptap/extension-text-style'
+
+type ColorOptions = {
+  types: string[],
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    color: {
+      /**
+       * Set the text color
+       */
+      setColor: (color: string) => ReturnType,
+      /**
+       * Unset the text color
+       */
+      unsetColor: () => ReturnType,
+    }
+  }
+}
+
+export const Color = Extension.create<ColorOptions>({
+  name: 'color',
+
+  defaultOptions: {
+    types: ['textStyle'],
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            renderHTML: attributes => {
+              if (!attributes.color) {
+                return {}
+              }
+
+              return {
+                style: `color: ${attributes.color}`,
+              }
+            },
+            parseHTML: element => {
+              return {
+                color: element.style.color.replace(/['"]+/g, ''),
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setColor: color => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { color })
+          .run()
+      },
+      unsetColor: () => ({ chain }) => {
+        return chain()
+          .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