@antscorp/antsomi-ui 1.3.5-beta.830 → 1.3.5-beta.832

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-param-reassign */
 // Libraries
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import _ from 'lodash';
 // Components & Styled
@@ -18,6 +18,7 @@ const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
 const CommonCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         collectionActive: SMILEYS_BODY,
         txtSearch: '',
@@ -47,10 +48,22 @@ const CommonCollection = ({ onEmojiClick }) => {
             });
         }
     }, [setState]);
+    const onScroll = useCallback((e, collectionLength) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+            setVisibleCount(prev => {
+                const newCount = prev + 30;
+                if (newCount >= collectionLength)
+                    return collectionLength;
+                return newCount;
+            });
+        }
+    }, []);
     const handleChangeSelect = useCallback((newCollection) => {
         setState(draft => {
             draft.collectionActive = newCollection;
         });
+        setVisibleCount(prev => prev + 10);
     }, [setState]);
     useEffect(() => () => {
         setState(() => ({
@@ -72,13 +85,14 @@ const CommonCollection = ({ onEmojiClick }) => {
             (_.isArray(emojiCollection) && emojiCollection.length === 0)) {
             return (_jsx(EmptyEmoji, { image: _jsx(Button, { type: "text", shape: "round", icon: _jsx(EmojiSmileIcon, { color: globalToken?.bw5, style: { width: 30, height: 30 } }), style: { width: 60, height: 60, background: globalToken?.bw2 } }), imageStyle: { height: 60, marginBottom: 15 }, description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "No emoji matches your keyword" }) }));
         }
-        const content = emojiCollection.map((item) => {
+        const list = emojiCollection.slice(0, Math.min(visibleCount, emojiCollection.length));
+        const content = list.map((item) => {
             const { emoji, slug = '', unicode_version: unicodeVersion = '' } = item;
             const key = `${slug}-${unicodeVersion}`;
             return (_jsx(Emoji, { type: "text", onClick: () => onEmojiClick(emoji), children: _jsx("span", { style: { fontSize: '30px' }, children: emoji }) }, key));
         });
-        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
-    }, [emojiCollection, onEmojiClick]);
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiCollection, visibleCount, onScroll, onEmojiClick]);
     return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
 };
 CommonCollection.defaultProps = {

package/es/components/molecules/EmojiCollections/LineCollection/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-param-reassign */
 // Libraries
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
 import { useImmer } from 'use-immer';
 // Components & Styled
@@ -14,6 +14,7 @@ import { LINE_MESSAGE_EMOJIS, TAB_LINE_MESSAGE_EMOJIS } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const LineCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         collectionActive: TAB_LINE_MESSAGE_EMOJIS[0]?.key || '',
     });
@@ -23,7 +24,19 @@ const LineCollection = ({ onEmojiClick }) => {
         setState(draft => {
             draft.collectionActive = newCollection;
         });
+        setVisibleCount(prev => prev + 10);
     }, [setState]);
