添加字体颜色设置菜单

src/components/Icons.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2024-present AI-Labs
+
+/**
+ * 定义常用的图标
+ */
+export const Icons = {
+	ArrowDown: `<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="3 5 24 14"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 14L8 10H16L12 14Z"></path></svg>`,
+	Loading: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#FF6700" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>`,
+	// Loading: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 3C16.9706 3 21 7.02944 21 12H19C19 8.13401 15.866 5 12 5V3Z"></path></svg>`,
+}

src/components/index.ts

@@ -10,6 +10,7 @@ import { Classic } from "./menus/toolbar/Classic.ts";
 
 import { ScrollableDiv } from "./menus/toolbar/ScrollableDiv.ts";
 import { MenuButton } from "./menus/MenuButton.ts";
+import { ColorPicker } from "./popups/ColorPicker.ts";
 
 import { FontSizeIncrease } from "./menus/common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "./menus/common/FontSizeDecrease.ts";
@@ -21,6 +22,9 @@ import { Strike } from "./menus/common/Strike.ts";
 import { Subscript } from "./menus/common/Subscript.ts";
 import { Superscript } from "./menus/common/Superscript.ts";
 
+import { FontColor } from "./menus/common/FontColor.ts";
+import { Highlight } from "./menus/common/Highlight.ts";
+
 import { Undo } from "./menus/toolbar/base/Undo.ts";
 import { Redo } from "./menus/toolbar/base/Redo.ts";
 import { FormatPainter } from "./menus/toolbar/base/FormatPainter.ts";
@@ -39,6 +43,7 @@ defineCustomElement('uai-editor-classic-menu', Classic);
 
 defineCustomElement('uai-editor-scrollable-div', ScrollableDiv);
 defineCustomElement('uai-editor-menu-button', MenuButton);
+defineCustomElement('uai-editor-popup-color-picker', ColorPicker);
 
 defineCustomElement('uai-editor-common-menu-font-size-increase', FontSizeIncrease);
 defineCustomElement('uai-editor-common-menu-font-size-decrease', FontSizeDecrease);
@@ -50,6 +55,9 @@ defineCustomElement('uai-editor-common-menu-strike', Strike);
 defineCustomElement('uai-editor-common-menu-subscript', Subscript);
 defineCustomElement('uai-editor-common-menu-superscript', Superscript);
 
+defineCustomElement('uai-editor-common-menu-font-color', FontColor);
+defineCustomElement('uai-editor-common-menu-highlight', Highlight);
+
 defineCustomElement('uai-editor-base-menu-undo', Undo);
 defineCustomElement('uai-editor-base-menu-redo', Redo);
 defineCustomElement('uai-editor-base-menu-format-painter', FormatPainter);

src/components/menus/MenuButton.ts

