@libs-ui/components-inputs-quill 0.2.348-7 → 0.2.350-0

package/fesm2022/libs-ui-components-inputs-quill.mjs

@@ -14,13 +14,15 @@ import { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton'
 import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import { LibsUiNotificationService } from '@libs-ui/services-notification';
-import { patternUrl, convertFileToBase64_ObjectUrl, get, set, isNil, xssFilter, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH, getLabelBySizeFile, setStylesElement, UtilsKeyCodeConstant, isNearWhite, quill2xGetHtmlByDelta, patterProtocolUrl } from '@libs-ui/utils';
+import { patternUrl, convertFileToBase64_ObjectUrl, decodeEscapeHtml, get, set, isNil, xssFilter, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH, getLabelBySizeFile, setStylesElement, UtilsKeyCodeConstant, isNearWhite, patterProtocolUrl } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import Quill from 'quill';
-import { Subject, lastValueFrom, timer, fromEvent, takeUntil, merge } from 'rxjs';
+import { Subject, lastValueFrom as lastValueFrom$1, timer as timer$1, fromEvent, takeUntil, merge } from 'rxjs';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { returnListObject } from '@libs-ui/services-http-request';
+import { lastValueFrom } from 'rxjs/internal/lastValueFrom';
+import { timer } from 'rxjs/internal/observable/timer';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import Quill2x, { Delta } from 'quill2x';
 import ResizeModule from '@ssumo/quill-resize-module';
@@ -136,6 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'libs_ui-components-inputs-quill-upload_image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsModalComponent], template: "<libs_ui-components-modal\n  [title]=\"'i18n_upload_image'\"\n  [mode]=\"'center'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ ignoreHeaderTheme: true }\"\n  [maxHeight]=\"'calc(100% - 100px)'\"\n  [height]=\"'auto'\"\n  [zIndex]=\"uploadImageConfig().zIndex || 1203\"\n  [disable]=\"disable()\"\n  [ignoreCommunicateMicroEvent]=\"ignoreCommunicateMicroEvent()\"\n  [buttonsFooter]=\"buttonFooter()\"\n  (outEvent)=\"handlerEventModal($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <!-- <libs-uicomponents-media-upload [zIndex]=\"zIndex+1\"\n      [labelConfig]=\"labelConfig\"\n      [multiple]=\"false\"\n      [fileType]=\"'image'\"\n      [doNotDelete]=\"true\"\n      [maxImageSize]=\"maxImageSize || 1048576\"\n      [limitFile]=\"10\"\n      [validRequired]=\"{isRequired: true}\"\n      (moChangeFile)=\"handlerChangeFile($event)\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\">\n    </libs-uicomponents-media-upload> -->\n  </div>\n</libs_ui-components-modal>\n" }]
         }] });
 