+    const onScroll = useCallback((e, collectionLength) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+            setVisibleCount(prev => {
+                const newCount = prev + 30;
+                if (newCount >= collectionLength)
+                    return collectionLength;
+                return newCount;
+            });
+        }
+    }, []);
     useEffect(() => () => {
         setState(draft => {
             draft.collectionActive = TAB_LINE_MESSAGE_EMOJIS[0]?.key || '';
@@ -40,13 +53,14 @@ const LineCollection = ({ onEmojiClick }) => {
         if (_.isArray(emojiList) && !emojiList.length) {
             return (_jsx(EmptyEmoji, { image: _jsx(Button, { type: "text", shape: "round", icon: _jsx(EmojiSmileIcon, { color: globalToken?.bw5, style: { width: 30, height: 30 } }), style: { width: 60, height: 60, background: globalToken?.bw2 } }), imageStyle: { height: 60, marginBottom: 15 }, description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "No emoji matches your keyword" }) }));
         }
-        const content = emojiList.map((emojiId) => {
+        const list = emojiList.slice(0, Math.min(visibleCount, emojiList.length));
+        const content = list.map((emojiId) => {
             const src = getLinkLineURLImage(state.collectionActive, emojiId);
             const code = `$((${PREFIX_PATTERN_LINE_MESSAGE}:${state.collectionActive}:${emojiId}))`;
             return (_jsx(Emoji, { type: "text", icon: _jsx(EmojiImage, { src: src, alt: emojiId }), onClick: () => onEmojiClick(code) }, emojiId));
         });
-        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
-    }, [emojiList, state.collectionActive, onEmojiClick]);
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiList.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiList, visibleCount, state.collectionActive, onEmojiClick, onScroll]);
     return (_jsx(WrapperCollection, { children: _jsxs(Flex, { vertical: true, children: [renderLineCategory(), _jsx(EmojiList, { children: renderLineEmoji() })] }) }));
 };
 LineCollection.defaultProps = {

package/es/components/molecules/EmojiCollections/ViberCollection/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-param-reassign */
 // Libraries
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import _ from 'lodash';
 // Hooks
@@ -16,6 +16,7 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const listEmoji = Object.values(iconsViber);
 const ViberCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         txtSearch: '',
     });
@@ -36,6 +37,17 @@ const ViberCollection = ({ onEmojiClick }) => {
             });
         }
     }, [setState]);
+    const onScroll = useCallback((e, collectionLength) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+            setVisibleCount(prev => {
+                const newCount = prev + 30;
+                if (newCount >= collectionLength)
+                    return collectionLength;
+                return newCount;
+            });
+        }
+    }, []);
     useEffect(() => () => {
         setState(draft => {
             draft.txtSearch = '';
@@ -45,14 +57,15 @@ const ViberCollection = ({ onEmojiClick }) => {
         if (_.isArray(listEmojiMemoized) && !listEmojiMemoized.length) {
             return (_jsx(EmptyEmoji, { image: _jsx(Button, { type: "text", shape: "round", icon: _jsx(EmojiSmileIcon, { color: globalToken?.bw5, style: { width: 30, height: 30 } }), style: { width: 60, height: 60, background: globalToken?.bw2 } }), imageStyle: { height: 60, marginBottom: 15 }, description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "No emoji matches your keyword" }) }));
         }
-        const content = listEmojiMemoized.map(emojiFileName => {
+        const list = listEmojiMemoized.slice(0, Math.min(visibleCount, listEmojiMemoized.length));
+        const content = list.map(emojiFileName => {
             const src = getImageSourceViberEmoji(emojiFileName);
             const [emoji] = emojiFileName.split('.');
             const code = `(${emoji})`;
             return (_jsx(Emoji, { type: "text", icon: _jsx(EmojiImage, { src: src, alt: emojiFileName }), onClick: () => onEmojiClick(code) }, emojiFileName));
         });
-        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
-    }, [listEmojiMemoized, onEmojiClick]);
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, listEmojiMemoized.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [listEmojiMemoized, visibleCount, onEmojiClick, onScroll]);
     return (_jsx(WrapperCollection, { children: _jsxs(Flex, { vertical: true, children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), onChange: handleChangeInput }), _jsx(EmojiList, { children: renderViberCollection() })] }) }));
 };
 ViberCollection.defaultProps = {

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -66,7 +66,7 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
             children: renderCollection(collection.key),
         }));
     }, [collections, renderCollection]);
