@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.1

package/src/utils.ts

@@ -1,61 +1,47 @@
-import { TextEditor } from './TextEditor';
-
-// 获取编辑器和quill实例的辅助函数
-function getEditorContext() {
-  const quill = TextEditor.quill;
-  return { quill };
-}
-
+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: HTMLElement | null = document.querySelector('#textInnerEditor');
-  
+  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;
+    dom.style.fontFamily = e.data.textData.fontFamily
   }
   if (dom && e.data.textData?.fontSize) {
-    dom.style.fontSize = `${e.data.textData.fontSize * zoomScale}px`;
+    dom.style.fontSize = `${e.data.textData.fontSize * zoomScale}px`
   }
   if (dom && e.data.textData?.lineHeight) {
-    dom.style.lineHeight = 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`;
+    dom.style.letterSpacing = `${e.data.textData.letterSpacing}px`
   }
   if (dom && e.data.textData?.textShadow) {
-    dom.style.textShadow = e.data.textData.textShadow;
-  } else if (dom) {
-    dom.style.textShadow = 'none';
+    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');
-    if (qlEditor) {
-      qlEditor.style.alignContent = e.data.textData.alignContent;
-    }
+    const qlEditor: any = dom.querySelector('.ql-editor')
+    qlEditor.style.alignContent = e.data.textData.alignContent
   }
-  
-  const { quill } = getEditorContext();
-  if (!quill) return;
-
-  // 如果是空的就把text置空
-  const html = quill.getSemanticHTML();
+  // 如果是空的就把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>';
+      e.text = e.text.split('</style>')[0] + '</style>'
     } else {
-      e.text = '';
+      e.text = ''
     }
-    return;
+    return
   }
-  
   if (e.text.includes('<style>@font-face')) {
     // text已经加载过字体
-    const style = e.text.split('</style>')[0];
+    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};}`;
+      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 +
@@ -68,7 +54,7 @@ export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) =
           e.data.textData.letterSpacing,
           e.data.textData.textShadow,
           e.data.textData?.alignContent
