@chenyomi/leafer-htmltext-editor 1.0.8 → 1.0.10

package/src/TextEditor.ts

@@ -1,213 +0,0 @@
-import { InnerEditor, registerInnerEditor } from "@leafer-in/editor";
-import { Matrix, PointerEvent } from "@leafer-ui/core";
-import { quillManager } from ".";
-import { updataHtmlText } from "./utils";
-@registerInnerEditor()
-export class TextEditor extends InnerEditor {
-  public get tag() {
-    return "TextEditor";
-  }
-  declare public editTarget: any;
-
-  public editDom: any;
-  public config = {
-    selectAll: false,
-  };
-
-  public eventIds: any[] = [];
-
-  protected selectText:
-    | { start: number; end: number; text: string }
-    | 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));
-    // text.textEditing = true
-
-    this.isHTMLText = !(text instanceof Text); // HTMLText
-    this._keyEvent = config.keyEvent;
-    config.keyEvent = false;
-
-    const div = (this.editDom = document.querySelector("#textInnerEditor"));
-    const { style } = div;
-    style.visibility = "visible";
-
-    // 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 {
-      style.width = "auto";
-      style.height = "auto";
-    }
-
-    // style.border = '1.5px solid #8499EF'
-    style.outline = "solid #8499EF";
-
-    // 初始化文本样式
-    if (text.data.textData.fontSize) {
-      console.log(text.data.textData.fontSize)
-      div.style.fontSize = `${text.data.textData.fontSize}px`;
-    }
-    if (text.data.textData.fontFamily) {
-      div.style.fontFamily = `${text.data.textData.fontFamily}`;
-    }
-    if (text.data.textData.lineHeight) {
-      div.style.lineHeight = text.data.textData.lineHeight;
-    }
-    if (text.data.textData.letterSpacing) {
-      div.style.letterSpacing = `${text.data.textData.letterSpacing}px`;
-    }
-    if (text.data.textData.textShadow) {
-      div.style.textShadow = `${text.data.textData.textShadow}`;
-    } else {
-      div.style.textShadow = "none";
-    }
-    if (text.data.textData.alignContent) {
-      const qlEditor: any = div.querySelector(".ql-editor");
-      qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
-    }
-
-    this.quill = quillManager.getQuill();
-
-    // 加载文本到编辑器
-    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,
-          find: boolean = false;
-        while (target) {
-          if (target === div) find = true;
-          target = target.parentElement;
-        }
-        if (!find) {
-          editor.closeInnerEditor();
-          editor.cancel();
-        }
-      }),
-    ];
-    // 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;
-    const { scaleX, scaleY } = text.worldTransform;
-    const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-
-    // layout
-    let { width, height } = text.parent.__local;
-    ((width *= zoomScale), (height *= zoomScale));
-
-    const { x, y } = this.inBody
-      ? text.app.clientBounds
-      : text.app.tree.clientBounds;
-    const { a, b, c, d, e, f } = new Matrix(text.worldTransform)
-      .scale(1 / zoomScale)
-      .translateInner(0, 0);
-
-    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);
-
-      // dom.remove()
-      // this.editDom = this.eventIds = undefined
-      this.editDom.style.visibility = "hidden";
-      this.eventIds = [];
-    }
-    // 如果大于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/fonts/font.ts