@@ -4,12 +4,13 @@
 import { EditorEvents } from "@tiptap/core";
 import { UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
 import tippy, { Instance, Props } from "tippy.js";
+import { Icons } from "../Icons.ts";
 
 /**
  * 菜单按钮选项
  */
 export type MenuButtonOptions = {
-    menuType: "button" | "select",
+    menuType: "button" | "select" | "color",
     enable: boolean,
     className?: string,
     header?: "ribbon" | "classic",
@@ -59,6 +60,10 @@ export class MenuButton extends HTMLElement implements UAIEditorEventListener {
             // 下拉选择
             this.createMenuSelect()
         }
+        if (this.menuButtonOptions.menuType === "color") {
+            // 颜色选择
+            this.createMenuColor()
+        }
 
         // 提示信息
         var tipsContent = this.menuButtonOptions.tooltip;
@@ -146,4 +151,42 @@ export class MenuButton extends HTMLElement implements UAIEditorEventListener {
         this.menuButtonContent.classList.add("uai-button-content");
         this.menuButton.appendChild(this.menuButtonContent);
     }
+
+    /**
+     * 创建颜色选择框
+     */
+    createMenuColor() {
+        this.menuButton = document.createElement("div");
+        this.menuButton.classList.add("uai-menu-button");
+        this.container.appendChild(this.menuButton);
+
+        // 按钮内容
+        this.menuButtonContent = document.createElement("div");
+        this.menuButtonContent.classList.add("uai-button-content");
+
+        // 按钮图标，偏小一点
+        const iconDiv = document.createElement("div");
+        iconDiv.style.height = "14px";
+        iconDiv.style.display = "flex";
+        if (this.menuButtonOptions.icon) {
+            iconDiv.innerHTML = `<img src="${this.menuButtonOptions.icon}" width="14" height="14" />`
+        }
+        // 当前颜色展示容器，展示当前选中的颜色
+        const colorDiv = document.createElement("div");
+        colorDiv.id = "currentColor";
+        colorDiv.style.height = "3px";
+        colorDiv.style.marginTop = "1px";
+        this.menuButtonContent.style.display = "block";
+        this.menuButtonContent.appendChild(iconDiv);
+        this.menuButtonContent.appendChild(colorDiv);
+
+        this.menuButton.style.display = "flex";
+        this.menuButton.appendChild(this.menuButtonContent);
+
+        // 颜色弹出框下拉三角箭头
+        this.menuButtonArrow = document.createElement("div");
+        this.menuButtonArrow.classList.add("uai-button-icon-arrow");
+        this.menuButtonArrow.innerHTML = Icons.ArrowDown;
+        this.menuButton.appendChild(this.menuButtonArrow);
+    }
 }

src/components/menus/common/FontColor.ts

@@ -0,0 +1,136 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/color.svg";
+import { t } from "i18next";
+import { InnerEditor, UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import tippy, { Instance, Props } from "tippy.js";
+import { ColorPicker } from "../../popups/ColorPicker.ts";
+
+/**
+ * 公共菜单：设置字体颜色
+ */
+export class FontColor extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "color",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.color'),
+        tooltip: t('base.color'),
+    }
+
+    // 当前选中的颜色
+    currentColor?: string
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    // 颜色选择器
+    colorPicker: ColorPicker;
+    // 颜色显示器
+    colorElement!: HTMLElement;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+
+        // 创建颜色选择器
+        this.colorPicker = new ColorPicker();
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        // 初始化颜色展示器
+        this.colorElement = this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement;
+
+        // 初始化颜色选择器
+        this.colorPicker.onCreate(event, options);
+        this.colorPicker.element = this.colorElement;
+
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，设置字体颜色
+        this.menuButton.menuButtonContent.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                const color = this.colorElement.style.backgroundColor;
+                if (color === '') {
+                    event.editor.chain().focus().unsetColor().run();
+                } else {
+                    event.editor.chain().focus().setColor(color).run();
+                }
+            }
+        })
+
+        if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) {
+            const instance = tippy(this.menuButton.menuButtonArrow, {
+                content: this.colorPicker,
+                placement: 'bottom',
+                trigger: 'click',
+                interactive: true,
+                arrow: false,
+            })
+            // 创建一个观察器实例并传入回调函数
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        // 这里可以执行你需要的操作
+                        instance.hide();
+                        const color = this.colorElement.style.backgroundColor;
+                        if (color === '') {
+                            event.editor.chain().focus().unsetColor().run();
+                        } else {
+                            event.editor.chain().focus().setColor(color).run();
+                        }
+                    }
+                }
+            });
+
+            // 配置观察器选项
+            const config = { attributes: true, attributeFilter: ['style'] };
+
+            // 开始观察目标节点
+            observer.observe(this.colorElement, config);
+        }
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        this.colorPicker.onTransaction(event, options);
+        try {
+            // 获取当前文字的字体颜色
+            const color = `${event.editor.getAttributes('textStyle').color}`;
+            // 颜色展示器切换到当前字体颜色
+            if (color) {
+                this.colorElement.style.backgroundColor = color;
+            } else {
+                this.colorElement.style.backgroundColor = "#000";
+            }
+        } catch (error) {
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Highlight.ts

@@ -0,0 +1,142 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/highlight.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import tippy from "tippy.js";
+import { ColorPicker } from "../../popups/ColorPicker.ts";
+
+/**
+ * 公共菜单：高亮
+ */
+export class Highlight extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "color",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.highlight.text'),
+        tooltip: t('base.highlight.text'),
+        shortcut: "Ctrl+Shift+H",
+    }
+
+    // 当前高亮颜色
+    currentColor?: string;
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    // 颜色选择器
+    colorPicker!: ColorPicker;
+    // 颜色显示器
+    colorElement!: HTMLElement;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+
+        // 创建颜色选择器
+        this.colorPicker = new ColorPicker();
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        // 初始化颜色展示器
+        this.colorElement = this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement;
+
+        // 初始化颜色选择器
+        this.colorPicker.onCreate(event, options);
+        this.colorPicker.element = this.colorElement;
+
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，设置高亮颜色
+        this.menuButton.menuButtonContent.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                const color = this.colorElement.style.backgroundColor;
+                if (color === '') {
+                    event.editor.chain().focus().unsetHighlight().run();
+                } else {
+                    event.editor.chain().focus().setHighlight({ color }).run();
+                }
+            }
+        })
+
+        if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) {
+            const instance = tippy(this.menuButton.menuButtonArrow, {
+                content: this.colorPicker,
+                placement: 'bottom',
+                trigger: 'click',
+                interactive: true,
+                arrow: false,
+            })
+            // 创建一个观察器实例并传入回调函数
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        // 这里可以执行你需要的操作
+                        instance.hide();
+                        const color = this.colorElement.style.backgroundColor;
+                        if (color === '') {
+                            event.editor.chain().focus().unsetHighlight().run();
+                        } else {
+                            event.editor.chain().focus().setHighlight({ color }).run();
+                        }
+                    }
+                }
+            });
+
+            // 配置观察器选项
+            const config = { attributes: true, attributeFilter: ['style'] };
+
+            // 开始观察目标节点
+            observer.observe(this.colorElement, config);
+        }
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        this.colorPicker.onTransaction(event, options);
+        try {
+            // 获取当前文字的高亮颜色
+            const color = `${event.editor.getAttributes('highlight').color}`;
+            // 颜色展示器切换到当前字体高亮颜色
+            if (color) {
+                this.colorElement.style.backgroundColor = color;
+            } else {
+                this.colorElement.style.backgroundColor = "#000";
+            }
+        } catch (error) {
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+
+    onColorChange(color: string) {
+        this.currentColor = color;
+        (this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement).style.backgroundColor = color;
+    }
+}
+