-        );
+        )
     } else {
       // 样式当前字体已经存在
       e.text =
@@ -82,11 +68,11 @@ export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) =
           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>`;
+    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(
@@ -97,7 +83,7 @@ export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) =
         e.data.textData.letterSpacing,
         e.data.textData.textShadow,
         e.data.textData?.alignContent
-      );
+      )
   } else {
     // text没有包含字体就不加字体style
     e.text = addFontSizeToP(
@@ -108,224 +94,200 @@ export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) =
       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 { quill } = getEditorContext();
-  if (!quill) return html;
-
-  const { scaleX, scaleY } = e.worldTransform;
-  const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = html;
-  
+}
+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);
-  });
+    Object.assign(p.style, wrapperStyle)
+  })
 
-  // 这个上下标还是要控制一下尺寸 因为html和canvas规范不一样 所以这里要控制一下
-  let str = wrapper.innerHTML;
-  
+  // 这个上下标还是要控制一下尺寸 因为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>');
+    str = str.replace(/<p\b([^>]*)><\/p>/g, '<p$1>&nbsp;</p>')
   }
-  
-  let height;
-  const div: any = document.querySelector('#textInnerEditor');
-
+  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));
-  
+  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';
+      e.data.textData.alignContent = 'start'
+      height = (actualHeight || e.__layout.boxBounds.height) + 'px'
     } else {
-      height = `${e.parent.height}px`;
+      height = `${e.parent.height}px`
     }
   } else {
     if (e.parent.height < actualHeight) {
-      height = (actualHeight || e.__layout.boxBounds.height) + 'px';
+      height = (actualHeight || e.__layout.boxBounds.height) + 'px'
     } else {
-      height = `${e.parent.height}px`;
+      height = `${e.parent.height}px`
     }
   }
 
-  // 水平居中相关样式内嵌
-  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 = '';
+  // 水平居中相关样式内嵌 因为这个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>`;
+      `<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>`;
+      `<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;
+      divBox = style + str
     } else {
-      divBox = style + `<div style="width: ${actualWidth - 10}px">${str}</div>`;
+      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,
-  editor?: any,
-  isInnerEditor?: boolean
-) => {
-  const { quill } = getEditorContext();
+  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) {
-    console.error('Quill editor not initialized');
-    return;
-  }
-
-  const rangeStr = localStorage.getItem('selection-change');
-  const range = rangeStr ? JSON.parse(rangeStr) : null;
-  
-  if (range && isInnerEditor) {
-    quill.setSelection(range.index, range.length);
+    return
   }
+  const range = JSON.parse(localStorage.getItem('selection-change') || '{}')
 
-  if (!editor || !editor.dateEdit) {
-    console.warn('Editor context not available for dateEdit');
-    return;
-  }
-
-  editor.dateEdit(async (e: any) => {
+  quillManager.dateEdit(async (e: any) => {
     if (key === 'font') {
-      const fontSimpleName = value.code.replace(/\s+/g, '');
-      if (isInnerEditor) {
+      const fontSimpleName = value.code.replace(/\s+/g, '')
+      if (editor.innerEditing) {
         if (range && range.length) {
-          quill.formatText(range.index, range.length, key, fontSimpleName);
+          quill.formatText(range.index, range.length, key, fontSimpleName)
         } else {
-          quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
+          quill.formatText(0, quill.getLength() - 1, key, fontSimpleName)
         }
-        updataHtmlText(e, base64font ?? null, value ?? null);
+        updataHtmlText(e, base64font ?? null, value ?? null)
       } else {
-        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-        quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
-        updataHtmlText(e, base64font ?? null, value ?? null);
+        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;
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      updataHtmlText(e, base64font ?? null);
+      // 字体和字号
+      e.data.textData[key] = value
+      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
+      updataHtmlText(e, base64font ?? null)
     } else if (key === 'textCase') {
-      if (isInnerEditor && range) {
-        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 (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();
+          convertedText = text.toLowerCase()
         } else if (text === text.toLowerCase() && /[a-z]/.test(text)) {
-          convertedText = text.toUpperCase();
+          convertedText = text.toUpperCase()
         } else {
-          convertedText = text.toUpperCase();
+          convertedText = text.toUpperCase()
         }
 
-        quill.insertText(range.index, convertedText, formats);
-        if (range && isInnerEditor) {
-          quill.setSelection(range.index, range.length);
-        }
+        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 (isInnerEditor) {
+      // 上下标
+      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);
+          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);
+          quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val)
         }
       } else {
-        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-        quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val);
-        updataHtmlText(e);
+        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') {
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      if (isInnerEditor) {
-        quill.format(key, value);
+      // 水平居中
+      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
+      if (editor.innerEditing) {
+        quill.format(key, value)
       } else {
-        quill.formatLine(0, quill.getLength(), key, value);
+        quill.formatLine(0, quill.getLength(), key, value)
       }
-      updataHtmlText(e);
+      updataHtmlText(e)
     } else if (key === 'alignContent') {
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      e.data.textData[key] = value;
-      updataHtmlText(e);
+      // 水平居中
+      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
+      e.data.textData[key] = value
+      updataHtmlText(e)
     } else if (key === 'color') {
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      quill.formatText(0, quill.getLength() - 1, key, value);
+      // 颜色
+      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 && e.parent.findOne('HTMLText')) {
-        updataHtmlText(e.parent.findOne('HTMLText'));
+        updataHtmlText(e)
+      } else if (e.parent.findOne('HTMLText')) {
+        updataHtmlText(e.parent.findOne('HTMLText'))
       }
     } else if (key === 'textShadow') {
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      e.data.textData[key] = value;
-      updataHtmlText(e);
+      // 阴影
+      quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
+      e.data.textData[key] = value
+      updataHtmlText(e)
     } else if (key === 'list') {
-      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-      if (isInnerEditor) {
-        const [line] = quill.getLine(range?.index || 0);
+      // 有序无序列表
+      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);
+          quill.format(key, false)
         } else {
-          quill.format(key, value);
+          quill.format(key, value)
         }
       } else {
-        const [line] = quill.getLine(range?.index || 0);
+        const [line]: any = quill.getLine(range?.index || 0)
         if (line.formats().list) {
-          quill.formatLine(0, quill.getLength(), key, false);
+          quill.formatLine(0, quill.getLength(), key, false)
         } else {
-          quill.formatLine(0, quill.getLength(), key, value);
+          quill.formatLine(0, quill.getLength(), key, value)
         }
       }
-      updataHtmlText(e);
+      updataHtmlText(e)
     } else {
-      if (isInnerEditor) {
+      if (editor.innerEditing) {
         if (range && range.length) {
-          quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key]);
+          quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key])
         } else {
-          quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
+          quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key])
         }
       } else {
-        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-        quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
-        updataHtmlText(e);
+        quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text)
+        quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key])
+        updataHtmlText(e)
       }
     }
-  }, 1);
-};
+
+    // if (e.parent.tag === 'Box' && e.parent.findOne('HTMLText') && e.parent.findOne('Box')) {
+    //   handleShowCurve(e.parent, false)
+    // }
+  }, 1)
+}