添加导出文档功能

src/components/index.ts

@@ -78,6 +78,11 @@ import { ToggleToc } from "./menus/toolbar/page/ToggleToc.ts";
 import { BackgroundColor } from "./menus/toolbar/page/BackgroundColor.ts";
 import { Watermark } from "./menus/toolbar/page/Watermark.ts";
 
+import { ExportDocx } from "./menus/toolbar/export/ExportDocx.ts";
+import { ExportOdt } from "./menus/toolbar/export/ExportOdt.ts";
+import { ExportPdf } from "./menus/toolbar/export/ExportPdf.ts";
+import { ExportMarkdown } from "./menus/toolbar/export/ExportMarkdown.ts";
+
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
 defineCustomElement('uai-editor-editor', Editor);
@@ -155,3 +160,8 @@ defineCustomElement('uai-editor-tools-menu-diagrams', Diagrams);
 defineCustomElement('uai-editor-page-menu-toggle-toc', ToggleToc);
 defineCustomElement('uai-editor-page-menu-background-color', BackgroundColor);
 defineCustomElement('uai-editor-page-menu-watermark', Watermark);
+
+defineCustomElement('uai-editor-export-menu-docx', ExportDocx);
+defineCustomElement('uai-editor-export-menu-odt', ExportOdt);
+defineCustomElement('uai-editor-export-menu-pdf', ExportPdf);
+defineCustomElement('uai-editor-export-menu-markdown', ExportMarkdown);

src/components/menus/toolbar/Classic.ts

@@ -71,6 +71,11 @@ import { ToggleToc } from "./page/ToggleToc.ts";
 import { BackgroundColor } from "./page/BackgroundColor.ts";
 import { Watermark } from "./page/Watermark.ts";
 
+import { ExportDocx } from "./export/ExportDocx.ts";
+import { ExportOdt } from "./export/ExportOdt.ts";
+import { ExportPdf } from "./export/ExportPdf.ts";
+import { ExportMarkdown } from "./export/ExportMarkdown.ts";
+
 /**
  * 传统菜单栏
  */
@@ -102,6 +107,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     classicMenuPageScrollable!: ScrollableDiv;
     classicMenuPageGroup!: HTMLElement;
 
+    // 导出菜单容器
+    classicMenuExportScrollable!: ScrollableDiv;
+    classicMenuExportGroup!: HTMLElement;
+
     // 基础菜单
     baseMenuUndo!: Undo;
     baseMenuRedo!: Redo;
@@ -167,6 +176,12 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     pageMenuBackgroundColor!: BackgroundColor;
     pageMenuWatermark!: Watermark;
 
+    // 导出菜单
+    exportMenuExportDocx!: ExportDocx;
+    exportMenuExportOdt!: ExportOdt;
+    exportMenuExportPdf!: ExportPdf;
+    exportMenuExportMarkdown!: ExportMarkdown;
+
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
         this.defaultToolbarMenus = defaultToolbarMenus;
@@ -215,6 +230,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
             this.classicMenuTableScrollable.style.display = "none";
             this.classicMenuToolScrollable.style.display = "none";
             this.classicMenuPageScrollable.style.display = "none";
+            this.classicMenuExportScrollable.style.display = "none";
             if (menu === "base") {
                 this.classicMenuBaseScrollable.style.display = "flex";
             }
@@ -230,6 +246,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
             if (menu === "page") {
                 this.classicMenuPageScrollable.style.display = "flex";
             }
+            if (menu === "export") {
+                this.classicMenuExportScrollable.style.display = "flex";
+            }
         })
         // 创建分组菜单
         this.createBaseMenu(event, options);
@@ -237,6 +256,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         this.createTableMenu(event, options);
         this.createToolMenu(event, options);
         this.createPageMenu(event, options);
+        this.createExportMenu(event, options);
         this.classicMenuBaseScrollable.style.display = "flex";
     }
 
