@libs-ui/utils 0.2.304 → 0.2.306-3

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;
@@ -519,85 +637,6 @@ const uuid = () => {
     return md5(shuffledString);
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const UtilsHttpParamsRequestInstance = (options, instance) => {
-    return new UtilsHttpParamsRequest(options, instance);
-};
-class UtilsHttpParamsRequest extends HttpParams {
-    params = new HttpParams();
-    constructor(options, instance) {
-        super(options);
-        if (!instance) {
-            this.params = new HttpParams(options);
-            return;
-        }
-        if (instance instanceof UtilsHttpParamsRequest) {
-            this.params = instance.getInstance();
-            return;
-        }
-        if (instance instanceof HttpParams) {
-            this.params = instance;
-            return;
-        }
-    }
-    getInstance() {
-        return this.params;
-    }
-    setInstance(instance) {
-        if (instance instanceof UtilsHttpParamsRequest) {
-            this.params = instance.getInstance();
-            return;
-        }
-        if (instance instanceof HttpParams) {
-            this.params = instance;
-            return;
-        }
-    }
-    set(param, value) {
-        this.params = this.params.set(param, value);
-        return this;
-    }
-    has(param) {
-        return this.params.has(param);
-    }
-    get(param) {
-        return this.params.get(param);
-    }
-    getAll(param) {
-        return this.params.getAll(param);
-    }
-    keys() {
-        return this.params.keys();
-    }
-    append(param, value) {
-        this.params = this.params.append(param, value);
-        return this;
-    }
-    appendAll(params) {
-        this.params = this.params.appendAll(params);
-        return this;
-    }
-    delete(param, value) {
-        this.params = this.params.delete(param, value);
-        return this;
-    }
-    toString() {
-        return this.params.toString();
-    }
-}
-// Demo su dung GET_PATH_VARIABLE
-// interface Person {
-//   name: string;
-//   age: number;
-//   location: string;
-// }
-// type c = GET_PATH_VARIABLE<Person, unknown>;
-// const a: c = {
-//   "pathVariable-age": 1,
-//   "pathVariable-location": '12',
-//   "pathVariable-name": '124',
-// };
-
 let key = '12~@#loqwsxacva(3rdhaq12';
 /**
  * @description Thiết lập key mã hóa
@@ -1231,8 +1270,9 @@ class UtilsCache {
                 resolve({ deleteSuccess: true });
             };
             request.onerror = (event) => {
-                console.trace('Error deleting database:', event.target.error);
-                resolve({ messageError: get(event.target.error, 'message'), deleteSuccess: false });
+                const error = event.target.error;
+                console.trace('Error deleting database:', error);
+                resolve({ messageError: get(error || {}, 'message'), deleteSuccess: false });
             };
             request.onblocked = () => {
                 console.trace('Delete request is blocked');
@@ -1421,6 +1461,85 @@ const getFormatData = (type, lang) => {
     }
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const UtilsHttpParamsRequestInstance = (options, instance) => {
+    return new UtilsHttpParamsRequest(options, instance);
+};
+class UtilsHttpParamsRequest extends HttpParams {
+    params = new HttpParams();
+    constructor(options, instance) {
+        super(options);
+        if (!instance) {
+            this.params = new HttpParams(options);
+            return;
+        }
+        if (instance instanceof UtilsHttpParamsRequest) {
+            this.params = instance.getInstance();
+            return;
+        }
+        if (instance instanceof HttpParams) {
+            this.params = instance;
+            return;
+        }
+    }
+    getInstance() {
+        return this.params;
+    }
+    setInstance(instance) {
+        if (instance instanceof UtilsHttpParamsRequest) {
+            this.params = instance.getInstance();
+            return;
+        }
+        if (instance instanceof HttpParams) {
+            this.params = instance;
+            return;
+        }
+    }
+    set(param, value) {
+        this.params = this.params.set(param, value);
+        return this;
+    }
+    has(param) {
+        return this.params.has(param);
+    }
+    get(param) {
+        return this.params.get(param);
+    }
+    getAll(param) {
+        return this.params.getAll(param);
+    }
+    keys() {
+        return this.params.keys();
+    }
+    append(param, value) {
+        this.params = this.params.append(param, value);
+        return this;
+    }
+    appendAll(params) {
+        this.params = this.params.appendAll(params);
+        return this;
+    }
+    delete(param, value) {
+        this.params = this.params.delete(param, value);
+        return this;
+    }
+    toString() {
+        return this.params.toString();
+    }
+}
+// Demo su dung GET_PATH_VARIABLE
+// interface Person {
+//   name: string;
+//   age: number;
+//   location: string;
+// }
+// type c = GET_PATH_VARIABLE<Person, unknown>;
+// const a: c = {
+//   "pathVariable-age": 1,
+//   "pathVariable-location": '12',
+//   "pathVariable-name": '124',
+// };
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**Các hàm tương tự thư viện lodash */
 /**
@@ -1469,7 +1588,7 @@ const omitBy = (objData, predicate) => {
         return objData;
     }
     const newObj = {};
-    Object.keys(objData).forEach(key => {
+    Object.keys(objData).forEach((key) => {
         const valueOfKey = get(objData, key);
         if (!predicate(valueOfKey)) {
             set(newObj, key, valueOfKey);
@@ -1540,7 +1659,7 @@ const omitBy = (objData, predicate) => {
  * get(null, 'any.path'); // undefined
  * get(undefined, 'any.path', 'fallback'); // 'fallback'
  */
-const get = (obj, path, defaultValue = undefined, keepLastValueIfSignal) => {
+const get = (obj, path, defaultValue, keepLastValueIfSignal) => {
     if (isNil(obj)) {
         return defaultValue;
     }
@@ -1551,12 +1670,17 @@ 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];
     }
-    const paths = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.$1').split('.').filter(key => key);
+    const paths = Array.isArray(path)
+        ? path
+        : path
+            .replace(/\[(\d+)]/g, '.$1')
+            .split('.')
+            .filter((key) => key);
     for (const index in paths) {
         const key = paths[index];
         if (obj instanceof CSSStyleDeclaration) {
@@ -1587,18 +1711,23 @@ const get = (obj, path, defaultValue = undefined, keepLastValueIfSignal) => {
  * set(obj, 'a.b', 2); // { a: { b: 2 } }
  */
 const set = (obj, path, value) => {
-    if (!obj || (typeof obj !== "object" && !isSignal(obj)) || (isSignal(obj) && typeof obj() !== "object")) {
-        throw new Error("The first argument must be an object");
+    if (!obj || (typeof obj !== 'object' && !isSignal(obj)) || (isSignal(obj) && typeof obj() !== 'object')) {
+        throw new Error('The first argument must be an object');
     }
     if (obj instanceof HttpParams) {
         return obj.set(`${path}`, value);
     }
-    const pathArray = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.[$1]').split('.').filter(key => key);
+    const pathArray = Array.isArray(path)
+        ? path
+        : path
+            .replace(/\[(\d+)]/g, '.[$1]')
+            .split('.')
+            .filter((key) => key);
     let currentObjectByKey = isSignal(obj) ? obj() : obj;
     let preObjectByKey = obj;
     pathArray.forEach((key, index) => {
         if (index < pathArray.length - 1) {
-            if (!(key in currentObjectByKey) || (typeof currentObjectByKey[key] !== "object" && !isSignal(currentObjectByKey[key]))) {
+            if (!(key in currentObjectByKey) || (typeof currentObjectByKey[key] !== 'object' && !isSignal(currentObjectByKey[key]))) {
                 const nextKey = pathArray[index + 1];
                 key = key.replace(/\[(\d+)]/g, '$1');
                 currentObjectByKey[key] = /\[(\d+)]/g.test(nextKey) ? [] : {};
@@ -1608,7 +1737,7 @@ const set = (obj, path, value) => {
             currentObjectByKey = isSignal(currentObjectByKey) ? currentObjectByKey() : currentObjectByKey;
             return;
         }
-        if (typeof currentObjectByKey !== "object") {
+        if (typeof currentObjectByKey !== 'object') {
             return;
         }
         // Gán giá trị ở cuối đường dẫn
@@ -1689,13 +1818,13 @@ const cloneDeep = (data, options = { ignoreSignal: false }, seen = new WeakMap()
     if (data instanceof Set) {
         const setCopy = new Set();
         seen.set(data, setCopy);
-        data.forEach(val => {
+        data.forEach((val) => {
             setCopy.add(cloneDeep(val, options, seen));
         });
         return setCopy;
     }
     if (Array.isArray(data)) {
-        seen.set(data, data.map(item => cloneDeep(item, options, seen)));
+        seen.set(data, data.map((item) => cloneDeep(item, options, seen)));
         return seen.get(data);
     }
     if (data instanceof File || data instanceof Blob || Object.prototype.toString.call(data) === '[object File]') {
@@ -1877,7 +2006,7 @@ const isEqual = (value1, value2, options) => {
             return false;
         }
         if (!exactlyPosition) {
-            return !value1.some(item => !value2.includes(item));
+            return !value1.some((item) => !value2.includes(item));
         }
         return !value1.some((item, index) => !isEqual(item, value2[index], options));
     }
@@ -1910,7 +2039,7 @@ const uniqBy = (data, key) => {
         // Xử lý mảng chứa signal values
         if (data[0] && isSignal(data[0])) {
             const seen = new Set();
-            return data.filter(item => {
+            return data.filter((item) => {
                 const value = `${get(item, '')}`;
                 if (seen.has(value)) {
                     return false;
@@ -1923,7 +2052,7 @@ const uniqBy = (data, key) => {
         return Array.from(new Set(data));
     }
     const dataUnique = keyBy(data, key);
-    return Object.keys(dataUnique).map(key => dataUnique[key]);
+    return Object.keys(dataUnique).map((key) => dataUnique[key]);
 };
 const generateInterface = (obj, interfaceName) => {
     const generateType = (value) => {
@@ -2548,6 +2677,7 @@ const convertUrlToFile = (url, fileName) => {
                 const file = convertBase64ToBlob(reader.result);
                 resolve(convertBlobToFile(file, fileName || Date.now().toLocaleString()));
             };
+            reader.onerror = () => resolve(undefined);
             reader.readAsDataURL(xhr.response);
         };
         xhr.onerror = (err) => {
@@ -2778,5 +2908,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