From 6cba20d1f8d255e98291d11327d76aa7b020cb1d Mon Sep 17 00:00:00 2001 From: wux_labs Date: Tue, 24 Dec 2024 19:52:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=87=E9=A2=98=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=8F=8A=E6=89=93=E5=8D=B0=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 | 4 + src/components/menus/toolbar/Classic.ts | 10 ++ src/components/menus/toolbar/Ribbon.ts | 61 +++++++++++ src/components/menus/toolbar/base/Print.ts | 121 +++++++++++++++++++++ 4 files changed, 196 insertions(+) create mode 100644 src/components/menus/toolbar/base/Print.ts diff --git a/src/components/index.ts b/src/components/index.ts index e40a6fb..f14250a 100644 --- a/src/components/index.ts +++ b/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); diff --git a/src/components/menus/toolbar/Classic.ts b/src/components/menus/toolbar/Classic.ts index 8303739..0dc384f 100644 --- a/src/components/menus/toolbar/Classic.ts +++ b/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[]) { 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); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/Ribbon.ts b/src/components/menus/toolbar/Ribbon.ts index 4404210..c04b02a 100644 --- a/src/components/menus/toolbar/Ribbon.ts +++ b/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[]) { 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); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/base/Print.ts b/src/components/menus/toolbar/base/Print.ts new file mode 100644 index 0000000..9e73c14 --- /dev/null +++ b/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 = ` + + + + 有爱文档（UAI-Editor） + + + ${Array.from(document.querySelectorAll('link, style')).map((item) => item.outerHTML).join('')} + + + + +
+ ${document.querySelector(`.uai-zoomable-container`)?.outerHTML ?? ''} +
+