@antscorp/antsomi-ui 1.3.5-beta.907 → 1.3.5-beta.909

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -16,7 +16,7 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, defaultCssVariables, tagifyDefaultProps, } from './constants';
@@ -80,8 +80,15 @@ const TagifyInput = forwardRef((props, ref) => {
     }, []);
     const onSelectionAfterInjection = useCallback((addRangeAfterInjected) => {
         try {
-            const selection = window.getSelection();
-            if (selection?.rangeCount) {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            const { scope } = tagifyRef.current?.DOM;
+            const isValidSelection = isAnchorNodeChildOfElement(scope);
+            if (isValidSelection) {
+                const selection = window.getSelection();
+                if (!selection?.rangeCount)
+                    return;
                 const range = selection.getRangeAt(0);
                 if (addRangeAfterInjected) {
                     // Need to re-select to keep the caret position
@@ -107,9 +114,10 @@ const TagifyInput = forwardRef((props, ref) => {
             const { settings, DOM } = tagifyRef.current;
             const rangeInstance = _.get(tagifyRef.current, 'state.selection.range', null);
             const { empty } = settings.classNames;
+            const isValidSelection = isAnchorNodeChildOfElement(DOM.scope);
             const selection = window.getSelection();
             // In case not have the selection yet or lost the selection,
-            if (!selection?.rangeCount || !rangeInstance) {
+            if (!selection?.rangeCount || !isValidSelection || !rangeInstance) {
                 // need to restore the last range before inject a new tag if the last range exists
                 if (lastRange.current) {
                     selection?.removeAllRanges();

package/es/components/molecules/TagifyInput/utils.d.ts

@@ -67,6 +67,7 @@ export declare const generateTagContent: (params: {
  * // returns 'Hello "world" with spaces'
  */
 export declare const unescapeString: (str: string) => string;
+export declare function deepUnescape<T = any>(obj: T): T | string;
 /**
  * Checks if the string is a valid tag type.
  * @param str
@@ -173,3 +174,11 @@ export declare function findURLInTextNodes(element: HTMLSpanElement, minLengthVa
  * // Returns: 'class="btn-primary" disabled data-testid="submit-button" aria-label="Submit form" tabindex="0"'
  */
 export declare const getAttributesString: (map: Map<string, string | boolean | number>) => string;
+/**
+ * Checks if the anchor node of the current text selection
+ * is a child of a specific DOM element.
+ *
+ * @param {HTMLElement} element - The parent element to check against
+ * @returns {boolean} True if the anchor node is a child of the element, false otherwise
+ */
+export declare const isAnchorNodeChildOfElement: (element: Node) => boolean;

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

@@ -447,6 +447,21 @@ export const unescapeString = (str) => str.replace(/"| |nbsp;|'/g
             return match;
     }
 });
+export function deepUnescape(obj) {
+    // Base case: Return primitives as is
+    if (obj === null || typeof obj !== 'object') {
+        return typeof obj === 'string' ? unescapeString(obj) : obj;
+    }
+    // Handle arrays: Map and recurse
+    if (Array.isArray(obj)) {
+        return obj.map(deepUnescape);
+    }
+    // Handle objects: Recurse into key-value pairs
+    return Object.entries(obj).reduce((result, [key, value]) => {
+        result[key] = deepUnescape(value);
+        return result;
+    }, {});
+}
 /**
  * Checks if the string is a valid tag type.
  * @param str
@@ -602,3 +617,26 @@ export const getAttributesString = (map) => Array.from(map.entries())
 })
     .filter(Boolean)
     .join(' ');
+/**
+ * Checks if the anchor node of the current text selection
+ * is a child of a specific DOM element.
+ *
+ * @param {HTMLElement} element - The parent element to check against
+ * @returns {boolean} True if the anchor node is a child of the element, false otherwise
+ */
+export const isAnchorNodeChildOfElement = (element) => {
+    // Get the current selection
+    const selection = window.getSelection();
+    // Check if there's an active selection
+    if (!selection || selection.rangeCount === 0) {
+        return false;
+    }
+    // Get the anchor node (where the selection starts)
+    const { anchorNode } = selection;
+    // Check if the anchor node exists and the element exists
+    if (!anchorNode || !element) {
+        return false;
+    }
+    // Use Node.contains() to check if the element contains the anchor node
+    return element.contains(anchorNode);
+};

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,5 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.907",
+  "version": "1.3.5-beta.909",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",