From 7ebb20813caa40a5dca8f386d7a5090cba0afd82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BA=A6=E9=A6=99=E7=BC=98?= <461023633@qq.com> Date: Sun, 22 Dec 2024 20:13:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AD=97=E4=BD=93=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AE=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icons.ts | 10 ++ src/components/index.ts | 8 + src/components/menus/MenuButton.ts | 45 +++++- src/components/menus/common/FontColor.ts | 136 +++++++++++++++++ src/components/menus/common/Highlight.ts | 142 +++++++++++++++++ src/components/menus/toolbar/Classic.ts | 13 ++ src/components/menus/toolbar/Ribbon.ts | 13 ++ src/components/popups/ColorPicker.ts | 184 +++++++++++++++++++++++ src/core/UAIExtensions.ts | 6 + 9 files changed, 556 insertions(+), 1 deletion(-) create mode 100644 src/components/Icons.ts create mode 100644 src/components/menus/common/FontColor.ts create mode 100644 src/components/menus/common/Highlight.ts create mode 100644 src/components/popups/ColorPicker.ts diff --git a/src/components/Icons.ts b/src/components/Icons.ts new file mode 100644 index 0000000..7f78569 --- /dev/null +++ b/src/components/Icons.ts @@ -0,0 +1,10 @@ +// Copyright (c) 2024-present AI-Labs + +/** + * 定义常用的图标 + */ +export const Icons = { + ArrowDown: ``, + Loading: ``, + // Loading: ``, +} diff --git a/src/components/index.ts b/src/components/index.ts index 921a216..2b80a87 100644 --- a/src/components/index.ts +++ b/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); diff --git a/src/components/menus/MenuButton.ts b/src/components/menus/MenuButton.ts index 61d5320..008bdb9 100644 --- a/src/components/menus/MenuButton.ts +++ b/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 = `` + } + // 当前颜色展示容器，展示当前选中的颜色 + 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); + } } \ No newline at end of file diff --git a/src/components/menus/common/FontColor.ts b/src/components/menus/common/FontColor.ts new file mode 100644 index 0000000..6a8ba19 --- /dev/null +++ b/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); + } +} + diff --git a/src/components/menus/common/Highlight.ts b/src/components/menus/common/Highlight.ts new file mode 100644 index 0000000..b466fbb --- /dev/null +++ b/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; + } +} + diff --git a/src/components/menus/toolbar/Classic.ts b/src/components/menus/toolbar/Classic.ts index a2b8433..c52ba74 100644 --- a/src/components/menus/toolbar/Classic.ts +++ b/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[]) { 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); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/Ribbon.ts b/src/components/menus/toolbar/Ribbon.ts index 3a0201d..a46151b 100644 --- a/src/components/menus/toolbar/Ribbon.ts +++ b/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[]) { 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); } } \ No newline at end of file diff --git a/src/components/popups/ColorPicker.ts b/src/components/popups/ColorPicker.ts new file mode 100644 index 0000000..90afac0 --- /dev/null +++ b/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) { + + } +} diff --git a/src/core/UAIExtensions.ts b/src/core/UAIExtensions.ts index 6f06177..cf0ae09 100644 --- a/src/core/UAIExtensions.ts +++ b/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,