添加表格处理功能

src/components/index.ts

@@ -63,6 +63,15 @@ import { Symbol } from "./menus/toolbar/insert/Symbol.ts";
 import { Math } from "./menus/toolbar/insert/Math.ts";
 import { Toc } from "./menus/toolbar/insert/Toc.ts";
 
+import { InsertTable } from "./menus/toolbar/table/InsertTable.ts";
+import { AddColumnAfter } from "./menus/toolbar/table/AddColumnAfter.ts";
+import { AddColumnBefore } from "./menus/toolbar/table/AddColumnBefore.ts";
+import { AddRowAfter } from "./menus/toolbar/table/AddRowAfter.ts";
+import { AddRowBefore } from "./menus/toolbar/table/AddRowBefore.ts";
+import { DeleteColumn } from "./menus/toolbar/table/DeleteColumn.ts";
+import { DeleteRow } from "./menus/toolbar/table/DeleteRow.ts";
+import { DeleteTable } from "./menus/toolbar/table/DeleteTable.ts";
+
 import { ToggleToc } from "./menus/toolbar/page/ToggleToc.ts";
 
 // 注册组件
@@ -128,4 +137,13 @@ defineCustomElement('uai-editor-insert-menu-symbol', Symbol);
 defineCustomElement('uai-editor-insert-menu-math', Math);
 defineCustomElement('uai-editor-insert-menu-toc', Toc);
 
+defineCustomElement('uai-editor-table-menu-insert-table', InsertTable);
+defineCustomElement('uai-editor-table-menu-add-column-after', AddColumnAfter);
+defineCustomElement('uai-editor-table-menu-add-column-before', AddColumnBefore);
+defineCustomElement('uai-editor-table-menu-delete-column', DeleteColumn);
+defineCustomElement('uai-editor-table-menu-add-row-after', AddRowAfter);
+defineCustomElement('uai-editor-table-menu-add-row-before', AddRowBefore);
+defineCustomElement('uai-editor-table-menu-delete-row', DeleteRow);
+defineCustomElement('uai-editor-table-menu-delete-table', DeleteTable);
+
 defineCustomElement('uai-editor-page-menu-toggle-toc', ToggleToc);

src/components/menus/toolbar/Classic.ts

@@ -56,6 +56,15 @@ import { Symbol } from "./insert/Symbol.ts";
 import { Math } from "./insert/Math.ts";
 import { Toc } from "./insert/Toc.ts";
 
