@antscorp/antsomi-ui 1.3.3-beta.6 → 1.3.3-beta.60

package/es/components/atoms/Button/index.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-export declare const Button: import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const Button: import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 };

package/es/components/atoms/Empty/Empty.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export declare const Empty: import("react").FC<import("antd").EmptyProps> & {
-    PRESENTED_IMAGE_DEFAULT: import("react").ReactNode;
-    PRESENTED_IMAGE_SIMPLE: import("react").ReactNode;
-};
+import React from 'react';
+import { EmptyProps } from 'antd';
+export interface IEmpty extends EmptyProps {
+    loading?: boolean;
+}
+export declare const Empty: React.FC<IEmpty>;

package/es/components/atoms/Empty/Empty.js

@@ -1,2 +1,8 @@
+import React from 'react';
 import { Empty as AntdEmpty } from 'antd';
-export const Empty = AntdEmpty;
+import { Spin } from '../Spin';
+import { LoadingOutlined } from '@ant-design/icons';
+export const Empty = props => {
+    const { loading, description } = props;
+    return (React.createElement(AntdEmpty, Object.assign({}, props, { description: loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (description) })));
+};

package/es/components/atoms/Flex/Flex.d.ts

@@ -0,0 +1,2 @@
+export { Flex } from 'antd';
+export type { FlexProps } from 'antd';

package/es/components/atoms/Flex/Flex.js

@@ -0,0 +1 @@
+export { Flex } from 'antd';

package/es/components/atoms/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from './Flex';

package/es/components/atoms/Flex/index.js

@@ -0,0 +1 @@
+export * from './Flex';

package/es/components/atoms/Input/Input.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -7,14 +8,24 @@ export interface InputProps extends AntdInputProps {
     onAfterChange?: (value: any) => void;
     errorArchive?: string;
     required?: boolean;
+    isReverseMask?: boolean;
+    labelColor?: string;
+    isHideErrMessage?: boolean;
     focused?: boolean;
     errorMsg?: string;
     disableUndo?: boolean;
 }
-export declare const Input: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
     Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
     Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Group: React.FC<import("antd/es/input").GroupProps>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+}, {}> & {
+    DefaultInput: typeof AntdInput;
+};
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;

package/es/components/atoms/Input/Input.js

@@ -13,6 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+// Types
+import { Input as AntdInput } from 'antd';
 // Components
 import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
@@ -22,7 +24,7 @@ import { StyledInput } from './styled';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = props => {
     // Props
-    const { debounce, errorArchive, required, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -66,7 +68,7 @@ const OriginInput = props => {
     };
     const renderRequiredLabel = (label) => {
         if (required) {
-            return (React.createElement(RequiredLabel, { color: "#666666", style: { marginBottom: 5 } }, label));
+            return (React.createElement(RequiredLabel, { isReverseMask: isReverseMask, color: labelColor || '#666666', style: { marginBottom: 5 } }, label));
         }
         return (React.createElement(Text, { color: "#666666", style: { marginBottom: 5 } }, label));
     };
@@ -82,11 +84,13 @@ const OriginInput = props => {
                 }
                 restProps.onBlur && restProps.onBlur(e);
             }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
-        restProps.status === 'error' || errorArchive || requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
+        (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
 };
 OriginInput.defaultProps = {
     debounce: 400,
+    isHideErrMessage: false,
 };
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
+Input.DefaultInput = AntdInput;
 export const { TextArea } = StyledInput;

package/es/components/atoms/InputDynamic/EditCaretPositioning.d.ts

@@ -0,0 +1,2 @@
+declare const EditCaretPositioning: any;
+export default EditCaretPositioning;

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

@@ -0,0 +1,89 @@
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-plusplus */
+/* eslint-disable one-var */
+/* eslint-disable func-names */
+/* eslint-disable object-shorthand */
+/* eslint-disable prefer-const */
+const EditCaretPositioning = {};
+if (window.getSelection && document.createRange) {
+    // saves caret position(s)
+    EditCaretPositioning.saveSelection = function (containerEl) {
+        var _a;
+        try {
+            let range = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+            let preSelectionRange = range === null || range === void 0 ? void 0 : range.cloneRange();
+            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.selectNodeContents(containerEl);
+            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.setEnd(range === null || range === void 0 ? void 0 : range.startContainer, range === null || range === void 0 ? void 0 : range.startOffset);
+            let start = preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.toString().length;
+            return {
+                start: start,
+                end: start + (range === null || range === void 0 ? void 0 : range.toString().length),
+            };
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.log('err:>', e);
+        }
+        return {
+            start: 0,
+            end: 0,
+        };
+    };
+    // restores caret position(s)
+    EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
+        let charIndex = 0, range = document.createRange();
+        range.setStart(containerEl, 0);
+        range.collapse(true);
+        let nodeStack = [containerEl], node, foundStart = false, stop = false;
+        while (!stop && (node = nodeStack.pop())) {
+            if (node.nodeType === 3) {
+                let nextCharIndex = charIndex + node.length;
+                if (!foundStart &&
+                    savedSel &&
+                    savedSel.start >= charIndex &&
+                    savedSel.start <= nextCharIndex) {
+                    range.setStart(node, savedSel.start - charIndex);
+                    foundStart = true;
+                }
+                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
+                    range.setEnd(node, savedSel.end - charIndex);
+                    stop = true;
+                }
+                charIndex = nextCharIndex;
+            }
+            else {
+                let i = node.childNodes.length;
+                while (i--) {
+                    nodeStack.push(node.childNodes[i]);
+                }
+            }
+        }
+        let sel = window.getSelection();
+        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+    };
+}
+else if (document.selection && document.body.createTextRange) {
+    // saves caret position(s)
+    EditCaretPositioning.saveSelection = function (containerEl) {
+        let selectedTextRange = document.selection.createRange();
+        let preSelectionTextRange = document.body.createTextRange();
+        preSelectionTextRange.moveToElementText(containerEl);
+        preSelectionTextRange.setEndPoint('EndToStart', selectedTextRange);
+        let start = preSelectionTextRange.text.length;
+        return {
+            start: start,
+            end: start + selectedTextRange.text.length,
+        };
+    };
+    // restores caret position(s)
+    EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
+        let textRange = document.body.createTextRange();
+        textRange.moveToElementText(containerEl);
+        textRange.collapse(true);
+        textRange.moveEnd('character', savedSel.end);
+        textRange.moveStart('character', savedSel.start);
+        textRange.select();
+    };
+}
+export default EditCaretPositioning;