@@ -1,86 +0,0 @@
-export const defaultFonts = [
-  { code: 'Roboto', name: `"Roboto", sans-serif`, url: '/fonts/Roboto.woff2' },
-  { code: 'Roboto Mono', name: `"Roboto Mono", monospace`, url: '/fonts/RobotoMono.woff2' },
-  { code: 'Inter', name: `"Inter", sans-serif`, url: '/fonts/Inter.woff2' },
-  { code: 'Open Sans', name: `"Open Sans", sans-serif`, url: '/fonts/OpenSans.woff2' },
-  { code: 'Montserrat', name: `"Montserrat", sans-serif`, url: '/fonts/Montserrat.woff2' },
-  { code: 'Roboto Condensed', name: `"Roboto Condensed", sans-serif`, url: '/fonts/RobotoCondensed.woff2' },
-  { code: 'Arimo', name: `"Arimo", sans-serif`, url: '/fonts/Arimo.woff2' },
-  { code: 'Noto Sans', name: `"Noto Sans", sans-serif`, url: '/fonts/NotoSans.woff2' },
-  { code: 'Noto Sans Symbols', name: `"Noto Sans Symbols", sans-serif`, url: '/fonts/NotoSansSymbols.woff2' },
-  { code: 'Merriweather', name: `"Merriweather", serif`, url: '/fonts/Merriweather.woff2' },
-  { code: 'Playfair Display', name: `"Playfair Display", serif`, url: '/fonts/PlayfairDisplay.woff2' },
-  { code: 'Noto Serif', name: `"Noto Serif", serif`, url: '/fonts/NotoSerif.woff2' },
-  { code: 'Lato', name: `"Lato", sans-serif`, url: '/fonts/Lato.woff2' },
-  { code: 'Spectral', name: `"Spectral", serif`, url: '/fonts/Spectral.woff2' },
-  { code: 'Dancing Script', name: `"Dancing Script", cursive`, url: '/fonts/DancingScript.woff2' },
-
-  { code: 'Noto Sans Simplified Chinese', name: `"Noto Sans SC", sans-serif`, url: '/fonts/NotoSansSimplifiedChinese.woff2' },
-  { code: 'Noto Serif Simplified Chinese', name: `"Noto Serif SC", serif`, url: '/fonts/NotoSerifSimplifiedChinese.woff2' },
-  { code: 'Noto Sans Traditional Chinese', name: `"Noto Sans TC", sans-serif`, url: '/fonts/NotoSansTraditionalChinese.woff2' },
-  { code: 'Noto Sans Hong Kong', name: `"Noto Sans HK", sans-serif`, url: '/fonts/NotoSansHongKong.woff2' },
-  { code: 'Noto Serif Traditional Chinese', name: `"Noto Serif TC", serif`, url: '/fonts/NotoSerifTraditionalChinese.woff2' },
-  { code: 'Noto Serif Hong Kong', name: `"Noto Serif HK", serif`, url: '/fonts/NotoSerifHongKong.woff2' },
-  { code: 'Noto Sans Japanese', name: `"Noto Sans JP", sans-serif`, url: '/fonts/NotoSansJapanese.woff2' },
-  { code: 'Noto Sans Korean', name: `"Noto Sans KR", sans-serif`, url: '/fonts/NotoSansKorean.woff2' },
-
-  { code: 'Poppins', name: `"Poppins", sans-serif`, url: '/fonts/Poppins.woff2' }
-];
-
-const FONT_KEY = 'OPEN_FONTS';
-const FONT_VERSION_KEY = 'OPEN_FONTS_VERSION';
-
-// 简单的字体管理类
-export class FontManager {
-  private fontList: any[] = [];
-  private skipLoadFonts: any[] = defaultFonts.map((value) => value.name);
-  private loadFonts: any[] = defaultFonts;
-
-  constructor() {
-    this.initFonts();
-  }
-
-  /**
-   * 初始化部分字体
-   */
-  async initFonts() {
-    let list: any[] = [];
-    
-    if (typeof localStorage !== 'undefined') {
-      if (localStorage.getItem(FONT_VERSION_KEY) !== '1') {
-        localStorage.removeItem(FONT_KEY);
-      }
-      
-      let localFonts: any[] = [];
-      try {
-        const storedFonts = localStorage.getItem(FONT_KEY);
-        localFonts = storedFonts ? JSON.parse(storedFonts) : [];
-      } catch {
-        localFonts = [];
-        localStorage.removeItem(FONT_KEY);
-      }
-      
-      if (localFonts.length > 0) {
-        list.push(...localFonts);
-      }
-    }
-
-    this.fontList = defaultFonts.concat(list);
-    return list;
-  }
-
-  getFontList() {
-    return this.fontList;
-  }
-
-  getSkipLoadFonts() {
-    return this.skipLoadFonts;
-  }
-
-  getLoadFonts() {
-    return this.loadFonts;
-  }
-}
-
-// 导出单例实例
-export const fontManager = new FontManager();

