添加字体颜色设置菜单

2025-02-18 11:28:33 +08:00
parent c4d637c943
commit 7ebb20813c
9 changed files with 556 additions and 1 deletions
@@ -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);
+    }
 }
@@ -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);
+    }
+}
+
@@ -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;
+    }
+}
+
@@ -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);
    }
 }
@@ -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);
    }
 }