@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.1

package/dist/esm/utils.js

@@ -1,8 +1,4 @@
-import { TextEditor } from './TextEditor';
-function getEditorContext() {
-    const quill = TextEditor.quill;
-    return { quill };
-}
+import { quillManager } from '.';
 export const updataHtmlText = async (e, base64font, fontObj) => {
     const { scaleX, scaleY } = e.worldTransform;
     const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
@@ -22,18 +18,14 @@ export const updataHtmlText = async (e, base64font, fontObj) => {
     if (dom && e.data.textData?.textShadow) {
         dom.style.textShadow = e.data.textData.textShadow;
     }
-    else if (dom) {
+    else {
         dom.style.textShadow = 'none';
     }
     if (dom && e.data.textData?.alignContent) {
         const qlEditor = dom.querySelector('.ql-editor');
-        if (qlEditor) {
-            qlEditor.style.alignContent = e.data.textData.alignContent;
-        }
+        qlEditor.style.alignContent = e.data.textData.alignContent;
     }
-    const { quill } = getEditorContext();
-    if (!quill)
-        return;
+    const quill = quillManager.getQuill();
     const html = quill.getSemanticHTML();
     if (html === '<p></p>') {
         if (e.text.includes('<style>@font-face')) {
@@ -72,9 +64,6 @@ export const updataHtmlText = async (e, base64font, fontObj) => {
     }
 };
 const addFontSizeToP = (e, html, 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');
@@ -94,6 +83,7 @@ const addFontSizeToP = (e, html, fontSize = 16, lineHeight = '1.5', letterSpacin
     }
     let height;
     const div = 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)) {
@@ -113,7 +103,7 @@ const addFontSizeToP = (e, html, fontSize = 16, lineHeight = '1.5', letterSpacin
             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>`;
+    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 =
@@ -136,25 +126,18 @@ const addFontSizeToP = (e, html, fontSize = 16, lineHeight = '1.5', letterSpacin
     console.log(divBox, '最终的html内容');
     return divBox;
 };
-export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
-    const { quill } = getEditorContext();
+export const setHTMLText = (key, value, base64font) => {
+    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);
-    }
-    if (!editor || !editor.dateEdit) {
-        console.warn('Editor context not available for dateEdit');
-        return;
-    }
-    editor.dateEdit(async (e) => {
+    const range = JSON.parse(localStorage.getItem('selection-change') || '{}');
+    quillManager.dateEdit(async (e) => {
         if (key === 'font') {
             const fontSimpleName = value.code.replace(/\s+/g, '');
-            if (isInnerEditor) {
+            if (editor.innerEditing) {
                 if (range && range.length) {
                     quill.formatText(range.index, range.length, key, fontSimpleName);
                 }
@@ -164,18 +147,18 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 updataHtmlText(e, base64font ?? null, value ?? null);
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                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);
+            quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
             updataHtmlText(e, base64font ?? null);
         }
         else if (key === 'textCase') {
-            if (isInnerEditor && range) {
+            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);
@@ -190,16 +173,14 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                     convertedText = text.toUpperCase();
                 }
                 quill.insertText(range.index, convertedText, formats);
-                if (range && isInnerEditor) {
-                    quill.setSelection(range.index, range.length);
-                }
+                range && editor.innerEditing && quill.setSelection(range.index, range.length);
             }
         }
         else if (key === 'script') {
             let val = 'sub';
             if (value === 'super')
                 val = 'sup';
-            if (isInnerEditor) {
+            if (editor.innerEditing) {
                 if (range && range.length) {
                     quill.formatText(range.index, range.length, key, quill.getFormat(range).script === value ? false : val);
                 }
@@ -208,14 +189,14 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 }
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                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) {
+            quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            if (editor.innerEditing) {
                 quill.format(key, value);
             }
             else {
@@ -224,28 +205,28 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
             updataHtmlText(e);
         }
         else if (key === 'alignContent') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            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);
+            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')) {
+            else if (e.parent.findOne('HTMLText')) {
                 updataHtmlText(e.parent.findOne('HTMLText'));
             }
         }
         else if (key === 'textShadow') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            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) {
+            quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            if (editor.innerEditing) {
                 const [line] = quill.getLine(range?.index || 0);
                 if (line.formats().list) {
                     quill.format(key, false);
@@ -266,7 +247,7 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
             updataHtmlText(e);
         }
         else {
-            if (isInnerEditor) {
+            if (editor.innerEditing) {
                 if (range && range.length) {
                     quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key]);
                 }
@@ -275,7 +256,7 @@ export const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 }
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
                 quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
                 updataHtmlText(e);
             }

package/dist/index.d.ts

@@ -1,7 +1,18 @@
-export { TextEditor } from "./TextEditor";
-import "./TextEditTool";
-import "quill/dist/quill.core.css";
-export { updataHtmlText, setHTMLText } from "./utils";
-export { fontManager, defaultFonts, FontManager } from "./fonts/font";
-export declare function initTextEditorQuill(container?: HTMLElement): any;
+export { TextEditor } from './TextEditor';
+import './TextEditTool';
+import Quill from 'quill';
+declare class QuillManager {
+    private static instance;
+    private quill;
+    app_: any | null;
+    private constructor();
+    static getInstance(): QuillManager;
+    init(app: any): Quill;
+    getQuill(): Quill;
+    getCanvas(): any;
+    private registerFonts;
+    isMultiSelect(): boolean;
+    dateEdit(callback: (leaf: any) => void, level?: number, listNew?: any): void;
+}
+export declare const quillManager: QuillManager;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AAIxB,OAAO,2BAA2B,CAAC;AAGnC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItE,wBAAgB,mBAAmB,CAAC,SAAS,CAAC,EAAE,WAAW,OA6E1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,gBAAgB,CAAA;AAGvB,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,cAAM,YAAY;IAChB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAc;IACrC,OAAO,CAAC,KAAK,CAAqB;IAC3B,IAAI,EAAE,GAAG,GAAG,IAAI,CAAO;IAE9B,OAAO;IAEP,MAAM,CAAC,WAAW;IAQlB,IAAI,CAAC,GAAG,EAAE,GAAG;IAgDb,QAAQ;IAOR,SAAS;IAOT,OAAO,CAAC,aAAa;IA+Bd,aAAa,IAAI,OAAO;IAQxB,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,KAAK,SAAI,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI;CA4B/E;AAED,eAAO,MAAM,YAAY,cAA6B,CAAA"}

package/dist/index.esm.js

@@ -1,79 +1,136 @@
-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 { updataHtmlText, setHTMLText } from "./utils";
-export { fontManager, defaultFonts, FontManager } from "./fonts/font";
-Plugin.add("leafer-htmltext-editor", "editor");
-export function initTextEditorQuill(container) {
-    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);
+export { TextEditor } from './TextEditor';
+import { Plugin } from '@leafer-ui/core';
+import './TextEditTool';
+Plugin.add('text-editor2', 'editor');
+import Quill, { Delta } from 'quill';
+class QuillManager {
+    constructor() {
+        this.quill = null;
+        this.app_ = null;
+    }
+    static getInstance() {
+        if (!QuillManager.instance) {
+            QuillManager.instance = new QuillManager();
+        }
+        return QuillManager.instance;
+    }
+    init(app) {
+        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) => {
+                                const [line] = this.quill.getLine(range.index);
+                                const BlockBlot = 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;
+    }
+    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_;
+    }
+    registerFonts() {
+        const FontAttributor = 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);
+    }
+    isMultiSelect() {
+        if (!this.app_.editor)
+            return false;
+        if (this.app_.editor.multiple === true) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    dateEdit(callback, level = 0, listNew) {
+        const { editor } = this.app_;
+        const list = listNew ? listNew : editor.leafList.list;
+        const applyCallback = (leaf) => {
+            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]);
+        }
     }
-    TextEditor.quill = new Quill("#textInnerEditor", {
-        theme: null,
-        modules: {
-            toolbar: false,
-            keyboard: {
-                bindings: {
-                    enter: {
-                        key: "Enter",
-                        handler: (range, context) => {
-                            const [line] = TextEditor.quill.getLine(range.index);
-                            const BlockBlot = Quill.import("blots/block");
-                            if (!BlockBlot || !BlockBlot.bubbleFormats)
-                                return;
-                            const lineFormats = BlockBlot.bubbleFormats(line);
-                            const delta = new Delta()
-                                .retain(range.index)
-                                .delete(range.length)
-                                .insert("\n", lineFormats);
-                            TextEditor.quill.updateContents(delta, Quill.sources.USER);
-                            TextEditor.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-                            return false;
-                        },
-                    },
-                },
-            },
-        },
-    });
-    const FontAttributor = 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;
 }
+export const quillManager = QuillManager.getInstance();