添加对齐菜单

2025-02-18 11:33:01 +08:00
parent 44f33b05fe
commit 0d9468c659
12 changed files with 777 additions and 3 deletions
@@ -0,0 +1,81 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/align-center.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：居中对齐
+ */
+export class AlignCenter extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.align.center'),
+        tooltip: t('base.align.center'),
+        shortcut: "Ctrl+Shift+E",
+    }
+
+    // 功能按钮
+    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) {
+                if (event.editor.can().chain().focus().setTextAlign('center').run()) {
+                    event.editor.chain().focus().setTextAlign('center').run();
+                }
+                event.editor.chain().focus().setNodeAlign('center').run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton && this.menuButtonOptions.enable) {
+            // 如果所选内容是居中的，居中按钮成激活状态，否则是非激活状态
+            var active = event.editor.isActive({ textAlign: 'center' });
+            if (active) {
+                this.menuButton.menuButton.classList.add("active");
+            } else {
+                this.menuButton.menuButton.classList.remove("active");
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+
@@ -0,0 +1,84 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/align-distributed.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：分散对齐
+ */
+export class AlignDistributed extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.align.distributed'),
+        tooltip: t('base.align.distributed'),
+        shortcut: "Ctrl+Shift+D",
+    }
+
+    // 功能按钮
+    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().setTextAlign('distributed').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.can().chain().focus().setTextAlign('distributed').run();
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是分散对齐的，分散对齐按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive({ textAlign: 'distributed' });
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+
@@ -0,0 +1,78 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/align-justify.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：两端对齐
+ */
+export class AlignJustify extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.align.justify'),
+        tooltip: t('base.align.justify'),
+        shortcut: "Ctrl+Shift+J",
+    }
+
+    // 功能按钮
+    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().setTextAlign('justify').run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton && this.menuButtonOptions.enable) {
+            // 如果所选内容是两端对齐的，两端对齐按钮成激活状态，否则是非激活状态
+            var active = event.editor.isActive({ textAlign: 'justify' });
+            if (active) {
+                this.menuButton.menuButton.classList.add("active");
+            } else {
+                this.menuButton.menuButton.classList.remove("active");
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+
@@ -0,0 +1,81 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/align-left.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：左对齐
+ */
+export class AlignLeft extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.align.left'),
+        tooltip: t('base.align.left'),
+        shortcut: "Ctrl+Shift+L",
+    }
+
+    // 功能按钮
+    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) {
+                if (event.editor.can().chain().focus().setTextAlign('left').run()) {
+                    event.editor.chain().focus().setTextAlign('left').run();
+                }
+                event.editor.chain().focus().setNodeAlign('flex-start').run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton && this.menuButtonOptions.enable) {
+            // 如果所选内容是左对齐的，左对齐按钮成激活状态，否则是非激活状态
+            var active = event.editor.isActive({ textAlign: 'left' });
+            if (active) {
+                this.menuButton.menuButton.classList.add("active");
+            } else {
+                this.menuButton.menuButton.classList.remove("active");
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+
@@ -0,0 +1,81 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/align-right.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：右对齐
+ */
+export class AlignRight extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.align.right'),
+        tooltip: t('base.align.right'),
+        shortcut: "Ctrl+Shift+R",
+    }
+
+    // 功能按钮
+    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) {
+                if (event.editor.can().chain().focus().setTextAlign('right').run()) {
+                    event.editor.chain().focus().setTextAlign('right').run();
+                }
+                event.editor.chain().focus().setNodeAlign('flex-end').run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton && this.menuButtonOptions.enable) {
+            // 如果所选内容是右对齐的，右对齐按钮成激活状态，否则是非激活状态
+            var active = event.editor.isActive({ textAlign: 'right' });
+            if (active) {
+                this.menuButton.menuButton.classList.add("active");
+            } else {
+                this.menuButton.menuButton.classList.remove("active");
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+