@@ -413,6 +433,18 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.pageMenuWatermark = new Watermark({ menuType: "popup", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.pageMenuWatermark);
+
+        this.exportMenuExportDocx = new ExportDocx({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.exportMenuExportDocx);
+
+        this.exportMenuExportOdt = new ExportOdt({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.exportMenuExportOdt);
+
+        this.exportMenuExportPdf = new ExportPdf({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.exportMenuExportPdf);
+
+        this.exportMenuExportMarkdown = new ExportMarkdown({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.exportMenuExportMarkdown);
     }
     /**
      * 创建基础菜单
@@ -586,4 +618,26 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.pageMenuBackgroundColor);
         group2.appendChild(this.pageMenuWatermark);
     }
+
+    /**
+     * 创建导出菜单
+     * @param event 
+     * @param options 
+     */
+    createExportMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.classicMenuExportGroup = document.createElement("div");
+        this.classicMenuExportGroup.style.display = "flex";
+        this.classicMenuExportScrollable = new ScrollableDiv(this.classicMenuExportGroup);
+        this.classicMenuExportScrollable.style.display = "none";
+        this.classicMenu.appendChild(this.classicMenuExportScrollable);
+        this.classicMenuExportScrollable.onCreate(event, options);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-classic-virtual-group");
+        this.classicMenuExportGroup.appendChild(group1);
+        group1.appendChild(this.exportMenuExportDocx);
+        group1.appendChild(this.exportMenuExportOdt);
+        group1.appendChild(this.exportMenuExportPdf);
+        group1.appendChild(this.exportMenuExportMarkdown);
+    }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -73,6 +73,11 @@ import { ToggleToc } from "./page/ToggleToc.ts";
 import { BackgroundColor } from "./page/BackgroundColor.ts";
 import { Watermark } from "./page/Watermark.ts";
 
+import { ExportDocx } from "./export/ExportDocx.ts";
+import { ExportOdt } from "./export/ExportOdt.ts";
+import { ExportPdf } from "./export/ExportPdf.ts";
+import { ExportMarkdown } from "./export/ExportMarkdown.ts";
+
 /**
  * 经典菜单栏
  */
@@ -105,6 +110,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     ribbonMenuPageScrollable!: ScrollableDiv;
     ribbonMenuPageGroup!: HTMLElement;
 
+    // 导出菜单容器
+    ribbonMenuExportScrollable!: ScrollableDiv;
+    ribbonMenuExportGroup!: HTMLElement;
+
     // 基础菜单
     baseMenuUndo!: Undo;
     baseMenuRedo!: Redo;
@@ -170,6 +179,12 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     pageMenuBackgroundColor!: BackgroundColor;
     pageMenuWatermark!: Watermark;
 
+    // 导出菜单
+    exportMenuExportDocx!: ExportDocx;
+    exportMenuExportOdt!: ExportOdt;
+    exportMenuExportPdf!: ExportPdf;
+    exportMenuExportMarkdown!: ExportMarkdown;
+
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
         this.defaultToolbarMenus = defaultToolbarMenus;
@@ -211,6 +226,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
                 this.ribbonMenuTableScrollable.style.display = "none";
                 this.ribbonMenuToolScrollable.style.display = "none";
                 this.ribbonMenuPageScrollable.style.display = "none";
+                this.ribbonMenuExportScrollable.style.display = "none";
                 if (menu.value === "base") {
                     this.ribbonMenuBaseScrollable.style.display = "flex";
                 }
@@ -226,6 +242,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
                 if (menu.value === "page") {
                     this.ribbonMenuPageScrollable.style.display = "flex";
                 }
+                if (menu.value === "export") {
+                    this.ribbonMenuExportScrollable.style.display = "flex";
+                }
             })
             ribbonTabs.appendChild(tab);
         });
@@ -248,6 +267,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         this.createTableMenu(event, options);
         this.createToolMenu(event, options);
         this.createPageMenu(event, options);
+        this.createExportMenu(event, options);
         this.ribbonMenuBaseScrollable.style.display = "flex";
     }
 
@@ -436,6 +456,18 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.pageMenuWatermark = new Watermark({ menuType: "popup", enable: true, huge: true, hideText: false });
         this.eventComponents.push(this.pageMenuWatermark);
