@chenyomi/leafer-htmltext-editor 1.0.0

package/dist/esm/TextEditor.js

@@ -0,0 +1,163 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TextEditor_1;
+import { Matrix, PointerEvent } from "@leafer-ui/core";
+import { InnerEditor, registerInnerEditor } from "@leafer-in/editor";
+import { updataHtmlText } from "./utils";
+let TextEditor = TextEditor_1 = class TextEditor extends InnerEditor {
+    constructor() {
+        super(...arguments);
+        this.config = {
+            selectAll: false,
+        };
+        this.eventIds = [];
+        this.onSelectionChange = async (e) => {
+            e && localStorage.setItem("selection-change", JSON.stringify(e));
+        };
+        this.onInput = async () => {
+            updataHtmlText(this.editTarget);
+        };
+        this.isUpdatingPoints = false;
+    }
+    get tag() {
+        return "TextEditor";
+    }
+    onLoad() {
+        const { editor } = this;
+        const { config } = editor.app;
+        const text = this.editTarget;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        this.quill = TextEditor_1.quill;
+        this.isHTMLText = !(text instanceof Text);
+        config.keyEvent = false;
+        const element = document.querySelector("#textInnerEditor");
+        if (!element || !(element instanceof HTMLDivElement)) {
+            console.error("Cannot find #textInnerEditor element or it's not a div");
+            return;
+        }
+        const div = (this.editDom = element);
+        const { style } = div;
+        style.visibility = "visible";
+        if (text.data?.canChangeBox &&
+            text.parent?.width !== undefined &&
+            text.parent?.height !== undefined) {
+            style.width = text.parent.width * zoomScale + "px";
+            style.height = text.parent.height * zoomScale + "px";
+        }
+        else {
+            style.width = "auto";
+            style.height = "auto";
+        }
+        style.outline = "solid #8499EF";
+        if (text.data?.textData?.fontSize) {
+            div.style.fontSize = `${text.data.textData.fontSize * zoomScale}px`;
+        }
+        if (text.data?.textData?.fontFamily) {
+            div.style.fontFamily = `${text.data.textData.fontFamily}`;
+        }
+        if (text.data?.textData?.lineHeight) {
+            div.style.lineHeight = text.data.textData.lineHeight;
+        }
+        if (text.data?.textData?.letterSpacing) {
+            div.style.letterSpacing = `${text.data.textData.letterSpacing}px`;
+        }
+        if (text.data?.textData?.textShadow) {
+            div.style.textShadow = `${text.data.textData.textShadow}`;
+        }
+        else {
+            div.style.textShadow = "none";
+        }
+        if (text.data?.textData?.alignContent) {
+            const qlEditor = div.querySelector(".ql-editor");
+            if (qlEditor) {
+                qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
+            }
+        }
+        if (this.quill) {
+            this.quill.clipboard.dangerouslyPasteHTML(text.text);
+            if (text.parent?.children?.[0]?.tag?.includes("Shape")) {
+                const parentWidth = text.parent.width;
+                if (parentWidth !== undefined) {
+                    style.width = parentWidth * zoomScale + "px";
+                    style.left = "0px";
+                }
+                this.quill.formatLine(0, this.quill.getLength(), "align", "center");
+            }
+            else {
+                this.quill.setSelection(0, this.quill.getLength() - 1);
+            }
+            this.quill.on("text-change", this.onInput);
+            this.quill.on("selection-change", this.onSelectionChange);
+        }
+        localStorage.removeItem("selection-change");
+        this.eventIds = [
+            editor.app.on_(PointerEvent.DOWN, (e) => {
+                let { target } = e.origin;
+                let find = false;
+                while (target) {
+                    if (target === div)
+                        find = true;
+                    target = target.parentElement;
+                }
+                if (!find) {
+                    editor.closeInnerEditor();
+                    editor.cancel();
+                }
+            }),
+        ];
+    }
+    onUpdate() {
+        const { editTarget: text } = this;
+        if (!text.parent?.__local)
+            return;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        const local = text.parent.__local;
+        let width = local.width || 0;
+        let height = local.height || 0;
+        width *= zoomScale;
+        height *= zoomScale;
+        const { x, y } = this.inBody
+            ? text.app.clientBounds
+            : (text.app.tree?.clientBounds || { x: 0, y: 0 });
+        const { a, b, c, d, e, f } = new Matrix(text.worldTransform)
+            .scale(1 / zoomScale)
+            .translateInner(0, 0);
+        if (this.editDom) {
+            const { style } = this.editDom;
+            style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
+            style.left = x + "px";
+            style.top = y + "px";
+        }
+        text.set({
+            visible: false,
+        });
+    }
+    onUnload() {
+        const { editTarget: text, editor, editDom: dom } = this;
+        if (text) {
+            this.onInput();
+            editor.off_(this.eventIds);
+            if (this.editDom) {
+                this.editDom.style.visibility = "hidden";
+            }
+            this.eventIds = [];
+        }
+        text.set({
+            visible: true,
+        });
+        if (this.quill) {
+            this.quill.off("text-change", this.onInput);
+            this.quill.off("selection-change", this.onSelectionChange);
+        }
+    }
+};
+TextEditor = TextEditor_1 = __decorate([
+    registerInnerEditor()
+], TextEditor);
+export { TextEditor };

