添加标题设置及打印菜单

src/components/index.ts

@@ -49,6 +49,8 @@ import { LineHeight } from "./menus/toolbar/base/LineHeight.ts";
 import { BlockQuote } from "./menus/toolbar/base/BlockQuote.ts";
 import { CodeBlock } from "./menus/toolbar/base/CodeBlock.ts";
 
+import { Print } from "./menus/toolbar/base/Print.ts";
+
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
 defineCustomElement('uai-editor-editor', Editor);
@@ -97,3 +99,5 @@ defineCustomElement('uai-editor-base-menu-lineheight', LineHeight);
 
 defineCustomElement('uai-editor-base-menu-blockquote', BlockQuote);
 defineCustomElement('uai-editor-base-menu-codeblock', CodeBlock);
+
+defineCustomElement('uai-editor-base-menu-print', Print);

src/components/menus/toolbar/Classic.ts

@@ -44,6 +44,7 @@ import { LineHeight } from "./base/LineHeight.ts";
 
 import { BlockQuote } from "./base/BlockQuote.ts";
 import { CodeBlock } from "./base/CodeBlock.ts";
+import { Print } from "./base/Print.ts";
 
 /**
  * 传统菜单栏
@@ -94,6 +95,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     baseMenuAlignDistributed!: AlignDistributed;
     baseMenuBlockQuote!: BlockQuote;
     baseMenuCodeBlock!: CodeBlock;
+    baseMenuPrint!: Print;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -255,6 +257,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuCodeBlock = new CodeBlock({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuCodeBlock);
+
+        this.baseMenuPrint = new Print({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.baseMenuPrint);
     }
     /**
      * 创建基础菜单
@@ -309,5 +314,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group3.appendChild(this.baseMenuAlignDistributed);
         group3.appendChild(this.baseMenuBlockQuote);
         group3.appendChild(this.baseMenuCodeBlock);
+
+        const group4 = document.createElement("div");
+        group4.classList.add("uai-classic-virtual-group");
+        this.classicMenuBaseGroup.appendChild(group4);
+        group4.appendChild(this.baseMenuPrint);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -6,6 +6,7 @@ import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEdito
 
 import { t } from "i18next";
 import { ScrollableDiv } from "./ScrollableDiv";
+import { Icons } from "../../Icons.ts";
 
 import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
@@ -45,6 +46,8 @@ import { LineHeight } from "./base/LineHeight.ts";
 import { BlockQuote } from "./base/BlockQuote.ts";
 import { CodeBlock } from "./base/CodeBlock.ts";
 
+import { Print } from "./base/Print.ts";
+
 /**
  * 经典菜单栏
  */
@@ -95,6 +98,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     baseMenuAlignDistributed!: AlignDistributed;
     baseMenuBlockQuote!: BlockQuote;
     baseMenuCodeBlock!: CodeBlock;
+    baseMenuPrint!: Print;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -276,6 +280,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuCodeBlock = new CodeBlock({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuCodeBlock);
+
+        this.baseMenuPrint = new Print({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.baseMenuPrint);
     }
 
     /**
@@ -355,5 +362,59 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group3row2.appendChild(this.baseMenuAlignDistributed);
         group3row2.appendChild(this.baseMenuBlockQuote);
         group3row2.appendChild(this.baseMenuCodeBlock);
+
+        const group4 = document.createElement("div");
+        group4.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuBaseGroup.appendChild(group4);
+
+        const headingContainer = document.createElement("div");
+        headingContainer.classList.add("uai-ribbon-heading-container")
+
+        const headingList = document.createElement("div");
+        headingList.classList.add("uai-ribbon-heading-list");
+
+        const headingArrow = document.createElement("div");
+        headingArrow.classList.add("uai-ribbon-heading-arrow");
+        headingArrow.innerHTML = Icons.ArrowDown;
+        headingArrow.addEventListener("click", () => {
+            headingContainer.style.height = "104px";
+        });
+        document.addEventListener('click', (event) => {
+            if (!headingContainer.contains(event.target as Node)) {
+                headingContainer.style.height = "56px";
+            }
+        });
+
+        this.headingOptions.forEach(headingOption => {
+            const item = headingOption.element;
+            item.classList.add("uai-ribbon-heading-item");
+
+            const title = document.createElement("div");
+            title.classList.add("uai-ribbon-heading-item-title");
+            title.classList.add(headingOption.desc);
+            title.innerHTML = headingOption.label;
+            const subtitle = document.createElement("div");
+            subtitle.classList.add("uai-ribbon-heading-item-subtitle");
+            subtitle.innerHTML = headingOption.desc
+            item.appendChild(title);
+            item.appendChild(subtitle);
+            item.addEventListener("click", () => {
+                if (headingOption.value === 'paragraph') {
+                    event.editor.chain().focus().setParagraph().run();
+                } else {
+                    event.editor.chain().focus().toggleHeading({ level: headingOption.value }).run();
+                }
+            });
+            headingList.appendChild(item);
+        })
+
+        headingContainer.appendChild(headingList);
+        headingContainer.appendChild(headingArrow);
+        group4.appendChild(headingContainer);
+
+        const group5 = document.createElement("div");
+        group5.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuBaseGroup.appendChild(group5);
+        group5.appendChild(this.baseMenuPrint);
     }
 }

src/components/menus/toolbar/base/Print.ts

@@ -0,0 +1,121 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/print.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 基础菜单：打印
+ */
+export class Print extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.print.text'),
+        tooltip: t('base.print.text'),
+        shortcut: "Ctrl+P",
+    }
+
+    // 功能按钮
+    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);
+                // 调用打印功能
+                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);
+    }
+}
+