src/components/menus/toolbar/Classic.ts

@@ -17,6 +17,9 @@ import { Strike } from "../common/Strike.ts";
 import { Subscript } from "../common/Subscript.ts";
 import { Superscript } from "../common/Superscript.ts";
 
+import { FontColor } from "../common/FontColor.ts";
+import { Highlight } from "../common/Highlight.ts";
+
 import { Redo } from "./base/Redo";
 import { Undo } from "./base/Undo";
 import { FormatPainter } from "./base/FormatPainter";
@@ -57,6 +60,8 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     baseMenuStrike!: Strike;
     baseMenuSubscript!: Subscript;
     baseMenuSuperscript!: Superscript;
+    baseMenuFontColor!: FontColor;
+    baseMenuHighlight!: Highlight;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -173,6 +178,12 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuSuperscript);
+
+        this.baseMenuFontColor = new FontColor({ menuType: "color", enable: true });
+        this.eventComponents.push(this.baseMenuFontColor);
+
+        this.baseMenuHighlight = new Highlight({ menuType: "color", enable: true });
+        this.eventComponents.push(this.baseMenuHighlight);
     }
     /**
      * 创建基础菜单
@@ -208,5 +219,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.baseMenuStrike);
         group2.appendChild(this.baseMenuSubscript);
         group2.appendChild(this.baseMenuSuperscript);
+        group2.appendChild(this.baseMenuFontColor);
+        group2.appendChild(this.baseMenuHighlight);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -17,6 +17,9 @@ import { Strike } from "../common/Strike.ts";
 import { Subscript } from "../common/Subscript.ts";
 import { Superscript } from "../common/Superscript.ts";
 
+import { FontColor } from "../common/FontColor.ts";
+import { Highlight } from "../common/Highlight.ts";
+
 import { Redo } from "./base/Redo";
 import { Undo } from "./base/Undo";
 
@@ -59,6 +62,8 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     baseMenuStrike!: Strike;
     baseMenuSubscript!: Subscript;
     baseMenuSuperscript!: Superscript;
+    baseMenuFontColor!: FontColor;
+    baseMenuHighlight!: Highlight;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -195,6 +200,12 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuSuperscript);
+
+        this.baseMenuFontColor = new FontColor({ menuType: "color", enable: true });
+        this.eventComponents.push(this.baseMenuFontColor);
+
+        this.baseMenuHighlight = new Highlight({ menuType: "color", enable: true });
+        this.eventComponents.push(this.baseMenuHighlight);
     }
 
     /**
@@ -247,5 +258,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group2row2.appendChild(this.baseMenuStrike);
         group2row2.appendChild(this.baseMenuSubscript);
         group2row2.appendChild(this.baseMenuSuperscript);
+        group2row2.appendChild(this.baseMenuFontColor);
+        group2row2.appendChild(this.baseMenuHighlight);
     }
 }

src/components/popups/ColorPicker.ts

@@ -0,0 +1,184 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { EditorEvents } from "@tiptap/core";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
+import { t } from "i18next";
+
+/**
+ * 所有可选颜色
+ */
+const colors = [
+    "#FFF", "#000", "#4A5366", "#3B74EC", "#45A2EF", "#529867", "#CD4A3F", "#EA8D40", "#EEC543", "#8E45D0",
+    "#F2F2F2", "#7F7F7F", "#F4F5F7", "#CBDCFC", "#E8F6FE", "#EDFAF2", "#FCEAE9", "#FDF3EC", "#FEF9E5", "#FAECFE",
+    "#EEE", "#595959", "#C6CAD2", "#CEEBFD", "#CBDCFC", "#CBE9D7", "#F7CBC9", "#FADDC7", "#FDEEB5", "#EBCAFC",
+    "#BFBFBF", "#3F3F3F", "#828B9D", "#A0BEFA", "#A7DCFC", "#A6D5B8", "#F2A19C", "#F5BC8C", "#FBE281", "#CB94F9",
+    "#A5A5A5", "#262626", "#363B44", "#2452B2", "#3473A1", "#417A53", "#922B22", "#AD642A", "#9E8329", "#57297D",
+    "#939393", "#0D0D0D", "#25272E", "#15316A", "#1C415A", "#284D34", "#511712", "#573213", "#635217", "#36194E",
+]
+/**
+ * 所有标准颜色
+ */
+const standardColors = ['#B12318', '#EB3323', '#F6C143', '#FFFE55', '#A0CD63', '#4FAD5B', '#4CAFEA', '#2D70BA', '#06215C', '#68389B']
+
+/**
+ * 当前使用过的颜色
+ */
+const recentColors: string[] = []
+
+/**
+ * 颜色选取器
+ */
+export class ColorPicker extends HTMLElement implements UAIEditorEventListener {
+    container!: HTMLElement;
+    element!: HTMLElement;
+    recentColorTitle!: HTMLElement;
+    recentColorGroup!: HTMLElement;
+
+    constructor() {
+        super();
+    }
+
+    /**
+     * 颜色选择监听，设置当前选取的颜色、渲染颜色展示
+     * @param color 
+     */
+    colorClickListener(color: string) {
+        this.listRecentColors(color);
+        this.element.style.backgroundColor = "#000";
+        this.element.style.backgroundColor = color;
+    }
+
+    /**
+     * 更新界面，添加当前已选择过的颜色，展示在弹出框
+     * @param color 
+     */
+    listRecentColors(color: string) {
+        const index = recentColors.indexOf(color);
+        if (index > -1) {
+            recentColors.splice(index, 1);
+        }
+        recentColors.unshift(color);
+        if (recentColors.length > 10) {
+            recentColors.pop();
+        }
+        this.recentColorGroup.innerHTML = "";
+        if (recentColors.length > 0) {
+            this.recentColorTitle.style.display = "block";
+            this.recentColorGroup.style.display = "flex";
+        } else {
+            this.recentColorTitle.style.display = "none";
+            this.recentColorGroup.style.display = "none";
+        }
+        recentColors.forEach(color => {
+            const item = document.createElement("div");
+            item.classList.add("uai-color-picker-item");
+            item.style.backgroundColor = color;
+            this.recentColorGroup.appendChild(item);
+            item.addEventListener("click", () => {
+                this.colorClickListener(color);
+            })
+        })
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        const parent = document.createElement("div");
+        parent.classList.add("uai-color-picker");
+
+        // 颜色选取容器
+        this.container = document.createElement("div");
+        this.container.classList.add("uai-color-picker-container");
+
+        // 默认颜色按钮
+        const defaultButtonDiv = document.createElement("div");
+        defaultButtonDiv.classList.add("uai-color-picker-default-button");
+
+        const defaultButton = document.createElement("div");
+        defaultButton.classList.add("uai-button");
+        defaultButton.innerHTML = t('colorPicker.default');
+        // 添加点击事件，设置默认颜色
+        defaultButton.addEventListener("click", () => {
+            this.colorClickListener("");
+        });
+        defaultButtonDiv.appendChild(defaultButton);
+
+        this.container.appendChild(defaultButtonDiv);
+
+        // 可选颜色分组
+        const colorsGroup = document.createElement("div");
+        colorsGroup.classList.add("uai-color-picker-group");
+
+        // 设置所有可选颜色
+        colors.forEach(color => {
+            const item = document.createElement("div");
+            item.classList.add("uai-color-picker-item");
+            item.style.backgroundColor = color;
+            item.addEventListener("click", () => {
+                this.colorClickListener(color);
+            })
+            colorsGroup.appendChild(item);
+        })
+        this.container.appendChild(colorsGroup);
+
+        // 标准颜色容器
+        const standardColor = document.createElement("div");
+        standardColor.classList.add("uai-color-picker-group-title");
+        standardColor.innerHTML = t('colorPicker.standard');
+        this.container.appendChild(standardColor);
+
+        // 标准颜色分组
+        const standardColorsGroup = document.createElement("div");
+        standardColorsGroup.classList.add("uai-color-picker-group");
+
+        // 设置所有标准颜色
+        standardColors.forEach(color => {
+            const item = document.createElement("div");
+            item.classList.add("uai-color-picker-item");
+            item.style.backgroundColor = color;
+            standardColorsGroup.appendChild(item);
+            item.addEventListener("click", () => {
+                this.colorClickListener(color);
+            })
+        })
+        this.container.appendChild(standardColorsGroup);
+
+        // 当前已使用过的颜色展示
+        this.recentColorTitle = document.createElement("div");
+        this.recentColorTitle.classList.add("uai-color-picker-group-title");
+        this.recentColorTitle.innerHTML = t('colorPicker.recent');
+        this.recentColorTitle.style.display = "none";
+        this.container.appendChild(this.recentColorTitle);
+
+        // 当前颜色分组
+        this.recentColorGroup = document.createElement("div");
+        this.recentColorGroup.classList.add("uai-color-picker-group");
+        this.recentColorGroup.style.display = "none";
+        this.container.appendChild(this.recentColorGroup);
+
+        // 分割线
+        const divider = document.createElement("div");
+        divider.classList.add("uai-color-picker-divider");
+        this.container.appendChild(divider);
+
+        parent.appendChild(this.container);
+        this.appendChild(parent);
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+
+    }
+
+    onEditableChange(editable: boolean) {
+
+    }
+}

src/core/UAIExtensions.ts

@@ -5,7 +5,9 @@ import { Extensions } from "@tiptap/core";
 import { UAIEditor, UAIEditorOptions } from "./UAIEditor";
 
 import { StarterKit } from "@tiptap/starter-kit";
+import { Color } from "@tiptap/extension-color";
 import { FontFamily } from "@tiptap/extension-font-family";
+import { Highlight } from "@tiptap/extension-highlight";
 import { Subscript } from "@tiptap/extension-subscript";
 import { Superscript } from "@tiptap/extension-superscript";
 import { TextStyle } from "@tiptap/extension-text-style";
@@ -25,9 +27,13 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
             bulletList: false,
             orderedList: false,
         }),
+        Color,
         FontFamily,
         FontSize.configure({
 
+        }),
+        Highlight.configure({
+            multicolor: true
         }),
         Subscript,
         Superscript,