Add Tiptap extensions for color in the editor component. (#477)

- Update package.json and yarn.lock to include new dependencies.

Author: haiphamhoang

frontend/package.json

@@ -41,9 +41,11 @@
     "@stripe/stripe-js": "^1.54.1",
     "@tabler/icons-react": "^2.44.0",
     "@tanstack/react-query": "5.52.2",
+    "@tiptap/extension-color": "^2.11.7",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.1.13",
     "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/extension-text-style": "^2.11.7",
     "@tiptap/extension-underline": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.1.13",

frontend/src/components/common/Editor/index.tsx

@@ -4,6 +4,8 @@ import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import TextAlign from '@tiptap/extension-text-align';
 import Image from '@tiptap/extension-image';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
 import React, {useEffect, useState} from "react";
 import {InputDescription, InputError, InputLabel} from "@mantine/core";
 import classes from "./Editor.module.scss";
@@ -44,7 +46,9 @@ export const Editor = ({
             Link,
             TextAlign.configure({types: ['heading', 'paragraph']}),
             Image,
-            ImageResize
+            ImageResize,
+            TextStyle,
+            Color
         ],
         onUpdate: ({editor}) => {
             const html = editor.getHTML();
@@ -92,6 +96,24 @@ export const Editor = ({
                                 <RichTextEditor.Italic/>
                                 <RichTextEditor.Underline/>
                                 <RichTextEditor.ClearFormatting/>
+                                <RichTextEditor.ColorPicker
+                                    colors={[
+                                        '#25262b',
+                                        '#868e96',
+                                        '#fa5252',
+                                        '#e64980',
+                                        '#be4bdb',
+                                        '#7950f2',
+                                        '#4c6ef5',
+                                        '#228be6',
+                                        '#15aabf',
+                                        '#12b886',
+                                        '#40c057',
+                                        '#82c91e',
+                                        '#fab005',
+                                        '#fd7e14',
+                                    ]}
+                                />
                             </RichTextEditor.ControlsGroup>
 
                             <RichTextEditor.ControlsGroup>
@@ -130,6 +152,24 @@ export const Editor = ({
                                 <RichTextEditor.Italic/>
                                 <RichTextEditor.Underline/>
                                 <RichTextEditor.ClearFormatting/>
+                                <RichTextEditor.ColorPicker
+                                    colors={[
+                                        '#25262b',
+                                        '#868e96',
+                                        '#fa5252',
+                                        '#e64980',
+                                        '#be4bdb',
+                                        '#7950f2',
+                                        '#4c6ef5',
+                                        '#228be6',
+                                        '#15aabf',
+                                        '#12b886',
+                                        '#40c057',
+                                        '#82c91e',
+                                        '#fab005',
+                                        '#fd7e14',
+                                    ]}
+                                />
                             </RichTextEditor.ControlsGroup>
 
                             <RichTextEditor.ControlsGroup>

frontend/yarn.lock

@@ -1435,6 +1435,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.11.5.tgz#a550c544804e65507ab66dc8ab89a1e2f7d9228d"
   integrity sha512-xOvHevNIQIcCCVn9tpvXa1wBp0wHN/2umbAZGTVzS+AQtM7BTo0tz8IyzwxkcZJaImONcUVYLOLzt2AgW1LltA==
 
+"@tiptap/extension-color@^2.11.7":
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.11.7.tgz#c5222456d2f017391707fe86d4f7f811faa60968"
+  integrity sha512-2CWb0Qnh8Crf9OwnnWB+M1QJtWrbn6IMSwuOzk+tSzdWSazjN8h6XAZVemr0qMdAA/SyUigzorStiPxN6o3/vQ==
+
 "@tiptap/extension-document@^2.11.5":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.11.5.tgz#1d650d232df46cf07b83e0a5cc64db1c70057f37"
@@ -1524,6 +1529,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.11.5.tgz#f1b3882de489328203187e6256e6ee130477cfad"
   integrity sha512-YUmYl0gILSd/u/ZkOmNxjNXVw+mu8fpC2f8G4I4tLODm0zCx09j9DDEJXSrM5XX72nxJQqtSQsCpNKnL0hfeEQ==
 
+"@tiptap/extension-text-style@^2.11.7":
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.11.7.tgz#1af9c23ed6154680eac1c0621d1112764c3fafb9"
+  integrity sha512-LHO6DBg/9SkCQFdWlVfw9nolUmw+Cid94WkTY+7IwrpyG2+ZGQxnKpCJCKyeaFNbDoYAtvu0vuTsSXeCkgShcA==
+
 "@tiptap/extension-text@^2.11.5":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.11.5.tgz#10cc6ec519aac71a6841ec9bd914ded747f6ec3f"