package/dist/esm/fonts/font.d.ts

@@ -0,0 +1,17 @@
+export declare const defaultFonts: {
+    code: string;
+    name: string;
+    url: string;
+}[];
+export declare class FontManager {
+    private fontList;
+    private skipLoadFonts;
+    private loadFonts;
+    constructor();
+    initFonts(): Promise<any[]>;
+    getFontList(): any[];
+    getSkipLoadFonts(): any[];
+    getLoadFonts(): any[];
+}
+export declare const fontManager: FontManager;
+//# sourceMappingURL=font.d.ts.map

package/dist/esm/fonts/font.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../../src/fonts/font.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;GA2BxB,CAAC;AAMF,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAkD;IACvE,OAAO,CAAC,SAAS,CAAuB;;IASlC,SAAS;IA0Bf,WAAW;IAIX,gBAAgB;IAIhB,YAAY;CAGb;AAGD,eAAO,MAAM,WAAW,aAAoB,CAAC"}

package/dist/esm/fonts/font.js

@@ -0,0 +1,68 @@
+export const defaultFonts = [
+    { code: 'Roboto', name: `"Roboto", sans-serif`, url: '/fonts/Roboto.woff2' },
+    { code: 'Roboto Mono', name: `"Roboto Mono", monospace`, url: '/fonts/RobotoMono.woff2' },
+    { code: 'Inter', name: `"Inter", sans-serif`, url: '/fonts/Inter.woff2' },
+    { code: 'Open Sans', name: `"Open Sans", sans-serif`, url: '/fonts/OpenSans.woff2' },
+    { code: 'Montserrat', name: `"Montserrat", sans-serif`, url: '/fonts/Montserrat.woff2' },
+    { code: 'Roboto Condensed', name: `"Roboto Condensed", sans-serif`, url: '/fonts/RobotoCondensed.woff2' },
+    { code: 'Arimo', name: `"Arimo", sans-serif`, url: '/fonts/Arimo.woff2' },
+    { code: 'Noto Sans', name: `"Noto Sans", sans-serif`, url: '/fonts/NotoSans.woff2' },
+    { code: 'Noto Sans Symbols', name: `"Noto Sans Symbols", sans-serif`, url: '/fonts/NotoSansSymbols.woff2' },
+    { code: 'Merriweather', name: `"Merriweather", serif`, url: '/fonts/Merriweather.woff2' },
+    { code: 'Playfair Display', name: `"Playfair Display", serif`, url: '/fonts/PlayfairDisplay.woff2' },
+    { code: 'Noto Serif', name: `"Noto Serif", serif`, url: '/fonts/NotoSerif.woff2' },
+    { code: 'Lato', name: `"Lato", sans-serif`, url: '/fonts/Lato.woff2' },
+    { code: 'Spectral', name: `"Spectral", serif`, url: '/fonts/Spectral.woff2' },
+    { code: 'Dancing Script', name: `"Dancing Script", cursive`, url: '/fonts/DancingScript.woff2' },
+    { code: 'Noto Sans Simplified Chinese', name: `"Noto Sans SC", sans-serif`, url: '/fonts/NotoSansSimplifiedChinese.woff2' },
+    { code: 'Noto Serif Simplified Chinese', name: `"Noto Serif SC", serif`, url: '/fonts/NotoSerifSimplifiedChinese.woff2' },
+    { code: 'Noto Sans Traditional Chinese', name: `"Noto Sans TC", sans-serif`, url: '/fonts/NotoSansTraditionalChinese.woff2' },
+    { code: 'Noto Sans Hong Kong', name: `"Noto Sans HK", sans-serif`, url: '/fonts/NotoSansHongKong.woff2' },
+    { code: 'Noto Serif Traditional Chinese', name: `"Noto Serif TC", serif`, url: '/fonts/NotoSerifTraditionalChinese.woff2' },
+    { code: 'Noto Serif Hong Kong', name: `"Noto Serif HK", serif`, url: '/fonts/NotoSerifHongKong.woff2' },
+    { code: 'Noto Sans Japanese', name: `"Noto Sans JP", sans-serif`, url: '/fonts/NotoSansJapanese.woff2' },
+    { code: 'Noto Sans Korean', name: `"Noto Sans KR", sans-serif`, url: '/fonts/NotoSansKorean.woff2' },
+    { code: 'Poppins', name: `"Poppins", sans-serif`, url: '/fonts/Poppins.woff2' }
+];
+const FONT_KEY = 'OPEN_FONTS';
+const FONT_VERSION_KEY = 'OPEN_FONTS_VERSION';
+export class FontManager {
+    constructor() {
+        this.fontList = [];
+        this.skipLoadFonts = defaultFonts.map((value) => value.name);
+        this.loadFonts = defaultFonts;
+        this.initFonts();
+    }
+    async initFonts() {
+        let list = [];
+        if (typeof localStorage !== 'undefined') {
+            if (localStorage.getItem(FONT_VERSION_KEY) !== '1') {
+                localStorage.removeItem(FONT_KEY);
+            }
+            let localFonts = [];
+            try {
+                const storedFonts = localStorage.getItem(FONT_KEY);
+                localFonts = storedFonts ? JSON.parse(storedFonts) : [];
+            }
+            catch {
+                localFonts = [];
+                localStorage.removeItem(FONT_KEY);
+            }
+            if (localFonts.length > 0) {
+                list.push(...localFonts);
+            }
+        }
+        this.fontList = defaultFonts.concat(list);
+        return list;
+    }
+    getFontList() {
+        return this.fontList;
+    }
+    getSkipLoadFonts() {
+        return this.skipLoadFonts;
+    }
+    getLoadFonts() {
+        return this.loadFonts;
+    }
+}
+export const fontManager = new FontManager();

