@antscorp/antsomi-ui 1.3.5-beta.788 → 1.3.5-beta.789

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { useRef, useEffect, useCallback, useMemo, memo, forwardRef, useImperativeHandle, useLayoutEffect, } from 'react';
 import _ from 'lodash';
+import htmlEntities from 'he';
 // Hooks
 import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareMemo';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
@@ -20,7 +21,7 @@ import { acceptablePatternChecking, getCachedRegex, getPersonalizeTagInfo, patte
 import { EMOJI, PERSONALIZE_PTN, SHORT_LINK, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, status, readonly, disabled, maxLength, maxHeight, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, disabled, maxLength, maxHeight, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 450);
     // Refs
@@ -30,7 +31,19 @@ const TagifyInput = forwardRef((props, ref) => {
     const placeHolderRef = useRef(null);
     // Memoizations
     const cssVariablesMemoized = useMemo(() => _.assign({}, defaultCssVariables, cssTagifyVariables || {}), [cssTagifyVariables]);
-    const parsedDefaultValue = useDeepCompareMemo(() => parseTagStringToTagify(initialValue, acceptableTagPattern), [initialValue, acceptableTagPattern]);
+    // Only run in the first render
+    // Use for the initialize value of the tagify instance
+    const parsedDefaultValue = useDeepCompareMemo(() => {
+        if (!escapeHTML) {
+            return parseTagStringToTagify(initialValue, acceptableTagPattern);
+        }
+        // Sometimes the input value has html tags, it makes the input rendered incorrectly -> it rendered html
+        // -> need to escape the html tags to render correctly
+        const escapeContent = htmlEntities.escape(initialValue);
+        const content = parseTagStringToTagify(escapeContent, acceptableTagPattern);
+        return content;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     // Expose some methods
     useImperativeHandle(ref, () => ({
         onAddNewTag: (newTag) => {
@@ -315,17 +328,23 @@ const TagifyInput = forwardRef((props, ref) => {
             const { empty } = settings.classNames;
             const { classList } = DOM?.scope;
             // If input is empty, load the original values
-            if (classList.contains(empty) &&
-                _.isString(parsedDefaultValue) &&
-                parsedDefaultValue !== '') {
-                tagifyRef.current.loadOriginalValues(parsedDefaultValue);
+            if (classList.contains(empty) && _.isString(initialValue) && initialValue !== '') {
+                let textValue = _.cloneDeep(initialValue);
+                if (escapeHTML) {
+                    // Sometimes the input value has html tags, it makes the input rendered incorrectly -> it rendered html
+                    // -> need to escape the html tags to render correctly
+                    textValue = htmlEntities.escape(textValue);
+                }
+                // Convert the string to tagify pattern
+                const content = parseTagStringToTagify(textValue, acceptableTagPattern);
+                tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
                 if (!_.isEmpty(mapAttributes)) {
                     makeValidLabelTags(mapAttributes);
                 }
             }
         }
-    }, [parsedDefaultValue, mapAttributes, makeValidLabelTags]);
+    }, [initialValue, mapAttributes, escapeHTML, acceptableTagPattern, makeValidLabelTags]);
     // Float style input
     useEffect(() => {
         if (!tagifyRef.current?.DOM.scope)

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

@@ -14,6 +14,7 @@ export interface TagifyInputProps {
      * Only used when the component is first rendered.
      */
     initialValue: string;
+    escapeHTML?: boolean;
     /**
      * Optional mapping configuration for custom attributes associated with tags.
      * Defines how tag attributes are mapped and processed internally.

package/es/locales/en/google-sheet.json

@@ -2042,6 +2042,8 @@
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY": "Message delivery",
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP": "Please schedule the message at least 3 hours in advance and ensure it falls within the allowed time frame for sending advertising messages from 8:00 AM to 11:30 AM and 1:30 PM to 8:00 PM.",
     "_3RD_CAMPAIGN_INFO_AUDIENCE_SIZE": "Recommend targeting an audience size of less than 100K to ensure the message is delivered on time.",
+    "_3RD_CAMPAIGN_ERROR_START_TIME": "Start time should be at least 3 hour after saving journey",
+    "_3RD_CAMPAIGN_TITLE_SCHEDULE": "Schedule",
     "_PREDICT_MODEL_ALL_MODEL": "All Models",
     "_PREDICT_MODEL_TAB_PREDICTIVE_MODELS": "Predictive Models",
     "_PREDICT_MODEL_TAB_COMPUTATION_HISTORIES": "Computation Histories ",

package/es/locales/i18n.d.ts

@@ -2044,6 +2044,8 @@ export declare const translationsJson: {
             _3RD_CAMPAIGN_MESSAGE_DELIVERY: string;
             _3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP: string;
             _3RD_CAMPAIGN_INFO_AUDIENCE_SIZE: string;
+            _3RD_CAMPAIGN_ERROR_START_TIME: string;
+            _3RD_CAMPAIGN_TITLE_SCHEDULE: string;
             _PREDICT_MODEL_ALL_MODEL: string;
             _PREDICT_MODEL_TAB_PREDICTIVE_MODELS: string;
             _PREDICT_MODEL_TAB_COMPUTATION_HISTORIES: string;
@@ -5387,6 +5389,8 @@ export declare const translationsJson: {
             _3RD_CAMPAIGN_MESSAGE_DELIVERY: string;
             _3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP: string;
             _3RD_CAMPAIGN_INFO_AUDIENCE_SIZE: string;
+            _3RD_CAMPAIGN_ERROR_START_TIME: string;
+            _3RD_CAMPAIGN_TITLE_SCHEDULE: string;
             _PREDICT_MODEL_ALL_MODEL: string;
             _PREDICT_MODEL_TAB_PREDICTIVE_MODELS: string;
             _PREDICT_MODEL_TAB_COMPUTATION_HISTORIES: string;
@@ -8276,6 +8280,8 @@ export declare const translationsJson: {
             _3RD_CAMPAIGN_MESSAGE_DELIVERY: string;
             _3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP: string;
             _3RD_CAMPAIGN_INFO_AUDIENCE_SIZE: string;
+            _3RD_CAMPAIGN_ERROR_START_TIME: string;
+            _3RD_CAMPAIGN_TITLE_SCHEDULE: string;
             _PREDICT_MODEL_ALL_MODEL: string;
             _PREDICT_MODEL_TAB_PREDICTIVE_MODELS: string;
             _PREDICT_MODEL_TAB_COMPUTATION_HISTORIES: string;

package/es/locales/ja/google-sheet.json

@@ -2038,6 +2038,8 @@
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY": "メッセージ配信",
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP": "メッセージは少なくとも 3 時間前にスケジュールし、午前 8 時から午前 11 時 30 分と午後 1 時 30 分から午後 8 時までの広告メッセージの送信に許可されている時間枠内に収まるようにしてください。",
     "_3RD_CAMPAIGN_INFO_AUDIENCE_SIZE": "メッセージが予定どおりに配信されるように、対象ユーザーのサイズを 100,000 未満にすることをお勧めします。",
+    "_3RD_CAMPAIGN_ERROR_START_TIME": "開始時間はルートを保存してから少なくとも 3 時間である必要があります",
+    "_3RD_CAMPAIGN_TITLE_SCHEDULE": "スケジュール",
     "_PREDICT_MODEL_ALL_MODEL": "全モデル",
     "_PREDICT_MODEL_TAB_PREDICTIVE_MODELS": "予測モデル",
     "_PREDICT_MODEL_TAB_COMPUTATION_HISTORIES": "計算履歴 ",

package/es/locales/vi/google-sheet.json

@@ -2041,7 +2041,9 @@
     "_BLAST_CAMPAIGN_NO_TEMP": "Không có mẫu tin nào. Vui lòng kiểm tra các điểm đến của bạn.",
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY": "Gửi tin nhắn",
     "_3RD_CAMPAIGN_MESSAGE_DELIVERY_TOOLTIP": "Vui lòng lên lịch gửi tin nhắn trước ít nhất 3 giờ và đảm bảo nằm trong khung thời gian được phép gửi tin nhắn quảng cáo từ 8:00 sáng đến 11:30 sáng và từ 1:30 chiều đến 8:00 tối.",
-    "_3RD_CAMPAIGN_INFO_AUDIENCE_SIZE": "Đề xuất nhắm mục tiêu đến nhóm đối tượng dưới 100K để đảm bảo thông điệp được gửi đúng thời điểm.",
+    "_3RD_CAMPAIGN_INFO_AUDIENCE_SIZE": "Đề xuất nhắm mục tiêu đến nhóm đối tượng dưới 100K để đảm bảo thông điệp được gửi đúng thời gian.",
+    "_3RD_CAMPAIGN_ERROR_START_TIME": "Thời gian bắt đầu phải ít nhất 3 giờ sau khi lưu hành trình",
+    "_3RD_CAMPAIGN_TITLE_SCHEDULE": "Đặt lịch",
     "_PREDICT_MODEL_ALL_MODEL": "Tất cả các mẫu",
     "_PREDICT_MODEL_TAB_PREDICTIVE_MODELS": "Mô hình dự đoán",
     "_PREDICT_MODEL_TAB_COMPUTATION_HISTORIES": "Lịch sử tính toán ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.788",
+  "version": "1.3.5-beta.789",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -85,7 +85,6 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^1.8.8",
     "@yaireo/tagify": "^4.31.2",
-    "string-replace-to-array": "^2.1.0",
     "ace-builds": "1.4.14",
     "animate.css": "^4.1.1",
     "antd": "5.12.6",
@@ -98,6 +97,7 @@
     "deepmerge": "^4.3.1",
     "fabric": "^5.3.0",
     "font-awesome": "4.7.0",
+    "he": "^1.2.0",
     "highlight.js": "^11.8.0",
     "html-entities": "^2.0.2",
     "html-react-parser": "^5.1.12",
@@ -132,6 +132,7 @@
     "remark-gfm": "^3.0.1",
     "remark-gfm-alias-story": "npm:remark-gfm@4.0.0",
     "socket.io-client": "^4.7.5",
+    "string-replace-to-array": "^2.1.0",
     "swiper": "^11.0.7",
     "tui-image-editor": "^3.15.3",
     "uniqid": "^5.4.0",
@@ -171,6 +172,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/he": "^1.2.3",
+    "@types/jest": "^29.5.0",
     "@types/node": "^18.15.10",
     "@types/pako": "2.0.0",
     "@types/react": "^18.0.33",