@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,92 +1,173 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontManager = exports.defaultFonts = exports.fontManager = exports.setHTMLText = exports.updataHtmlText = exports.TextEditor = void 0;
-exports.initTextEditorQuill = initTextEditorQuill;
-const TextEditor_1 = require("./TextEditor");
-var TextEditor_2 = require("./TextEditor");
-Object.defineProperty(exports, "TextEditor", { enumerable: true, get: function () { return TextEditor_2.TextEditor; } });
-require("./TextEditTool");
+exports.quillManager = exports.TextEditor = void 0;
+var TextEditor_1 = require("./TextEditor");
+Object.defineProperty(exports, "TextEditor", { enumerable: true, get: function () { return TextEditor_1.TextEditor; } });
 const core_1 = require("@leafer-ui/core");
-const quill_1 = require("quill");
-const quill_2 = __importDefault(require("quill"));
-require("quill/dist/quill.core.css");
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "updataHtmlText", { enumerable: true, get: function () { return utils_1.updataHtmlText; } });
-Object.defineProperty(exports, "setHTMLText", { enumerable: true, get: function () { return utils_1.setHTMLText; } });
-var font_1 = require("./fonts/font");
-Object.defineProperty(exports, "fontManager", { enumerable: true, get: function () { return font_1.fontManager; } });
-Object.defineProperty(exports, "defaultFonts", { enumerable: true, get: function () { return font_1.defaultFonts; } });
-Object.defineProperty(exports, "FontManager", { enumerable: true, get: function () { return font_1.FontManager; } });
-core_1.Plugin.add("leafer-htmltext-editor", "editor");
-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);
+require("./TextEditTool");
+core_1.Plugin.add('text-editor2', 'editor');
+const quill_1 = __importStar(require("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_1.default('#textInnerEditor', {
+            theme: undefined,
+            modules: {
+                toolbar: false,
+                keyboard: {
+                    bindings: {
+                        enter: {
+                            key: 'Enter',
+                            handler: (range) => {
+                                const [line] = this.quill.getLine(range.index);
+                                const BlockBlot = quill_1.default.import('blots/block');
+                                if (!BlockBlot?.bubbleFormats)
+                                    return true;
+                                const lineFormats = BlockBlot.bubbleFormats(line);
+                                const delta = new quill_1.Delta().retain(range.index).delete(range.length).insert('\n', lineFormats);
+                                this.quill.updateContents(delta, quill_1.default.sources.USER);
+                                this.quill.setSelection(range.index + 1, quill_1.default.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_1.default.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_1.default.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_1.TextEditor.quill = new quill_2.default("#textInnerEditor", {
-        theme: null,
-        modules: {
-            toolbar: false,
-            keyboard: {
-                bindings: {
-                    enter: {
-                        key: "Enter",
-                        handler: (range, context) => {
-                            const [line] = TextEditor_1.TextEditor.quill.getLine(range.index);
-                            const BlockBlot = quill_2.default.import("blots/block");
-                            if (!BlockBlot || !BlockBlot.bubbleFormats)
-                                return;
-                            const lineFormats = BlockBlot.bubbleFormats(line);
-                            const delta = new quill_1.Delta()
-                                .retain(range.index)
-                                .delete(range.length)
-                                .insert("\n", lineFormats);
-                            TextEditor_1.TextEditor.quill.updateContents(delta, quill_2.default.sources.USER);
-                            TextEditor_1.TextEditor.quill.setSelection(range.index + 1, quill_2.default.sources.SILENT);
-                            return false;
-                        },
-                    },
-                },
-            },
-        },
-    });
-    const FontAttributor = quill_2.default.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_2.default.register(FontAttributor, true);
-    return TextEditor_1.TextEditor.quill;
 }
+exports.quillManager = QuillManager.getInstance();

package/dist/utils.d.ts

@@ -1,3 +1,3 @@
 export declare const updataHtmlText: (e?: any, base64font?: any, fontObj?: any) => Promise<void>;
-export declare const setHTMLText: (key: string, value?: any, base64font?: any, editor?: any, isInnerEditor?: boolean) => void;
+export declare const setHTMLText: (key: string, value?: any, base64font?: any) => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc,GAAU,IAAI,GAAG,EAAE,aAAa,GAAG,EAAE,UAAU,GAAG,kBAuG5E,CAAC;AAqFF,eAAO,MAAM,WAAW,GACtB,KAAK,MAAM,EACX,QAAQ,GAAG,EACX,aAAa,GAAG,EAChB,SAAS,GAAG,EACZ,gBAAgB,OAAO,SAgIxB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,GAAU,IAAI,GAAG,EAAE,aAAa,GAAG,EAAE,UAAU,GAAG,kBAgG5E,CAAA;AAmED,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,QAAQ,GAAG,EAAE,aAAa,GAAG,SA+HrE,CAAA"}

package/dist/utils.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setHTMLText = exports.updataHtmlText = void 0;
-const TextEditor_1 = require("./TextEditor");
-function getEditorContext() {
-    const quill = TextEditor_1.TextEditor.quill;
-    return { quill };
-}
+const _1 = require(".");
 const updataHtmlText = async (e, base64font, fontObj) => {
     const { scaleX, scaleY } = e.worldTransform;
     const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
@@ -25,18 +21,14 @@ 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 = _1.quillManager.getQuill();
     const html = quill.getSemanticHTML();
     if (html === '<p></p>') {
         if (e.text.includes('<style>@font-face')) {
@@ -76,9 +68,6 @@ const updataHtmlText = async (e, base64font, fontObj) => {
 };
 exports.updataHtmlText = updataHtmlText;
 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');
@@ -98,6 +87,7 @@ const addFontSizeToP = (e, html, fontSize = 16, lineHeight = '1.5', letterSpacin
     }
     let height;
     const div = document.querySelector('#textInnerEditor');
+    const quill = _1.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)) {
@@ -117,7 +107,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 =
@@ -140,25 +130,18 @@ const addFontSizeToP = (e, html, fontSize = 16, lineHeight = '1.5', letterSpacin
     console.log(divBox, '最终的html内容');
     return divBox;
 };
-const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
-    const { quill } = getEditorContext();
+const setHTMLText = (key, value, base64font) => {
+    const quill = _1.quillManager.getQuill();
+    const { editor, canvas } = _1.quillManager.getCanvas();
+    console.log(editor, _1.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') || '{}');
+    _1.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);
                 }
@@ -168,18 +151,18 @@ const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 (0, exports.updataHtmlText)(e, base64font ?? null, value ?? null);
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
                 quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
                 (0, exports.updataHtmlText)(e, base64font ?? null, value ?? null);
             }
         }
         else if (key === 'fontSize') {
             e.data.textData[key] = value;
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
             (0, exports.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);
@@ -194,16 +177,14 @@ 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);
                 }
@@ -212,14 +193,14 @@ const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 }
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
                 quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val);
                 (0, exports.updataHtmlText)(e);
             }
         }
         else if (key === 'align') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-            if (isInnerEditor) {
+            _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            if (editor.innerEditing) {
                 quill.format(key, value);
             }
             else {
@@ -228,28 +209,28 @@ const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
             (0, exports.updataHtmlText)(e);
         }
         else if (key === 'alignContent') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
             e.data.textData[key] = value;
             (0, exports.updataHtmlText)(e);
         }
         else if (key === 'color') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
             quill.formatText(0, quill.getLength() - 1, key, value);
             if (e.tag === 'HTMLText') {
                 (0, exports.updataHtmlText)(e);
             }
-            else if (e.parent.findOne && e.parent.findOne('HTMLText')) {
+            else if (e.parent.findOne('HTMLText')) {
                 (0, exports.updataHtmlText)(e.parent.findOne('HTMLText'));
             }
         }
         else if (key === 'textShadow') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+            _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
             e.data.textData[key] = value;
             (0, exports.updataHtmlText)(e);
         }
         else if (key === 'list') {
-            editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
-            if (isInnerEditor) {
+            _1.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);
@@ -270,7 +251,7 @@ const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
             (0, exports.updataHtmlText)(e);
         }
         else {
-            if (isInnerEditor) {
+            if (editor.innerEditing) {
                 if (range && range.length) {
                     quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key]);
                 }
@@ -279,7 +260,7 @@ const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
                 }
             }
             else {
-                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                _1.quillManager.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
                 quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
                 (0, exports.updataHtmlText)(e);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chenyomi/leafer-htmltext-editor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A text editor plugin for Leafer UI with HTML text support and Quill integration",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -32,14 +32,14 @@
   },
   "homepage": "https://github.com/yourusername/leafer-htmltext-editor#readme",
   "peerDependencies": {
-    "@leafer-ui/core": ">=1.0.0",
     "@leafer-in/editor": ">=1.0.0",
-    "@leafer-in/interface": ">=1.0.0",
     "@leafer-in/html": ">=1.0.0",
+    "@leafer-ui/core": ">=1.0.0",
     "leafer-ui": ">=1.0.0",
     "quill": ">=2.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.23",
     "@types/node": "^20.0.0",
     "typescript": "^5.0.0"
   },