package/dist/esm/fonts/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function fetchFontAsBase64(url: string): Promise<string>;
+export declare function addCustomFonts(fontList?: any): void;
+export declare function getCustomFontsStyle(): string;
+export declare function addCustomFont(font: any): void;
+export declare function batchLoadFont(fontNameList?: any): Promise<void>;
+export declare function addCustomFontBase64(font: any): Promise<void>;
+export declare function getBase64CustomFontsStyle(): string;
+export declare function loadFont(font: string): Promise<void>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/fonts/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fonts/utils.ts"],"names":[],"mappings":"AAGA,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAsCpE;AAgBD,wBAAgB,cAAc,CAAC,QAAQ,GAAE,GAAQ,QAShD;AAKD,wBAAgB,mBAAmB,WAGlC;AAMD,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,QAgCtC;AAMD,wBAAsB,aAAa,CAAC,YAAY,GAAE,GAAQ,iBAUzD;AAyCD,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,iBA6ClD;AAKD,wBAAgB,yBAAyB,WAGxC;AAOD,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1D"}

package/dist/esm/fonts/utils.js

@@ -0,0 +1,170 @@
+const FONT_CSS_TAG = "data-fonts";
+const FONT_CSS_TAG_BASE64 = "base64-fonts";
+export async function fetchFontAsBase64(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch font from ${url}`);
+    }
+    const contentType = response.headers.get('Content-Type');
+    let mimeType;
+    if (contentType?.includes('font/woff2')) {
+        mimeType = 'font/woff2';
+    }
+    else if (contentType?.includes('font/woff')) {
+        mimeType = 'font/woff';
+    }
+    else if (contentType?.includes('font/ttf') || contentType?.includes('font/sfnt')) {
+        mimeType = 'font/ttf';
+    }
+    else if (contentType?.includes('application/octet-stream')) {
+        const extension = url.split('.').pop()?.toLowerCase();
+        if (extension === 'woff2') {
+            mimeType = 'font/woff2';
+        }
+        else if (extension === 'woff') {
+            mimeType = 'font/woff';
+        }
+        else if (extension === 'ttf') {
+            mimeType = 'font/ttf';
+        }
+        else {
+            throw new Error(`Unsupported font file type: ${extension}`);
+        }
+    }
+    else {
+        throw new Error(`Unsupported Content-Type: ${contentType}`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+    const base64String = arrayBufferToBase64(arrayBuffer);
+    return `data:${mimeType};charset=utf-8;base64,${base64String}`;
+}
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+export function addCustomFonts(fontList = []) {
+    let styleTag = document.createElement('style');
+    styleTag.setAttribute(FONT_CSS_TAG, 'true');
+    let fontRules = fontList.map((font) => `@font-face {
+        font-family: "${font.name}";
+        src: local("${font.name}"), url("${font.download}")
+    }`).join('\n');
+    styleTag.textContent = fontRules;
+    document.head.appendChild(styleTag);
+}
+export function getCustomFontsStyle() {
+    const styleTag = document.querySelector('style[data-fonts]');
+    return styleTag?.textContent || '';
+}
+export function addCustomFont(font) {
+    let styleTag = document.querySelector('style[data-fonts]');
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.setAttribute(FONT_CSS_TAG, 'true');
+        document.head.appendChild(styleTag);
+    }
+    if (!styleTag.sheet)
+        return;
+    let existingFonts = [];
+    existingFonts = Array.from(styleTag.sheet.cssRules).map((rule) => {
+        const match = rule.cssText.match(/font-family: "([^"]+)"/);
+        return match ? match[1] : null;
+    }).filter((font) => font !== null);
+    if (!existingFonts.includes(font.name)) {
+        const newFontRule = `@font-face {
+          font-family: "${font.name}";
+          src: url("${font.download}");
+        }`;
+        try {
+            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
+        }
+        catch (e) {
+            console.error('Failed to insert font rule:', e);
+        }
+    }
+}
+export async function batchLoadFont(fontNameList = []) {
+    try {
+        for (const fontFamily of fontNameList) {
+            await document.fonts.load(`16px ${fontFamily}`);
+        }
+    }
+    catch (e) {
+        console.warn('Font loading failed:', e);
+    }
+}
+function getFontUrlFromCSS(selectors, fontFamilyName) {
+    const styleTags = document.querySelectorAll(selectors);
+    for (let i = 0; i < styleTags.length; i++) {
+        const styleTag = styleTags[i];
+        const cssText = styleTag.textContent || '';
+        const fontFaceRules = cssText.match(/@font-face\s*\{[^}]+\}/g);
+        if (fontFaceRules) {
+            for (const rule of fontFaceRules) {
+                const fontFamilyMatch = rule.match(/font-family:\s*(["'])(.*?)\1/);
+                if (fontFamilyMatch && fontFamilyMatch[2] === fontFamilyName) {
+                    const srcMatch = rule.match(/src:\s*url\((["'])(.*?)\1\)/);
+                    if (srcMatch) {
+                        return srcMatch[2];
+                    }
+                    else {
+                        const srcMatch2 = rule.match(/src:\s*(?:local\([^)]+\)\s*,\s*)?url\((["'])(.*?)\1\)/);
+                        if (srcMatch2) {
+                            return srcMatch2[2];
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}
+export async function addCustomFontBase64(font) {
+    const fontUrl = getFontUrlFromCSS(`style[${FONT_CSS_TAG}]`, font);
+    if (!fontUrl) {
+        console.warn('Font URL not found for:', font);
+        return;
+    }
+    console.log('fontUrl=', fontUrl);
+    let styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`);
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.setAttribute(FONT_CSS_TAG_BASE64, 'true');
+        document.head.appendChild(styleTag);
+    }
+    if (!styleTag.sheet) {
+        await new Promise(resolve => setTimeout(resolve, 10));
+    }
+    if (!styleTag.sheet)
+        return;
+    let existingFonts = Array.from(styleTag.sheet.cssRules).map((rule) => {
+        const match = rule.cssText.match(/font-family: "([^"]+)"/);
+        return match ? match[1] : null;
+    }).filter((font) => font !== null);
+    if (!existingFonts.includes(font)) {
+        const base64Url = await fetchFontAsBase64(fontUrl);
+        const newFontRule = `@font-face {
+          font-family: "${font}";
+          src: local("${font}"), url("${base64Url}");
+        }`;
+        try {
+            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
+            styleTag.textContent += newFontRule;
+        }
+        catch (e) {
+            console.error('Failed to insert font rule:', e);
+        }
+    }
+}
+export function getBase64CustomFontsStyle() {
+    const styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`);
+    return styleTag?.textContent || '';
+}
+export async function loadFont(font) {
+    await addCustomFontBase64(font);
+}

package/dist/esm/index.d.ts

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

package/dist/esm/index.d.ts.map

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

package/dist/esm/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/esm/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"}