+
+        this.exportMenuExportDocx = new ExportDocx({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.exportMenuExportDocx);
+
+        this.exportMenuExportOdt = new ExportOdt({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.exportMenuExportOdt);
+
+        this.exportMenuExportPdf = new ExportPdf({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.exportMenuExportPdf);
+
+        this.exportMenuExportMarkdown = new ExportMarkdown({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.exportMenuExportMarkdown);
     }
 
     /**
@@ -691,4 +723,26 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.pageMenuBackgroundColor);
         group2.appendChild(this.pageMenuWatermark);
     }
+
+    /**
+     * 创建导出菜单
+     * @param event 
+     * @param options 
+     */
+    createExportMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
+        this.ribbonMenuExportGroup = document.createElement("div");
+        this.ribbonMenuExportGroup.classList.add("uai-ribbon-container");
+        this.ribbonMenuExportGroup.style.display = "flex";
+        this.ribbonMenuExportScrollable = new ScrollableDiv(this.ribbonMenuExportGroup);
+        this.ribbonMenuExportScrollable.style.display = "none";
+        this.ribbonScrollableContainer.appendChild(this.ribbonMenuExportScrollable);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuExportGroup.appendChild(group1);
+        group1.appendChild(this.exportMenuExportDocx);
+        group1.appendChild(this.exportMenuExportOdt);
+        group1.appendChild(this.exportMenuExportPdf);
+        group1.appendChild(this.exportMenuExportMarkdown);
+    }
 }

src/components/menus/toolbar/export/ExportDocx.ts

@@ -0,0 +1,68 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/file-docx.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 导出菜单：导出Docx
+ */
+export class ExportDocx extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('export.docx.text'),
+        tooltip: t('export.docx.title'),
+    }
+
+    // 功能按钮
+    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().export({ format: 'docx' }).run();
+            }
+        })
+    }
+
+    /**
+     * 定义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);
+    }
+}
+

src/components/menus/toolbar/export/ExportMarkdown.ts

@@ -0,0 +1,68 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/file-markdown.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 导出菜单：导出Markdown
+ */
+export class ExportMarkdown extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('export.markdown.text'),
+        tooltip: t('export.markdown.title'),
+    }
+
+    // 功能按钮
+    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().export({ format: 'md' }).run();
+            }
+        })
+    }
+
+    /**
+     * 定义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);
+    }
+}
+

src/components/menus/toolbar/export/ExportOdt.ts

@@ -0,0 +1,68 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/file-odt.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 导出菜单：导出Odt
+ */
+export class ExportOdt extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('export.odt.text'),
+        tooltip: t('export.odt.title'),
+    }
+
+    // 功能按钮
+    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().export({ format: 'odt' }).run();
+            }
+        })
+    }
+
+    /**
+     * 定义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);
+    }
+}
+

src/components/menus/toolbar/export/ExportPdf.ts

@@ -0,0 +1,119 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/file-pdf.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 导出菜单：导出PDF
+ */
+export class ExportPdf extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('export.pdf.text'),
+        tooltip: t('export.pdf.title'),
+    }
+
+    // 功能按钮
+    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.commands.blur();
+                const iframe = document.createElement("iframe");
+                iframe.classList.add("uai-print-iframe");
+                document.body.appendChild(iframe);
+
+                const printContent = `
+    <!DOCTYPE html>
+    <html lang="zh-CN">
+    <head>
+      <title>有爱文档（UAI-Editor）</title>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        ${Array.from(document.querySelectorAll('link, style')).map((item) => item.outerHTML).join('')}
+      <style>
+      body{
+        overflow: auto;
+        height: auto;
+        background-color: #fff;
+        -webkit-print-color-adjust: exact;
+      }
+      </style>
+    </head>
+    <body class="is-print">
+      <div id="sprite-plyr" style="display: none;">
+       ${document.querySelector('#sprite-plyr')?.innerHTML ?? ''}
+      </div>
+      <div class="uai-page-container">
+          ${document.querySelector(`.uai-zoomable-container`)?.outerHTML ?? ''}
+      </div>
+      <script>
+        document.addEventListener("DOMContentLoaded", (event) => {
+          const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+              if (mutation.removedNodes) {
+                Array.from(mutation.removedNodes).forEach(node => {
+                  if (node?.classList?.contains('uai-page-watermark')) {
+                    location.reload();
+                  }
+                });
+              }
+            });
+          });
+        });
+      <\/script>
+    </body>
+    </html>`;
+                // 内容渲染
+                iframe.contentDocument?.open();
+                iframe.contentDocument?.write(printContent);
+                // 打印成PDF
+                iframe.contentWindow?.print();
+                document.body.removeChild(iframe);
+            }
+        })
+    }
+
+    /**
+     * 定义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);
+    }
+}
+

src/core/UAIExtensions.ts

@@ -21,6 +21,7 @@ import { TextAlign } from "@tiptap/extension-text-align";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Underline } from "@tiptap/extension-underline";
 
+import { Export } from '@tiptap-pro/extension-export';
 import { Mathematics } from '@tiptap-pro/extension-mathematics';
 import { TableOfContents, getHierarchicalIndexes } from '@tiptap-pro/extension-table-of-contents'
 
@@ -52,6 +53,10 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
         Audio,
         BulletList,
         Color,
+        Export.configure({
+            appId: process.env.TIPTAP_APP_ID,
+            token: process.env.TIPTAP_JWT_TOKEN,
+        }),
         FontFamily,
         FontSize.configure({