@chenyomi/leafer-htmltext-editor 1.0.0

package/dist/index.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+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);
+    }
+    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;
+}

package/dist/utils.d.ts

@@ -0,0 +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;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +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"}

package/dist/utils.js

@@ -0,0 +1,289 @@
+"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 updataHtmlText = async (e, base64font, fontObj) => {
+    const { scaleX, scaleY } = e.worldTransform;
+    const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+    const dom = 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 if (dom) {
+        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;
+        }
+    }
+    const { quill } = getEditorContext();
+    if (!quill)
+        return;
+    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')) {
+        const style = e.text.split('</style>')[0];
+        if (fontObj && !style.includes(fontObj.code)) {
+            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) {
+        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 {
+        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);
+    }
+};
+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');
+    wrapper.innerHTML = html;
+    const wrapperStyle = {
+        fontSize: `${fontSize}px`,
+        lineHeight,
+        letterSpacing: `${letterSpacing}px`,
+        textShadow
+    };
+    wrapper.querySelectorAll('p,ol,ul').forEach((p) => {
+        Object.assign(p.style, wrapperStyle);
+    });
+    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 = document.querySelector('#textInnerEditor');
+    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`;
+        }
+    }
+    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 {
+            divBox = style + `<div style="width: ${actualWidth - 10}px">${str}</div>`;
+        }
+    }
+    console.log(divBox, '最终的html内容');
+    return divBox;
+};
+const setHTMLText = (key, value, base64font, editor, isInnerEditor) => {
+    const { quill } = getEditorContext();
+    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) => {
+        if (key === 'font') {
+            const fontSimpleName = value.code.replace(/\s+/g, '');
+            if (isInnerEditor) {
+                if (range && range.length) {
+                    quill.formatText(range.index, range.length, key, fontSimpleName);
+                }
+                else {
+                    quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
+                }
+                (0, exports.updataHtmlText)(e, base64font ?? null, value ?? null);
+            }
+            else {
+                editor.isMultiSelect && editor.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);
+            (0, exports.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 (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);
+                if (range && isInnerEditor) {
+                    quill.setSelection(range.index, range.length);
+                }
+            }
+        }
+        else if (key === 'script') {
+            let val = 'sub';
+            if (value === 'super')
+                val = 'sup';
+            if (isInnerEditor) {
+                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 {
+                editor.isMultiSelect && editor.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) {
+                quill.format(key, value);
+            }
+            else {
+                quill.formatLine(0, quill.getLength(), key, value);
+            }
+            (0, exports.updataHtmlText)(e);
+        }
+        else if (key === 'alignContent') {
+            editor.isMultiSelect && editor.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);
+            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')) {
+                (0, exports.updataHtmlText)(e.parent.findOne('HTMLText'));
+            }
+        }
+        else if (key === 'textShadow') {
+            editor.isMultiSelect && editor.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) {
+                const [line] = quill.getLine(range?.index || 0);
+                if (line.formats().list) {
+                    quill.format(key, false);
+                }
+                else {
+                    quill.format(key, value);
+                }
+            }
+            else {
+                const [line] = quill.getLine(range?.index || 0);
+                if (line.formats().list) {
+                    quill.formatLine(0, quill.getLength(), key, false);
+                }
+                else {
+                    quill.formatLine(0, quill.getLength(), key, value);
+                }
+            }
+            (0, exports.updataHtmlText)(e);
+        }
+        else {
+            if (isInnerEditor) {
+                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 {
+                editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+                quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
+                (0, exports.updataHtmlText)(e);
+            }
+        }
+    }, 1);
+};
+exports.setHTMLText = setHTMLText;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@chenyomi/leafer-htmltext-editor",
+  "version": "1.0.0",
+  "description": "A text editor plugin for Leafer UI with HTML text support and Quill integration",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npm run build:cjs && npm run build:esm && npm run build:types",
+    "build:cjs": "tsc --module commonjs --outDir dist",
+    "build:esm": "tsc --module esnext --outDir dist/esm && mv dist/esm/index.js dist/index.esm.js",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "leafer",
+    "leafer-ui",
+    "text-editor",
+    "quill",
+    "html-text",
+    "wysiwyg",
+    "rich-text"
+  ],
+  "author": "chenyomi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/leafer-htmltext-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/leafer-htmltext-editor/issues"
+  },
+  "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": ">=1.0.0",
+    "quill": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/TextEditTool/index.ts

@@ -0,0 +1,145 @@
+/**
+ * TextEditTool 插件
+ * 用于在编辑器中提供带有圆角的矩形的控制点编辑功能
+ *
+ * 作者: chenyomi
+ */
+
+import { DragEvent, PointerEvent, WatchEvent } from 'leafer-ui';
+import { EditTool, Editor, registerEditTool, EditorScaleEvent, EditorMoveEvent } from '@leafer-in/editor';
+import { updataHtmlText } from '../utils';
+import { TextEditor } from '../TextEditor';
+
+// 简单的防抖函数实现
+function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  return function(this: any, ...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+@registerEditTool()
+export class TextEditTool extends EditTool {
+  public get tag() {
+    return 'TextEditTool';
+  }
+  
+  public quill: any = null;
+  private _dragRAF: number | null = null;
+  private updateBoxDebounced: (text: any) => void;
+  
+  constructor(editor: any) {
+    super(editor);
+    this.eventIds = [];
+    this.updateBoxDebounced = debounce((text: any) => {
+      updataHtmlText(text);
+    }, 300);
+  }
+  
+  public addEvent(): void {
+    if (!this.editor?.element) return;
+    
+    const text = this.editor.element.findOne('HTMLText');
+    if (!text) return;
+    
+    const { scaleX, scaleY } = text.worldTransform;
+    const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+    const div: any = document.querySelector('#textInnerEditor');
+    
+    if (!div) return;
+    
+    const { style } = div;
+    
+    this.eventIds = [
+      this.editor.on_(EditorScaleEvent.SCALE, (e: any) => {
+        if (!text.data) text.data = {};
+        if (!text.data.canChangeBox) {
+          text.data.canChangeBox = true;
+        }
+        if (text.data.canChangeBox && text.parent) {
+          const parentWidth = text.parent.width;
+          if (parentWidth !== undefined) {
+            style.width = parentWidth * zoomScale + 'px';
+            style.height = 'auto';
+          }
+        }
+        this.updateBoxDebounced(text);
+      }),
+      this.editor.on_(PointerEvent.DOUBLE_TAP, () => {
+        if (!text.parent?.locked) {
+          this.editor.openInnerEditor(text, true);
+        }
+      })
+    ];
+  }
+
+  public onLoad(): void {
+    if (!this.editor?.element) return;
+    
+    const text: any = this.editor.element.findOne('HTMLText');
+    if (!text) return;
+    
+    const { scaleX, scaleY } = text.worldTransform;
+    const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+    
+    this.addEvent();
+    this.editBox.add(this.view);
+    
+    this.quill = TextEditor.quill;
+    if (this.quill && text.text) {
+      this.quill.clipboard.dangerouslyPasteHTML(text.text);
+    }
+    
+    const div: any = document.querySelector('#textInnerEditor');
+    if (!div) return;
+    
+    const { style } = div;
+
+    if (text.data?.canChangeBox && text.parent) {
+      const parentWidth = text.parent.width;
+      const parentHeight = text.parent.height;
+      if (parentWidth !== undefined) {
+        style.width = parentWidth * zoomScale + 'px';
+      }
+      if (parentHeight !== undefined) {
+        style.height = parentHeight * zoomScale + 'px';
+      }
+    } else {
+      style.width = 'auto';
+      style.height = 'auto';
+    }
+  }
+
+  private isUpdatingPoints = false;
+  private curveAmount = 0;
+  
+  public updateChangeBoxBound(text: any): void {
+    if (text && text.__layout?.boxBounds) {
+      text.set({
+        width: text.__layout.boxBounds.width,
+        height: text.__layout.boxBounds.height
+      });
+    }
+  }
+  
+  public onUpdate(): void {
+    if (!this.editor?.element) return;
+    
+    const text = this.editor.element.findOne('HTMLText');
+    if (!text) return;
+    
+    const el = this.editor.element;
+    console.log('文本bound更新');
+
+    // 记录上一次的 curveAmount，只有变化时才触发
+    if (this.curveAmount === (text as any).curveAmount) return;
+    if (this.isUpdatingPoints) return;
+  }
+
+  public onUnload(): void {
+    this.editor.off_(this.eventIds);
+  }
+
+  public onDestroy(): void {}
+}