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

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