@chenyomi/leafer-htmltext-editor 1.0.7 → 1.0.10

package/src/index.ts

@@ -1,163 +0,0 @@
-import Quill, { Delta } from "quill";
-import "quill/dist/quill.core.css";
-
-export { TextEditTool } from "./TextEditTool";
-export { TextEditor } from "./TextEditor";
-class QuillManager {
-  private static instance: QuillManager;
-  private quill: Quill | null = null;
-  public app_: any | null = null;
-
-  private constructor() {}
-
-  static getInstance() {
-    if (!QuillManager.instance) {
-      QuillManager.instance = new QuillManager();
-    }
-    return QuillManager.instance;
-  }
-
-  async 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);
-
-                  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();
-      return this.quill;
-    } else {
-      this.quill = this.app_.editor.quill
-
-    }
-
-    
-  }
-
-  getQuill() {
-    if (!this.quill) {
-      throw new Error("Quill editor not initialized. Call init() first.");
-    }
-    return this.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();

package/src/utils.ts

@@ -1,294 +0,0 @@
-import { quillManager } from '.'
-// 更新text样式
-export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) => {
-  const { scaleX, scaleY } = e.worldTransform
-  const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY))
-  const dom: any = document.querySelector('#textInnerEditor')
-  if (dom && e.data.textData?.fontFamily) {
-    dom.style.fontFamily = e.data.textData.fontFamily
-  }
-  if (dom && e.data.textData?.fontSize) {
-    dom.style.fontSize = `${e.data.textData.fontSize * zoomScale}px`
-  }
-  if (dom && e.data.textData?.lineHeight) {
-    dom.style.lineHeight = e.data.textData.lineHeight
-  }
-  if (dom && e.data.textData?.letterSpacing) {
-    dom.style.letterSpacing = `${e.data.textData.letterSpacing}px`
-  }
-  if (dom && e.data.textData?.textShadow) {
-    dom.style.textShadow = e.data.textData.textShadow
-  } else {
-    dom.style.textShadow = 'none'
-  }
-  if (dom && e.data.textData?.alignContent) {
-    const qlEditor: any = dom.querySelector('.ql-editor')
-    qlEditor.style.alignContent = e.data.textData.alignContent
-  }
-  // 如果是空的就把text滞空
-  const quill = quillManager.getQuill()
-  const html = quill.getSemanticHTML()
-  if (html === '<p></p>') {
-    if (e.text.includes('<style>@font-face')) {
-      e.text = e.text.split('</style>')[0] + '</style>'
-    } else {
-      e.text = ''
-    }
-    return
-  }
-  if (e.text.includes('<style>@font-face')) {
-    // text已经加载过字体
-    const style = e.text.split('</style>')[0]
-    if (fontObj && !style.includes(fontObj.code)) {
-      // 在字体style标签检索是否有当前字体 没有就添加字体style
-      const addStyle = `@font-face {font-family: ${fontObj.code};src: url(${base64font}) format('woff2') } .ql-font-${fontObj?.code?.replace(/\s+/g, '')} {font-family: ${fontObj.name};}`
-      e.text =
-        style +
-        addStyle +
-        '</style>' +
-        addFontSizeToP(
-          e,
-          html,
-          e.data.textData.fontSize,
-          e.data.textData.lineHeight,
-          e.data.textData.letterSpacing,
-          e.data.textData.textShadow,
-          e.data.textData?.alignContent
-        )
-    } else {
-      // 样式当前字体已经存在
-      e.text =
-        style +
-        '</style>' +
-        addFontSizeToP(
-          e,
-          html,
-          e.data.textData.fontSize,
-          e.data.textData.lineHeight,
-          e.data.textData.letterSpacing,
-          e.data.textData.textShadow,
-          e.data.textData?.alignContent
-        )
-    }
-  } else if (base64font && fontObj) {
-    // 未加载过字体初次添加字体 存在base64font && fontObj才触发
-    const style = `<style>@font-face {font-family: ${e.data.textData.fontFamily.split(',')[0]};src: url(${base64font}) format('woff2') } .ql-font-${fontObj?.code?.replace(/\s+/g, '')} {font-family: ${fontObj.name};}</style>`
-    e.text =
-      style +
-      addFontSizeToP(
-        e,
-        html,
-        e.data.textData.fontSize,
-        e.data.textData.lineHeight,
-        e.data.textData.letterSpacing,
-        e.data.textData.textShadow,
-        e.data.textData?.alignContent
-      )
-  } else {
-    // text没有包含字体就不加字体style
-    e.text = addFontSizeToP(
-      e,
-      html,
-      e.data.textData.fontSize,
-      e.data.textData.lineHeight,
-      e.data.textData.letterSpacing,
-      e.data.textData.textShadow,
-      e.data.textData?.alignContent
-    )
-  }
-}
-const addFontSizeToP = (e: any, html: any, fontSize = 16, lineHeight = '1.5', letterSpacing = '0', textShadow = 'none', alignContent = 'start') => {
-  const { scaleX, scaleY } = e.worldTransform
-  const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY))
-  const wrapper = document.createElement('div')
-  wrapper.innerHTML = html
-  // 添加的样式 用于HTMLText渲染
-  const wrapperStyle: any = {
-    fontSize: `${fontSize}px`,
-    lineHeight,
-    letterSpacing: `${letterSpacing}px`,
-    textShadow
-  }
-  wrapper.querySelectorAll('p,ol,ul').forEach((p: any) => {
-    Object.assign(p.style, wrapperStyle)
-  })
-
-  // 这个上下标还是要控制一下尺寸 因为html和canvas规范不一样 所以这里要控制一下 当然如果存在别的style例如color的style就合并style
-  let str = wrapper.innerHTML
-  // 排查如果有回车换行的加上一个字符
-  if (/<p\b[^>]*><\/p>/.test(str)) {
-    str = str.replace(/<p\b([^>]*)><\/p>/g, '<p$1>&nbsp;</p>')
-  }
-  let height
-  const div: any = document.querySelector('#textInnerEditor')
-  const quill = quillManager.getQuill()
-  // 这里别动
-  // 获取包含自动换行的实际内容高度
-  const actualHeight = Number((quill.scroll.domNode.scrollHeight / zoomScale).toFixed(0))
-  const actualWidth = Number((quill.scroll.domNode.scrollWidth / zoomScale).toFixed(0))
-  if (['center', 'end'].includes(e.data.textData.alignContent)) {
-    if (e.parent.height < actualHeight) {
-      e.data.textData.alignContent = 'start'
-      height = (actualHeight || e.__layout.boxBounds.height) + 'px'
-    } else {
-      height = `${e.parent.height}px`
-    }
-  } else {
-    if (e.parent.height < actualHeight) {
-      height = (actualHeight || e.__layout.boxBounds.height) + 'px'
-    } else {
-      height = `${e.parent.height}px`
-    }
-  }
-
-  // 水平居中相关样式内嵌 因为这个quill居中用的class没用style
-  const style = `<style>sub,sup{font-size:63%;}.ql-ui{position:absolute}ol,ul{counter-reset:list-0;padding-left:1.5em;margin:0}ol>li,ul>li{counter-increment:list-0;list-style-type:none;position:relative;padding-left:0;margin:0}ol>li::before{content:counter(list-0,decimal) '. ';position:absolute;left:-1.5em;width:1.2em;text-align:right}ul>li::before{content:'\u2022';position:absolute;left:-1.5em;width:1.2em;text-align:right}li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-left{text-align:left}.ql-align-justify{text-align:justify}</style>`
-  let divBox = ''
-  if (e.parent.children[0].tag.includes('Shape')) {
-    divBox =
-      style +
-      `<div style="width: ${e.parent.width}px;height: ${e.parent.height}px;overflow-wrap:break-word;word-break:break-all;align-content:center;">${str}</div>`
-  } else if (e.data.canChangeBox) {
-    divBox =
-      style +
-      `<div style="width: ${e.parent.width}px;height:${height};overflow-wrap:break-word;word-break:break-all;align-content:${alignContent};">${str}</div>`
-  } else {
-    // 斜体补偿宽度 控制
-    if (e.data.textData.italic) {
-      divBox = style + str
-    } else {
-      console.log(actualHeight)
-      divBox = style + `<div style="width: ${actualWidth - 10}px;">${str}</div>`
-    }
-  }
-  console.log(divBox, '最终的html内容')
-  return divBox
-}
-export const setHTMLText = (key: string, value?: any, base64font?: any) => {
-  const quill = quillManager.getQuill()
-  const { editor, canvas } = quillManager.getCanvas()
-  console.log(editor, quillManager.getCanvas(), 'editor')
-  if (!quill) {
-    return
-  }
-  const range = JSON.parse(localStorage.getItem('selection-change') || '{}')
-
-  quillManager.dateEdit(async (e: any) => {
-    if (key === 'font') {
-      const fontSimpleName = value.code.replace(/\s+/g, '')
-      if (editor.innerEditing) {
-        if (range && range.length) {
-          quill.formatText(range.index, range.length, key, fontSimpleName)
-        } else {
-          quill.formatText(0, quill.getLength() - 1, key, fontSimpleName)
-        }
-        updataHtmlText(e, base64font ?? null, value ?? null)
-      } else {
-        quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-        quill.formatText(0, quill.getLength() - 1, key, fontSimpleName)
-        updataHtmlText(e, base64font ?? null, value ?? null)
-      }
-    } else if (key === 'fontSize') {
-      // 字体和字号
-      e.data.textData[key] = value
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      updataHtmlText(e, base64font ?? null)
-    } else if (key === 'textCase') {
-      // 大小写
-      if (editor.innerEditing) {
-        const text = quill.getText(range.index, range.length)
-        const formats = quill.getFormat(range.index, range.length)
-        quill.deleteText(range.index, range.length)
-        let convertedText
-        if (text === text.toUpperCase() && /[A-Z]/.test(text)) {
-          convertedText = text.toLowerCase()
-        } else if (text === text.toLowerCase() && /[a-z]/.test(text)) {
-          convertedText = text.toUpperCase()
-        } else {
-          convertedText = text.toUpperCase()
-        }
-
-        quill.insertText(range.index, convertedText, formats)
-        range && editor.innerEditing && quill.setSelection(range.index, range.length)
-      }
-    } else if (key === 'script') {
-      // 上下标
-      let val = 'sub'
-      if (value === 'super') val = 'sup'
-      if (editor.innerEditing) {
-        if (range && range.length) {
-          quill.formatText(range.index, range.length, key, quill.getFormat(range).script === value ? false : val)
-        } else {
-          quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val)
-        }
-      } else {
-        quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-        quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val)
-        updataHtmlText(e)
-      }
-    } else if (key === 'align') {
-      // 水平居中
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      if (editor.innerEditing) {
-        quill.format(key, value)
-      } else {
-        quill.formatLine(0, quill.getLength(), key, value)
-      }
-      updataHtmlText(e)
-    } else if (key === 'alignContent') {
-      // 水平居中
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      e.data.textData[key] = value
-      updataHtmlText(e)
-    } else if (key === 'color') {
-      // 颜色
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      quill.formatText(0, quill.getLength() - 1, key, value)
-      if (e.tag === 'HTMLText') {
-        updataHtmlText(e)
-      } else if (e.parent.findOne('HTMLText')) {
-        updataHtmlText(e.parent.findOne('HTMLText'))
-      }
-    } else if (key === 'textShadow') {
-      // 阴影
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      e.data.textData[key] = value
-      updataHtmlText(e)
-    } else if (key === 'list') {
-      // 有序无序列表
-      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-      if (editor.innerEditing) {
-        const [line]: any = quill.getLine(range?.index || 0)
-        if (line.formats().list) {
-          quill.format(key, false)
-        } else {
-          quill.format(key, value)
-        }
-      } else {
-        const [line]: any = quill.getLine(range?.index || 0)
-        if (line.formats().list) {
-          quill.formatLine(0, quill.getLength(), key, false)
-        } else {
-          quill.formatLine(0, quill.getLength(), key, value)
-        }
-      }
-      updataHtmlText(e)
-    } else {
-      if (editor.innerEditing) {
-        if (range && range.length) {
-          quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key])
-        } else {
-          quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key])
-        }
-      } else {
-        quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
-        quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key])
-        updataHtmlText(e)
-      }
-    }
-
-    // if (e.parent.tag === 'Box' && e.parent.findOne('HTMLText') && e.parent.findOne('Box')) {
-    //   handleShowCurve(e.parent, false)
-    // }
-  }, 1)
-}