@chenyomi/leafer-htmltext-editor 1.0.0

package/src/TextEditTool/utils.ts

@@ -0,0 +1,216 @@
+import { Text, Box, Path } from 'leafer-ui'
+import { HTMLText } from '@leafer-in/html' // 导入 html 插件
+export function getArcRadius(fontSize: number, curveAmount: number): number {
+  if (curveAmount === 0) return Infinity
+  const theta = (330 * fontSize * 72) / 96
+  const radius = theta / Math.abs(curveAmount)
+  // 根据正负仅决定方向，不影响半径大小
+  return radius
+}
+
+export const handleShowCurve = (element: any, op: boolean) => {
+  const box = element.findOne('Box')
+  box && element.remove(box)
+  const text = element.findOne('HTMLText') as any
+  // 下一帧再生成新路径
+  const { boxBounds, x, y } = text
+  const { width } = boxBounds
+  if (!text.curveAmount) {
+    // 当移动到0的时候显示原来的文字
+    text.opacity = 1
+    // 这个为了解决其他地方有隐藏了这个的情况下
+    text.visible = true
+    return
+  }
+  text.text = text.text.replace(/\u200B/g, '').replace(/<br\s*\/?>/gi, '\n') // 把 <br> 转换成换行符
+  text.opacity = 0
+  const radius = getArcRadius(text.fontSize, text.curveAmount)
+  const C = 2 * Math.PI * radius
+  const dis = (text.text as string).length + 2
+  const tW = width / dis
+  let startW = 0
+  if (C > tW * (text.text as string).length) {
+    startW = (C - tW * (text.text as string).length) / 2
+  }
+  const startWPr = (startW * 360) / C
+  const group = new Box({
+    x: 0,
+    y: 0,
+    editable: false,
+    resizeChildren: true
+  })
+  let path
+  const offsetK = text.fontSize * text.lineHeight.value || 0
+  const offsetY = text.curveAmount > 0 ? radius + offsetK : -radius
+  if (text.curveAmount > 0) {
+    path = `G ${x + width / 2} ${offsetY} ${radius} ${radius} 90 ${startWPr} ${360 - startWPr} 0`
+  } else {
+    const a = 180 - startWPr
+    path = `G ${x + width / 2} ${offsetY} ${radius} ${radius} 90 ${a} ${-a} 1`
+  }
+  const pathLine = new Path({
+    x: 0,
+    y: 0,
+    motionPath: true,
+    editable: false,
+    path: path
+  })
+  // 给Box添加新的Path轨迹
+  group.add(pathLine)
+  // op如果内部编辑输入的时候显示预测轨迹
+  group.set({
+    opacity: op ? 0.2 : 1
+  })
+  Array.from(text.text as string).forEach((ch, i) => {
+    const str = new HTMLText({
+      text: ch,
+      around: text.curveAmount > 0 ? 'bottom' : 'top',
+      fontSize: text.fontSize,
+      fontFamily: text.fontFamily,
+      fontWeight: text.fontWeight,
+      motion: i * tW + tW / 2,
+      textDecoration: text.textDecoration,
+      textCase: text.textCase,
+      textAlign: text.textAlign,
+      motionRotation: text.curveAmount > 0 ? 3 : -2,
+      fill: text.fill
+    })
+    group.add(str)
+  })
+  element.add(group)
+}
+
+// base 映射：只需把普通字符 -> 上标/下标（任意已有的上/下标字符）列出来一次
+const baseSuperscript: Record<string, string> = {
+  '0': '⁰','1': '¹','2': '²','3': '³','4': '⁴','5': '⁵','6': '⁶','7': '⁷','8': '⁸','9': '⁹',
+  a: 'ᵃ', b: 'ᵇ', c: 'ᶜ', d: 'ᵈ', e: 'ᵉ', f: 'ᶠ', g: 'ᵍ', h: 'ʰ', i: 'ⁱ', j: 'ʲ', k: 'ᵏ',
+  l: 'ˡ', m: 'ᵐ', n: 'ⁿ', o: 'ᵒ', p: 'ᵖ', r: 'ʳ', s: 'ˢ', t: 'ᵗ', u: 'ᵘ', v: 'ᵛ', w: 'ʷ',
+  x: 'ˣ', y: 'ʸ', z: 'ᶻ',
+  A: 'ᴬ', B: 'ᴮ', D: 'ᴰ', E: 'ᴱ', G: 'ᴳ', H: 'ᴴ', I: 'ᴵ', J: 'ᴶ', K: 'ᴷ', L: 'ᴸ', M: 'ᴹ',
+  N: 'ᴺ', O: 'ᴼ', P: 'ᴾ', R: 'ᴿ', T: 'ᵀ', U: 'ᵁ', W: 'ᵂ',
+  '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾'
+}
+
+const baseSubscript: Record<string, string> = {
+  '0': '₀','1': '₁','2': '₂','3': '₃','4': '₄','5': '₅','6': '₆','7': '₇','8': '₈','9': '₉',
+  a: 'ₐ', e: 'ₑ', h: 'ₕ', i: 'ᵢ', j: 'ⱼ', k: 'ₖ', l: 'ₗ', m: 'ₘ', n: 'ₙ', o: 'ₒ', p: 'ₚ',
+  r: 'ᵣ', s: 'ₛ', t: 'ₜ', u: 'ᵤ', v: 'ᵥ', x: 'ₓ',
+  '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎',
+  // 常见希腊字母的下标形式（如需要可加入）
+  'β': 'ᵦ', 'γ': 'ᵧ', 'ρ': 'ᵨ', 'φ': 'ᵩ', 'χ': 'ᵪ'
+}
+
+// helper: 从 base 映射中收集所有已知上标/下标字符（用于反向映射）
+function invertMap(map: Record<string, string>): Record<string, string> {
+  const inv: Record<string, string> = {}
+  for (const k in map) {
+    inv[map[k]] = map[k] // key: 上/下标字符 -> value: 同样的上/下标字符（作为标准形）
+  }
+  return inv
+}
+
+const knownSupers = invertMap(baseSuperscript) // '¹' -> '¹', 'ᵃ'->'ᵃ' ...
+const knownSubs = invertMap(baseSubscript)     // '₁' -> '₁', 'ₐ'->'ₐ' ...
+
+// 生成最终的“鲁棒”映射：接受普通字符、上标字符、下标字符，统一输出目标形式
+function buildSuperscriptMap(
+  baseSup: Record<string, string>,
+  baseSub: Record<string, string>
+): Record<string, string> {
+  const out: Record<string, string> = {}
+
+  // 普通字符 -> 上标
+  for (const k in baseSup) out[k] = baseSup[k]
+
+  // 已知的下标字符（如 '₁'）也映射到对应的上标（如果我们在 baseSup 找到相同的 base char）
+  // 为了做到这一点，我们需要找到下标字符对应的 base 字符：遍历 baseSub 找到哪些 base 的下标字符
+  for (const base in baseSub) {
+    const subChar = baseSub[base]
+    // 如果 base 在 baseSup 有对应的上标，则把 subChar -> 那个上标
+    if (base in baseSup) out[subChar] = baseSup[base]
+  }
+
+  // 如果输入已经是上标（例如 '¹'），也把它映射为标准上标（自身）
+  for (const supChar in knownSupers) out[supChar] = supChar
+
+  return out
+}
+
+function buildSubscriptMap(
+  baseSup: Record<string, string>,
+  baseSub: Record<string, string>
+): Record<string, string> {
+  const out: Record<string, string> = {}
+
+  // 普通字符 -> 下标
+  for (const k in baseSub) out[k] = baseSub[k]
+
+  // 已知的上标字符也映射到对应的下标（如果 baseSup 有同名 base）
+  for (const base in baseSup) {
+    const supChar = baseSup[base]
+    if (base in baseSub) out[supChar] = baseSub[base]
+  }
+
+  // 已经是下标的字符映射到自身
+  for (const subChar in knownSubs) out[subChar] = subChar
+
+  return out
+}
+
+const superscriptMap = buildSuperscriptMap(baseSuperscript, baseSubscript)
+const subscriptMap = buildSubscriptMap(baseSuperscript, baseSubscript)
+
+// 转换函数（逐字符替换；可以根据需要改成群组替换）
+export function toSuperscript(input: string): string {
+  let out = ''
+  for (const ch of input) {
+    out += superscriptMap[ch] ?? ch
+  }
+  return out
+}
+
+export function toSubscript(input: string): string {
+  let out = ''
+  for (const ch of input) {
+    out += subscriptMap[ch] ?? ch
+  }
+  return out
+}
+
+
+export const superscriptMapVal = Object.values(superscriptMap)
+
+export const subscriptMapVal = Object.values(subscriptMap)
+
+// 构建 normalMap：所有上标、下标字符 → 对应的普通 base 字符
+function buildNormalMap(
+  baseSup: Record<string, string>,
+  baseSub: Record<string, string>
+): Record<string, string> {
+  const normal: Record<string, string> = {}
+
+  // 上标的 value → key（普通）
+  for (const base in baseSup) {
+    const supChar = baseSup[base]
+    normal[supChar] = base
+  }
+
+  // 下标的 value → key（普通）
+  for (const base in baseSub) {
+    const subChar = baseSub[base]
+    normal[subChar] = base
+  }
+
+  return normal
+}
+
+const normalMap = buildNormalMap(baseSuperscript, baseSubscript)
+
+export function toNormal(input: string): string {
+  let out = ''
+  for (const ch of input) {
+    out += normalMap[ch] ?? ch
+  }
+  return out
+}
+

