@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.1

package/src/TextEditor.ts

@@ -1,63 +1,62 @@
-import { IText, IEventListenerId } from "@leafer-in/interface";
-import { Matrix, PointerEvent } from "@leafer-ui/core";
 import { InnerEditor, registerInnerEditor } from "@leafer-in/editor";
-import { handleShowCurve } from "./TextEditTool/utils";
+import { Matrix, PointerEvent } from "@leafer-ui/core";
+import { quillManager } from ".";
 import { updataHtmlText } from "./utils";
-import { fetchFontAsBase64 } from "./fonts/utils";
-import { defaultFonts } from "./fonts/font";
 
 @registerInnerEditor()
 export class TextEditor extends InnerEditor {
-  public static quill: any;
-  
   public get tag() {
     return "TextEditor";
   }
-  
-  public quill: any;
-  declare public editTarget: IText;
+  declare public editTarget: any;
 
-  public editDom: HTMLDivElement | undefined;
+  public editDom: any;
   public config = {
     selectAll: false,
   };
 
-  public eventIds: IEventListenerId[] = [];
+  public eventIds: any[] = [];
 
   protected selectText:
     | { start: number; end: number; text: string }
-    | undefined;
-  protected inBody: boolean | undefined;
-  protected isHTMLText: boolean | undefined;
-  
+    | undefined = undefined;
+  protected inBody: boolean | undefined = undefined; // App 的 view 为 canvas 类型时，文本编辑框只能添加到 body 下了
+  protected isHTMLText: boolean | undefined = undefined;
+  protected _keyEvent: boolean | undefined = undefined;
+  public quill: any = null;
+  public isComposing: boolean = false;
+
+  // 拼写检查相关属性
+  private misspelledWords: Array<{
+    word: string;
+    offset: number;
+    length: number;
+  }> = [];
+  private overlay: HTMLDivElement | null = null;
+
+  // 判断是否为OA系统的属性
+  private get isOASystem(): boolean {
+    return window.location.host.includes("oa");
+  }
   public onLoad(): void {
     const { editor } = this;
     const { config } = editor.app;
     const text = this.editTarget;
     const { scaleX, scaleY } = text.worldTransform;
     const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-    
-    this.quill = TextEditor.quill;
+    // text.textEditing = true
 
-    this.isHTMLText = !(text instanceof Text);
+    this.isHTMLText = !(text instanceof Text); // HTMLText
+    this._keyEvent = config.keyEvent;
     config.keyEvent = false;
 
-    const element = document.querySelector("#textInnerEditor");
-    if (!element || !(element instanceof HTMLDivElement)) {
-      console.error("Cannot find #textInnerEditor element or it's not a div");
-      return;
-    }
-    
-    const div = (this.editDom = element);
+    const div = (this.editDom = document.querySelector("#textInnerEditor"));
     const { style } = div;
     style.visibility = "visible";
 
-    // 获取外部box的宽高
-    if (
-      text.data?.canChangeBox &&
-      text.parent?.width !== undefined &&
-      text.parent?.height !== undefined
-    ) {
+    // style.boxSizing = 'border-box'
+    // 获取外部box的宽高 这个box也是可以手动调整的
+    if (text.data.canChangeBox) {
       style.width = text.parent.width * zoomScale + "px";
       style.height = text.parent.height * zoomScale + "px";
     } else {
@@ -65,59 +64,56 @@ export class TextEditor extends InnerEditor {
       style.height = "auto";
     }
 
+    // style.border = '1.5px solid #8499EF'
     style.outline = "solid #8499EF";
 
     // 初始化文本样式
-    if (text.data?.textData?.fontSize) {
+    if (text.data.textData.fontSize) {
       div.style.fontSize = `${text.data.textData.fontSize * zoomScale}px`;
     }
-    if (text.data?.textData?.fontFamily) {
+    if (text.data.textData.fontFamily) {
       div.style.fontFamily = `${text.data.textData.fontFamily}`;
     }
-    if (text.data?.textData?.lineHeight) {
+    if (text.data.textData.lineHeight) {
       div.style.lineHeight = text.data.textData.lineHeight;
     }
-    if (text.data?.textData?.letterSpacing) {
+    if (text.data.textData.letterSpacing) {
       div.style.letterSpacing = `${text.data.textData.letterSpacing}px`;
     }
-    if (text.data?.textData?.textShadow) {
+    if (text.data.textData.textShadow) {
       div.style.textShadow = `${text.data.textData.textShadow}`;
     } else {
       div.style.textShadow = "none";
     }
-    if (text.data?.textData?.alignContent) {
+    if (text.data.textData.alignContent) {
       const qlEditor: any = div.querySelector(".ql-editor");
-      if (qlEditor) {
-        qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
-      }
+      qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
     }
 
-    // 加载文本到编辑器
-    if (this.quill) {
-      this.quill.clipboard.dangerouslyPasteHTML(text.text);
-      
-      if (text.parent?.children?.[0]?.tag?.includes("Shape")) {
-        const parentWidth = text.parent.width;
-        if (parentWidth !== undefined) {
-          style.width = parentWidth * zoomScale + "px";
-          style.left = "0px";
-        }
-        this.quill.formatLine(0, this.quill.getLength(), "align", "center");
-      } else {
-        this.quill.setSelection(0, this.quill.getLength() - 1);
-      }
+    this.quill = quillManager.getQuill();
 
-      this.quill.on("text-change", this.onInput);
-      this.quill.on("selection-change", this.onSelectionChange);
+    // 加载文本到编辑器
+    this.quill.clipboard.dangerouslyPasteHTML(text.text);
+    // this.quill.focus()
+    if (text.parent.children[0].tag.includes("Shape")) {
+      style.width = text.parent.width * zoomScale + "px";
+      style.left = "0px";
+      this.quill.formatLine(0, this.quill.getLength(), "align", "center");
+    } else {
+      this.quill.setSelection(0, this.quill.getLength() - 1);
     }
-    
+
+    // 获取整个编辑器容器的边界
+    // const containerBounds = this.quill.container.getBoundingClientRect()
+    this.quill.on("text-change", this.onInput);
+    this.quill.on("selection-change", this.onSelectionChange);
     localStorage.removeItem("selection-change");
 
     this.eventIds = [
       // 点击空白关闭
       editor.app.on_(PointerEvent.DOWN, (e: PointerEvent) => {
-        let { target } = e.origin;
-        let find: boolean = false;
+        let { target } = e.origin,
+          find: boolean = false;
         while (target) {
           if (target === div) find = true;
           target = target.parentElement;
@@ -128,73 +124,90 @@ export class TextEditor extends InnerEditor {
         }
       }),
     ];
+    // const { canvas } = useEditor()
+    // canvas.app.config.move.drag = false
+    // canvas.app.tree.hittable = false
+    // canvas.app.editor.hittable = false
   }
-  
   private onSelectionChange = async (e: any) => {
     e && localStorage.setItem("selection-change", JSON.stringify(e));
   };
 
   private onInput = async () => {
+    const { editDom } = this;
     // 主要是更新编辑内容
+    console.log("onInput");
     updataHtmlText(this.editTarget);
+    // 获取当前文字编辑文字内容的边界 这里是在没有修改过外部尺寸的情况下 自适应文字编辑内容的尺寸
+    // updateChangeBoxBound(this.editTarget)
+
+    // 如果是清空了 width要从0改成auto
+    // editDom.style.width = documentBounds.width ? documentBounds.width : 'auto'
   };
 
   public onUpdate() {
     const { editTarget: text } = this;
-    if (!text.parent?.__local) return;
-    
     const { scaleX, scaleY } = text.worldTransform;
     const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
 
     // layout
-    const local = text.parent.__local as any;
-    let width = local.width || 0;
-    let height = local.height || 0;
-    width *= zoomScale;
-    height *= zoomScale;
+    let { width, height } = text.parent.__local;
+    ((width *= zoomScale), (height *= zoomScale));
 
     const { x, y } = this.inBody
       ? text.app.clientBounds
-      : (text.app.tree?.clientBounds || { x: 0, y: 0 });
+      : text.app.tree.clientBounds;
     const { a, b, c, d, e, f } = new Matrix(text.worldTransform)
       .scale(1 / zoomScale)
       .translateInner(0, 0);
 
-    if (this.editDom) {
-      const { style } = this.editDom;
-      style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
-      style.left = x + "px";
-      style.top = y + "px";
-    }
+    const { style } = this.editDom;
+    style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
+    style.left = x + "px";
+    style.top = y + "px";
 
     // 打开内部或者编辑内部文本编辑强制隐藏
     text.set({
       visible: false,
     });
   }
-  
   private isUpdatingPoints = false;
-  
   public onUnload(): void {
     const { editTarget: text, editor, editDom: dom } = this;
-
+    // const { canvas } = useEditor()
+    // canvas.app.config.move.drag = false
+    // canvas.app.tree.hittable = true
+    // canvas.app.editor.hittable = true
     if (text) {
       this.onInput();
+
+      if (editor.app) editor.app.config.keyEvent = this._keyEvent;
       editor.off_(this.eventIds);
 
-      if (this.editDom) {
-        this.editDom.style.visibility = "hidden";
-      }
-      this.eventIds = [] as any;
+      // dom.remove()
+      // this.editDom = this.eventIds = undefined
+      this.editDom.style.visibility = "hidden";
+      this.eventIds = [];
     }
-    
-    text.set({
-      visible: true,
-    });
-    
-    if (this.quill) {
-      this.quill.off("text-change", this.onInput);
-      this.quill.off("selection-change", this.onSelectionChange);
+    // 如果大于1
+    if (
+      text.parent &&
+      text.parent.name == "Text" &&
+      text.parent.children.some((e: any) => e.tag === "Box")
+    ) {
+      text.parent.findOne("Box").opacity = 1;
+      text.visible = false;
+    } else {
+      // 恢复显示
+      text.set({
+        visible: true,
+      });
+    }
+    if (this.quill.getLength() === 1 && text.parent.name === "Text") {
+      text.parent.remove();
     }
+    console.log("onUnload");
+    this.quill.off("text-change", this.onInput);
+    this.quill.off("selection-change", this.onSelectionChange);
   }
 }

package/src/index.ts

@@ -1,92 +1,154 @@
-import { TextEditor } from "./TextEditor";
-export { TextEditor } from "./TextEditor";
-import "./TextEditTool";
-import { Plugin } from "@leafer-ui/core";
-import { Delta } from "quill";
-import Quill from "quill";
-import "quill/dist/quill.core.css";
+export { TextEditor } from './TextEditor'
+import { Plugin } from '@leafer-ui/core'
+import './TextEditTool'
+Plugin.add('text-editor2', 'editor')
 
-// 导出工具函数
-export { updataHtmlText, setHTMLText } from "./utils";
-export { fontManager, defaultFonts, FontManager } from "./fonts/font";
+import Quill, { Delta } from 'quill'
 
-Plugin.add("leafer-htmltext-editor", "editor");
+class QuillManager {
+  private static instance: QuillManager
+  private quill: Quill | null = null
+  public app_: any | null = null
 
-export function initTextEditorQuill(container?: HTMLElement) {
-  const textInner = document.getElementById("textInnerEditor");
-  if (!textInner) {
-    const el = document.createElement("div");
-    el.id = "textInnerEditor";
-    el.style.position = "fixed";
-    el.style.transformOrigin = "left top";
-    el.style.overflowWrap = "break-word";
-    el.style.wordBreak = "break-all";
-    el.style.visibility = "hidden";
-    document.body.appendChild(el);
+  private constructor() {}
+
+  static getInstance() {
+    if (!QuillManager.instance) {
+      QuillManager.instance = new QuillManager()
+    }
+    return QuillManager.instance
   }
 
-  TextEditor.quill = new Quill("#textInnerEditor", {
-    theme: null as any,
-    modules: {
-      toolbar: false,
-      keyboard: {
-        bindings: {
-          enter: {
-            key: "Enter",
-            handler: (range: any, context: any) => {
-              const [line] = TextEditor.quill.getLine(range.index);
+  /** 初始化（只会执行一次） */
+  init(app: any) {
+    this.app_ = app
+    if (this.quill) return this.quill
+
+    let el = document.getElementById('textInnerEditor')
+    if (!el) {
+      el = document.createElement('div')
+      el.id = 'textInnerEditor'
+      el.style.position = 'fixed'
+      el.style.transformOrigin = 'left top'
+      el.style.overflowWrap = 'break-word'
+      el.style.wordBreak = 'break-all'
+      el.style.visibility = 'hidden'
+      document.body.appendChild(el)
+    }
+
+    this.quill = new Quill('#textInnerEditor', {
+      theme: undefined,
+      modules: {
+        toolbar: false,
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 'Enter',
+              handler: (range: any) => {
+                const [line] = this.quill!.getLine(range.index)
+                const BlockBlot: any = Quill.import('blots/block')
+                if (!BlockBlot?.bubbleFormats) return true
+
+                const lineFormats = BlockBlot.bubbleFormats(line)
+                const delta = new Delta().retain(range.index).delete(range.length).insert('\n', lineFormats)
 
-              // 使用 Quill.import 获取 bubbleFormats
-              const BlockBlot = Quill.import("blots/block");
-              if (!BlockBlot || !(BlockBlot as any).bubbleFormats) return;
-              const lineFormats = (BlockBlot as any).bubbleFormats(line);
+                this.quill!.updateContents(delta, Quill.sources.USER)
+                this.quill!.setSelection(range.index + 1, Quill.sources.SILENT)
+                return false
+              }
+            }
+          }
+        }
+      }
+    })
+    this.app_.editor.quill = this.quill
+    this.registerFonts()
 
-              const delta = new Delta()
-                .retain(range.index)
-                .delete(range.length)
-                .insert("\n", lineFormats);
+    return this.quill
+  }
+
+  /** 获取实例 */
+  getQuill() {
+    if (!this.quill) {
+      throw new Error('Quill editor not initialized. Call init() first.')
+    }
+    return this.quill
+  }
 
-              TextEditor.quill.updateContents(delta, Quill.sources.USER);
-              TextEditor.quill.setSelection(
-                range.index + 1,
-                Quill.sources.SILENT,
-              );
-              return false;
-            },
-          },
-        },
-      },
-    },
-  });
-  
-  const FontAttributor: any = Quill.import("attributors/class/font");
-  FontAttributor.whitelist = [
-    "Roboto",
-    "RobotoMono",
-    "Inter",
-    "OpenSans",
-    "Montserrat",
-    "RobotoCondensed",
-    "Arimo",
-    "NotoSans",
-    "NotoSansSymbols",
-    "Merriweather",
-    "PlayfairDisplay",
-    "NotoSerif",
-    "Lato",
-    "Spectral",
-    "DancingScript",
-    "NotoSansSimplifiedChinese",
-    "NotoSerifSimplifiedChinese",
-    "NotoSansTraditionalChinese",
-    "NotoSansHongKong",
-    "NotoSerifTraditionalChinese",
-    "NotoSerifHongKong",
-    "NotoSansJapanese",
-    "NotoSansKorean",
-    "Poppins",
-  ];
-  Quill.register(FontAttributor, true);
-  
-  return TextEditor.quill;
+  getCanvas() {
+    if (!this.app_) {
+      throw new Error('app_ editor not initialized. Call init() first.')
+    }
+    return this.app_
+  }
+
+  private registerFonts() {
+    const FontAttributor: any = Quill.import('attributors/class/font')
+    FontAttributor.whitelist = [
+      'Roboto',
+      'RobotoMono',
+      'Inter',
+      'OpenSans',
+      'Montserrat',
+      'RobotoCondensed',
+      'Arimo',
+      'NotoSans',
+      'NotoSansSymbols',
+      'Merriweather',
+      'PlayfairDisplay',
+      'NotoSerif',
+      'Lato',
+      'Spectral',
+      'DancingScript',
+      'NotoSansSimplifiedChinese',
+      'NotoSerifSimplifiedChinese',
+      'NotoSansTraditionalChinese',
+      'NotoSansHongKong',
+      'NotoSerifTraditionalChinese',
+      'NotoSerifHongKong',
+      'NotoSansJapanese',
+      'NotoSansKorean',
+      'Poppins'
+    ]
+    Quill.register(FontAttributor, true)
+  }
+  // 判断是否是多选情况下
+  public isMultiSelect(): boolean {
+    if (!this.app_.editor) return false
+    if (this.app_.editor.multiple === true) {
+      return true
+    } else {
+      return false
+    }
+  }
+  public dateEdit(callback: (leaf: any) => void, level = 0, listNew?: any): void {
+    // 添加listNew支持，用来指定检索的数据源，防止因为防抖或者延迟执行造成的活跃对象变更
+    const { editor } = this.app_
+    const list = listNew ? listNew : editor.leafList.list
+    // if (this.activeObject.value?.tag === 'Frame') {
+    //   callback(this.contentFrame)
+    // }
+    const applyCallback = (leaf: any) => {
+      if (level && (leaf.tag === 'Box' || leaf.name === 'Text')) {
+        callback(leaf.children?.[0] || leaf)
+      } else {
+        callback(leaf)
+      }
+    }
+    if (!list.length) return
+    if (Array.isArray(list) && list.length > 1) {
+      this.app_.lockLayout()
+      list.forEach(applyCallback)
+      this.app_.unlockLayout()
+      editor.updateEditBox()
+    } else {
+      applyCallback(list[0])
+    }
+    // 不知道为啥 加这个忘记了 先保留
+    // else if (this.activeObject.value?.tag !== 'Frame') {
+    //   applyCallback(this.activeObject.value)
+    // }
+  }
 }
+
+export const quillManager = QuillManager.getInstance()