@libs-ui/utils 0.2.304 → 0.2.306

package/fesm2022/libs-ui-utils.mjs

@@ -1,6 +1,6 @@
-import { fromEvent, tap, takeUntil, mergeMap, startWith, finalize, Subject, filter, Observable } from 'rxjs';
-import Quill from 'quill';
 import DeviceDetector from 'device-detector-js';
+import Quill from 'quill';
+import { fromEvent, tap, takeUntil, mergeMap, startWith, finalize, lastValueFrom, timer, Subject, filter, Observable } from 'rxjs';
 import CryptoES from 'crypto-es';
 import { HttpParams } from '@angular/common/http';
 import { isSignal, TemplateRef, ElementRef, signal, InjectionToken } from '@angular/core';
@@ -352,18 +352,136 @@ const getDragEventByElement = (config) => {
         ? mousemove.pipe(startWith(e))
         : mousemove), takeUntil(config.onDestroy), finalize(removeClass));
 };
-const getHTMLFromQuill = (delta) => {
+const getHTMLFromQuill = async (data, options) => {
+    const { replaceNewLineTo = '<br>', replaceTagBRTo, replaceTags, replaceBrToDiv } = options || {};
+    const delta = (typeof data === 'string') ? await getDeltaFromHTML(data) : data;
+    if (options?.functionReplaceDelta) {
+        options.functionReplaceDelta(delta);
+    }
     delta.ops.forEach((op) => {
         if (op.insert) {
             if (typeof op.insert === 'string') {
-                op.insert = op.insert.replace(/\n/g, '<br>');
+                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);
-    const htmlText = quill.root.firstElementChild?.innerHTML;
+    let htmlText = options?.getRootHtml ? quill.root.innerHTML : quill.root.firstElementChild?.innerHTML;
+    if (replaceBrToDiv) {
+        htmlText = convertHtmlToDivBlocks(htmlText || '');
+    }
     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 getDeltaFromHTML = async (html) => {
+    quill.root.innerHTML = html;
+    setTimeout(() => {
+        console.log(quill.getContents());
+    }, 1000);
+    await lastValueFrom(timer(1000));
+    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) {
+        contentToInsert = await getHTMLFromQuill(htmlContent);
+    }
+    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);
+};
 
 class UtilsUrlSearchParams {
     static instance;
@@ -1551,7 +1669,7 @@ const get = (obj, path, defaultValue = undefined, keepLastValueIfSignal) => {
         return obj;
     }
     if (obj instanceof HttpParams) {
-        return obj.get(`${path}`);
+        return (obj.get(`${path}`) ?? defaultValue);
     }
     if (obj instanceof DOMRect) {
         return obj[path];
@@ -2778,5 +2896,5 @@ const createUniqueRandomIntGenerator = (min, max) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AudioExtList, CHARACTER_DATA_EMPTY, COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE, COMMUNICATE_MICRO_PREFIX_TYPE, DEFAULT_START_PAGE_0, DocumentExtList, ENCODE_URI_PATTERN, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MAX_LENGTH, ERROR_MESSAGE_MAX_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MIN_VALID, ERROR_MESSAGE_PATTEN_VALID, ExcelExtList, ImageExtList, LINK_IMAGE_ERROR_TOKEN_INJECT, PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT, UtilsCache, UtilsCommunicateMicro, UtilsCommunicateMicroKeyGlobal, UtilsHttpParamsRequest, UtilsHttpParamsRequestInstance, UtilsKeyCodeConstant, UtilsLanguageConstants, UtilsUrlSearchParams, VideoExtList, base64Decode, base64Encode, capitalize, checkMouseOverInContainer, checkViewInScreen, cloneDeep, cloneIBoundingClientRect, colorContrastFromOrigin, colorStepContrastFromOrigin, convertBase64ToBlob, convertBlobToFile, convertFileToBase64, convertFileToBase64_ObjectUrl, convertObjectToSignal, convertSignalToObject, convertUrlToFile, createUniqueRandomIntGenerator, decodeEscapeHtml, decodeURI, decrypt, decrypt3rd, deleteUnicode, downloadFileByUrl, downloadFileByUrlUseXmlRequest, downloadImageFromELement, encodeURI, encrypt, encrypt3rd, endCodeUrl, escapeHtml, firstLetterToUpperCase, formatDate, formatNumber, formatTextCompare, fullNameFormat, generateInterface, get, getColorById, getDayjs, getDeviceInfo, getDocumentByString, getDragEventByElement, getEventNameHandleClick, getFileExtension, getHTMLFromQuill, getKeyCacheByArrayObject, getLabelBySizeFile, getPlatFromBrowser, getSmartAxisScale, getViewport, groupBy, highlightByKeyword, isDifferenceDay, isDifferenceMonth, isDifferenceYear, isEmbedFrame, isEmpty, isEqual, isIncludeAudioExtList, isIncludeDocumentExtList, isIncludeImageExtList, isIncludeVideoExtList, isNil, isTypeAudio, isTypeFile, isTypeImage, isTypeVideo, keyBy, listColorDefine, md5, omitBy, patternAccount, patternDomain, patternEmail, patternEmoji, patternEncodeUri, patternGetFieldByRuleFieldReplace, patternHostUrl, patternKey, patternMobilePhone, patternName, patternNameProfile, patternNameSpecial, patternNameUtf8, patternNumber, patternPem, patternPhone, patternPhoneNormal, patternRuleFieldReplace, patternTax, patternUrl, protectString, range, removeEmoji, revealString, rgbToHex, set, setCaretPosition, setDefaultTimeZone, setKeyCrypto, setKeyCrypto3rd, setStylesElement, uniqBy, updateFunctionCheckEmbedFrame, updateFunctionFormatDate, updateFunctionXssFilter, uppercaseByPosition, uuid, viewDataNumberByLanguage, xssFilter };
+export { AudioExtList, CHARACTER_DATA_EMPTY, COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE, COMMUNICATE_MICRO_PREFIX_TYPE, DEFAULT_START_PAGE_0, DocumentExtList, ENCODE_URI_PATTERN, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MAX_LENGTH, ERROR_MESSAGE_MAX_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MIN_VALID, ERROR_MESSAGE_PATTEN_VALID, ExcelExtList, ImageExtList, LINK_IMAGE_ERROR_TOKEN_INJECT, PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT, UtilsCache, UtilsCommunicateMicro, UtilsCommunicateMicroKeyGlobal, UtilsHttpParamsRequest, UtilsHttpParamsRequestInstance, UtilsKeyCodeConstant, UtilsLanguageConstants, UtilsUrlSearchParams, VideoExtList, base64Decode, base64Encode, capitalize, checkMouseOverInContainer, checkViewInScreen, cloneDeep, cloneIBoundingClientRect, colorContrastFromOrigin, colorStepContrastFromOrigin, convertBase64ToBlob, convertBlobToFile, convertFileToBase64, convertFileToBase64_ObjectUrl, convertHtmlToDivBlocks, convertObjectToSignal, convertSignalToObject, convertUrlToFile, createUniqueRandomIntGenerator, decodeEscapeHtml, decodeURI, decrypt, decrypt3rd, deleteUnicode, downloadFileByUrl, downloadFileByUrlUseXmlRequest, downloadImageFromELement, encodeURI, encrypt, encrypt3rd, endCodeUrl, escapeHtml, firstLetterToUpperCase, formatDate, formatNumber, formatTextCompare, fullNameFormat, generateInterface, get, getColorById, getDayjs, getDeltaFromHTML, getDeviceInfo, getDocumentByString, getDragEventByElement, getEventNameHandleClick, getFileExtension, getHTMLFromQuill, getKeyCacheByArrayObject, getLabelBySizeFile, getPlatFromBrowser, getSmartAxisScale, getViewport, groupBy, highlightByKeyword, insertContentWithRange, isDifferenceDay, isDifferenceMonth, isDifferenceYear, isEmbedFrame, isEmpty, isEqual, isIncludeAudioExtList, isIncludeDocumentExtList, isIncludeImageExtList, isIncludeVideoExtList, isNil, isTypeAudio, isTypeFile, isTypeImage, isTypeVideo, keyBy, listColorDefine, md5, omitBy, patternAccount, patternDomain, patternEmail, patternEmoji, patternEncodeUri, patternGetFieldByRuleFieldReplace, patternHostUrl, patternKey, patternMobilePhone, patternName, patternNameProfile, patternNameSpecial, patternNameUtf8, patternNumber, patternPem, patternPhone, patternPhoneNormal, patternRuleFieldReplace, patternTax, patternUrl, processPasteData, protectString, range, removeEmoji, revealString, rgbToHex, set, setCaretPosition, setDefaultTimeZone, setKeyCrypto, setKeyCrypto3rd, setStylesElement, uniqBy, updateFunctionCheckEmbedFrame, updateFunctionFormatDate, updateFunctionXssFilter, uppercaseByPosition, uuid, viewDataNumberByLanguage, xssFilter };
 //# sourceMappingURL=libs-ui-utils.mjs.map