@antscorp/antsomi-ui 1.3.3-beta.76 → 1.3.3-beta.78

package/es/components/atoms/InputDynamic/utils.js

@@ -1,872 +1,872 @@
-/* eslint-disable array-callback-return */
-/* eslint-disable no-sequences */
-/* eslint-disable no-cond-assign */
-/* eslint-disable no-var */
-/* eslint-disable eqeqeq */
-/* eslint-disable vars-on-top */
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable block-scoped-var */
-/* eslint-disable prefer-destructuring */
-// Libraries
-import { get } from 'lodash';
-import { decode } from 'html-entities';
-// Utils
-import { getObjectPropSafely, random } from '@antscorp/antsomi-ui/es/utils';
-import { getStringFormatDateDF } from '../../molecules/AddDynamicContent/utils';
-// Constants
-import { AllowDynamicType } from './InputDynamic';
-import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE } from './constants';
-import { DYNAMIC_CONTENT_TYPE_KEY } from '../../molecules/AddDynamicContent/constants';
-export function validateURL(string) {
-    // eslint-disable-next-line no-useless-escape
-    const regexp = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
-    return regexp.test(string);
-}
-export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="position: relative; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 2px 3px 8px; color: rgb(0, 0, 0); font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; cursor: pointer; background: ${bgColor}; height: auto;" value=${code
-    .replace(/\s/gm, '&nbsp;')
-    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); color: rgb(48, 95, 184); background-color: rgb(255, 255, 255); font-style: normal; margin-top: 1px; z-index: 1; font-size: 13px; font-weight: bold; margin-left: -12px; line-height: 18px; padding: 0px 3px; border-radius: 50%;">✕</em></button>&nbsp;`;
-export const genShortLinkValue = (url, type) => {
-    const id = random(5);
-    let keyTag = 'shortlink';
-    if (type === 'general') {
-        keyTag = 'shortlink_static';
-    }
-    return {
-        id,
-        value: `#{${keyTag}(${url})}`,
-        label: `https://ants.ly/${id}`,
-    };
-};
-export const getInsertPattern = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: white; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; height: auto; margin-top: 2px; cursor: pointer; background: ${bgColor}" value=${code
-    .replace(/\s/gm, '&nbsp;')
-    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 1;font-size: 1rem;font-weight: bold">x</em></button>`;
-export const convertHtmlText = (htmlText, format = 'raw', state, objectWidgetInput = {}, type = '', init = '') => {
-    const result = htmlText;
-    try {
-        if (format && format.toLowerCase() === 'raw') {
-            // pattern find all button insert word
-            const regexInsertPattern = type === 'input'
-                ? /<button .*?class="insert-word.*?".*? value="([^"]*?)".*?>(.*?)<\/button>/gim
-                : /<button .*?class="insert-word.*?".*? value=(.*?)>(.*?)<\/button>/gim;
-            // pattern find all symbol `"`
-            const regexQuot = /&quot;/gm;
-            const regexSpace = /&nbsp;/gm;
-            const regexSpaceV2 = /nbsp;/gm;
-            const regexShortLink = /#{shortlink\(.*?\)}/;
-            const regexShortLinkStatic = /#{shortlink_static\(.*?\)}/;
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const replacer = (match, p1, p2, p3, offset, string) => {
-                const newPlacer = p1
-                    .replace(/"/gm, '')
-                    .replace(regexQuot, '"')
-                    .replace(regexSpace, ' ')
-                    .replace(regexSpaceV2, ' ');
-                if (!regexShortLink.test(newPlacer) || !regexShortLinkStatic.test(newPlacer)) {
-                    return newPlacer.replace(/&amp;/gm, '');
-                }
-                return newPlacer;
-            };
-            // replace `"` from value -> replace &quot; -> replace &nbsp;
-            if (result === null || result === undefined) {
-                return htmlText;
-            }
-            try {
-                return result.replace(regexInsertPattern, replacer);
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log('error', error);
-                return htmlText;
-            }
-        }
-        if (format && format.toLowerCase() === 'html') {
-            const insertPattern = /#{.*?}/gm;
-            if (insertPattern.test(htmlText)) {
-                const htmlReplacer = (matcher) => {
-                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gmi;
-                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gim;
-                    // const regex = /(\w+)|(\(\w+)\)|"(.*?)"/gim;
-                    // const found = matcher.match(regex);
-                    const found = matcher.replace(/#|{|}|/g, '').split('.');
-                    const foundLink = found[0].split('(');
-                    if (found && found.length) {
-                        let bgColor = '#ccc';
-                        // console.log(found);
-                        if (found[0] === 'customer') {
-                            bgColor = '#3C39BA';
-                        }
-                        else if (found[0] === 'visitor') {
-                            bgColor = '#009000';
-                        }
-                        else if (found[0] === 'event') {
-                            bgColor = '#FBAC00';
-                        }
-                        else if (found[0] === 'objectWidget') {
-                            bgColor = '#24abb9';
-                        }
-                        else if (found[0] === 'productTemplate') {
-                            bgColor = '#9238b5';
-                        }
-                        else if (found[0] === 'promotion_code' ||
-                            foundLink[0] === 'nontrackurl' ||
-                            foundLink[0] === 'shortlink' ||
-                            foundLink[0] === 'shortlink_static') {
-                            bgColor = '#6750A7';
-                        }
-                        else if (found[0] === 'custom') {
-                            bgColor = '#BBEFBE';
-                        }
-                        let label = getObjectPropSafely(() => {
-                            const foundAttribute = '';
-                            let codeTag = '';
-                            if (found.length === 2) {
-                                if (found[0] === 'objectWidget' && found[1].startsWith('custom_')) {
-                                    bgColor = '#1890F0';
-                                    const contentWidget = found[1].substring(7);
-                                    // remove custom_ for get right content
-                                    if (contentWidget.length > 0) {
-                                        if (objectWidgetInput[contentWidget] !== undefined) {
-                                            return objectWidgetInput[contentWidget].name;
-                                        }
-                                        bgColor = '#ccc';
-                                        // return contentWidget;
-                                        return 'Unknow Widget';
-                                    }
-                                }
-                                else {
-                                    codeTag = found[1].split('||')[0];
-                                }
-                            }
-                            else if (found.length === 3) {
-                                if (found[0] === 'promotion_code') {
-                                    codeTag = found[1];
-                                }
-                                else {
-                                    const splitString = found[2].split('||');
-                                    codeTag = `${found[1]}.${splitString[0]}`;
-                                }
-                            }
-                            // console.log('foundAttribute', found, foundAttribute, codeTag);
-                            if (foundAttribute) {
-                                return foundAttribute.label;
-                            }
-                            // bgColor = '#ccc';
-                            // return `${found[0]}.${codeTag}`;
-                            return `${codeTag}`;
-                        });
-                        if (foundLink[0] === 'nontrackurl') {
-                            label = 'Non tracking Link';
-                        }
-                        if (foundLink[0] === 'shortlink' || foundLink[0] === 'shortlink_static') {
-                            const url = get(matcher.match(/\((.*?)\)/), '.1', '');
-                            label = genShortLinkValue(url).label;
-                        }
-                        // console.log(type);
-                        if (type === 'input') {
-                            if (init === 'add') {
-                                return getInsertPatternWithAppendSpaceEnd(random(8), matcher, label || found[0], bgColor);
-                            }
-                            return getInsertPattern(random(8), matcher, label || found[0], bgColor);
-                        }
-                        return getInsertPattern(random(8), matcher, label || found[0], bgColor);
-                    }
-                    return matcher;
-                };
-                try {
-                    return `${result.replace(insertPattern, htmlReplacer)}`;
-                }
-                catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.log(error);
-                    return htmlText;
-                }
-            }
-        }
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.log('error', error);
-    }
-    return result;
-};
-export const handleUpdateInputPersonalization = (listIconRemove, listBtnElement) => {
-    listIconRemove.forEach((each) => {
-        each.innerHTML = '';
-        each.innerHTML = '&#x2715';
-        const styleBtnRemove = each.style;
-        styleBtnRemove.fontSize = '13px';
-        styleBtnRemove.color = '#305FB8';
-        styleBtnRemove.marginLeft = '-12px';
-        styleBtnRemove.marginTop = '1px';
-        styleBtnRemove.lineHeight = '18px';
-        styleBtnRemove.position = 'absolute';
-        styleBtnRemove.backgroundColor = '#fff';
-        styleBtnRemove.padding = '0 3px';
-        styleBtnRemove.borderRadius = '50%';
-        styleBtnRemove.top = '50%';
-        styleBtnRemove.transform = 'translate(-50%, -50%)';
-        styleBtnRemove.left = '100%';
-    });
-    listBtnElement.forEach((each) => {
-        const styleBtnElement = each.style;
-        styleBtnElement.position = 'relative';
-        styleBtnElement.color = '#000';
-        styleBtnElement.padding = '3px 8px';
-        styleBtnElement.paddingRight = '2px';
-        if (each.value.includes('shortlink_static')) {
-            styleBtnElement.backgroundColor = '#CAE5FE';
-        }
-    });
-};
-export function removeHtmlTag(text) {
-    text = `${text}`.replace(/(<([^>]+)>)/gi, '');
-    text = text.replace(/&nbsp;/gm, ' ');
-    return decode(text.trim());
-}
-export function convertBreakTag(text) {
-    return text.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g, '\n');
-}
-export function convertDivToBreakTag(text) {
-    return text.replace(/<div>/gi, '<br>').replace(/<\/div>/gi, '');
-}
-export const pasteHtmlAtCaret = (html, selectPastedContent, callback) => {
-    try {
-        // console.log('callback', callback, typeof callback);
-        if (typeof callback === 'function') {
-            callback();
-        }
-        let sel;
-        let range;
-        if (window.getSelection) {
-            // IE9 and non-IE
-            sel = window.getSelection();
-            if (sel.getRangeAt && sel.rangeCount) {
-                range = sel.getRangeAt(0);
-                range.deleteContents();
-                // Range.createContextualFragment() would be useful here but is
-                // only relatively recently standardized and is not supported in
-                // some browsers (IE9, for one)
-                const el = document.createElement('div');
-                el.innerHTML = html;
-                const frag = document.createDocumentFragment();
-                let node;
-                let lastNode;
-                // eslint-disable-next-line no-cond-assign
-                while ((node = el.firstChild)) {
-                    lastNode = frag.appendChild(node);
-                }
-                const firstNode = frag.firstChild;
-                range.insertNode(frag);
-                // Preserve the selection
-                if (lastNode) {
-                    range = range.cloneRange();
-                    range.setStartAfter(lastNode);
-                    if (selectPastedContent) {
-                        range.setStartBefore(firstNode);
-                    }
-                    else {
-                        range.collapse(true);
-                    }
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                }
-            }
-            // eslint-disable-next-line no-cond-assign
-        }
-        else if ((sel = document.selection) && sel.type !== 'Control') {
-            // IE < 9
-            const originalRange = sel.createRange();
-            originalRange.collapse(true);
-            sel.createRange().pasteHTML(html);
-            if (selectPastedContent) {
-                range = sel.createRange();
-                range.setEndPoint('StartToStart', originalRange);
-                range.select();
-            }
-        }
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error);
-    }
-};
-export const getInsertLinkPatternWithAppendSpaceEnd = (id, value, label) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: #000; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; margin-top: 2px; cursor: pointer; height: auto; background-color: #CAE5FE" value=${value
-    .replace(/\s/gm, '&nbsp;')
-    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 999;font-size: 1rem;font-weight: bold">x</em></button>&nbsp;`;
-// eslint-disable-next-line func-names
-export const validateHTMLTags = (function () {
-    const e = [
-        '<a ',
-        '<a>',
-        '</a>',
-        '<abbr>',
-        '<abbr ',
-        '</abbr>',
-        '<acronym>',
-        '<acronym ',
-        '</acronym>',
-        '<address>',
-        '<address ',
-        '</address>',
-        '<applet>',
-        '<applet ',
-        '</applet>',
-        '<area>',
-        '<area ',
-        '</area>',
-        '<article>',
-        '</article>',
-        '<article ',
-        '<aside>',
-        '<aside ',
-        '</aside>',
-        '<audio>',
-        '<audio ',
-        '</audio>',
-        '<b>',
-        '</b>',
-        '<base>',
-        '<base ',
-        '</base>',
-        '<basefont>',
-        '<basefont ',
-        '</basefont>',
-        '<bdi>',
-        '</bdi>',
-        '<bdi ',
-        '<bdo>',
-        '</bdo>',
-        '<bdo ',
-        '<big>',
-        '<big ',
-        '</big>',
-        '<blockquote>',
-        '<blockquote ',
-        '</blockquote>',
-        '<body>',
-        '<body ',
-        '</body>',
-        '<br ',
-        '<br />',
-        '<br>',
-        '<br/>',
-        '</br>',
-        '<button>',
-        '<button ',
-        '</button>',
-        '<canvas>',
-        '</canvas>',
-        '<canvas ',
-        '<caption>',
-        '<caption ',
-        '</caption>',
-        '<center>',
-        '<center ',
-        '</center>',
-        '<cite>',
-        '<cite ',
-        '</cite>',
-        '<code>',
-        '<code ',
-        '</code>',
-        '<col>',
-        '<col ',
-        '</col>',
-        '<colgroup>',
-        '<colgroup ',
-        '</colgroup>',
-        '<datalist>',
-        '<datalist ',
-        '</datalist>',
-        '<dd>',
-        '</dd>',
-        '<dd ',
-        '<del>',
-        '<del ',
-        '</del>',
-        '<details>',
-        '<details ',
-        '</details>',
-        '<dfn>',
-        '</dfn>',
-        '<dfn ',
-        '<dialog>',
-        '<dialog ',
-        '</dialog>',
-        '<dir>',
-        '</dir>',
-        '<dir ',
-        '<div>',
-        '<div ',
-        '</div>',
-        '<dl>',
-        '</dl>',
-        '<dl ',
-        '<dt>',
-        '</dt>',
-        '<dt ',
-        '<em>',
-        '<em ',
-        '</em>',
-        '<embed>',
-        '</embed>',
-        '<embed ',
-        '<fieldset>',
-        '<fieldset ',
-        '</fieldset>',
-        '<figcaption>',
-        '</figcaption>',
-        '<figcaption ',
-        '<figure>',
-        '<figure ',
-        '</figure>',
-        '<font ',
-        '</font>',
-        '<font>',
-        '<footer>',
-        '</footer>',
-        '<footer ',
-        '<form>',
-        '</form>',
-        '<form ',
-        '<frame>',
-        '</frame>',
-        '<frame ',
-        '<frameset>',
-        '<frameset ',
-        '</frameset>',
-        '<h1>',
-        '</h1>',
-        '<h1 ',
-        '<h2>',
-        '</h2>',
-        '<h2 ',
-        '<h3>',
-        '</h3>',
-        '<h3 ',
-        '<h4>',
-        '</h4>',
-        '<h4 ',
-        '<h5>',
-        '</h5>',
-        '<h5 ',
-        '<h6>',
-        '</h6>',
-        '<h6 ',
-        '<head>',
-        '</head>',
-        '<head ',
-        '<header>',
-        '<header ',
-        '</header>',
-        '<hr>',
-        '<hr ',
-        '</hr>',
-        '<html>',
-        '</html>',
-        '<html ',
-        '<i>',
-        '</i>',
-        '<iframe>',
-        '<iframe ',
-        '</iframe>',
-        '<img>',
-        '</img>',
-        '<img ',
-        '<input>',
-        '</input>',
-        '<input ',
-        '<ins>',
-        '<ins ',
-        '</ins>',
-        '</kbd>',
-        '<kbd>',
-        '<kbd ',
-        '<label>',
-        '<label ',
-        '</label>',
-        '<legend>',
-        '<legend ',
-        '</legend>',
-        '<li ',
-        '<li>',
-        '</li>',
-        '<link>',
-        '<link ',
-        '</link>',
-        '<main>',
-        '<main ',
-        '</main>',
-        '<map>',
-        '</map>',
-        '<map ',
-        '<mark>',
-        '</mark>',
-        '<mark ',
-        '<meta>',
-        '</meta>',
-        '<meta ',
-        '<meter>',
-        '</meter>',
-        '<meter ',
-        '<nav>',
-        '</nav>',
-        '<nav ',
-        '<noframes>',
-        '</noframes>',
-        '<noframes ',
-        '<noscript>',
-        '<noscript ',
-        '</noscript>',
-        '<object>',
-        '<object ',
-        '</object>',
-        '<ol>',
-        '</ol>',
-        '<ol ',
-        '<optgroup>',
-        '</optgroup>',
-        '<optgroup ',
-        '<option>',
-        '</option>',
-        '<option ',
-        '<output>',
-        '<output ',
-        '</output>',
-        '<p>',
-        '</p>',
-        '<p ',
-        '<param>',
-        '<param ',
-        '</param>',
-        '<pre>',
-        '</pre>',
-        '<pre ',
-        '<progress>',
-        '<progress ',
-        '</progress>',
-        '<q>',
-        '</q>',
-        '<q ',
-        '<rp>',
-        '</rp>',
-        '<rp ',
-        '<rt>',
-        '<rt ',
-        '</rt>',
-        '<ruby>',
-        '</ruby>',
-        '<ruby ',
-        '<s>',
-        '</s>',
-        '<s ',
-        '<samp>',
-        '</samp>',
-        '<samp ',
-        '<section>',
-        '</section>',
-        '<section ',
-        '<select>',
-        '</select>',
-        '<select ',
-        '<small>',
-        '<small ',
-        '</small>',
-        '<source>',
-        '</source>',
-        '<source ',
-        '<span>',
-        '<span ',
-        '</span>',
-        '<strike>',
-        '</strike>',
-        '<strike ',
-        '<strong>',
-        '<strong ',
-        '</strong>',
-        '<style>',
-        '</style>',
-        '<style ',
-        '<sub>',
-        '<sub ',
-        '</sub>',
-        '<summary>',
-        '</summary>',
-        '<summary ',
-        '<sup>',
-        '<sup ',
-        '</sup>',
-        '<table ',
-        '<table>',
-        '</table>',
-        '<tbody>',
-        '</tbody>',
-        '<tbody ',
-        '<td>',
-        '<td ',
-        '</td>',
-        '<textarea>',
-        '<textarea ',
-        '</textarea>',
-        '<tfoot>',
-        '</tfoot>',
-        '<tfoot ',
-        '<th>',
-        '</th>',
-        '<th ',
-        '<thead>',
-        '</thead>',
-        '<thead ',
-        '<time>',
-        '<time ',
-        '</time>',
-        '<title>',
-        '</title>',
-        '<title ',
-        '<tr>',
-        '<tr ',
-        '</tr>',
-        '<track>',
-        '</track>',
-        '<track ',
-        '<tt>',
-        '</tt>',
-        '<tt ',
-        '<u>',
-        '</u>',
-        '<ul ',
-        '<ul>',
-        '</ul>',
-        '<var>',
-        '<var ',
-        '</var>',
-        '<video>',
-        '</video>',
-        '<video ',
-        '<wbr>',
-        '<wbr ',
-        '</wbr>',
-    ];
-    const t = {
-        escapeCustomTags(t) {
-            if (!t || typeof t !== 'string')
-                return t;
-            for (var r = 0, a = [], i = [], o = [], s = t, n = 0; n <= t.length; n++)
-                t[n] == '<'
-                    ? i.push({ index: n, type: 'lt' })
-                    : t[n] == '>' && i.push({ index: n, type: 'gt' });
-            for (n = 0; n <= t.length; n++) {
-                var d = t.indexOf('<', r);
-                if (d === -1)
-                    break;
-                const l = t.indexOf(' ', d + 1);
-                const p = t.indexOf('/>', d + 1);
-                var u = t.indexOf('>', d + 1);
-                const b = [];
-                l != -1 && b.push(l), p != -1 && b.push(p), u != -1 && b.push(u);
-                var f;
-                const m = Math.min(...b);
-                var h = t.substring(d, m + 1);
-                (f = e.some(e => {
-                    if (h === e)
-                        return a.push({ index: d, type: 'lt' }, { index: u, type: 'gt' }), !0;
-                })),
-                    (n = m),
-                    f ? (r = m) : (r += 1);
-            }
-            for (n = 0; n < i.length; n++) {
-                a.some((e) => e.index === i[n].index) || o.push(i[n]);
-            }
-            for (n = o.length - 1; n >= 0; n--)
-                o[n].type == 'lt'
-                    ? (s = `${s.substring(0, o[n].index)}&lt;${s.substring(o[n].index + 1)}`)
-                    : o[n].type == 'gt' &&
-                        (s = `${s.substring(0, o[n].index)}&gt;${s.substring(o[n].index + 1)}`);
-            return s;
-        },
-        isCustomTag(t) {
-            if (!t || typeof t !== 'string')
-                return !1;
-            for (var r = !1, a = 0, i = 0; i <= t.length;) {
-                const o = t.indexOf('<', a);
-                if (o == -1)
-                    break;
-                const s = t.indexOf(' ', o + 1);
-                const n = t.indexOf('/>', o + 1);
-                const d = t.indexOf('>', o + 1);
-                const l = [];
-                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
-                const p = Math.min(...l);
-                var u = t.substring(o, p + 1);
-                if ((e.some((t, a) => {
-                    if (u === t)
-                        return !0;
-                    a + 1 == e.length && (r = !0);
-                }),
-                    r))
-                    break;
-                (i = p), (a = p);
-            }
-            return r;
-        },
-        isValidTag(t) {
-            if (!t || typeof t !== 'string')
-                return !1;
-            for (var r = !1, a = 0, i = 0; i <= t.length;) {
-                const o = t.indexOf('<', a);
-                if (o == -1)
-                    break;
-                const s = t.indexOf(' ', o + 1);
-                const n = t.indexOf('/>', o + 1);
-                const d = t.indexOf('>', o + 1);
-                const l = [];
-                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
-                const p = Math.min(...l);
-                var u = t.substring(o, p + 1);
-                if ((r = e.some(e => u === e)))
-                    break;
-                (i = p), r ? (a = p) : (a += 1);
-            }
-            return r;
-        },
-    };
-    return t;
-})();
-// Fix bug con trỏ input check text Value đã có thẻ <br/>
-export const spacingNonTracking = (data) => {
-    // eslint-disable-next-line prefer-regex-literals
-    const regexHasBannedPrefix = new RegExp(/<br\s*\/?>/gi);
-    if (typeof data === 'string' && regexHasBannedPrefix.test(data)) {
-        return true;
-    }
-    return false;
-};
-export const initialValue = (initValue) => {
-    try {
-        const newTextValue = convertHtmlText(initValue, 'html', {}, {}, 'input', '');
-        if (newTextValue && !newTextValue.endsWith('&nbsp;')) {
-            return `${newTextValue}&nbsp;`;
-        }
-        return newTextValue;
-    }
-    catch (err) {
-        // eslint-disable-next-line no-console
-        console.log(err);
-    }
-};
-export const mapLabelPersonalization = (type) => ({
-    [AllowDynamicType.SHORTLINK]: 'Add short link',
-    [AllowDynamicType.ADDPERSONALIZATION]: 'Add Personalization',
-}[type]);
-export const createElement = (element, attribute, inner) => {
-    try {
-        if (typeof element === 'undefined') {
-            return false;
-        }
-        if (typeof inner === 'undefined') {
-            inner = '';
-        }
-        const el = document.createElement(element);
-        if (typeof attribute === 'object') {
-            for (const key in attribute) {
-                el.setAttribute(key, attribute[key]);
-            }
-        }
-        if (!Array.isArray(inner)) {
-            inner = [inner];
-        }
-        for (let k = 0; k < inner.length; k++) {
-            if (inner[k].tagName) {
-                el.appendChild(inner[k]);
-            }
-            else {
-                el.appendChild(document.createTextNode(inner[k]));
-            }
-        }
-        return el;
-    }
-    catch (error) {
-        console.log('error', error);
-    }
-};
-export const DATA_ATTR_WITH_TYPE = [MAP_DATA_TYPE.number.value, MAP_DATA_TYPE.datetime.value];
-export const mapDataFormatAttribute = (dataIn) => {
-    const dataOut = {
-        attribute: {
-            settingsFe: dataIn,
-        },
-    };
-    if (dataIn.dataType === 'datetime') {
-        const format = dataIn.format && Object.keys(dataIn.format.config).length > 0
-            ? dataIn.format
-            : DATE_AND_TIME_DEFAULT;
-        const hasDateFormat = format.config.date && format.config.date.check;
-        const hasTimeFormat = format.config.time && format.config.time.check;
-        const dateParseFormat = format.config.format;
-        const dateParseOption = format.config.date && format.config.date.value;
-        const timeParseOption = format.config.time && format.config.time.value;
-        const timeParseFormat = format.config.time && format.config.time.timeFormat;
-        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, datetimeFormatSettings: {
-                hasDateFormat,
-                hasTimeFormat,
-                dateParseFormat,
-                dateParseOption,
-                timeParseOption,
-                timeParseFormat,
-                dateFormatString: getStringFormatDateDF({
-                    hasDateFormat,
-                    hasTimeFormat,
-                    dateParseFormat,
-                    dateParseOption,
-                    timeParseOption,
-                    timeParseFormat,
-                }),
-                type: dataIn.format.type.toLowerCase(),
-            } });
-    }
-    else if (dataIn.dataType === 'number') {
-        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, numberFormatSettings: {
-                currencyCode: dataIn.format.config.currency,
-                decimalPlaces: dataIn.format.config.decimalPlace || 0,
-                grouping: dataIn.format.config.group === 'space' ? ' ' : dataIn.format.config.group || ',',
-                decimal: dataIn.format.config.decimal || '.',
-                isCompact: dataIn.format.config.isCompactNumber || false,
-                prefixType: dataIn.format.config.prefixType,
-                type: dataIn.format.type.toLowerCase(),
-            } });
-    }
-    return dataOut;
-};
-export const regexAttrFormat = /#|{|}|".+?"|\||"/g;
-export const getBgColorByContentSourceType = (type) => {
-    let bgColor = '#E8FECA';
-    switch (type) {
-        case DYNAMIC_CONTENT_TYPE_KEY.BO_SETTINGS: {
-            break;
-        }
-        case DYNAMIC_CONTENT_TYPE_KEY.VISITOR_ATTRIBUTE: {
-            bgColor = '#CAFEDD';
-            break;
-        }
-        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOMER_ATTRIBUTE: {
-            bgColor = '#CAE5FE';
-            break;
-        }
-        case DYNAMIC_CONTENT_TYPE_KEY.EVENT_ATTRIBUTE: {
-            bgColor = '#FECACA';
-            break;
-        }
-        case DYNAMIC_CONTENT_TYPE_KEY.PROMOTION_CODE: {
-            bgColor = '#D8CAFE';
-            break;
-        }
-        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOM_FUNCTION: {
-            bgColor = '#BBEFBE';
-            break;
-        }
-        default: {
-            break;
-        }
-    }
-    return bgColor;
-};
+/* eslint-disable array-callback-return */
+/* eslint-disable no-sequences */
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable vars-on-top */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable block-scoped-var */
+/* eslint-disable prefer-destructuring */
+// Libraries
+import { get } from 'lodash';
+import { decode } from 'html-entities';
+// Utils
+import { getObjectPropSafely, random } from '@antscorp/antsomi-ui/es/utils';
+import { getStringFormatDateDF } from '../../molecules/AddDynamicContent/utils';
+// Constants
+import { AllowDynamicType } from './InputDynamic';
+import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE } from './constants';
+import { DYNAMIC_CONTENT_TYPE_KEY } from '../../molecules/AddDynamicContent/constants';
+export function validateURL(string) {
+    // eslint-disable-next-line no-useless-escape
+    const regexp = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
+    return regexp.test(string);
+}
+export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="position: relative; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 2px 3px 8px; color: rgb(0, 0, 0); font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; cursor: pointer; background: ${bgColor}; height: auto;" value=${code
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); color: rgb(48, 95, 184); background-color: rgb(255, 255, 255); font-style: normal; margin-top: 1px; z-index: 1; font-size: 13px; font-weight: bold; margin-left: -12px; line-height: 18px; padding: 0px 3px; border-radius: 50%;">✕</em></button>&nbsp;`;
+export const genShortLinkValue = (url, type) => {
+    const id = random(5);
+    let keyTag = 'shortlink';
+    if (type === 'general') {
+        keyTag = 'shortlink_static';
+    }
+    return {
+        id,
+        value: `#{${keyTag}(${url})}`,
+        label: `https://ants.ly/${id}`,
+    };
+};
+export const getInsertPattern = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: white; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; height: auto; margin-top: 2px; cursor: pointer; background: ${bgColor}" value=${code
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 1;font-size: 1rem;font-weight: bold">x</em></button>`;
+export const convertHtmlText = (htmlText, format = 'raw', state, objectWidgetInput = {}, type = '', init = '') => {
+    const result = htmlText;
+    try {
+        if (format && format.toLowerCase() === 'raw') {
+            // pattern find all button insert word
+            const regexInsertPattern = type === 'input'
+                ? /<button .*?class="insert-word.*?".*? value="([^"]*?)".*?>(.*?)<\/button>/gim
+                : /<button .*?class="insert-word.*?".*? value=(.*?)>(.*?)<\/button>/gim;
+            // pattern find all symbol `"`
+            const regexQuot = /&quot;/gm;
+            const regexSpace = /&nbsp;/gm;
+            const regexSpaceV2 = /nbsp;/gm;
+            const regexShortLink = /#{shortlink\(.*?\)}/;
+            const regexShortLinkStatic = /#{shortlink_static\(.*?\)}/;
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const replacer = (match, p1, p2, p3, offset, string) => {
+                const newPlacer = p1
+                    .replace(/"/gm, '')
+                    .replace(regexQuot, '"')
+                    .replace(regexSpace, ' ')
+                    .replace(regexSpaceV2, ' ');
+                if (!regexShortLink.test(newPlacer) || !regexShortLinkStatic.test(newPlacer)) {
+                    return newPlacer.replace(/&amp;/gm, '');
+                }
+                return newPlacer;
+            };
+            // replace `"` from value -> replace &quot; -> replace &nbsp;
+            if (result === null || result === undefined) {
+                return htmlText;
+            }
+            try {
+                return result.replace(regexInsertPattern, replacer);
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.log('error', error);
+                return htmlText;
+            }
+        }
+        if (format && format.toLowerCase() === 'html') {
+            const insertPattern = /#{.*?}/gm;
+            if (insertPattern.test(htmlText)) {
+                const htmlReplacer = (matcher) => {
+                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gmi;
+                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gim;
+                    // const regex = /(\w+)|(\(\w+)\)|"(.*?)"/gim;
+                    // const found = matcher.match(regex);
+                    const found = matcher.replace(/#|{|}|/g, '').split('.');
+                    const foundLink = found[0].split('(');
+                    if (found && found.length) {
+                        let bgColor = '#ccc';
+                        // console.log(found);
+                        if (found[0] === 'customer') {
+                            bgColor = '#3C39BA';
+                        }
+                        else if (found[0] === 'visitor') {
+                            bgColor = '#009000';
+                        }
+                        else if (found[0] === 'event') {
+                            bgColor = '#FBAC00';
+                        }
+                        else if (found[0] === 'objectWidget') {
+                            bgColor = '#24abb9';
+                        }
+                        else if (found[0] === 'productTemplate') {
+                            bgColor = '#9238b5';
+                        }
+                        else if (found[0] === 'promotion_code' ||
+                            foundLink[0] === 'nontrackurl' ||
+                            foundLink[0] === 'shortlink' ||
+                            foundLink[0] === 'shortlink_static') {
+                            bgColor = '#6750A7';
+                        }
+                        else if (found[0] === 'custom') {
+                            bgColor = '#BBEFBE';
+                        }
+                        let label = getObjectPropSafely(() => {
+                            const foundAttribute = '';
+                            let codeTag = '';
+                            if (found.length === 2) {
+                                if (found[0] === 'objectWidget' && found[1].startsWith('custom_')) {
+                                    bgColor = '#1890F0';
+                                    const contentWidget = found[1].substring(7);
+                                    // remove custom_ for get right content
+                                    if (contentWidget.length > 0) {
+                                        if (objectWidgetInput[contentWidget] !== undefined) {
+                                            return objectWidgetInput[contentWidget].name;
+                                        }
+                                        bgColor = '#ccc';
+                                        // return contentWidget;
+                                        return 'Unknow Widget';
+                                    }
+                                }
+                                else {
+                                    codeTag = found[1].split('||')[0];
+                                }
+                            }
+                            else if (found.length === 3) {
+                                if (found[0] === 'promotion_code') {
+                                    codeTag = found[1];
+                                }
+                                else {
+                                    const splitString = found[2].split('||');
+                                    codeTag = `${found[1]}.${splitString[0]}`;
+                                }
+                            }
+                            // console.log('foundAttribute', found, foundAttribute, codeTag);
+                            if (foundAttribute) {
+                                return foundAttribute.label;
+                            }
+                            // bgColor = '#ccc';
+                            // return `${found[0]}.${codeTag}`;
+                            return `${codeTag}`;
+                        });
+                        if (foundLink[0] === 'nontrackurl') {
+                            label = 'Non tracking Link';
+                        }
+                        if (foundLink[0] === 'shortlink' || foundLink[0] === 'shortlink_static') {
+                            const url = get(matcher.match(/\((.*?)\)/), '.1', '');
+                            label = genShortLinkValue(url).label;
+                        }
+                        // console.log(type);
+                        if (type === 'input') {
+                            if (init === 'add') {
+                                return getInsertPatternWithAppendSpaceEnd(random(8), matcher, label || found[0], bgColor);
+                            }
+                            return getInsertPattern(random(8), matcher, label || found[0], bgColor);
+                        }
+                        return getInsertPattern(random(8), matcher, label || found[0], bgColor);
+                    }
+                    return matcher;
+                };
+                try {
+                    return `${result.replace(insertPattern, htmlReplacer)}`;
+                }
+                catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.log(error);
+                    return htmlText;
+                }
+            }
+        }
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log('error', error);
+    }
+    return result;
+};
+export const handleUpdateInputPersonalization = (listIconRemove, listBtnElement) => {
+    listIconRemove.forEach((each) => {
+        each.innerHTML = '';
+        each.innerHTML = '&#x2715';
+        const styleBtnRemove = each.style;
+        styleBtnRemove.fontSize = '13px';
+        styleBtnRemove.color = '#305FB8';
+        styleBtnRemove.marginLeft = '-12px';
+        styleBtnRemove.marginTop = '1px';
+        styleBtnRemove.lineHeight = '18px';
+        styleBtnRemove.position = 'absolute';
+        styleBtnRemove.backgroundColor = '#fff';
+        styleBtnRemove.padding = '0 3px';
+        styleBtnRemove.borderRadius = '50%';
+        styleBtnRemove.top = '50%';
+        styleBtnRemove.transform = 'translate(-50%, -50%)';
+        styleBtnRemove.left = '100%';
+    });
+    listBtnElement.forEach((each) => {
+        const styleBtnElement = each.style;
+        styleBtnElement.position = 'relative';
+        styleBtnElement.color = '#000';
+        styleBtnElement.padding = '3px 8px';
+        styleBtnElement.paddingRight = '2px';
+        if (each.value.includes('shortlink_static')) {
+            styleBtnElement.backgroundColor = '#CAE5FE';
+        }
+    });
+};
+export function removeHtmlTag(text) {
+    text = `${text}`.replace(/(<([^>]+)>)/gi, '');
+    text = text.replace(/&nbsp;/gm, ' ');
+    return decode(text.trim());
+}
+export function convertBreakTag(text) {
+    return text.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g, '\n');
+}
+export function convertDivToBreakTag(text) {
+    return text.replace(/<div>/gi, '<br>').replace(/<\/div>/gi, '');
+}
+export const pasteHtmlAtCaret = (html, selectPastedContent, callback) => {
+    try {
+        // console.log('callback', callback, typeof callback);
+        if (typeof callback === 'function') {
+            callback();
+        }
+        let sel;
+        let range;
+        if (window.getSelection) {
+            // IE9 and non-IE
+            sel = window.getSelection();
+            if (sel.getRangeAt && sel.rangeCount) {
+                range = sel.getRangeAt(0);
+                range.deleteContents();
+                // Range.createContextualFragment() would be useful here but is
+                // only relatively recently standardized and is not supported in
+                // some browsers (IE9, for one)
+                const el = document.createElement('div');
+                el.innerHTML = html;
+                const frag = document.createDocumentFragment();
+                let node;
+                let lastNode;
+                // eslint-disable-next-line no-cond-assign
+                while ((node = el.firstChild)) {
+                    lastNode = frag.appendChild(node);
+                }
+                const firstNode = frag.firstChild;
+                range.insertNode(frag);
+                // Preserve the selection
+                if (lastNode) {
+                    range = range.cloneRange();
+                    range.setStartAfter(lastNode);
+                    if (selectPastedContent) {
+                        range.setStartBefore(firstNode);
+                    }
+                    else {
+                        range.collapse(true);
+                    }
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+            }
+            // eslint-disable-next-line no-cond-assign
+        }
+        else if ((sel = document.selection) && sel.type !== 'Control') {
+            // IE < 9
+            const originalRange = sel.createRange();
+            originalRange.collapse(true);
+            sel.createRange().pasteHTML(html);
+            if (selectPastedContent) {
+                range = sel.createRange();
+                range.setEndPoint('StartToStart', originalRange);
+                range.select();
+            }
+        }
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }
+};
+export const getInsertLinkPatternWithAppendSpaceEnd = (id, value, label) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: #000; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; margin-top: 2px; cursor: pointer; height: auto; background-color: #CAE5FE" value=${value
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 999;font-size: 1rem;font-weight: bold">x</em></button>&nbsp;`;
+// eslint-disable-next-line func-names
+export const validateHTMLTags = (function () {
+    const e = [
+        '<a ',
+        '<a>',
+        '</a>',
+        '<abbr>',
+        '<abbr ',
+        '</abbr>',
+        '<acronym>',
+        '<acronym ',
+        '</acronym>',
+        '<address>',
+        '<address ',
+        '</address>',
+        '<applet>',
+        '<applet ',
+        '</applet>',
+        '<area>',
+        '<area ',
+        '</area>',
+        '<article>',
+        '</article>',
+        '<article ',
+        '<aside>',
+        '<aside ',
+        '</aside>',
+        '<audio>',
+        '<audio ',
+        '</audio>',
+        '<b>',
+        '</b>',
+        '<base>',
+        '<base ',
+        '</base>',
+        '<basefont>',
+        '<basefont ',
+        '</basefont>',
+        '<bdi>',
+        '</bdi>',
+        '<bdi ',
+        '<bdo>',
+        '</bdo>',
+        '<bdo ',
+        '<big>',
+        '<big ',
+        '</big>',
+        '<blockquote>',
+        '<blockquote ',
+        '</blockquote>',
+        '<body>',
+        '<body ',
+        '</body>',
+        '<br ',
+        '<br />',
+        '<br>',
+        '<br/>',
+        '</br>',
+        '<button>',
+        '<button ',
+        '</button>',
+        '<canvas>',
+        '</canvas>',
+        '<canvas ',
+        '<caption>',
+        '<caption ',
+        '</caption>',
+        '<center>',
+        '<center ',
+        '</center>',
+        '<cite>',
+        '<cite ',
+        '</cite>',
+        '<code>',
+        '<code ',
+        '</code>',
+        '<col>',
+        '<col ',
+        '</col>',
+        '<colgroup>',
+        '<colgroup ',
+        '</colgroup>',
+        '<datalist>',
+        '<datalist ',
+        '</datalist>',
+        '<dd>',
+        '</dd>',
+        '<dd ',
+        '<del>',
+        '<del ',
+        '</del>',
+        '<details>',
+        '<details ',
+        '</details>',
+        '<dfn>',
+        '</dfn>',
+        '<dfn ',
+        '<dialog>',
+        '<dialog ',
+        '</dialog>',
+        '<dir>',
+        '</dir>',
+        '<dir ',
+        '<div>',
+        '<div ',
+        '</div>',
+        '<dl>',
+        '</dl>',
+        '<dl ',
+        '<dt>',
+        '</dt>',
+        '<dt ',
+        '<em>',
+        '<em ',
+        '</em>',
+        '<embed>',
+        '</embed>',
+        '<embed ',
+        '<fieldset>',
+        '<fieldset ',
+        '</fieldset>',
+        '<figcaption>',
+        '</figcaption>',
+        '<figcaption ',
+        '<figure>',
+        '<figure ',
+        '</figure>',
+        '<font ',
+        '</font>',
+        '<font>',
+        '<footer>',
+        '</footer>',
+        '<footer ',
+        '<form>',
+        '</form>',
+        '<form ',
+        '<frame>',
+        '</frame>',
+        '<frame ',
+        '<frameset>',
+        '<frameset ',
+        '</frameset>',
+        '<h1>',
+        '</h1>',
+        '<h1 ',
+        '<h2>',
+        '</h2>',
+        '<h2 ',
+        '<h3>',
+        '</h3>',
+        '<h3 ',
+        '<h4>',
+        '</h4>',
+        '<h4 ',
+        '<h5>',
+        '</h5>',
+        '<h5 ',
+        '<h6>',
+        '</h6>',
+        '<h6 ',
+        '<head>',
+        '</head>',
+        '<head ',
+        '<header>',
+        '<header ',
+        '</header>',
+        '<hr>',
+        '<hr ',
+        '</hr>',
+        '<html>',
+        '</html>',
+        '<html ',
+        '<i>',
+        '</i>',
+        '<iframe>',
+        '<iframe ',
+        '</iframe>',
+        '<img>',
+        '</img>',
+        '<img ',
+        '<input>',
+        '</input>',
+        '<input ',
+        '<ins>',
+        '<ins ',
+        '</ins>',
+        '</kbd>',
+        '<kbd>',
+        '<kbd ',
+        '<label>',
+        '<label ',
+        '</label>',
+        '<legend>',
+        '<legend ',
+        '</legend>',
+        '<li ',
+        '<li>',
+        '</li>',
+        '<link>',
+        '<link ',
+        '</link>',
+        '<main>',
+        '<main ',
+        '</main>',
+        '<map>',
+        '</map>',
+        '<map ',
+        '<mark>',
+        '</mark>',
+        '<mark ',
+        '<meta>',
+        '</meta>',
+        '<meta ',
+        '<meter>',
+        '</meter>',
+        '<meter ',
+        '<nav>',
+        '</nav>',
+        '<nav ',
+        '<noframes>',
+        '</noframes>',
+        '<noframes ',
+        '<noscript>',
+        '<noscript ',
+        '</noscript>',
+        '<object>',
+        '<object ',
+        '</object>',
+        '<ol>',
+        '</ol>',
+        '<ol ',
+        '<optgroup>',
+        '</optgroup>',
+        '<optgroup ',
+        '<option>',
+        '</option>',
+        '<option ',
+        '<output>',
+        '<output ',
+        '</output>',
+        '<p>',
+        '</p>',
+        '<p ',
+        '<param>',
+        '<param ',
+        '</param>',
+        '<pre>',
+        '</pre>',
+        '<pre ',
+        '<progress>',
+        '<progress ',
+        '</progress>',
+        '<q>',
+        '</q>',
+        '<q ',
+        '<rp>',
+        '</rp>',
+        '<rp ',
+        '<rt>',
+        '<rt ',
+        '</rt>',
+        '<ruby>',
+        '</ruby>',
+        '<ruby ',
+        '<s>',
+        '</s>',
+        '<s ',
+        '<samp>',
+        '</samp>',
+        '<samp ',
+        '<section>',
+        '</section>',
+        '<section ',
+        '<select>',
+        '</select>',
+        '<select ',
+        '<small>',
+        '<small ',
+        '</small>',
+        '<source>',
+        '</source>',
+        '<source ',
+        '<span>',
+        '<span ',
+        '</span>',
+        '<strike>',
+        '</strike>',
+        '<strike ',
+        '<strong>',
+        '<strong ',
+        '</strong>',
+        '<style>',
+        '</style>',
+        '<style ',
+        '<sub>',
+        '<sub ',
+        '</sub>',
+        '<summary>',
+        '</summary>',
+        '<summary ',
+        '<sup>',
+        '<sup ',
+        '</sup>',
+        '<table ',
+        '<table>',
+        '</table>',
+        '<tbody>',
+        '</tbody>',
+        '<tbody ',
+        '<td>',
+        '<td ',
+        '</td>',
+        '<textarea>',
+        '<textarea ',
+        '</textarea>',
+        '<tfoot>',
+        '</tfoot>',
+        '<tfoot ',
+        '<th>',
+        '</th>',
+        '<th ',
+        '<thead>',
+        '</thead>',
+        '<thead ',
+        '<time>',
+        '<time ',
+        '</time>',
+        '<title>',
+        '</title>',
+        '<title ',
+        '<tr>',
+        '<tr ',
+        '</tr>',
+        '<track>',
+        '</track>',
+        '<track ',
+        '<tt>',
+        '</tt>',
+        '<tt ',
+        '<u>',
+        '</u>',
+        '<ul ',
+        '<ul>',
+        '</ul>',
+        '<var>',
+        '<var ',
+        '</var>',
+        '<video>',
+        '</video>',
+        '<video ',
+        '<wbr>',
+        '<wbr ',
+        '</wbr>',
+    ];
+    const t = {
+        escapeCustomTags(t) {
+            if (!t || typeof t !== 'string')
+                return t;
+            for (var r = 0, a = [], i = [], o = [], s = t, n = 0; n <= t.length; n++)
+                t[n] == '<'
+                    ? i.push({ index: n, type: 'lt' })
+                    : t[n] == '>' && i.push({ index: n, type: 'gt' });
+            for (n = 0; n <= t.length; n++) {
+                var d = t.indexOf('<', r);
+                if (d === -1)
+                    break;
+                const l = t.indexOf(' ', d + 1);
+                const p = t.indexOf('/>', d + 1);
+                var u = t.indexOf('>', d + 1);
+                const b = [];
+                l != -1 && b.push(l), p != -1 && b.push(p), u != -1 && b.push(u);
+                var f;
+                const m = Math.min(...b);
+                var h = t.substring(d, m + 1);
+                (f = e.some(e => {
+                    if (h === e)
+                        return a.push({ index: d, type: 'lt' }, { index: u, type: 'gt' }), !0;
+                })),
+                    (n = m),
+                    f ? (r = m) : (r += 1);
+            }
+            for (n = 0; n < i.length; n++) {
+                a.some((e) => e.index === i[n].index) || o.push(i[n]);
+            }
+            for (n = o.length - 1; n >= 0; n--)
+                o[n].type == 'lt'
+                    ? (s = `${s.substring(0, o[n].index)}&lt;${s.substring(o[n].index + 1)}`)
+                    : o[n].type == 'gt' &&
+                        (s = `${s.substring(0, o[n].index)}&gt;${s.substring(o[n].index + 1)}`);
+            return s;
+        },
+        isCustomTag(t) {
+            if (!t || typeof t !== 'string')
+                return !1;
+            for (var r = !1, a = 0, i = 0; i <= t.length;) {
+                const o = t.indexOf('<', a);
+                if (o == -1)
+                    break;
+                const s = t.indexOf(' ', o + 1);
+                const n = t.indexOf('/>', o + 1);
+                const d = t.indexOf('>', o + 1);
+                const l = [];
+                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
+                const p = Math.min(...l);
+                var u = t.substring(o, p + 1);
+                if ((e.some((t, a) => {
+                    if (u === t)
+                        return !0;
+                    a + 1 == e.length && (r = !0);
+                }),
+                    r))
+                    break;
+                (i = p), (a = p);
+            }
+            return r;
+        },
+        isValidTag(t) {
+            if (!t || typeof t !== 'string')
+                return !1;
+            for (var r = !1, a = 0, i = 0; i <= t.length;) {
+                const o = t.indexOf('<', a);
+                if (o == -1)
+                    break;
+                const s = t.indexOf(' ', o + 1);
+                const n = t.indexOf('/>', o + 1);
+                const d = t.indexOf('>', o + 1);
+                const l = [];
+                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
+                const p = Math.min(...l);
+                var u = t.substring(o, p + 1);
+                if ((r = e.some(e => u === e)))
+                    break;
+                (i = p), r ? (a = p) : (a += 1);
+            }
+            return r;
+        },
+    };
+    return t;
+})();
+// Fix bug con trỏ input check text Value đã có thẻ <br/>
+export const spacingNonTracking = (data) => {
+    // eslint-disable-next-line prefer-regex-literals
+    const regexHasBannedPrefix = new RegExp(/<br\s*\/?>/gi);
+    if (typeof data === 'string' && regexHasBannedPrefix.test(data)) {
+        return true;
+    }
+    return false;
+};
+export const initialValue = (initValue) => {
+    try {
+        const newTextValue = convertHtmlText(initValue, 'html', {}, {}, 'input', '');
+        if (newTextValue && !newTextValue.endsWith('&nbsp;')) {
+            return `${newTextValue}&nbsp;`;
+        }
+        return newTextValue;
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.log(err);
+    }
+};
+export const mapLabelPersonalization = (type) => ({
+    [AllowDynamicType.SHORTLINK]: 'Add short link',
+    [AllowDynamicType.ADDPERSONALIZATION]: 'Add Personalization',
+}[type]);
+export const createElement = (element, attribute, inner) => {
+    try {
+        if (typeof element === 'undefined') {
+            return false;
+        }
+        if (typeof inner === 'undefined') {
+            inner = '';
+        }
+        const el = document.createElement(element);
+        if (typeof attribute === 'object') {
+            for (const key in attribute) {
+                el.setAttribute(key, attribute[key]);
+            }
+        }
+        if (!Array.isArray(inner)) {
+            inner = [inner];
+        }
+        for (let k = 0; k < inner.length; k++) {
+            if (inner[k].tagName) {
+                el.appendChild(inner[k]);
+            }
+            else {
+                el.appendChild(document.createTextNode(inner[k]));
+            }
+        }
+        return el;
+    }
+    catch (error) {
+        console.log('error', error);
+    }
+};
+export const DATA_ATTR_WITH_TYPE = [MAP_DATA_TYPE.number.value, MAP_DATA_TYPE.datetime.value];
+export const mapDataFormatAttribute = (dataIn) => {
+    const dataOut = {
+        attribute: {
+            settingsFe: dataIn,
+        },
+    };
+    if (dataIn.dataType === 'datetime') {
+        const format = dataIn.format && Object.keys(dataIn.format.config).length > 0
+            ? dataIn.format
+            : DATE_AND_TIME_DEFAULT;
+        const hasDateFormat = format.config.date && format.config.date.check;
+        const hasTimeFormat = format.config.time && format.config.time.check;
+        const dateParseFormat = format.config.format;
+        const dateParseOption = format.config.date && format.config.date.value;
+        const timeParseOption = format.config.time && format.config.time.value;
+        const timeParseFormat = format.config.time && format.config.time.timeFormat;
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, datetimeFormatSettings: {
+                hasDateFormat,
+                hasTimeFormat,
+                dateParseFormat,
+                dateParseOption,
+                timeParseOption,
+                timeParseFormat,
+                dateFormatString: getStringFormatDateDF({
+                    hasDateFormat,
+                    hasTimeFormat,
+                    dateParseFormat,
+                    dateParseOption,
+                    timeParseOption,
+                    timeParseFormat,
+                }),
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    else if (dataIn.dataType === 'number') {
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, numberFormatSettings: {
+                currencyCode: dataIn.format.config.currency,
+                decimalPlaces: dataIn.format.config.decimalPlace || 0,
+                grouping: dataIn.format.config.group === 'space' ? ' ' : dataIn.format.config.group || ',',
+                decimal: dataIn.format.config.decimal || '.',
+                isCompact: dataIn.format.config.isCompactNumber || false,
+                prefixType: dataIn.format.config.prefixType,
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    return dataOut;
+};
+export const regexAttrFormat = /#|{|}|".+?"|\||"/g;
+export const getBgColorByContentSourceType = (type) => {
+    let bgColor = '#E8FECA';
+    switch (type) {
+        case DYNAMIC_CONTENT_TYPE_KEY.BO_SETTINGS: {
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.VISITOR_ATTRIBUTE: {
+            bgColor = '#CAFEDD';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOMER_ATTRIBUTE: {
+            bgColor = '#CAE5FE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.EVENT_ATTRIBUTE: {
+            bgColor = '#FECACA';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.PROMOTION_CODE: {
+            bgColor = '#D8CAFE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOM_FUNCTION: {
+            bgColor = '#BBEFBE';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return bgColor;
+};