From 8d513d1191d184cc8c3334a61aa2229c3db016e4 Mon Sep 17 00:00:00 2001 From: wux_labs Date: Sun, 29 Dec 2024 20:26:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=92=E5=85=A5=E6=95=B0?= =?UTF-8?q?=E5=AD=A6=E5=85=AC=E5=BC=8F=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 2 + src/components/menus/toolbar/Classic.ts | 6 ++ src/components/menus/toolbar/Ribbon.ts | 6 ++ src/components/menus/toolbar/insert/Math.ts | 72 +++++++++++++++++++++ src/core/UAIExtensions.ts | 8 +++ 5 files changed, 94 insertions(+) create mode 100644 src/components/menus/toolbar/insert/Math.ts diff --git a/src/components/index.ts b/src/components/index.ts index a498da9..ebc1ad0 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -58,6 +58,7 @@ import { Audio } from "./menus/toolbar/insert/Audio.ts"; import { HardBreak } from "./menus/toolbar/insert/HardBreak.ts"; import { Emoji } from "./menus/toolbar/insert/Emoji.ts"; import { Symbol } from "./menus/toolbar/insert/Symbol.ts"; +import { Math } from "./menus/toolbar/insert/Math.ts"; // 注册组件 defineCustomElement('uai-editor-header', Header); @@ -117,3 +118,4 @@ defineCustomElement('uai-editor-insert-menu-audio', Audio); defineCustomElement('uai-editor-insert-menu-hard-break', HardBreak); defineCustomElement('uai-editor-insert-menu-emoji', Emoji); defineCustomElement('uai-editor-insert-menu-symbol', Symbol); +defineCustomElement('uai-editor-insert-menu-math', Math); diff --git a/src/components/menus/toolbar/Classic.ts b/src/components/menus/toolbar/Classic.ts index 4bec4be..9e4153c 100644 --- a/src/components/menus/toolbar/Classic.ts +++ b/src/components/menus/toolbar/Classic.ts @@ -53,6 +53,7 @@ import { Audio } from "./insert/Audio.ts"; import { HardBreak } from "./insert/HardBreak.ts"; import { Emoji } from "./insert/Emoji.ts"; import { Symbol } from "./insert/Symbol.ts"; +import { Math } from "./insert/Math.ts"; /** * 传统菜单栏 @@ -117,6 +118,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { insertMenuHardBreak!: HardBreak; insertMenuEmoji!: Emoji; insertMenuSymbol!: Symbol; + insertMenuMath!: Math; constructor(defaultToolbarMenus: Record[]) { super(); @@ -307,6 +309,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { this.insertMenuSymbol = new Symbol({ menuType: "popup", enable: true, header: "classic", hideText: false }); this.eventComponents.push(this.insertMenuSymbol); + + this.insertMenuMath = new Math({ menuType: "button", enable: true, header: "classic", hideText: false }); + this.eventComponents.push(this.insertMenuMath); } /** * 创建基础菜单 @@ -395,5 +400,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { group2.appendChild(this.insertMenuHardBreak); group2.appendChild(this.insertMenuEmoji); group2.appendChild(this.insertMenuSymbol); + group2.appendChild(this.insertMenuMath); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/Ribbon.ts b/src/components/menus/toolbar/Ribbon.ts index 407aecc..86c5897 100644 --- a/src/components/menus/toolbar/Ribbon.ts +++ b/src/components/menus/toolbar/Ribbon.ts @@ -55,6 +55,7 @@ import { Audio } from "./insert/Audio.ts"; import { HardBreak } from "./insert/HardBreak.ts"; import { Emoji } from "./insert/Emoji.ts"; import { Symbol } from "./insert/Symbol.ts"; +import { Math } from "./insert/Math.ts"; /** * 经典菜单栏 @@ -120,6 +121,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { insertMenuHardBreak!: HardBreak; insertMenuEmoji!: Emoji; insertMenuSymbol!: Symbol; + insertMenuMath!: Math; constructor(defaultToolbarMenus: Record[]) { super(); @@ -330,6 +332,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { this.insertMenuSymbol = new Symbol({ menuType: "popup", enable: true, huge: true, hideText: false }); this.eventComponents.push(this.insertMenuSymbol); + + this.insertMenuMath = new Math({ menuType: "button", enable: true, huge: true }); + this.eventComponents.push(this.insertMenuMath); } /** @@ -492,5 +497,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { group2.appendChild(this.insertMenuHardBreak); group2.appendChild(this.insertMenuEmoji); group2.appendChild(this.insertMenuSymbol); + group2.appendChild(this.insertMenuMath); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/insert/Math.ts b/src/components/menus/toolbar/insert/Math.ts new file mode 100644 index 0000000..dc61761 --- /dev/null +++ b/src/components/menus/toolbar/insert/Math.ts @@ -0,0 +1,72 @@ +// Copyright (c) 2024-present AI-Labs + +// @ ts-nocheck +import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts"; +import icon from "../../../../assets/icons/math.svg"; +import { t } from "i18next"; +import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts"; +import { EditorEvents } from "@tiptap/core"; + +/** + * 插入菜单：插入公式 + */ +export class Math extends HTMLElement implements UAIEditorEventListener { + // 按钮选项 + menuButtonOptions: MenuButtonOptions = { + menuType: "button", + enable: true, + icon: icon, + hideText: false, + text: t('insert.math'), + tooltip: t('insert.math'), + } + + // 功能按钮 + menuButton: MenuButton; + + constructor(options: MenuButtonOptions) { + super(); + + // 初始化功能按钮选项 + this.menuButtonOptions = { ...this.menuButtonOptions, ...options }; + + // 创建功能按钮 + this.menuButton = new MenuButton(this.menuButtonOptions); + } + + /** + * 定义创建方法 + * @param event + * @param options + */ + onCreate(event: EditorEvents["create"], options: UAIEditorOptions) { + this.menuButton.onCreate(event, options); + this.appendChild(this.menuButton); + + // 定义按钮点击事件，插入公式 + this.addEventListener("click", () => { + if (this.menuButtonOptions.enable) { + event.editor.chain().focus().insertContent('$\\LaTeX$').run(); + } + }) + } + + /** + * 定义Transaction监听方法 + * @param event + * @param options + */ + onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) { + this.menuButton.onTransaction(event, options); + if (this.menuButton.menuButton) { + var disable = event.editor.isEditable; + this.onEditableChange(disable); + } + } + + onEditableChange(editable: boolean) { + this.menuButtonOptions.enable = editable; + this.menuButton.onEditableChange(editable); + } +} + diff --git a/src/core/UAIExtensions.ts b/src/core/UAIExtensions.ts index 3db110b..a580ecd 100644 --- a/src/core/UAIExtensions.ts +++ b/src/core/UAIExtensions.ts @@ -17,6 +17,8 @@ import { TextAlign } from "@tiptap/extension-text-align"; import { TextStyle } from "@tiptap/extension-text-style"; import { Underline } from "@tiptap/extension-underline"; +import { Mathematics } from '@tiptap-pro/extension-mathematics'; + import BulletList from "../extensions/BulletList.ts"; import FontSize from "../extensions/FontSize.ts"; import Image from "../extensions/Image.ts"; @@ -54,6 +56,12 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions): Indent, LineHeight, Link, + Mathematics.configure({ + shouldRender: (state, pos, node) => { + const $pos = state.doc.resolve(pos) + return node.type.name === 'text' && $pos.parent.type.name !== 'codeBlock' + } + }), NodeAlign, OrderedList, SelectFile.configure({