package/src/fonts/utils.ts

@@ -1,232 +0,0 @@
-const FONT_CSS_TAG = "data-fonts"
-const FONT_CSS_TAG_BASE64 = "base64-fonts"
-
-export async function fetchFontAsBase64(url: string): Promise<string> {
-    const response = await fetch(url);
-    if (!response.ok) {
-        throw new Error(`Failed to fetch font from ${url}`);
-    }
-    // 获取文件类型
-    const contentType = response.headers.get('Content-Type');
-    let mimeType: string;
-
-    // 根据 Content-Type 设置 MIME 类型
-    if (contentType?.includes('font/woff2')) {
-        mimeType = 'font/woff2';
-    } else if (contentType?.includes('font/woff')) {
-        mimeType = 'font/woff';
-    } else if (contentType?.includes('font/ttf') || contentType?.includes('font/sfnt')) {
-        mimeType = 'font/ttf';
-    } else if (contentType?.includes('application/octet-stream')) {
-        // 如果 Content-Type 是通用的二进制流，尝试从文件扩展名推断类型
-        const extension = url.split('.').pop()?.toLowerCase();
-        if (extension === 'woff2') {
-            mimeType = 'font/woff2';
-        } else if (extension === 'woff') {
-            mimeType = 'font/woff';
-        } else if (extension === 'ttf') {
-            mimeType = 'font/ttf';
-        } else {
-            throw new Error(`Unsupported font file type: ${extension}`);
-        }
-    } else {
-        throw new Error(`Unsupported Content-Type: ${contentType}`);
-    }
-
-    // 将文件转换为 Base64
-    const arrayBuffer = await response.arrayBuffer();
-    const base64String = arrayBufferToBase64(arrayBuffer);
-
-    // 返回 data: URL
-    return `data:${mimeType};charset=utf-8;base64,${base64String}`;
-}
-
-function arrayBufferToBase64(buffer: ArrayBuffer): string {
-    let binary = '';
-    const bytes = new Uint8Array(buffer);
-    const len = bytes.byteLength;
-    for (let i = 0; i < len; i++) {
-        binary += String.fromCharCode(bytes[i]);
-    }
-    return window.btoa(binary);
-}
-
-/**
- * 批量添加自定义字体样式
- * @param fontList
- */
-export function addCustomFonts(fontList: any = []) {
-    let styleTag = document.createElement('style');
-    styleTag.setAttribute(FONT_CSS_TAG, 'true');
-    let fontRules = fontList.map((font: any) => `@font-face {
-        font-family: "${font.name}";
-        src: local("${font.name}"), url("${font.download}")
-    }`).join('\n');
-    styleTag.textContent = fontRules;
-    document.head.appendChild(styleTag);
-}
-
-/**
- * 获取自定义字体样式
- */
-export function getCustomFontsStyle() {
-    const styleTag = document.querySelector('style[data-fonts]');
-    return styleTag?.textContent || '';
-}
-
-/**
- * 添加单个自定义字体样式
- * @param font
- */
-export function addCustomFont(font: any) {
-    let styleTag = document.querySelector('style[data-fonts]') as HTMLStyleElement | null;
-    // 如果不存在样式标签，则创建一个新的style标签
-    if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.setAttribute(FONT_CSS_TAG, 'true');
-        document.head.appendChild(styleTag);
-    }
-    
-    if (!styleTag.sheet) return;
-    
-    let existingFonts: string[] = [];
-    existingFonts = Array.from(styleTag.sheet.cssRules).map((rule: CSSRule) => {
-        const match = rule.cssText.match(/font-family: "([^"]+)"/);
-        return match ? match[1] : null;
-    }).filter((font): font is string => font !== null);
-
-    // 判断要添加的字体是否已经存在于样式表中
-    if (!existingFonts.includes(font.name)) {
-        // 创建新的 @font-face 规则
-        const newFontRule = `@font-face {
-          font-family: "${font.name}";
-          src: url("${font.download}");
-        }`;
-
-        // 插入新的 @font-face 规则到样式表中
-        try {
-            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
-        } catch (e) {
-            console.error('Failed to insert font rule:', e);
-        }
-    }
-}
-
-/**
- * 批量加载字体（要在生成完字体css后再调用次方法执行）
- * @param fontNameList 字体名称
- */
-export async function batchLoadFont(fontNameList: any = []) {
-    // FontFaceObserver 需要额外安装，这里注释掉
-    // 可以使用浏览器原生的 document.fonts API
-    try {
-        for (const fontFamily of fontNameList) {
-            await document.fonts.load(`16px ${fontFamily}`);
-        }
-    } catch (e) {
-        console.warn('Font loading failed:', e);
-    }
-}
-
-function getFontUrlFromCSS(selectors: string, fontFamilyName: string): string | null {
-    // 获取所有 <style> 标签
-    const styleTags = document.querySelectorAll(selectors);
-    
-    for (let i = 0; i < styleTags.length; i++) {
-        const styleTag = styleTags[i];
-        // 获取 CSS 内容
-        const cssText = styleTag.textContent || '';
-
-        // 使用正则表达式匹配 @font-face 规则
-        const fontFaceRules = cssText.match(/@font-face\s*\{[^}]+\}/g);
-
-        if (fontFaceRules) {
-            for (const rule of fontFaceRules) {
-                // 提取 font-family
-                const fontFamilyMatch = rule.match(/font-family:\s*(["'])(.*?)\1/);
-                if (fontFamilyMatch && fontFamilyMatch[2] === fontFamilyName) {
-                    // 提取 src
-                    const srcMatch = rule.match(/src:\s*url\((["'])(.*?)\1\)/);
-                    if (srcMatch) {
-                        return srcMatch[2]; // 返回字体文件 URL
-                    } else {
-                        const srcMatch2 = rule.match(/src:\s*(?:local\([^)]+\)\s*,\s*)?url\((["'])(.*?)\1\)/);
-                        if (srcMatch2) {
-                            return srcMatch2[2];
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    return null; // 未找到匹配的字体
-}
-
-/**
- * 添加单个自定义字体样式（Base64格式）
- * @param font
- */
-export async function addCustomFontBase64(font: any) {
-    const fontUrl = getFontUrlFromCSS(`style[${FONT_CSS_TAG}]`, font);
-    if (!fontUrl) {
-        console.warn('Font URL not found for:', font);
-        return;
-    }
-    
-    console.log('fontUrl=', fontUrl);
-    let styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`) as HTMLStyleElement | null;
-    // 如果不存在样式标签，则创建一个新的style标签
-    if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.setAttribute(FONT_CSS_TAG_BASE64, 'true');
-        document.head.appendChild(styleTag);
-    }
-
-    // 确保样式标签已经被添加到文档中
-    if (!styleTag.sheet) {
-        await new Promise(resolve => setTimeout(resolve, 10)); // 等待样式标签被加载
-    }
-
-    if (!styleTag.sheet) return;
-
-    let existingFonts = Array.from(styleTag.sheet.cssRules).map((rule: CSSRule) => {
-        const match = rule.cssText.match(/font-family: "([^"]+)"/);
-        return match ? match[1] : null;
-    }).filter((font): font is string => font !== null);
-    
-    // 判断要添加的字体是否已经存在于样式表中
-    if (!existingFonts.includes(font)) {
-        const base64Url = await fetchFontAsBase64(fontUrl);
-        // 创建新的 @font-face 规则
-        const newFontRule = `@font-face {
-          font-family: "${font}";
-          src: local("${font}"), url("${base64Url}");
-        }`;
-
-        // 插入新的 @font-face 规则到样式表中
-        try {
-            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
-            styleTag.textContent += newFontRule;
-        } catch (e) {
-            console.error('Failed to insert font rule:', e);
-        }
-    }
-}
-
-/**
- * 获取自定义字体样式
- */
-export function getBase64CustomFontsStyle() {
-    const styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`);
-    return styleTag?.textContent || '';
-}
-
-/**
- * 加载单个字体并转换为 Base64 格式
- * @param font 字体名称
- * @returns Promise<void>
- */
-export async function loadFont(font: string): Promise<void> {
-    await addCustomFontBase64(font);
-}

package/src/htmltext-editor.css

@@ -1,103 +0,0 @@
-
-.ql-editor {
-  padding: 0 !important;
-  line-height: unset !important;
-  overflow: unset !important;
-  outline: 0;
-}
-
-.ql-editor p {
-    margin: 0 !important;
-}
-
-.ql-editor sub,
-.ql-editor sup {
-  font-size: 63%;
-}
-
-.ql-editor sup {
-  top: -0.58em;
-}
-
-.ql-editor sub {
-  bottom: -0.38em;
-}
-
-.ql-editor ol {
-  padding-left: 0 !important;
-}
-
-.ql-font-Roboto {
-  font-family: 'Roboto', sans-serif;
-}
-.ql-font-RobotoMono {
-  font-family: 'Roboto Mono', monospace;
-}
-.ql-font-Inter {
-  font-family: 'Inter', sans-serif;
-}
-.ql-font-OpenSans {
-  font-family: 'Open Sans', sans-serif;
-}
-.ql-font-Montserrat {
-  font-family: 'Montserrat', sans-serif;
-}
-.ql-font-RobotoCondensed {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-.ql-font-Arimo {
-  font-family: 'Arimo', sans-serif;
-}
-.ql-font-NotoSans {
-  font-family: 'Noto Sans', sans-serif;
-}
-.ql-font-NotoSansSymbols {
-  font-family: 'Noto Sans Symbols', sans-serif;
-}
-.ql-font-Merriweather {
-  font-family: 'Merriweather', serif;
-}
-.ql-font-PlayfairDisplay {
-  font-family: 'Playfair Display', serif;
-}
-.ql-font-NotoSerif {
-  font-family: 'Noto Serif', serif;
-}
-.ql-font-Lato {
-  font-family: 'Lato', sans-serif;
-}
-.ql-font-Spectral {
-  font-family: 'Spectral', serif;
-}
-.ql-font-DancingScript {
-  font-family: 'Dancing Script', cursive;
-}
-
-.ql-font-NotoSansSimplifiedChinese {
-  font-family: 'Noto Sans SC', sans-serif;
-}
-.ql-font-NotoSerifSimplifiedChinese {
-  font-family: 'Noto Serif SC', serif;
-}
-.ql-font-NotoSansTraditionalChinese {
-  font-family: 'Noto Sans TC', sans-serif;
-}
-.ql-font-NotoSansHongKong {
-  font-family: 'Noto Sans HK', sans-serif;
-}
-.ql-font-NotoSerifTraditionalChinese {
-  font-family: 'Noto Serif TC', serif;
-}
-.ql-font-NotoSerifHongKong {
-  font-family: 'Noto Serif HK', serif;
-}
-.ql-font-NotoSansJapanese {
-  font-family: 'Noto Sans JP', sans-serif;
-}
-.ql-font-NotoSansKorean {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-.ql-font-Poppins {
-  font-family: 'Poppins', sans-serif;
-}