@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.14

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

@@ -1,516 +1,516 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-// Libraries
-import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, useMemo, } from 'react';
-import classnames from 'classnames';
-import { has, isEmpty, omit } from 'lodash';
-// Components
-import CaretPositioning from './EditCaretPositioning';
-import { WrapperInputStyle, TooltipHover, DynamicItem } from './styled';
-import { Popover } from 'antd';
-import { AddDynamicContent } from '../../molecules/AddDynamicContent';
-import { PopupShortLink } from './PopupShortLink';
-import Icon from '@antscorp/icons';
-// Utils
-import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils';
-import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, getInsertPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, mapLabelPersonalization, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, createElement, getBgColorByContentSourceType, } from './utils';
-// Hooks
-import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
-export const AllowDynamicType = {
-    SHORTLINK: 'shortlink',
-    ADDPERSONALIZATION: 'addPersonalization',
-};
-const defaultProps = {
-    value: '',
-    isViewMode: false,
-    isRealTime: true,
-    errors: [],
-    ms: 450,
-    canMultipleLine: false,
-    apiConfig: {
-        domain: 'https://sandbox-media-template.antsomi.com/cdp',
-        slug: '/api/v1',
-        token: '5474r2x214z2a4b403e4y446p4b4t2b4t474j4t2i5',
-        accountId: '1600085679',
-        userId: '1600085679',
-    },
-    disabled: false,
-    showIndex: true,
-    showDisplayFormat: true,
-    isShowCustomFunction: true,
-    onError: () => { },
-    onChange: () => { },
-    addMessageToQueue: () => { },
-};
-export const InputDynamic = (props) => {
-    const { value, isViewMode, isRealTime, ms, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
-    // States
-    const [textValue, setTextValue] = useState(initialValue(value));
-    const [initSelectedProperties, setInitSelectedProperties] = useState({
-        keyTag: 'shortlink_static',
-        link: '',
-        urlDetected: '',
-    });
-    const [isShowPopover, setIsShowPopover] = useState(false);
-    const [dynamicContent, setDynamicContent] = useState({
-        visible: false,
-        defaultData: {},
-        activeTagId: '',
-        contentSources: {
-            groups: [],
-            expanded: [],
-            isLoadingDataBO: false,
-        },
-        journeySettings: {
-            unsubscribeSegmentType: 'customer',
-            triggerType: 'event_based',
-            triggerEvent: {
-                eventActionId: '',
-                eventCategoryId: '',
-                insightPropertyIds: [],
-            },
-        },
-    });
-    const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
-    const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
-    // Refs
-    const caretPositionRef = useRef(null);
-    const timerRef = useRef();
-    const personalizationInputRef = useRef(null);
-    const isRenderAddDynamicContent = useMemo(() => {
-        if (isEmpty(apiConfig) ||
-            isEmpty(allowDynamicOptions) ||
-            (allowDynamicOptions &&
-                allowDynamicOptions.findIndex(dynamicKey => dynamicKey === AllowDynamicType.ADDPERSONALIZATION) === -1))
-            return false;
-        return true;
-    }, [apiConfig, allowDynamicOptions]);
-    const onTriggerChange = (event = null) => {
-        var _a;
-        try {
-            let tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
-            if (event !== null) {
-                caretPositionRef.current = CaretPositioning.saveSelection(event.currentTarget);
-                tmp = event.currentTarget.innerHTML;
-            }
-            tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
-            // replace old non tracking url to detect url
-            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
-                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)(?![^ ])/);
-                if (url) {
-                    return `<span id="${random(5)}" class="detect-url">${url[1]}</span>`;
-                }
-                return match; // If no match found, return the original string
-            }).replace(
-            // replace url to detect url
-            /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, match => `<span id="${random(5)}" class="detect-url">${match}</span>`);
-            tmp = convertDivToBreakTag(tmp);
-            setTextValue(tmp);
-            const text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
-            const textConverted = convertBreakTag(text);
-            onChange(removeHtmlTag(textConverted));
-        }
-        catch (error) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
-                    func: 'onTriggerChange',
-                    data: error,
-                });
-            }
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-    };
-    const handleHidePopover = () => {
-        setIsShowPopover(false);
-    };
-    const handleOpenChangeAddDynamicContent = useCallback((newChange) => {
-        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
-    }, []);
-    const handleOpenChange = (newOpen) => {
-        if (disabled)
-            return;
-        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
-        setIsShowPopover(newOpen);
-    };
-    const callback = (type, data) => {
-        var _a, _b;
-        switch (type) {
-            case 'REPLACE_DETECTED_URL': {
-                const innerHTML = getObjectPropSafely(() => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
-                if (innerHTML) {
-                    // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
-                    const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
-                    const range = document.createRange(); // Tạo một đối tượng Range
-                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
-                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
-                    personalizationInputRef.current.innerHTML = newDataUpdate;
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const handleChangeInputDebounce = (ms) => {
-        clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-            caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-            onTriggerChange();
-        }, ms);
-    };
-    const onPaste = (e) => {
-        var _a;
-        // cancel paste
-        e.preventDefault();
-        // get text representation of clipboard
-        const text = (e.originalEvent || e).clipboardData.getData('text/plain');
-        handleChangeInputDebounce(ms);
-        // insert text manually
-        document.execCommand('insertHTML', false, text);
-        (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleInsertSortLink = (url, type) => {
-        try {
-            const { id, value: linkValue, label: linkLabel } = genShortLinkValue(url, type);
-            setPopoverOpenShortLink(false);
-            if (personalizationInputRef.current instanceof HTMLElement) {
-                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
-                pasteHtmlAtCaret(getInsertLinkPatternWithAppendSpaceEnd(id, linkValue, linkLabel), null);
-                onTriggerChange();
-                caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-            }
-            setInitSelectedProperties({ link: '', keyTag: 'shortlink_static', urlDetected: '' });
-        }
-        catch (err) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
-                    func: 'handleInsertText',
-                    data: err,
-                });
-            }
-        }
-    };
-    const handleCloseAddDynamicContent = () => {
-        setDynamicContent(Object.assign(Object.assign({}, dynamicContent), { visible: false }));
-    };
-    const handleInsertText = (dataObj) => {
-        try {
-            const id = random(5);
-            const { mappingFields = '', type = '', attribute = {}, customFunction = {} } = dataObj;
-            const isCustom = type === 'custom';
-            const personalizationCode = isCustom ? mappingFields : `#{${mappingFields}||""}`;
-            const bgColor = getBgColorByContentSourceType(type);
-            const label = getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label);
-            if (personalizationInputRef.current instanceof HTMLElement) {
-                if (dynamicContent.activeTagId) {
-                    // for case update
-                    const element = document.getElementById(dynamicContent.activeTagId);
-                    const child = createElement('em', {
-                        class: 'editor-icon-remove',
-                        style: 'color: white;font-style: normal;',
-                    }, ['x']);
-                    const newElement = createElement('button', {
-                        id,
-                        class: 'insert-word',
-                        style: `color: white; font-size: inherit; outline: none;border: 1px solid transparent; border-radius: 1.2rem; max-height: 30px; cursor: pointer; backgroundColor: ${bgColor}`,
-                        contentEditable: 'false',
-                        value: `${personalizationCode.replace(/\s/gm, '&nbsp;')}`,
-                    }, [
-                        `${getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label)} `,
-                        child,
-                    ]);
-                    if (element && element.parentNode) {
-                        element.parentNode.replaceChild(newElement, element);
-                    }
-                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: dynamicContent.activeTagId, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [dynamicContent.activeTagId]: dataObj }), visible: false })));
-                    onTriggerChange();
-                    return;
-                }
-                personalizationInputRef.current.focus();
-                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
-                pasteHtmlAtCaret(getInsertPatternWithAppendSpaceEnd(id, personalizationCode, label, bgColor), null, () => {
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    onTriggerChange();
-                });
-                setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [id]: dataObj }), visible: false })));
-            }
-        }
-        catch (error) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: PATH,
-                    func: 'handleInsertText',
-                    data: error,
-                });
-            }
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    const handleKeyPress = (e) => {
-        if (isRealTime) {
-            handleChangeInputDebounce(ms);
-        }
-        if (canMultipleLine)
-            return;
-        if (+e.charCode === 13) {
-            e.preventDefault();
-        }
-    };
-    const getDangerouslySetInnerHTML = (text) => {
-        if (text) {
-            const regex = /<[^<>]+>/g;
-            let tag;
-            // eslint-disable-next-line no-cond-assign
-            while ((tag = regex.exec(text))) {
-                if (!validateHTMLTags.isValidTag(tag[0])) {
-                    const finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
-                    text = text.replace(tag[0], finalTag);
-                }
-            }
-            text = text.replaceAll('\n', '<br>');
-            if (spacingNonTracking(text)) {
-                return text;
-            }
-            return safeParse(text, '').concat('<br />');
-        }
-        return '';
-    };
-    const toggleShortLinkModal = useCallback(() => {
-        setPopoverOpenShortLink(!popoverOpenShortLink);
-    }, [popoverOpenShortLink]);
-    const handleClickDynamicItem = (e, dynamicKey) => {
-        e.stopPropagation();
-        handleHidePopover();
-        if (dynamicKey === AllowDynamicType.SHORTLINK) {
-            toggleShortLinkModal();
-        }
-        if (dynamicKey === AllowDynamicType.ADDPERSONALIZATION) {
-            handleOpenChangeAddDynamicContent(true);
-        }
-    };
-    /**
-     * [NOTE:open modal to edit]
-     */
-    useEffect(() => {
-        const handleClickTag = (e) => {
-            try {
-                e.stopPropagation();
-                if (e.target) {
-                    const { value = '', id = '' } = e.target;
-                    const shortLink = value.replace(/#|{|}|/g, '').split('(');
-                    if (shortLink && shortLink.length >= 2) {
-                        const link = shortLink[1].substring(0, shortLink[1].length - 1) || '';
-                        setInitSelectedProperties(prev => (Object.assign(Object.assign({}, prev), { link, keyTag: shortLink[0], urlDetected: e.currentTarget })));
-                        toggleShortLinkModal();
-                    }
-                    else {
-                        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id })));
-                        handleOpenChangeAddDynamicContent(true);
-                    }
-                }
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.log('err', err);
-            }
-        };
-        const listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
-        if (listTags && listTags.length > 0) {
-            listTags.forEach((tag) => {
-                tag.addEventListener('click', handleClickTag);
-            });
-        }
-        return () => {
-            listTags.forEach((tag) => {
-                tag.removeEventListener('click', handleClickTag);
-            });
-        };
-    }, [handleOpenChangeAddDynamicContent, textValue, toggleShortLinkModal]);
-    /** Anchor tooltip */
-    useEffect(() => {
-        let listElement = [];
-        const handleMouseOver = (e, targetRect) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            const viewportTop = window.pageYOffset;
-            const viewportLeft = window.pageXOffset;
-            const offsetWidth = targetRect.width / 2;
-            const offsetHeight = targetRect.height / 2;
-            const tooltipHeight = 16;
-            const x = targetRect.left - viewportLeft + offsetWidth;
-            const y = targetRect.top - viewportTop - offsetHeight - tooltipHeight;
-            setTooltipHover({
-                x,
-                y,
-            });
-        };
-        const handleMouseOut = (e) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setTooltipHover({ x: 0, y: 0 });
-        };
-        const handleClickDetectUrl = (e) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setInitSelectedProperties(prev => {
-                var _a;
-                return (Object.assign(Object.assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
-            });
-            toggleShortLinkModal();
-        };
-        if (!isViewMode) {
-            const elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
-            listElement = Array.from(elements);
-            if (listElement.length) {
-                listElement.forEach((element) => {
-                    element.addEventListener('mouseover', e => handleMouseOver(e, element.getBoundingClientRect()));
-                    element.addEventListener('mouseout', handleMouseOut);
-                    /** Open shortlink modal */
-                    element.addEventListener('click', handleClickDetectUrl);
-                });
-            }
-        }
-        return () => {
-            listElement.forEach((element) => {
-                element.removeEventListener('mouseover', handleMouseOver);
-                element.removeEventListener('mouseout', handleMouseOut);
-            });
-        };
-    }, [textValue, isViewMode, setTooltipHover, toggleShortLinkModal]);
-    /** Style & remove for tag shortlink button & icon remove */
-    useLayoutEffect(() => {
-        // get button Els [x] to create hover and style it
-        const iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
-        const listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
-        // get button elements
-        const buttonElement = document.querySelectorAll('.insert-word');
-        const listBtnElement = buttonElement && Array.from(buttonElement);
-        const handleRemoveTag = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
-                e.stopPropagation();
-                if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) &&
-                    has(dynamicContent.defaultData, [(_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.id])) {
-                    setDynamicContent(prev => {
-                        var _a, _b;
-                        return (Object.assign(Object.assign({}, prev), { activeTagId: '', defaultData: omit(prev.defaultData, [(_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id]) }));
-                    });
-                }
-                (_g = (_f = e.target) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.remove();
-                setTextValue(personalizationInputRef && ((_h = personalizationInputRef.current) === null || _h === void 0 ? void 0 : _h.innerHTML));
-            }
-        };
-        listIconRemove.forEach(eachIcon => {
-            eachIcon.addEventListener('click', handleRemoveTag);
-        });
-        handleUpdateInputPersonalization(listIconRemove, listBtnElement);
-        return () => {
-            listIconRemove.forEach(eachIcon => {
-                eachIcon.removeEventListener('click', handleRemoveTag);
-            });
-        };
-    }, [dynamicContent.defaultData, textValue]);
-    useLayoutEffect(() => {
-        try {
-            // save caret position
-            if (!personalizationInputRef.current) {
-                return;
-            }
-            // Perhaps React (whose VDOM gets outdated because we often prevent
-            // rerendering) did not update the DOM. So we update it manually now.
-            if (caretPositionRef && caretPositionRef.current) {
-                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
-            }
-        }
-        catch (error) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: PATH,
-                    func: 'useLayoutEffect',
-                    data: error,
-                });
-            }
-            if (typeof onError === 'function') {
-                onError(error, {
-                    component: PATH,
-                    action: 'useLayoutEffect saved caret position',
-                    args: {},
-                });
-            }
-        }
-    }, [addMessageToQueue, onError, textValue]);
-    const renderContentDynamicOptions = () => {
-        if (!(allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length)) {
-            return null;
-        }
-        return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
-    };
-    const renderAddPersonalizationView = () => {
-        var _a, _b;
-        if (isViewMode) {
-            return null;
-        }
-        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 1;
-        const isOnlyOneOpt = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) === 1;
-        const hasOnlyPersonalization = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.ADDPERSONALIZATION));
-        const hasOnlyShortlink = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.SHORTLINK));
-        const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
-                e.stopPropagation();
-                if (disabled || isRenderPopover)
-                    return;
-                // Open short link modal
-                if (hasOnlyShortlink) {
-                    toggleShortLinkModal();
-                }
-                else if (hasOnlyPersonalization) {
-                    // Open Personalization modal
-                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '', visible: true })));
-                }
-                else {
-                    toggleShortLinkModal();
-                }
-            }, className: "customize-antsomi-profile", style: {
-                width: 24,
-                height: 24,
-                color: disabled ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-                cursor: disabled ? 'not-allowed' : 'pointer',
-            } }));
-        if (!isRenderPopover) {
-            return iconPersonalization;
-        }
-        return (React.createElement(Popover, { content: renderContentDynamicOptions(), placement: "bottomLeft", rootClassName: "no-padding-content", trigger: "click", open: isShowPopover, onOpenChange: handleOpenChange }, iconPersonalization));
-    };
-    return (React.createElement(WrapperInputStyle, { id: "ants-ui-input-personalization" },
-        React.createElement("div", { className: classnames({
-                'input-wrapper-outter': true,
-                'styles-input-wrapper': !isViewMode,
-                'input-error': (errors === null || errors === void 0 ? void 0 : errors.length) && (errors === null || errors === void 0 ? void 0 : errors.length) > 0,
-            }), style: Object.assign(Object.assign({}, (isViewMode && {
-                padding: 0,
-                minHeight: 0,
-                fontSize: 12,
-                border: 'none',
-            })), { width: '100%' }), onClick: () => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
-            React.createElement("div", { className: "input-personal", style: {
-                    display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
-                }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: getDangerouslySetInnerHTML(textValue),
-                }, onPaste: onPaste }),
-            renderAddPersonalizationView()),
-        React.createElement(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x }, "Click on the link to convert it to a shortlink"),
-        popoverOpenShortLink && (React.createElement(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback })),
-        isRenderAddDynamicContent && (React.createElement(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: showIndex, showDisplayFormat: showDisplayFormat, isShowCustomFunction: isShowCustomFunction, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
-                handleInsertText(value);
-            }, onCancel: () => handleCloseAddDynamicContent() }))));
-};
-InputDynamic.defaultProps = defaultProps;
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+// Libraries
+import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, useMemo, } from 'react';
+import classnames from 'classnames';
+import { has, isEmpty, omit } from 'lodash';
+// Components
+import CaretPositioning from './EditCaretPositioning';
+import { WrapperInputStyle, TooltipHover, DynamicItem } from './styled';
+import { Popover } from 'antd';
+import { AddDynamicContent } from '../../molecules/AddDynamicContent';
+import { PopupShortLink } from './PopupShortLink';
+import Icon from '@antscorp/icons';
+// Utils
+import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils';
+import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, getInsertPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, mapLabelPersonalization, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, createElement, getBgColorByContentSourceType, } from './utils';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
+export const AllowDynamicType = {
+    SHORTLINK: 'shortlink',
+    ADDPERSONALIZATION: 'addPersonalization',
+};
+const defaultProps = {
+    value: '',
+    isViewMode: false,
+    isRealTime: true,
+    errors: [],
+    ms: 450,
+    canMultipleLine: false,
+    apiConfig: {
+        domain: 'https://sandbox-media-template.antsomi.com/cdp',
+        slug: '/api/v1',
+        token: '5474r2x214z2a4b403e4y446p4b4t2b4t474j4t2i5',
+        accountId: '1600085679',
+        userId: '1600085679',
+    },
+    disabled: false,
+    showIndex: true,
+    showDisplayFormat: true,
+    isShowCustomFunction: true,
+    onError: () => { },
+    onChange: () => { },
+    addMessageToQueue: () => { },
+};
+export const InputDynamic = (props) => {
+    const { value, isViewMode, isRealTime, ms, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
+    // States
+    const [textValue, setTextValue] = useState(initialValue(value));
+    const [initSelectedProperties, setInitSelectedProperties] = useState({
+        keyTag: 'shortlink_static',
+        link: '',
+        urlDetected: '',
+    });
+    const [isShowPopover, setIsShowPopover] = useState(false);
+    const [dynamicContent, setDynamicContent] = useState({
+        visible: false,
+        defaultData: {},
+        activeTagId: '',
+        contentSources: {
+            groups: [],
+            expanded: [],
+            isLoadingDataBO: false,
+        },
+        journeySettings: {
+            unsubscribeSegmentType: 'customer',
+            triggerType: 'event_based',
+            triggerEvent: {
+                eventActionId: '',
+                eventCategoryId: '',
+                insightPropertyIds: [],
+            },
+        },
+    });
+    const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
+    const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
+    // Refs
+    const caretPositionRef = useRef(null);
+    const timerRef = useRef();
+    const personalizationInputRef = useRef(null);
+    const isRenderAddDynamicContent = useMemo(() => {
+        if (isEmpty(apiConfig) ||
+            isEmpty(allowDynamicOptions) ||
+            (allowDynamicOptions &&
+                allowDynamicOptions.findIndex(dynamicKey => dynamicKey === AllowDynamicType.ADDPERSONALIZATION) === -1))
+            return false;
+        return true;
+    }, [apiConfig, allowDynamicOptions]);
+    const onTriggerChange = (event = null) => {
+        var _a;
+        try {
+            let tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+            if (event !== null) {
+                caretPositionRef.current = CaretPositioning.saveSelection(event.currentTarget);
+                tmp = event.currentTarget.innerHTML;
+            }
+            tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
+            // replace old non tracking url to detect url
+            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
+                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)(?![^ ])/);
+                if (url) {
+                    return `<span id="${random(5)}" class="detect-url">${url[1]}</span>`;
+                }
+                return match; // If no match found, return the original string
+            }).replace(
+            // replace url to detect url
+            /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, match => `<span id="${random(5)}" class="detect-url">${match}</span>`);
+            tmp = convertDivToBreakTag(tmp);
+            setTextValue(tmp);
+            const text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
+            const textConverted = convertBreakTag(text);
+            onChange(removeHtmlTag(textConverted));
+        }
+        catch (error) {
+            if (typeof addMessageToQueue === 'function') {
+                addMessageToQueue({
+                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
+                    func: 'onTriggerChange',
+                    data: error,
+                });
+            }
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    };
+    const handleHidePopover = () => {
+        setIsShowPopover(false);
+    };
+    const handleOpenChangeAddDynamicContent = useCallback((newChange) => {
+        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
+    }, []);
+    const handleOpenChange = (newOpen) => {
+        if (disabled)
+            return;
+        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
+        setIsShowPopover(newOpen);
+    };
+    const callback = (type, data) => {
+        var _a, _b;
+        switch (type) {
+            case 'REPLACE_DETECTED_URL': {
+                const innerHTML = getObjectPropSafely(() => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
+                if (innerHTML) {
+                    // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
+                    const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
+                    const range = document.createRange(); // Tạo một đối tượng Range
+                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
+                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
+                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
+                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
+                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
+                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                    personalizationInputRef.current.innerHTML = newDataUpdate;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const handleChangeInputDebounce = (ms) => {
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+            onTriggerChange();
+        }, ms);
+    };
+    const onPaste = (e) => {
+        var _a;
+        // cancel paste
+        e.preventDefault();
+        // get text representation of clipboard
+        const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        handleChangeInputDebounce(ms);
+        // insert text manually
+        document.execCommand('insertHTML', false, text);
+        (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInsertSortLink = (url, type) => {
+        try {
+            const { id, value: linkValue, label: linkLabel } = genShortLinkValue(url, type);
+            setPopoverOpenShortLink(false);
+            if (personalizationInputRef.current instanceof HTMLElement) {
+                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
+                pasteHtmlAtCaret(getInsertLinkPatternWithAppendSpaceEnd(id, linkValue, linkLabel), null);
+                onTriggerChange();
+                caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+            }
+            setInitSelectedProperties({ link: '', keyTag: 'shortlink_static', urlDetected: '' });
+        }
+        catch (err) {
+            if (typeof addMessageToQueue === 'function') {
+                addMessageToQueue({
+                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
+                    func: 'handleInsertText',
+                    data: err,
+                });
+            }
+        }
+    };
+    const handleCloseAddDynamicContent = () => {
+        setDynamicContent(Object.assign(Object.assign({}, dynamicContent), { visible: false }));
+    };
+    const handleInsertText = (dataObj) => {
+        try {
+            const id = random(5);
+            const { mappingFields = '', type = '', attribute = {}, customFunction = {} } = dataObj;
+            const isCustom = type === 'custom';
+            const personalizationCode = isCustom ? mappingFields : `#{${mappingFields}||""}`;
+            const bgColor = getBgColorByContentSourceType(type);
+            const label = getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label);
+            if (personalizationInputRef.current instanceof HTMLElement) {
+                if (dynamicContent.activeTagId) {
+                    // for case update
+                    const element = document.getElementById(dynamicContent.activeTagId);
+                    const child = createElement('em', {
+                        class: 'editor-icon-remove',
+                        style: 'color: white;font-style: normal;',
+                    }, ['x']);
+                    const newElement = createElement('button', {
+                        id,
+                        class: 'insert-word',
+                        style: `color: white; font-size: inherit; outline: none;border: 1px solid transparent; border-radius: 1.2rem; max-height: 30px; cursor: pointer; backgroundColor: ${bgColor}`,
+                        contentEditable: 'false',
+                        value: `${personalizationCode.replace(/\s/gm, '&nbsp;')}`,
+                    }, [
+                        `${getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label)} `,
+                        child,
+                    ]);
+                    if (element && element.parentNode) {
+                        element.parentNode.replaceChild(newElement, element);
+                    }
+                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: dynamicContent.activeTagId, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [dynamicContent.activeTagId]: dataObj }), visible: false })));
+                    onTriggerChange();
+                    return;
+                }
+                personalizationInputRef.current.focus();
+                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
+                pasteHtmlAtCaret(getInsertPatternWithAppendSpaceEnd(id, personalizationCode, label, bgColor), null, () => {
+                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                    onTriggerChange();
+                });
+                setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [id]: dataObj }), visible: false })));
+            }
+        }
+        catch (error) {
+            if (typeof addMessageToQueue === 'function') {
+                addMessageToQueue({
+                    path: PATH,
+                    func: 'handleInsertText',
+                    data: error,
+                });
+            }
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (isRealTime) {
+            handleChangeInputDebounce(ms);
+        }
+        if (canMultipleLine)
+            return;
+        if (+e.charCode === 13) {
+            e.preventDefault();
+        }
+    };
+    const getDangerouslySetInnerHTML = (text) => {
+        if (text) {
+            const regex = /<[^<>]+>/g;
+            let tag;
+            // eslint-disable-next-line no-cond-assign
+            while ((tag = regex.exec(text))) {
+                if (!validateHTMLTags.isValidTag(tag[0])) {
+                    const finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
+                    text = text.replace(tag[0], finalTag);
+                }
+            }
+            text = text.replaceAll('\n', '<br>');
+            if (spacingNonTracking(text)) {
+                return text;
+            }
+            return safeParse(text, '').concat('<br />');
+        }
+        return '';
+    };
+    const toggleShortLinkModal = useCallback(() => {
+        setPopoverOpenShortLink(!popoverOpenShortLink);
+    }, [popoverOpenShortLink]);
+    const handleClickDynamicItem = (e, dynamicKey) => {
+        e.stopPropagation();
+        handleHidePopover();
+        if (dynamicKey === AllowDynamicType.SHORTLINK) {
+            toggleShortLinkModal();
+        }
+        if (dynamicKey === AllowDynamicType.ADDPERSONALIZATION) {
+            handleOpenChangeAddDynamicContent(true);
+        }
+    };
+    /**
+     * [NOTE:open modal to edit]
+     */
+    useEffect(() => {
+        const handleClickTag = (e) => {
+            try {
+                e.stopPropagation();
+                if (e.target) {
+                    const { value = '', id = '' } = e.target;
+                    const shortLink = value.replace(/#|{|}|/g, '').split('(');
+                    if (shortLink && shortLink.length >= 2) {
+                        const link = shortLink[1].substring(0, shortLink[1].length - 1) || '';
+                        setInitSelectedProperties(prev => (Object.assign(Object.assign({}, prev), { link, keyTag: shortLink[0], urlDetected: e.currentTarget })));
+                        toggleShortLinkModal();
+                    }
+                    else {
+                        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id })));
+                        handleOpenChangeAddDynamicContent(true);
+                    }
+                }
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.log('err', err);
+            }
+        };
+        const listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
+        if (listTags && listTags.length > 0) {
+            listTags.forEach((tag) => {
+                tag.addEventListener('click', handleClickTag);
+            });
+        }
+        return () => {
+            listTags.forEach((tag) => {
+                tag.removeEventListener('click', handleClickTag);
+            });
+        };
+    }, [handleOpenChangeAddDynamicContent, textValue, toggleShortLinkModal]);
+    /** Anchor tooltip */
+    useEffect(() => {
+        let listElement = [];
+        const handleMouseOver = (e, targetRect) => {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            const viewportTop = window.pageYOffset;
+            const viewportLeft = window.pageXOffset;
+            const offsetWidth = targetRect.width / 2;
+            const offsetHeight = targetRect.height / 2;
+            const tooltipHeight = 16;
+            const x = targetRect.left - viewportLeft + offsetWidth;
+            const y = targetRect.top - viewportTop - offsetHeight - tooltipHeight;
+            setTooltipHover({
+                x,
+                y,
+            });
+        };
+        const handleMouseOut = (e) => {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            setTooltipHover({ x: 0, y: 0 });
+        };
+        const handleClickDetectUrl = (e) => {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            setInitSelectedProperties(prev => {
+                var _a;
+                return (Object.assign(Object.assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
+            });
+            toggleShortLinkModal();
+        };
+        if (!isViewMode) {
+            const elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
+            listElement = Array.from(elements);
+            if (listElement.length) {
+                listElement.forEach((element) => {
+                    element.addEventListener('mouseover', e => handleMouseOver(e, element.getBoundingClientRect()));
+                    element.addEventListener('mouseout', handleMouseOut);
+                    /** Open shortlink modal */
+                    element.addEventListener('click', handleClickDetectUrl);
+                });
+            }
+        }
+        return () => {
+            listElement.forEach((element) => {
+                element.removeEventListener('mouseover', handleMouseOver);
+                element.removeEventListener('mouseout', handleMouseOut);
+            });
+        };
+    }, [textValue, isViewMode, setTooltipHover, toggleShortLinkModal]);
+    /** Style & remove for tag shortlink button & icon remove */
+    useLayoutEffect(() => {
+        // get button Els [x] to create hover and style it
+        const iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
+        const listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
+        // get button elements
+        const buttonElement = document.querySelectorAll('.insert-word');
+        const listBtnElement = buttonElement && Array.from(buttonElement);
+        const handleRemoveTag = (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
+                e.stopPropagation();
+                if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) &&
+                    has(dynamicContent.defaultData, [(_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.id])) {
+                    setDynamicContent(prev => {
+                        var _a, _b;
+                        return (Object.assign(Object.assign({}, prev), { activeTagId: '', defaultData: omit(prev.defaultData, [(_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id]) }));
+                    });
+                }
+                (_g = (_f = e.target) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.remove();
+                setTextValue(personalizationInputRef && ((_h = personalizationInputRef.current) === null || _h === void 0 ? void 0 : _h.innerHTML));
+            }
+        };
+        listIconRemove.forEach(eachIcon => {
+            eachIcon.addEventListener('click', handleRemoveTag);
+        });
+        handleUpdateInputPersonalization(listIconRemove, listBtnElement);
+        return () => {
+            listIconRemove.forEach(eachIcon => {
+                eachIcon.removeEventListener('click', handleRemoveTag);
+            });
+        };
+    }, [dynamicContent.defaultData, textValue]);
+    useLayoutEffect(() => {
+        try {
+            // save caret position
+            if (!personalizationInputRef.current) {
+                return;
+            }
+            // Perhaps React (whose VDOM gets outdated because we often prevent
+            // rerendering) did not update the DOM. So we update it manually now.
+            if (caretPositionRef && caretPositionRef.current) {
+                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
+            }
+        }
+        catch (error) {
+            if (typeof addMessageToQueue === 'function') {
+                addMessageToQueue({
+                    path: PATH,
+                    func: 'useLayoutEffect',
+                    data: error,
+                });
+            }
+            if (typeof onError === 'function') {
+                onError(error, {
+                    component: PATH,
+                    action: 'useLayoutEffect saved caret position',
+                    args: {},
+                });
+            }
+        }
+    }, [addMessageToQueue, onError, textValue]);
+    const renderContentDynamicOptions = () => {
+        if (!(allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length)) {
+            return null;
+        }
+        return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
+    };
+    const renderAddPersonalizationView = () => {
+        var _a, _b;
+        if (isViewMode) {
+            return null;
+        }
+        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 1;
+        const isOnlyOneOpt = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) === 1;
+        const hasOnlyPersonalization = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.ADDPERSONALIZATION));
+        const hasOnlyShortlink = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.SHORTLINK));
+        const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
+                e.stopPropagation();
+                if (disabled || isRenderPopover)
+                    return;
+                // Open short link modal
+                if (hasOnlyShortlink) {
+                    toggleShortLinkModal();
+                }
+                else if (hasOnlyPersonalization) {
+                    // Open Personalization modal
+                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '', visible: true })));
+                }
+                else {
+                    toggleShortLinkModal();
+                }
+            }, className: "customize-antsomi-profile", style: {
+                width: 24,
+                height: 24,
+                color: disabled ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+                cursor: disabled ? 'not-allowed' : 'pointer',
+            } }));
+        if (!isRenderPopover) {
+            return iconPersonalization;
+        }
+        return (React.createElement(Popover, { content: renderContentDynamicOptions(), placement: "bottomLeft", rootClassName: "no-padding-content", trigger: "click", open: isShowPopover, onOpenChange: handleOpenChange }, iconPersonalization));
+    };
+    return (React.createElement(WrapperInputStyle, { id: "ants-ui-input-personalization" },
+        React.createElement("div", { className: classnames({
+                'input-wrapper-outter': true,
+                'styles-input-wrapper': !isViewMode,
+                'input-error': (errors === null || errors === void 0 ? void 0 : errors.length) && (errors === null || errors === void 0 ? void 0 : errors.length) > 0,
+            }), style: Object.assign(Object.assign({}, (isViewMode && {
+                padding: 0,
+                minHeight: 0,
+                fontSize: 12,
+                border: 'none',
+            })), { width: '100%' }), onClick: () => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+            React.createElement("div", { className: "input-personal", style: {
+                    display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
+                }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: getDangerouslySetInnerHTML(textValue),
+                }, onPaste: onPaste }),
+            renderAddPersonalizationView()),
+        React.createElement(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x }, "Click on the link to convert it to a shortlink"),
+        popoverOpenShortLink && (React.createElement(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback })),
+        isRenderAddDynamicContent && (React.createElement(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: showIndex, showDisplayFormat: showDisplayFormat, isShowCustomFunction: isShowCustomFunction, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
+                handleInsertText(value);
+            }, onCancel: () => handleCloseAddDynamicContent() }))));
+};
+InputDynamic.defaultProps = defaultProps;