package/es/components/atoms/InputDynamic/InputDynamic.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DisableShortLinkTypeProps } from './PopupShortLink';
+export type KeyTagType = 'shortlink' | 'shortlink_static';
+export type SelectedPropertiesProps = {
+    keyTag: KeyTagType;
+    link: string;
+    urlDetected: string;
+};
+export type InputDynamicProps = {
+    value: string;
+    isViewMode?: boolean;
+    errors?: string[];
+    disabledOpts?: DisableShortLinkTypeProps;
+    canMultipleLine?: boolean;
+    onError?: Function;
+    onChange: (valueOut: string) => any;
+    addMessageToQueue?: Function;
+};
+export declare const InputDynamic: {
+    (props: InputDynamicProps): React.JSX.Element;
+    defaultProps: {
+        value: string;
+        isViewMode: boolean;
+        errors: never[];
+        canMultipleLine: boolean;
+        onError: () => void;
+        onChange: () => void;
+        addMessageToQueue: () => void;
+    };
+};

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

@@ -0,0 +1,320 @@
+// Libraries
+import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, } from 'react';
+import classnames from 'classnames';
+// Components
+import CaretPositioning from './EditCaretPositioning';
+import { WrapperInputStyle, TooltipHover } from './styled';
+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, handleUpdateInputPersonalization, initialValue, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, } from './utils';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
+const defaultProps = {
+    value: '',
+    isViewMode: false,
+    errors: [],
+    canMultipleLine: false,
+    onError: () => { },
+    onChange: () => { },
+    addMessageToQueue: () => { },
+};
+export const InputDynamic = (props) => {
+    const { value, isViewMode, errors, disabledOpts, canMultipleLine, onError, onChange, addMessageToQueue, } = props;
+    // States
+    const [textValue, setTextValue] = useState(initialValue(value));
+    const [initSelectedProperties, setInitSelectedProperties] = useState({
+        keyTag: 'shortlink_static',
+        link: '',
+        urlDetected: '',
+    });
+    const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
+    const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
+    // Refs
+    const caretPositionRef = useRef(null);
+    const personalizationInputRef = useRef(null);
+    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 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 onPaste = (e) => {
+        // cancel paste
+        e.preventDefault();
+        // get text representation of clipboard
+        const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        // insert text manually
+        document.execCommand('insertHTML', false, text);
+    };
+    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 handleKeyPress = (e) => {
+        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]);
+    /**
+     * [NOTE:open shortlink modal to edit]
+     */
+    useEffect(() => {
+        const handleClickTag = (e) => {
+            try {
+                e.stopPropagation();
+                if (e.target) {
+                    const { value = '' } = 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();
+                    }
+                }
+            }
+            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);
+            });
+        };
+    }, [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;
+            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();
+                (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.remove();
+                setTextValue(personalizationInputRef && ((_e = personalizationInputRef.current) === null || _e === void 0 ? void 0 : _e.innerHTML));
+            }
+        };
+        listIconRemove.forEach(eachIcon => {
+            eachIcon.addEventListener('click', handleRemoveTag);
+        });
+        handleUpdateInputPersonalization(listIconRemove, listBtnElement);
+        return () => {
+            listIconRemove.forEach(eachIcon => {
+                eachIcon.removeEventListener('click', handleRemoveTag);
+            });
+        };
+    }, [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]);
+    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 }),
+            !isViewMode && (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
+                    e.stopPropagation();
+                    toggleShortLinkModal();
+                }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } }))),
+        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 }))));
+};
+InputDynamic.defaultProps = defaultProps;

package/es/components/atoms/InputDynamic/PopupShortLink.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import type { SelectedPropertiesProps } from './InputDynamic';
+type PopupShortLinkProps = {
+    open: any;
+    onClose: Function;
+    onOk: Function;
+    disabledOpts?: DisableShortLinkTypeProps;
+    initSelectedProperties: SelectedPropertiesProps;
+    callback: Function;
+};
+export type ShortLinkType = 'individual' | 'general';
+export type DisableShortLinkTypeProps = {
+    [key in ShortLinkType]?: boolean;
+};
+export declare const PopupShortLink: FC<PopupShortLinkProps>;
+export {};