package/src/TextEditor.ts

@@ -0,0 +1,200 @@
+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 { 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;
+
+  public editDom: HTMLDivElement | undefined;
+  public config = {
+    selectAll: false,
+  };
+
+  public eventIds: IEventListenerId[] = [];
+
+  protected selectText:
+    | { start: number; end: number; text: string }
+    | undefined;
+  protected inBody: boolean | undefined;
+  protected isHTMLText: boolean | undefined;
+  
+  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;
+
+    this.isHTMLText = !(text instanceof Text);
+    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 { style } = div;
+    style.visibility = "visible";
+
+    // 获取外部box的宽高
+    if (
+      text.data?.canChangeBox &&
+      text.parent?.width !== undefined &&
+      text.parent?.height !== undefined
+    ) {
+      style.width = text.parent.width * zoomScale + "px";
+      style.height = text.parent.height * zoomScale + "px";
+    } else {
+      style.width = "auto";
+      style.height = "auto";
+    }
+
+    style.outline = "solid #8499EF";
+
+    // 初始化文本样式
+    if (text.data?.textData?.fontSize) {
+      div.style.fontSize = `${text.data.textData.fontSize * zoomScale}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");
+      if (qlEditor) {
+        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.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;
+        while (target) {
+          if (target === div) find = true;
+          target = target.parentElement;
+        }
+        if (!find) {
+          editor.closeInnerEditor();
+          editor.cancel();
+        }
+      }),
+    ];
+  }
+  
+  private onSelectionChange = async (e: any) => {
+    e && localStorage.setItem("selection-change", JSON.stringify(e));
+  };
+
+  private onInput = async () => {
+    // 主要是更新编辑内容
+    updataHtmlText(this.editTarget);
+  };
+
+  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;
+
+    const { x, y } = this.inBody
+      ? text.app.clientBounds
+      : (text.app.tree?.clientBounds || { x: 0, y: 0 });
+    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";
+    }
+
+    // 打开内部或者编辑内部文本编辑强制隐藏
+    text.set({
+      visible: false,
+    });
+  }
+  
+  private isUpdatingPoints = false;
+  
+  public onUnload(): void {
+    const { editTarget: text, editor, editDom: dom } = this;
+
+    if (text) {
+      this.onInput();
+      editor.off_(this.eventIds);
+
+      if (this.editDom) {
+        this.editDom.style.visibility = "hidden";
+      }
+      this.eventIds = [] as any;
+    }
+    
+    text.set({
+      visible: true,
+    });
+    
+    if (this.quill) {
+      this.quill.off("text-change", this.onInput);
+      this.quill.off("selection-change", this.onSelectionChange);
+    }
+  }
+}

package/src/fonts/font.ts

@@ -0,0 +1,86 @@
+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();