-    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -17,7 +17,7 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, isValidTagType, hasLineBreak, selectTextRange, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, INVALID_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, SHORT_LINK, SHORT_LINK_PTN, defaultCssVariables, tagifyDefaultProps, } from './constants';
@@ -48,6 +48,25 @@ const TagifyInput = forwardRef((props, ref) => {
         return content;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    const onSyncSelectionStateTagify = useCallback(() => {
+        try {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            const instancePrototype = Object.getPrototypeOf(tagifyRef.current);
+            if (!_.has(instancePrototype, 'setStateSelection')) {
+                throw new Error('Tagify instance does not support setStateSelection');
+            }
+            // Update the selection of the Tagify instance
+            tagifyRef.current.setStateSelection();
+            return true;
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            return false;
+        }
+    }, []);
     const onSaveLastRange = useCallback((newRange) => {
         if (newRange) {
             lastRange.current = newRange;
@@ -60,16 +79,38 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
     }, []);
-    const onInjectTagAtCaret = useCallback((newTag, addRangeAfterInjected) => {
+    const onSelectionAfterInjection = useCallback((addRangeAfterInjected) => {
+        try {
+            const selection = window.getSelection();
+            if (selection?.rangeCount) {
+                const range = selection.getRangeAt(0);
+                if (addRangeAfterInjected) {
+                    // Need to re-select to keep the caret position
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                // Save of the last range to restore it in case lost the selection
+                // E.g user blur of the input
+                // and then click direct to the popup without focus input to add new tag
+                onSaveLastRange(range);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error while restoring selection after injection', error);
+        }
+    }, [onSaveLastRange]);
+    const onAdjustSelectionIfNeeded = useCallback(() => {
         try {
             if (!tagifyRef.current) {
                 throw new Error('Tagify instance is not initialized');
             }
             const { settings, DOM } = tagifyRef.current;
+            const rangeInstance = _.get(tagifyRef.current, 'state.selection.range', null);
             const { empty } = settings.classNames;
             const selection = window.getSelection();
             // In case not have the selection yet or lost the selection,
-            if (!selection?.rangeCount) {
+            if (!selection?.rangeCount || !rangeInstance) {
                 // need to restore the last range before inject a new tag if the last range exists
                 if (lastRange.current) {
                     selection?.removeAllRanges();
@@ -79,57 +120,65 @@ const TagifyInput = forwardRef((props, ref) => {
                     // If the last range is lost, need to select the last text node of the input
                     const { input: inputElement } = tagifyRef.current.DOM;
                     if (inputElement) {
-                        // Get all child nodes that are of type TEXT_NODE
-                        const textNodes = Array.from(inputElement.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
-                        // In case have text nodes
-                        // -> need to place the caret at the end of the last text
-                        if (textNodes.length) {
-                            const lastTextNode = textNodes[textNodes.length - 1];
-                            if (lastTextNode?.textContent) {
-                                const textNodeLength = lastTextNode.textContent.length;
+                        // Get all child nodes that are of type TEXT_NODE or ELEMENT_NODE with nodeName TAG
+                        const nodeList = Array.from(inputElement.childNodes).filter((node) => {
+                            if (node.nodeType === Node.ELEMENT_NODE) {
+                                return node.nodeName === 'TAG';
+                            }
+                            return node.nodeType === Node.TEXT_NODE;
+                        });
+                        if (nodeList.length && selection) {
+                            const lastNode = nodeList[nodeList.length - 1];
+                            // In case have the last text nodes
+                            // -> need to place the caret at the end of the last text
+                            if (lastNode.nodeType === Node.TEXT_NODE && lastNode?.textContent) {
+                                const textNodeLength = lastNode.textContent.length;
                                 // Place the caret at the end of the last text
-                                selectTextRange(lastTextNode, textNodeLength, textNodeLength);
-                                const instancePrototype = Object.getPrototypeOf(tagifyRef.current);
-                                // Update the selection of the Tagify instance
-                                if (_.has(instancePrototype, 'setStateSelection')) {
-                                    tagifyRef.current.setStateSelection();
-                                }
+                                selectRange(lastNode, textNodeLength, textNodeLength);
+                                onSyncSelectionStateTagify();
+                            }
+                            else if (lastNode.nodeType === Node.ELEMENT_NODE && lastNode?.nodeName === 'TAG') {
+                                // In case no text nodes but have an element node
+                                const lastNodeExceptBrLength = inputElement.childNodes.length - 1; // Exclude the last <br>
+                                // Place the caret at the end of the last element node
+                                selectRange(inputElement, lastNodeExceptBrLength, lastNodeExceptBrLength);
+                                onSyncSelectionStateTagify();
                             }
                         }
                         else if (DOM?.scope?.classList?.contains(empty)) {
                             // In case no text nodes and the input is empty
-                            selectTextRange(inputElement, 0, 0);
-                            const instancePrototype = Object.getPrototypeOf(tagifyRef.current);
-                            // Update the selection of the Tagify instance
-                            if (_.has(instancePrototype, 'setStateSelection')) {
-                                tagifyRef.current.setStateSelection();
-                            }
+                            selectRange(inputElement, 0, 0);
+                            onSyncSelectionStateTagify();
                         }
                     }
                 }
             }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error while adjusting selection', error);
+        }
+    }, [onSyncSelectionStateTagify]);
+    const onInjectTagAtCaret = useCallback((newTag, addRangeAfterInjected) => {
+        try {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            const { settings } = tagifyRef.current;
+            const { empty } = settings.classNames;
+            // Adjust the selection before injecting the new tag
+            onAdjustSelectionIfNeeded();
             // Inject the new tag
             tagifyRef.current.injectAtCaret(newTag);
             // Need to remove the empty class immediately after tag added to make the valid the DOM
             tagifyRef.current.toggleClass(empty, false);
-            if (selection?.rangeCount) {
-                const range = selection.getRangeAt(0);
-                if (addRangeAfterInjected) {
-                    // Need to re-select to keep the caret position
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-                // Save of the last range to restore it in case lost the selection
-                // E.g user blur of the input
-                // and then click direct to the popup without focus input to add new tag
-                onSaveLastRange(range);
-            }
+            onSelectionAfterInjection(addRangeAfterInjected);
         }
         catch (error) {
             // eslint-disable-next-line no-console
-            console.warn(error);
+            console.warn('Error while injecting tag at caret', error);
         }
-    }, [onSaveLastRange]);
+    }, [onAdjustSelectionIfNeeded, onSelectionAfterInjection]);
     const placeCaretAfterNode = useCallback((node) => {
         if (!tagifyRef.current) {
             throw new Error('Tagify instance is not initialized');
@@ -230,12 +279,9 @@ const TagifyInput = forwardRef((props, ref) => {
         event.preventDefault();
         if (event.detail && onTagClick) {
             const { tagify, tag, data } = event.detail;
-            const { type } = data;
-            const isValidType = isValidTagType(type);
-            const readonlyTag = tag.getAttribute(READONLY_TAG);
-            const { readonly } = tagify.settings;
+            const clickable = isTagClickable(tagify, tag, data);
             // Prevent to click on tag if readonly
-            if (readonly || (readonlyTag && readonlyTag === 'true') || !isValidType)
+            if (!clickable)
                 return;
             onTagClick(event.detail);
         }
@@ -435,7 +481,7 @@ const TagifyInput = forwardRef((props, ref) => {
      * Updates the window selection to highlight a specified range of text within a given node.
      * */
     const updateWindowSelection = useCallback((node, start, end) => {
-        if (!node || !start || !end)
+        if (!node || !_.isNumber(start) || !_.isNumber(end))
             return false;
         if (node) {
             try {
@@ -447,11 +493,7 @@ const TagifyInput = forwardRef((props, ref) => {
                     const selection = window.getSelection();
                     selection?.removeAllRanges();
                     selection?.addRange(range);
-                    const instancePrototype = Object.getPrototypeOf(tagifyRef.current);
-                    if (_.has(instancePrototype, 'setStateSelection')) {
-                        tagifyRef.current.setStateSelection();
-                        return true;
-                    }
+                    return onSyncSelectionStateTagify();
                 }
                 throw new Error('Invalid start/end position');
             }
@@ -462,7 +504,76 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         return false;
-    }, []);
+    }, [onSyncSelectionStateTagify]);
+    const replaceURLsWithTags = useCallback((nodesURl, lastRange) => {
+        try {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            // Replace all URLs in the given nodes
+            nodesURl.forEach((textNode) => {
+                const newTags = [];
+                const textContent = textNode.textContent || '';
+                if (textContent) {
+                    let match;
+                    // Reset the regex's lastIndex before each execution
+                    detectURLRegex.lastIndex = 0;
+                    // eslint-disable-next-line no-cond-assign
+                    while ((match = detectURLRegex.exec(textContent)) !== null) {
+                        const url = match[0];
+                        const start = match.index;
+                        const end = start + url.length;
+                        const newTag = {
+                            url,
+                            range: [start, end],
+                        };
+                        // add new valid URL to tags
+                        newTags.push(newTag);
+                    }
+                    if (newTags.length > 0) {
+                        // Sort tags by their position in reverse order
+                        // starting from the back avoids messing up earlier parts of the document
+                        newTags.sort((a, b) => b.range[0] - a.range[0]);
+                        // Add tags one by one, adjusting the selection for each
+                        newTags.forEach(tag => {
+                            const [start, end] = tag.range;
+                            if (tagifyRef.current) {
+                                const isUpdated = updateWindowSelection(textNode, start, end);
+                                if (isUpdated) {
+                                    const newTag = tagifyRef.current.createTagElem({
+                                        value: tag.url,
+                                        label: tag.url,
+                                        type: DETECT_LINK,
+                                    });
+                                    // Inject the new detect link tag
+                                    tagifyRef.current.injectAtCaret(newTag);
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+            const selection = window.getSelection();
+            if (selection) {
+                if (lastRange instanceof Range) {
+                    // Need to restore the selection after execution all process to replace URL to Tag
+                    // to maintain valid caret
+                    selection.removeAllRanges();
+                    selection.addRange(lastRange);
+                }
+                else {
+                    // In case lost the selection not need to restore
+                    // Reset the selection to clear and prepare the valid caret to add the next tag at fn: "onAddNewTag"
+                    selection?.removeAllRanges();
+                    onSyncSelectionStateTagify();
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error while replacing URL with tag', error);
+        }
+    }, [onSyncSelectionStateTagify, updateWindowSelection]);
     /**
      * Detects URLs within the text nodes of a specified input element and replaces them with tags.
      *
@@ -480,76 +591,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 const cacheLastRange = selection?.getRangeAt && selection?.rangeCount && selection?.getRangeAt(0);
                 const minLengthValidURL = 8; // -> Because of valid URL should be "https://"
                 // Get all child nodes that are of type TEXT_NODE and contain an URL
-                const nodesURL = Array.from(inputElement.childNodes).filter((node) => {
-                    // Exclude non-text nodes
-                    if (node.nodeType !== Node.TEXT_NODE)
-                        return false;
-                    // Only check nodes that contain at least 8 characters
-                    if (node.textContent && node.textContent.length >= minLengthValidURL) {
-                        // reset the regex's lastIndex before each execution
-                        detectURLRegex.lastIndex = 0;
-                        return detectURLRegex.test(node.textContent);
-                    }
-                    return false;
-                });
+                const nodesURL = findURLInTextNodes(inputElement, minLengthValidURL);
                 // Starting from the back to avoid messing up earlier parts of the DOM
                 const reversedNodes = nodesURL?.toReversed() || [];
+                // Process URL to Tag
                 if (reversedNodes && reversedNodes.length > 0) {
-                    reversedNodes.forEach((textNode) => {
-                        const newTags = [];
-                        const textContent = textNode.textContent || '';
-                        if (textContent) {
-                            let match;
-                            // Reset the regex's lastIndex before each execution
-                            detectURLRegex.lastIndex = 0;
-                            // eslint-disable-next-line no-cond-assign
-                            while ((match = detectURLRegex.exec(textContent)) !== null) {
-                                const url = match[0];
-                                const start = match.index;
-                                const end = start + url.length;
-                                const newTag = {
-                                    url,
-                                    range: [start, end],
-                                };
-                                // add new valid URL to tags
-                                newTags.push(newTag);
-                            }
-                            if (newTags.length > 0) {
-                                // Sort tags by their position in reverse order
-                                // starting from the back avoids messing up earlier parts of the document
-                                newTags.sort((a, b) => b.range[0] - a.range[0]);
-                                // Add tags one by one, adjusting the selection for each
-                                newTags.forEach(tag => {
-                                    const [start, end] = tag.range;
-                                    if (tagifyRef.current) {
-                                        const isUpdated = updateWindowSelection(textNode, start, end);
-                                        if (isUpdated) {
-                                            const newTag = tagifyRef.current.createTagElem({
-                                                value: tag.url,
-                                                label: tag.url,
-                                                type: DETECT_LINK,
-                                            });
-                                            // Inject the new detect link tag
-                                            tagifyRef.current.injectAtCaret(newTag);
-                                        }
-                                    }
-                                });
-                            }
-                        }
-                    });
-                    if (selection) {
-                        if (cacheLastRange instanceof Range) {
-                            // Need to restore the selection after execution all process to replace URL to Tag
-                            // to maintain valid caret
-                            selection.removeAllRanges();
-                            selection.addRange(cacheLastRange);
-                        }
-                        else {
-                            // In case lost the selection not need to restore
-                            // Reset the selection to clear and prepare the valid caret to add the next tag at fn: "onAddNewTag"
-                            selection?.removeAllRanges();
-                        }
-                    }
+                    replaceURLsWithTags(reversedNodes, cacheLastRange);
                 }
             }
         }
@@ -557,7 +604,7 @@ const TagifyInput = forwardRef((props, ref) => {
             // eslint-disable-next-line no-console
             console.log(error);
         }
-    }, [updateWindowSelection]);
+    }, [replaceURLsWithTags]);
     // Initialization tagify
     useLayoutEffect(() => {
         initializeTagify();
@@ -568,12 +615,20 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [initializeTagify]);
     // Settings some tagify attributes
-    // Set readonly
+    // Set [readonly, disabled, placeholder]
     useEffect(() => {
-        if (tagifyRef.current && typeof readonly !== 'undefined') {
+        if (!tagifyRef.current)
+            return;
+        if (typeof readonly !== 'undefined') {
             tagifyRef.current.setReadonly(!!readonly);
         }
-    }, [readonly]);
+        if (typeof disabled !== 'undefined') {
+            tagifyRef.current.setDisabled(!!disabled);
+        }
+        if (_.isString(placeholder)) {
+            tagifyRef.current.setPlaceholder(placeholder);
+        }
+    }, [disabled, placeholder, readonly]);
     // Set readonly for each tag
     useEffect(() => {
         if (tagifyRef.current && typeof readonlyTag !== 'undefined') {
@@ -597,18 +652,6 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [readonlyTag]);
-    // Set disabled
-    useEffect(() => {
-        if (tagifyRef.current && typeof disabled !== 'undefined') {
-            tagifyRef.current.setDisabled(!!disabled);
-        }
-    }, [disabled]);
-    // Set placeholder
-    useLayoutEffect(() => {
-        if (tagifyRef.current && _.isString(placeholder)) {
-            tagifyRef.current.setPlaceholder(placeholder);
-        }
-    }, [placeholder]);
     // Set max personalize tags
     useLayoutEffect(() => {
         if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {

package/es/components/molecules/TagifyInput/constants.js

@@ -13,7 +13,7 @@ export const { READONLY_TAG, INVALID_TAG } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,
-    '--tag--max-width': '230px',
+    '--tag--max-width': '170px',
     '--tag-border-radius': '999px',
     '--tag-bg': 'transparent',
     '--tag-hover': 'transparent',