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

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

@@ -173,3 +173,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

@@ -602,3 +602,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.908",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",