+import { InsertTable } from "./table/InsertTable.ts";
+import { AddColumnAfter } from "./table/AddColumnAfter.ts";
+import { AddColumnBefore } from "./table/AddColumnBefore.ts";
+import { DeleteColumn } from "./table/DeleteColumn.ts";
+import { AddRowAfter } from "./table/AddRowAfter.ts";
+import { AddRowBefore } from "./table/AddRowBefore.ts";
+import { DeleteRow } from "./table/DeleteRow.ts";
+import { DeleteTable } from "./table/DeleteTable.ts";
+
 import { ToggleToc } from "./page/ToggleToc.ts";
 
 /**
@@ -77,6 +86,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     classicMenuInsertScrollable!: ScrollableDiv;
     classicMenuInsertGroup!: HTMLElement;
 
+    // 表格菜单容器
+    classicMenuTableScrollable!: ScrollableDiv;
+    classicMenuTableGroup!: HTMLElement;
+
     // 页面菜单容器
     classicMenuPageScrollable!: ScrollableDiv;
     classicMenuPageGroup!: HTMLElement;
@@ -128,6 +141,16 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     insertMenuMath!: Math;
     insertMenuToc!: Toc;
 
+    // 表格菜单
+    tableMenuInsertTable!: InsertTable;
+    tableMenuAddColumnAfter!: AddColumnAfter;
+    tableMenuAddColumnBefore!: AddColumnBefore;
+    tableMenuDeleteColumn!: DeleteColumn;
+    tableMenuAddRowAfter!: AddRowAfter;
+    tableMenuAddRowBefore!: AddRowBefore;
+    tableMenuDeleteRow!: DeleteRow;
+    tableMenuDeleteTable!: DeleteTable;
+
     // 页面菜单
     pageMenuToggleToc!: ToggleToc;
 
@@ -176,6 +199,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
             const menu = selectMuenus.selectedOptions[0].value;
             this.classicMenuBaseScrollable.style.display = "none";
             this.classicMenuInsertScrollable.style.display = "none";
+            this.classicMenuTableScrollable.style.display = "none";
             this.classicMenuPageScrollable.style.display = "none";
             if (menu === "base") {
                 this.classicMenuBaseScrollable.style.display = "flex";
@@ -183,6 +207,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
             if (menu === "insert") {
                 this.classicMenuInsertScrollable.style.display = "flex";
             }
+            if (menu === "table") {
+                this.classicMenuTableScrollable.style.display = "flex";
+            }
             if (menu === "page") {
                 this.classicMenuPageScrollable.style.display = "flex";
             }
@@ -190,6 +217,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         // 创建分组菜单
         this.createBaseMenu(event, options);
         this.createInsertMenu(event, options);
+        this.createTableMenu(event, options);
         this.createPageMenu(event, options);
         this.classicMenuBaseScrollable.style.display = "flex";
     }
@@ -332,6 +360,30 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         this.insertMenuToc = new Toc({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuToc);
 
+        this.tableMenuInsertTable = new InsertTable({ menuType: "popup", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuInsertTable);
+
+        this.tableMenuAddColumnAfter = new AddColumnAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddColumnAfter);
+
+        this.tableMenuAddColumnBefore = new AddColumnBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddColumnBefore);
+
+        this.tableMenuDeleteColumn = new DeleteColumn({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteColumn);
+
+        this.tableMenuAddRowAfter = new AddRowAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddRowAfter);
+
+        this.tableMenuAddRowBefore = new AddRowBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddRowBefore);
+
+        this.tableMenuDeleteRow = new DeleteRow({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteRow);
+
+        this.tableMenuDeleteTable = new DeleteTable({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteTable);
+
         this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.pageMenuToggleToc);
     }
@@ -430,6 +482,40 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group3.appendChild(this.insertMenuToc);
     }
 
+    /**
+     * 创建表格菜单
+     * @param event 
+     * @param options 
+     */
+    createTableMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.classicMenuTableGroup = document.createElement("div");
+        this.classicMenuTableGroup.style.display = "flex";
+        this.classicMenuTableScrollable = new ScrollableDiv(this.classicMenuTableGroup);
+        this.classicMenuTableScrollable.style.display = "none";
+        this.classicMenu.appendChild(this.classicMenuTableScrollable);
+        this.classicMenuTableScrollable.onCreate(event, options);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-classic-virtual-group");
+        this.classicMenuTableGroup.appendChild(group1);
+        group1.appendChild(this.tableMenuInsertTable);
+
+        const group2 = document.createElement("div");
+        group2.classList.add("uai-classic-virtual-group");
+        this.classicMenuTableGroup.appendChild(group2);
+        group2.appendChild(this.tableMenuAddColumnBefore);
+        group2.appendChild(this.tableMenuAddColumnAfter);
+        group2.appendChild(this.tableMenuDeleteColumn);
+        group2.appendChild(this.tableMenuAddRowBefore);
+        group2.appendChild(this.tableMenuAddRowAfter);
+        group2.appendChild(this.tableMenuDeleteRow);
+
+        const group3 = document.createElement("div");
+        group3.classList.add("uai-classic-virtual-group");
+        this.classicMenuTableGroup.appendChild(group3);
+        group3.appendChild(this.tableMenuDeleteTable);
+    }
+
     /**
      * 创建页面菜单
      * @param event 

src/components/menus/toolbar/Ribbon.ts

@@ -58,6 +58,15 @@ import { Symbol } from "./insert/Symbol.ts";
 import { Math } from "./insert/Math.ts";
 import { Toc } from "./insert/Toc.ts";
 
+import { InsertTable } from "./table/InsertTable.ts";
+import { AddColumnAfter } from "./table/AddColumnAfter.ts";
+import { AddColumnBefore } from "./table/AddColumnBefore.ts";
+import { DeleteColumn } from "./table/DeleteColumn.ts";
+import { AddRowAfter } from "./table/AddRowAfter.ts";
+import { AddRowBefore } from "./table/AddRowBefore.ts";
+import { DeleteRow } from "./table/DeleteRow.ts";
+import { DeleteTable } from "./table/DeleteTable.ts";
+
 import { ToggleToc } from "./page/ToggleToc.ts";
 
 /**
@@ -80,6 +89,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     ribbonMenuInsertScrollable!: ScrollableDiv;
     ribbonMenuInsertGroup!: HTMLElement;
 
+    // 表格菜单容器
+    ribbonMenuTableScrollable!: ScrollableDiv;
+    ribbonMenuTableGroup!: HTMLElement;
+
     // 页面菜单容器
     ribbonMenuPageScrollable!: ScrollableDiv;
     ribbonMenuPageGroup!: HTMLElement;
@@ -131,6 +144,16 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     insertMenuMath!: Math;
     insertMenuToc!: Toc;
 
+    // 表格菜单
+    tableMenuInsertTable!: InsertTable;
+    tableMenuAddColumnAfter!: AddColumnAfter;
+    tableMenuAddColumnBefore!: AddColumnBefore;
+    tableMenuDeleteColumn!: DeleteColumn;
+    tableMenuAddRowAfter!: AddRowAfter;
+    tableMenuAddRowBefore!: AddRowBefore;
+    tableMenuDeleteRow!: DeleteRow;
+    tableMenuDeleteTable!: DeleteTable;
+
     // 页面菜单
     pageMenuToggleToc!: ToggleToc;
 
@@ -172,6 +195,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
                 tab.classList.add("active");
                 this.ribbonMenuBaseScrollable.style.display = "none";
                 this.ribbonMenuInsertScrollable.style.display = "none";
+                this.ribbonMenuTableScrollable.style.display = "none";
                 this.ribbonMenuPageScrollable.style.display = "none";
                 if (menu.value === "base") {
                     this.ribbonMenuBaseScrollable.style.display = "flex";
@@ -179,6 +203,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
                 if (menu.value === "insert") {
                     this.ribbonMenuInsertScrollable.style.display = "flex";
                 }
+                if (menu.value === "table") {
+                    this.ribbonMenuTableScrollable.style.display = "flex";
+                }
                 if (menu.value === "page") {
                     this.ribbonMenuPageScrollable.style.display = "flex";
                 }
@@ -201,6 +228,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         // 创建分组菜单
         this.createBaseMenu(event, options);
         this.createInsertMenu(event, options);
+        this.createTableMenu(event, options);
         this.createPageMenu(event, options);
         this.ribbonMenuBaseScrollable.style.display = "flex";
     }
@@ -355,6 +383,30 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         this.insertMenuToc = new Toc({ menuType: "button", enable: true, huge: true });
         this.eventComponents.push(this.insertMenuToc);
 
+        this.tableMenuInsertTable = new InsertTable({ menuType: "popup", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.tableMenuInsertTable);
+
+        this.tableMenuAddColumnAfter = new AddColumnAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddColumnAfter);
+
+        this.tableMenuAddColumnBefore = new AddColumnBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddColumnBefore);
+
+        this.tableMenuDeleteColumn = new DeleteColumn({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteColumn);
+
+        this.tableMenuAddRowAfter = new AddRowAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddRowAfter);
+
+        this.tableMenuAddRowBefore = new AddRowBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuAddRowBefore);
+
+        this.tableMenuDeleteRow = new DeleteRow({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteRow);
+
+        this.tableMenuDeleteTable = new DeleteTable({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.tableMenuDeleteTable);
+
         this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, huge: true, hideText: false });
         this.eventComponents.push(this.pageMenuToggleToc);
     }
@@ -527,6 +579,48 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group3.appendChild(this.insertMenuToc);
     }
 
+    /**
+     * 创建表格菜单
+     * @param event 
+     * @param options 
+     */
+    createTableMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
+        this.ribbonMenuTableGroup = document.createElement("div");
+        this.ribbonMenuTableGroup.classList.add("uai-ribbon-container");
+        this.ribbonMenuTableGroup.style.display = "flex";
+        this.ribbonMenuTableScrollable = new ScrollableDiv(this.ribbonMenuTableGroup);
+        this.ribbonMenuTableScrollable.style.display = "none";
+        this.ribbonScrollableContainer.appendChild(this.ribbonMenuTableScrollable);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuTableGroup.appendChild(group1);
+        group1.appendChild(this.tableMenuInsertTable);
+
+        const group2 = document.createElement("div");
+        group2.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuTableGroup.appendChild(group2);
+
+        const group2row1 = document.createElement("div");
+        group2row1.classList.add("uai-ribbon-virtual-group-row");
+        group2.appendChild(group2row1);
+        group2row1.appendChild(this.tableMenuAddColumnBefore);
+        group2row1.appendChild(this.tableMenuAddColumnAfter);
+        group2row1.appendChild(this.tableMenuDeleteColumn);
+
+        const group2row2 = document.createElement("div");
+        group2row2.classList.add("uai-ribbon-virtual-group-row");
+        group2.appendChild(group2row2);
+        group2row2.appendChild(this.tableMenuAddRowBefore);
+        group2row2.appendChild(this.tableMenuAddRowAfter);
+        group2row2.appendChild(this.tableMenuDeleteRow);
+
+        const group3 = document.createElement("div");
+        group3.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuTableGroup.appendChild(group3);
+        group3.appendChild(this.tableMenuDeleteTable);
+    }
+
     /**
      * 创建页面菜单
      * @param event 

src/components/menus/toolbar/table/AddColumnAfter.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-add-column-after.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：后面添加列
+ */
+export class AddColumnAfter extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.addColumnAfter'),
+        tooltip: t('table.addColumnAfter'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，在后面插入列
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().addColumnAfter().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().addColumnAfter();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/AddColumnBefore.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-add-column-after.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：前面添加列
+ */
+export class AddColumnBefore extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.addColumnBefore'),
+        tooltip: t('table.addColumnBefore'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，在前面插入列
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().addColumnBefore().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().addColumnBefore();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/AddRowAfter.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-add-row-after.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：后面添加行
+ */
+export class AddRowAfter extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.addRowAfter'),
+        tooltip: t('table.addRowAfter'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，在后面插入行
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().addRowAfter().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().addRowAfter();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/AddRowBefore.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-add-row-before.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：前面添加行
+ */
+export class AddRowBefore extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.addRowBefore'),
+        tooltip: t('table.addRowBefore'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，在前面插入行
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().addRowBefore().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().addRowBefore();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/DeleteColumn.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-delete-column.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：删除列
+ */
+export class DeleteColumn extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.deleteColumn.text'),
+        tooltip: t('table.deleteColumn.text'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，删除列
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().deleteColumn().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().deleteColumn();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/DeleteRow.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-delete-row.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：删除行
+ */
+export class DeleteRow extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.deleteRow.text'),
+        tooltip: t('table.deleteRow.text'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，删除行
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().deleteRow().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().deleteRow();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/DeleteTable.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table-delete.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 表格菜单：删除表格
+ */
+export class DeleteTable extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.delete.text'),
+        tooltip: t('table.delete.text'),
+    }
+
+    // 功能按钮
+    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.onEditableChange(false);
+
+        // 添加鼠标点击事件，删除表格
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().deleteTable().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().deleteTable();
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/table/InsertTable.ts

@@ -0,0 +1,264 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/table.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import tippy, { Instance, Props } from "tippy.js";
+
+/**
+ * 表格菜单：插入表格
+ */
+export class InsertTable extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "popup",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('table.insert.text'),
+        tooltip: t('table.insert.tip'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+    tippyInstance!: Instance<Props>;
+
+    // 表格大小设置
+    selected = { rows: 0, cols: 0 }
+
+    // 表格行数
+    gridRows = 10;
+    // 表格列数
+    gridCols = 10;
+
+    // 手工输入行数
+    rowsInput!: HTMLInputElement;
+    // 手工输入列数
+    colsInput!: HTMLInputElement;
+    // 是否包含标题行
+    withHeaderRow!: HTMLInputElement;
+
+    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);
+
+        // 创建表格设置提示框
+        if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) {
+            this.tippyInstance = tippy(this.menuButton.menuButton, {
+                content: this.createContainer(event, options),
+                appendTo: 'parent',
+                placement: 'bottom',
+                trigger: 'click',
+                interactive: true,
+                arrow: false,
+                onShow: () => {
+                    this.menuButton.tippyInstance?.disable();
+                },
+                onHidden: () => {
+                    this.menuButton.tippyInstance?.enable();
+                },
+            });
+        }
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+
+    /**
+     * 渲染选择的行、列
+     */
+    renderSelected() {
+        this.rowsInput.value = `${this.selected.rows}`;
+        this.colsInput.value = `${this.selected.cols}`;
+        // 为所有选中的行、列设置样式
+        for (var i = 0; i < this.gridRows; i++) {
+            for (var j = 0; j < this.gridCols; j++) {
+                const cell = document.querySelector(`#uai-table-rows-${i}-cells-${j}`)
+                cell?.classList.remove("selected");
+                if (this.isSelected(i, j)) {
+                    cell?.classList.add("selected");
+                }
+            }
+        }
+    }
+
+    /**
+     * 判断指定的行、列是否选中
+     * @param rows 
+     * @param cols 
+     * @returns 
+     */
+    isSelected(rows: number, cols: number) {
+        return (
+            this.selected.rows &&
+            this.selected.rows > rows &&
+            this.selected.cols &&
+            this.selected.cols > cols
+        )
+    }
+
+    /**
+     * 插入表格
+     * @param event 
+     * @param options 
+     * @returns 
+     */
+    insertTable(event: EditorEvents["create"], options: UAIEditorOptions) {
+        const { rows, cols } = this.selected;
+        if (rows === 0 || rows > 1000 || cols === 0 || cols > 30) {
+            return
+        }
+        event.editor.chain().focus().insertTable({ rows, cols, withHeaderRow: this.withHeaderRow.checked }).scrollIntoView().run();
+        this.tippyInstance.hide();
+    }
+
+    /**
+     * 创建表格设置容器
+     * @param event 
+     * @param options 
+     * @returns 
+     */
+    createContainer(event: EditorEvents["create"], options: UAIEditorOptions) {
+        const container = document.createElement("div");
+        container.classList.add("uai-table-container");
+        const grid = document.createElement("div");
+        grid.classList.add("uai-table-grid");
+
+        // 设置指定的行、列
+        for (var i = 0; i < this.gridRows; i++) {
+            const row = document.createElement("div");
+            row.classList.add("row");
+            for (var j = 0; j < this.gridCols; j++) {
+                // 绘制单元格块
+                const cell = document.createElement("div");
+                cell.id = `uai-table-rows-${i}-cells-${j}`;
+                cell.setAttribute("rows", `${i}`);
+                cell.setAttribute("cols", `${j}`);
+                cell.classList.add("cell");
+                // 设置鼠标事件，设置所选行、列数
+                cell.addEventListener("mouseover", () => {
+                    this.selected.rows = +cell.getAttribute("rows")! + 1;
+                    this.selected.cols = +cell.getAttribute("cols")! + 1;
+                })
+                // 设置鼠标点击事件，插入表格
+                cell.addEventListener("click", () => {
+                    this.insertTable(event, options);
+                });
+                row.appendChild(cell);
+            }
+            grid.appendChild(row);
+        }
+        // 设置鼠标事件，渲染单元格块
+        grid.addEventListener("mousemove", () => {
+            this.renderSelected();
+        });
+        // 设置鼠标事件，渲染单元格块
+        grid.addEventListener("mouseleave", () => {
+            this.selected.rows = 0;
+            this.selected.cols = 0;
+            this.renderSelected();
+        });
+        container.appendChild(grid);
+
+        // 创建自定义表格行列数设置区
+        const custom = document.createElement("div");
+        custom.classList.add("uai-table-custom");
+
+        const title = document.createElement("div");
+        title.classList.add("uai-table-custom-title");
+        title.innerHTML = t('table.insert.property');
+        custom.appendChild(title);
+
+        // 表格行数输入区
+        const rowsDiv = document.createElement("div");
+        rowsDiv.classList.add("uai-table-custom-input");
+        rowsDiv.innerHTML = t('table.insert.rows');
+        this.rowsInput = document.createElement("input");
+        this.rowsInput.type = "number";
+        this.rowsInput.min = "0";
+        this.rowsInput.max = "100";
+        this.rowsInput.placeholder = "请输入";
+        this.rowsInput.addEventListener("input", () => {
+            this.selected.rows = +this.rowsInput.value;
+            this.renderSelected();
+        });
+        rowsDiv.appendChild(this.rowsInput);
+        custom.appendChild(rowsDiv);
+
+        // 表格列数输入区
+        const colsDiv = document.createElement("div");
+        colsDiv.classList.add("uai-table-custom-input");
+        colsDiv.innerHTML = t('table.insert.cols');
+        this.colsInput = document.createElement("input");
+        this.colsInput.type = "number";
+        this.colsInput.min = "0";
+        this.colsInput.max = "100";
+        this.colsInput.placeholder = "请输入";
+        this.colsInput.addEventListener("input", () => {
+            this.selected.cols = +this.colsInput.value;
+            this.renderSelected();
+        });
+        colsDiv.appendChild(this.colsInput);
+        custom.appendChild(colsDiv);
+
+        this.rowsInput.value = `${this.selected.rows}`;
+        this.colsInput.value = `${this.selected.cols}`;
+
+        // 设置插入的表格是否带有标题行
+        const withHeaderDiv = document.createElement("div");
+        withHeaderDiv.classList.add("uai-table-custom-header");
+        this.withHeaderRow = document.createElement("input");
+        this.withHeaderRow.type = "checkbox";
+        this.withHeaderRow.id = "withHeaderRow";
+        this.withHeaderRow.checked = true;
+        const withHeaderRowLabel = document.createElement('label');
+        withHeaderRowLabel.htmlFor = 'withHeaderRow';
+        withHeaderRowLabel.textContent = t('table.insert.withHeader');
+        withHeaderDiv.appendChild(this.withHeaderRow);
+        withHeaderDiv.appendChild(withHeaderRowLabel);
+        custom.appendChild(withHeaderDiv);
+
+        // 插入表格按钮
+        const insertButton = document.createElement("div");
+        insertButton.classList.add("uai-table-insert-button");
+        insertButton.innerHTML = t('table.insert.create');
+        // 添加鼠标点击事件，插入表格
+        insertButton.addEventListener("click", () => {
+            this.insertTable(event, options);
+        });
+        custom.appendChild(insertButton);
+
+        container.appendChild(custom);
+        return container;
+    }
+}
+

src/core/UAIExtensions.ts

@@ -11,6 +11,10 @@ import { Highlight } from "@tiptap/extension-highlight";
 import { Link } from "@tiptap/extension-link";
 import { Subscript } from "@tiptap/extension-subscript";
 import { Superscript } from "@tiptap/extension-superscript";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
 import { TextAlign } from "@tiptap/extension-text-align";
@@ -72,6 +76,14 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
         }),
         Subscript,
         Superscript,
+        Table.configure({
+            resizable: true,
+            lastColumnResizable: true,
+            allowTableNodeSelection: true,
+        }),
+        TableCell,
+        TableHeader,
+        TableRow,
         TableOfContents.configure({
             getIndex: getHierarchicalIndexes,
             onUpdate: (content) => {