+let quill = null;
+let timeout$1 = undefined;
+let timeout2 = undefined;
 const listDataAlign = () => {
     return [
         { key: '', icon: 'libs-ui-icon-align-left text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
@@ -608,6 +613,147 @@ const fontSizeWhiteList = () => [
     '71px',
     '72px',
 ];
+const getHTMLFromDeltaOfQuill = (delta, options) => {
+    if (!quill) {
+        quill = new Quill(document.createElement('div'));
+    }
+    const { replaceNewLineTo = '<br>', replaceTagBRTo, replaceTags, replaceBrToDiv } = options || {};
+    if (options?.functionReplaceDelta) {
+        options.functionReplaceDelta(delta);
+    }
+    delta.ops.forEach((op) => {
+        if (op.insert) {
+            if (typeof op.insert === 'string') {
+                if (replaceNewLineTo) {
+                    op.insert = op.insert.replace(/\n/g, replaceNewLineTo);
+                }
+                if (replaceTagBRTo) {
+                    op.insert = op.insert.replace(/<br>/g, replaceTagBRTo);
+                }
+                if (replaceTags?.length) {
+                    for (const tag of replaceTags) {
+                        op.insert = op.insert.replace(new RegExp(`<${tag.tag}>`, 'g'), `<${tag.replaceTo}>`);
+                        op.insert = op.insert.replace(new RegExp(`</${tag.tag}>`, 'g'), `</${tag.replaceTo}>`);
+                    }
+                }
+            }
+        }
+    });
+    quill.setContents(delta);
+    let htmlText = options?.getRootHtml ? quill.root.innerHTML : quill.root.firstElementChild?.innerHTML;
+    if (replaceBrToDiv) {
+        htmlText = convertHtmlToDivBlocks(htmlText || '');
+    }
+    clearTimeout(timeout$1);
+    timeout$1 = setTimeout(() => {
+        quill = null;
+    }, 10000);
+    return decodeEscapeHtml(htmlText || '');
+};
+const convertHtmlToDivBlocks = (html) => {
+    const BREAK_TOKEN = '<<<BREAK>>>';
+    // Bước 1: thay <br> thành token tạm
+    const normalizedHtml = html.replace(/<br\s*\/?>/gi, BREAK_TOKEN);
+    // Bước 2: tách theo token
+    const parts = normalizedHtml.split(BREAK_TOKEN);
+    const parser = new DOMParser();
+    const divs = [];
+    for (const raw of parts) {
+        const trimmed = raw.trim();
+        if (!trimmed)
+            continue;
+        // parse mỗi phần nhỏ như một document riêng
+        const doc = parser.parseFromString(trimmed, 'text/html');
+        const body = doc.body;
+        // Lấy lại nội dung bên trong body
+        divs.push(`<div>${body.innerHTML}</div>`);
+    }
+    return divs.join('');
+};
+const getDeltaOfQuillFromHTML = async (html) => {
+    if (!quill) {
+        quill = new Quill(document.createElement('div'));
+    }
+    quill.root.innerHTML = html;
+    await lastValueFrom(timer(1000));
+    clearTimeout(timeout2);
+    timeout2 = setTimeout(() => {
+        quill = null;
+    }, 10000);
+    return quill.getContents();
+};
+const processPasteData = async (e, config) => {
+    const element = config.element;
+    const files = e.clipboardData?.files;
+    if (files?.length) {
+        e.preventDefault();
+        config.handlerPasteFile?.(files);
+        config.callBack?.('file');
+        return;
+    }
+    // Lưu selection TRƯỚC khi prevent default
+    const selection = window.getSelection();
+    let savedRange = null;
+    if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        // Chỉ lưu nếu range nằm trong contentText element
+        const container = range.commonAncestorContainer;
+        const isInContentElement = element.contains(container.nodeType === Node.TEXT_NODE ? container.parentNode : container);
+        if (isInContentElement) {
+            savedRange = range.cloneRange();
+        }
+    }
+    // Prevent default để tự xử lý paste
+    e.preventDefault();
+    // Sử dụng Quill để clean HTML content
+    const htmlContent = e.clipboardData?.getData('text/html') || '';
+    const plainText = e.clipboardData?.getData('text/plain') || '';
+    let contentToInsert = (plainText || '').replace(/\n/g, '<br>');
+    if (htmlContent) {
+        const delta = await getDeltaOfQuillFromHTML(htmlContent);
+        contentToInsert = getHTMLFromDeltaOfQuill(delta);
+    }
+    if (!contentToInsert) {
+        config.callBack?.('no-content');
+        return;
+    }
+    if (savedRange) {
+        insertContentWithRange(contentToInsert, savedRange, element);
+        config.callBack?.('range');
+        return;
+    }
+    element.innerHTML += contentToInsert;
+    config.callBack?.('content');
+};
+const insertContentWithRange = (content, savedRange, element) => {
+    const selection = window.getSelection();
+    if (!selection) {
+        // Fallback: append vào cuối
+        element.innerHTML += content;
+        return;
+    }
+    // Restore selection
+    selection.removeAllRanges();
+    selection.addRange(savedRange);
+    // Xóa nội dung đã select (nếu có)
+    savedRange.deleteContents();
+    // Tạo document fragment từ HTML content
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = content;
+    const fragment = document.createDocumentFragment();
+    while (tempDiv.firstChild) {
+        fragment.appendChild(tempDiv.firstChild);
+    }
+    // Insert fragment tại vị trí range
+    savedRange.insertNode(fragment);
+    // Di chuyển cursor đến cuối nội dung vừa insert
+    if (fragment.lastChild) {
+        savedRange.setStartAfter(fragment.lastChild);
+    }
+    savedRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(savedRange);
+};
 
 const Block = Quill.import('blots/block');
 class QuillDivBlot extends Block {
@@ -811,7 +957,7 @@ class LibsUiComponentsInputsQuillComponent {
     }
     async ngAfterViewInit() {
         this.setHandlerFunction();
-        await lastValueFrom(timer(this.timeDelayInit()));
+        await lastValueFrom$1(timer$1(this.timeDelayInit()));
         this.initQuill();
         this.setContent(get(this.item(), this.fieldNameBind(), ''));
         this.handlerTextChange();
@@ -826,7 +972,7 @@ class LibsUiComponentsInputsQuillComponent {
         fromEvent(window, 'resize')
             .pipe(takeUntil(this.onDestroy))
             .subscribe(() => this.calculatorToolbar(true));
-        await lastValueFrom(timer(400));
+        await lastValueFrom$1(timer$1(400));
         this.display.set(true);
         const cursorSpan = this.quill()?.root.querySelector('.ql-cursor');
         if (cursorSpan) {
@@ -1181,12 +1327,12 @@ class LibsUiComponentsInputsQuillComponent {
     }
     async setContent(content) {
         const contentXssFilter = await xssFilter(this.removeUnwantedPart(content || ''));
-        await lastValueFrom(timer(1));
+        await lastValueFrom$1(timer$1(1));
         (this.quill()?.root).innerHTML = contentXssFilter;
         if (!this.autoFocus()) {
             return;
         }
-        await lastValueFrom(timer(100));
+        await lastValueFrom$1(timer$1(100));
         const target = this.quillEditorEl()?.nativeElement.querySelector('[contenteditable="true"]');
         const contentScroll = this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : target;
         contentScroll.scrollTop = contentScroll.scrollHeight;
@@ -1264,7 +1410,7 @@ class LibsUiComponentsInputsQuillComponent {
         if (!isNil(index)) {
             this.quill()?.insertText(index, content, Quill.sources.USER);
             if (focusLast) {
-                await lastValueFrom(timer(0));
+                await lastValueFrom$1(timer$1(0));
                 this.quill()?.setSelection(index + content.length, 0, Quill.sources.USER);
             }
         }
@@ -1522,6 +1668,9 @@ class CustomImage2xBlot extends ImageFormat {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+let quill2x = null;
+let timeout = undefined;
+let timeout1 = undefined;
 let startCell = null;
 let endCell = null;
 let isSelecting = false;
@@ -1950,13 +2099,65 @@ const registerQuill2x = () => {
     Quill.register('modules/resize', ResizeModule);
     [...iconList()].forEach((element) => set(icons, element.key, `<span class="${element.icon} ${element.key === 'unLink' ? 'hover:text-[#ee2d41] ' : 'hover:text-[var(--libs-ui-color-light-1)]'} text-[16px] text-[#6a7383]"></span>`));
 };
-const isEmptyQuill = (quill) => {
+const isEmptyQuill2x = (quill) => {
     const rootElement = quill?.root;
     if (!rootElement)
         return true;
     const html = rootElement.innerHTML.trim();
     return html === '<p><br></p>' || html === '<p></p>' || html === '' || html === '<p><span class="ql-cursor"></span><br></p>' || rootElement.classList.contains('ql-blank');
 };
+const getHTMLFromDeltaOfQuill2x = (delta, options) => {
+    if (!delta || !delta.ops || !delta.ops.length) {
+        return '';
+    }
+    if (!quill2x) {
+        quill2x = new Quill2x(document.createElement('div'));
+    }
+    const { replaceNewLineTo = '<br>', replaceTagBRTo, replaceTags, replaceBrToDiv } = options || {};
+    if (options?.functionReplaceDelta) {
+        options.functionReplaceDelta(delta);
+    }
+    delta.ops.forEach((op) => {
+        if (op.insert) {
+            if (typeof op.insert === 'string') {
+                if (replaceNewLineTo) {
+                    op.insert = op.insert.replace(/\n/g, replaceNewLineTo);
+                }
+                if (replaceTagBRTo) {
+                    op.insert = op.insert.replace(/<br>/g, replaceTagBRTo);
+                }
+                if (replaceTags?.length) {
+                    for (const tag of replaceTags) {
+                        op.insert = op.insert.replace(new RegExp(`<${tag.tag}>`, 'g'), `<${tag.replaceTo}>`);
+                        op.insert = op.insert.replace(new RegExp(`</${tag.tag}>`, 'g'), `</${tag.replaceTo}>`);
+                    }
+                }
+            }
+        }
+    });
+    quill2x.setContents(delta);
+    let htmlText = options?.getRootHtml ? quill2x.root.innerHTML : quill2x.root.firstElementChild?.innerHTML;
+    if (replaceBrToDiv) {
+        htmlText = convertHtmlToDivBlocks(htmlText || '');
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+        quill2x = null;
+    }, 10000);
+    return decodeEscapeHtml(htmlText || '');
+};
+const getDeltaOfQuill2xFromHTML = async (html) => {
+    if (!quill2x) {
+        quill2x = new Quill2x(document.createElement('div'));
+    }
+    quill2x.root.innerHTML = html;
+    await lastValueFrom$1(timer$1(1000));
+    clearTimeout(timeout1);
+    timeout1 = setTimeout(() => {
+        quill2x = null;
+    }, 10000);
+    return quill2x.getContents();
+};
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsInputsQuill2xComponent {
@@ -2200,12 +2401,12 @@ class LibsUiComponentsInputsQuill2xComponent {
             .subscribe(() => this.calculatorToolbar(true));
         this.outFunctionsControl.emit(this.FunctionsControl);
         await this.setContent(this.item()[this.fieldBind()]);
-        timer(this.autoFocus() ? 0 : 250)
+        timer$1(this.autoFocus() ? 0 : 250)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.displayEditor.set(true));
         this.setStyleForContent();
         if (this.autoFocus()) {
-            timer(this.focusTimerOnInit() + 250)
+            timer$1(this.focusTimerOnInit() + 250)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.focus());
         }
@@ -2223,7 +2424,7 @@ class LibsUiComponentsInputsQuill2xComponent {
                 rootElement.classList.remove('ql-blank');
                 return;
             }
-            if (isEmptyQuill(this.quill)) {
+            if (isEmptyQuill2x(this.quill)) {
                 rootElement.classList.add('ql-blank');
                 return;
             }
@@ -2351,7 +2552,7 @@ class LibsUiComponentsInputsQuill2xComponent {
         if (!isNil(index)) {
             this.quill?.insertText(index, content, Quill2x.sources.USER);
             if (focusLastValueInsert) {
-                await lastValueFrom(timer(0));
+                await lastValueFrom$1(timer$1(0));
                 this.quill?.setSelection(index + content.length, 0, Quill2x.sources.USER);
             }
         }
@@ -2427,7 +2628,7 @@ class LibsUiComponentsInputsQuill2xComponent {
             return;
         e.preventDefault();
         const delta = this.quill.getContents(sel.index, sel.length);
-        const html2x = quill2xGetHtmlByDelta(delta);
+        const html2x = getHTMLFromDeltaOfQuill2x(delta);
         if (e.clipboardData) {
             e.clipboardData.setData('text/html', html2x);
         }
@@ -2493,7 +2694,7 @@ class LibsUiComponentsInputsQuill2xComponent {
         const item = this.item();
         const fieldNameBind = this.fieldBind();
         const value = get(item, fieldNameBind);
-        if (validRequired && validRequired.isRequired && !this.readonly() && isEmptyQuill(this.quill)) {
+        if (validRequired && validRequired.isRequired && !this.readonly() && isEmptyQuill2x(this.quill)) {
             this.messageError.set(validRequired.message || ERROR_MESSAGE_EMPTY_VALID);
             this.outMessageError.emit(this.messageError());
             return false;
@@ -2858,5 +3059,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsInputsQuill2xComponent, LibsUiComponentsInputsQuillComponent };
+export { LibsUiComponentsInputsQuill2xComponent, LibsUiComponentsInputsQuillComponent, convertHtmlToDivBlocks, getDeltaOfQuill2xFromHTML, getDeltaOfQuillFromHTML, getHTMLFromDeltaOfQuill, getHTMLFromDeltaOfQuill2x, insertContentWithRange, isEmptyQuill2x, processPasteData };
 //# sourceMappingURL=libs-ui-components-inputs-quill.mjs.map