lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加图片浮动菜单功能

Browse Source
This commit is contained in:
wux_labs
2025-02-20 12:42:02 +08:00
parent c38d30fb15
commit 006518e6a7
7 changed files with 517 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/index.ts
+13 -1
View File
@@ -33,6 +33,8 @@ import { Superscript } from "./menus/common/Superscript.ts";
import { FontColor } from "./menus/common/FontColor.ts";
import { Highlight } from "./menus/common/Highlight.ts";
import { NodeDelete } from "./menus/common/NodeDelete.ts";
import { Undo } from "./menus/toolbar/base/Undo.ts";
import { Redo } from "./menus/toolbar/base/Redo.ts";
import { FormatPainter } from "./menus/toolbar/base/FormatPainter.ts";
@@ -86,6 +88,10 @@ import { ExportImage } from "./menus/toolbar/export/ExportImage.ts";
import { TextSelectionBubbleMenu } from "./menus/bubble/TextSelectionBubbleMenu.ts";
import { ImageBubbleMenu } from "./menus/bubble/ImageBubbleMenu.ts";
import { ImageFlipX } from "./menus/bubble/image/ImageFlipX.ts";
import { ImageFlipY } from "./menus/bubble/image/ImageFlipY.ts";
// 注册组件
defineCustomElement('uai-editor-header', Header);
defineCustomElement('uai-editor-editor', Editor);
@@ -119,6 +125,8 @@ defineCustomElement('uai-editor-common-menu-superscript', Superscript);
defineCustomElement('uai-editor-common-menu-font-color', FontColor);
defineCustomElement('uai-editor-common-menu-highlight', Highlight);
defineCustomElement('uai-editor-common-menu-node-delete', NodeDelete);
defineCustomElement('uai-editor-base-menu-undo', Undo);
defineCustomElement('uai-editor-base-menu-redo', Redo);
defineCustomElement('uai-editor-base-menu-format-painter', FormatPainter);
@@ -170,4 +178,8 @@ defineCustomElement('uai-editor-export-menu-pdf', ExportPdf);
defineCustomElement('uai-editor-export-menu-markdown', ExportMarkdown);
defineCustomElement('uai-editor-export-menu-image', ExportImage);
defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubbleMenu);
defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubbleMenu);
defineCustomElement('uai-editor-bubble-menu-image', ImageBubbleMenu);
defineCustomElement('uai-editor-bubble-menu-image-flip-x', ImageFlipX);
defineCustomElement('uai-editor-bubble-menu-image-flip-y', ImageFlipY);
src/components/menus/bubble/ImageBubbleMenu.ts
+107
View File
@@ -0,0 +1,107 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { EditorEvents } from "@tiptap/core";
import { UAIEditorEventListener, UAIEditor, UAIEditorOptions } from "../../../core/UAIEditor";
import { AlignLeft } from "../common/AlignLeft.ts";
import { AlignCenter } from "../common/AlignCenter.ts";
import { AlignRight } from "../common/AlignRight.ts";
import { ImageFlipX } from "./image/ImageFlipX.ts";
import { ImageFlipY } from "./image/ImageFlipY.ts";
import { NodeDelete } from "../common/NodeDelete.ts";
/**
* 定义图片内容浮动菜单
*/
export class ImageBubbleMenu extends HTMLElement implements UAIEditorEventListener {
uaiEditor!: UAIEditor;
// 左对齐
baseMenuAlignLeft!: AlignLeft;
// 居中对齐
baseMenuAlignCenter!: AlignCenter;
// 右对齐
baseMenuAlignRight!: AlignRight;
// 垂直翻转
imageMenuFlipX!: ImageFlipX;
// 水平翻转
imageMenuFlipY!: ImageFlipY;
commonMenuNodeDelete!: NodeDelete;
constructor(uaiEditor: UAIEditor) {
super();
this.uaiEditor = uaiEditor;
this.initMenus();
// 定义菜单容器
const container = document.createElement("div");
container.classList.add("uai-bubble-menu-container");
// 定义菜单组
const group1 = document.createElement("div");
group1.classList.add("uai-bubble-menu-virtual-group");
container.appendChild(group1);
// 添加对齐功能
group1.appendChild(this.baseMenuAlignLeft);
group1.appendChild(this.baseMenuAlignCenter);
group1.appendChild(this.baseMenuAlignRight);
// 定义菜单组
const group2 = document.createElement("div");
group2.classList.add("uai-bubble-menu-virtual-group");
container.appendChild(group2);
// 添加翻转功能
group2.appendChild(this.imageMenuFlipX);
group2.appendChild(this.imageMenuFlipY);
// 定义菜单组
const group3 = document.createElement("div");
group3.classList.add("uai-bubble-menu-virtual-group");
container.appendChild(group3);
// 添加删除功能
group3.appendChild(this.commonMenuNodeDelete);
this.appendChild(container);
}
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
}
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
}
onEditableChange(editable: boolean) {
}
/**
* 初始化功能菜单
*/
initMenus() {
this.baseMenuAlignLeft = new AlignLeft({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.baseMenuAlignLeft);
this.baseMenuAlignCenter = new AlignCenter({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.baseMenuAlignCenter);
this.baseMenuAlignRight = new AlignRight({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.baseMenuAlignRight);
this.imageMenuFlipX = new ImageFlipX({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.imageMenuFlipX);
this.imageMenuFlipY = new ImageFlipY({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.imageMenuFlipY);
this.commonMenuNodeDelete = new NodeDelete({ menuType: "button", enable: true });
this.uaiEditor.eventComponents.push(this.commonMenuNodeDelete);
}
}
src/components/menus/bubble/image/ImageFlipX.ts
+87
View File
@@ -0,0 +1,87 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import icon from "../../../../assets/icons/image-flip-x.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
import { getSelectionNode } from "../../../../extensions/Selection.ts";
/**
* 定义垂直翻转功能
*/
export class ImageFlipX extends HTMLElement implements UAIEditorEventListener {
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: true,
text: '垂直翻转',
tooltip: '垂直翻转',
}
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) {
const image = getSelectionNode(event.editor);
const { flipX } = image?.attrs ?? {};
if (image) {
// 如果文档内容是图片，则对图片进行垂直翻转
event.editor.commands.updateAttributes(image.type, {
flipX: !flipX,
})
}
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButton) {
if (this.menuButtonOptions.enable) {
// 判断图片是否有垂直翻转
var active = event.editor.getAttributes('image')?.flipX;
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);
}
}
src/components/menus/bubble/image/ImageFlipY.ts
+87
View File
@@ -0,0 +1,87 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import icon from "../../../../assets/icons/image-flip.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
import { getSelectionNode } from "../../../../extensions/Selection.ts";
/**
* 定义水平翻转功能
*/
export class ImageFlipY extends HTMLElement implements UAIEditorEventListener {
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: true,
text: '水平翻转',
tooltip: '水平翻转',
}
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) {
const image = getSelectionNode(event.editor);
const { flipY } = image?.attrs ?? {};
if (image) {
// 如果文档内容是图片，则对图片进水平翻转
event.editor.commands.updateAttributes(image.type, {
flipY: !flipY,
})
}
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButton) {
if (this.menuButtonOptions.enable) {
// 判断图片是否有水平翻转
var active = event.editor.getAttributes('image')?.flipY;
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);
}
}
src/components/menus/common/NodeDelete.ts
+71
View File
@@ -0,0 +1,71 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
import icon from "../../../assets/icons/node-delete.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
/**
* 公共菜单：删除节点
*/
export class NodeDelete extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: true,
text: t('bubbleMenu.delete'),
tooltip: t('bubbleMenu.delete'),
shortcut: "Backspace",
}
// 功能按钮
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().deleteSelectionNode().run();
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButton) {
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}