@antscorp/antsomi-ui 2.0.90 → 2.0.91-text-editor-beta.1

package/es/components/organism/TextEditor/__mocks__/text-block.settings.json

@@ -0,0 +1,320 @@
+{
+    "id": "7ctw1n8f4i31mb8yuoec",
+    "type": "text",
+    "settings": {
+        "link": {
+            "data": {
+                "2o83ijfx": {
+                    "text": "Dynamic Link 2\n\n",
+                    "type": "content-source::csgjqgun::1",
+                    "index": 1,
+                    "title": "Same link 1",
+                    "linkType": "dynamic",
+                    "attribute": {
+                        "key": "page_url",
+                        "label": "Page url",
+                        "value": "page_url",
+                        "disabled": false
+                    },
+                    "openNewTab": true
+                },
+                "63g9c32g": {
+                    "text": "Dynamic Link\n\n",
+                    "type": "content-source::csgjqgun::1",
+                    "index": 1,
+                    "title": "Product Page Dynamic Link",
+                    "linkType": "dynamic",
+                    "attribute": {
+                        "key": "page_url",
+                        "label": "Page url",
+                        "value": "page_url",
+                        "disabled": false
+                    },
+                    "openNewTab": true
+                },
+                "jkeswcp5": {
+                    "url": "https://ant.design/components/modal",
+                    "text": "Offer",
+                    "title": "Test",
+                    "linkType": "static",
+                    "openNewTab": false
+                },
+                "v9sifsn8": {
+                    "url": "https://claude.ai/new",
+                    "text": "Bo",
+                    "title": "Link 1",
+                    "linkType": "static",
+                    "openNewTab": true
+                }
+            },
+            "selectedId": ""
+        },
+        "name": "Text",
+        "type": "text",
+        "editor": "TextElementEditor",
+        "styles": {
+            "color": "#000000",
+            "fontSize": "16px",
+            "fontStyle": "normal",
+            "textAlign": "left",
+            "fontFamily": "Montserrat",
+            "fontWeight": 400,
+            "lineHeight": "1",
+            "letterSpacing": "0",
+            "textTransform": "none",
+            "textDecoration": "none"
+        },
+        "altText": "",
+        "dynamic": {
+            "data": {
+                "awh4d18k": {
+                    "type": "event-attribute",
+                    "event": "896830:779154",
+                    "source": [556430427],
+                    "attribute": {
+                        "type": 1,
+                        "label": "Last modified on",
+                        "value": "ad_zone.utime",
+                        "status": 1,
+                        "children": [],
+                        "dataType": "datetime",
+                        "itemTypeId": -1013,
+                        "itemTypeName": "ad_zone",
+                        "propertyName": "utime",
+                        "eventPropertySyntax": "dims.ad_zone_id",
+                        "datetimeFormatSettings": {
+                            "type": "datetime",
+                            "language": "en",
+                            "hasDateFormat": true,
+                            "hasTimeFormat": true,
+                            "dateParseFormat": "MM/DD/YYYY",
+                            "dateParseOption": "medium",
+                            "timeParseFormat": "12hour",
+                            "timeParseOption": "medium",
+                            "dateFormatString": "MMM DD, YYYY h:mm:ss A"
+                        }
+                    },
+                    "mappingKey": "7ctw1n8f4i31mb8yuoec-awh4d18k",
+                    "mappingFields": "event.ad_zone.utime"
+                },
+                "bcz6fw4b": {
+                    "type": "content-source::csgjqgun::1",
+                    "index": 1,
+                    "attribute": {
+                        "key": "price",
+                        "label": "Price",
+                        "value": "price",
+                        "status": "1",
+                        "dataType": "number",
+                        "disabled": false,
+                        "itemTypeName": "product",
+                        "numberFormatSettings": {
+                            "type": "number",
+                            "decimal": ".",
+                            "grouping": ",",
+                            "isCompact": false,
+                            "prefixType": "code",
+                            "currencyCode": "USD",
+                            "decimalPlaces": 2
+                        }
+                    },
+                    "mappingKey": "7ctw1n8f4i31mb8yuoec-bcz6fw4b",
+                    "mappingFields": "groups.csgjqgun[1].price"
+                }
+            },
+            "highlight": true,
+            "selectedId": ""
+        },
+        "rawHTML": "<div class=\"fr-element fr-view\" dir=\"auto\" contenteditable=\"true\" aria-disabled=\"false\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"false\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\" style=\"font-family: Montserrat;\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><div class=\"fr-element fr-view\" contenteditable=\"true\" dir=\"auto\" spellcheck=\"true\"><p style=\"font-size: 16px;\"><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><span data-dynamic=\"true\" data-dynamic-id=\"bcz6fw4b\" style=\"direction: unset; unicode-bidi: bidi-override; text-align: right; background-color: rgba(0, 199, 97, 0.2);\">******</span> </span></p><p style=\"font-size: 16px;\"><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">Special </span><span style=\"font-family: Georgia; font-size: 22px; letter-spacing: 0px;\"><a data-link-id=\"v9sifsn8\" href=\"https://claude.ai/new\" target=\"_blank\" title=\"Link 1\"><span style=\"font-weight: 200;\">Bo</span></a><span style=\"font-weight: 200;\">nus</span></span><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"> <a data-link-id=\"jkeswcp5\" href=\"https://ant.design/components/modal\" style=\"color: inherit;\" target=\"_self\" title=\"Test\"><span style=\"color: rgb(147, 101, 184);\">Off</span>er</a> H<span style=\"background-color: rgb(87, 184, 194);\">as Been </span><span data-dynamic=\"true\" data-dynamic-id=\"awh4d18k\" style=\"direction: unset; unicode-bidi: bidi-override; text-align: right; background-color: rgb(87, 184, 194); color: rgb(226, 80, 65);\"><strong><em>Last modified on</em></strong></span></span></p><p style=\"font-size: 16px;\"><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><span style=\"background-color: rgb(87, 184, 194);\">c</span>ó <strong><em>chuyện</em></strong> gì <strong><u>hô</u></strong></span><strong>m <span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">nay không?&nbsp;</span></strong></p><p style=\"font-size: 16px;\"></p><p><a data-dynamic=\"true\" data-link-id=\"63g9c32g\" href=\"https://sandbox-magento.antsomi.com/argus-all-weather-tank.html\" style=\"background-color: rgba(0, 199, 97, 0.2);\" target=\"_blank\" title=\"Product Page Dynamic Link\"><span style=\"font-size: 22px;\"><strong>Dynamic Link\n\n</strong></span></a></p><p style=\"font-size: 16px;\"><strong></strong></p><p style=\"font-size: 16px;\"><strong></strong><a data-link-id=\"2o83ijfx\" data-dynamic=\"true\" title=\"Same link 1\" target=\"_blank\" href=\"https://sandbox-magento.antsomi.com/montana-wind-jacket.html\" style=\"background-color: rgba(0, 199, 97, 0.2);\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">Dynamic Link 2\n\n</span></strong></a></p><p style=\"font-size: 16px;\"><strong></strong></p><p style=\"font-size: 16px;\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">Danh sách</span></strong></p><ul style=\"font-size: 16px;\"><li style=\"line-height: 2.3;\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">Giá trị 1</span></strong></li><li style=\"line-height: 2.3;\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><strong>Giá <span style=\"color: rgb(137, 18, 221);\">t<em>r</em>ị</span> 2</strong></span></strong></li><li style=\"line-height: 2.3;\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\">Giá trị 3</span></strong></li></ul><p style=\"font-size: 16px;\"><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><em>Number list</em></span></strong></p><ol style=\"font-size: 16px;\"><li><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><em>Item 1</em></span></strong></li><li><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><em>Item 2</em></span></strong></li><li><strong><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px;\"><em>Item 3</em></span></strong></li></ol></div></div></div></div></div></div></div></div></div></div></div>",
+        "component": "TextElement",
+        "linkStyles": {
+            "color": "#1e5494",
+            "textDecoration": "underline"
+        },
+        "blockStyles": {
+            "top": "0px",
+            "left": "0px",
+            "right": "0px",
+            "width": "auto",
+            "bottom": "0px",
+            "height": "auto",
+            "zIndex": 0,
+            "maxWidth": "100%",
+            "position": "relative",
+            "boxShadow": "none",
+            "marginTop": "0px",
+            "background": "transparent",
+            "marginLeft": "0px",
+            "paddingTop": "0px",
+            "borderColor": "#000000",
+            "borderStyle": "none",
+            "marginRight": "0px",
+            "paddingLeft": "0px",
+            "marginBottom": "0px",
+            "paddingRight": "0px",
+            "paddingBottom": "0px",
+            "borderTopWidth": "0px",
+            "borderLeftWidth": "0px",
+            "borderRightWidth": "0px",
+            "borderBottomWidth": "0px",
+            "borderTopLeftRadius": "0px",
+            "borderTopRightRadius": "0px",
+            "borderBottomLeftRadius": "0px",
+            "borderBottomRightRadius": "0px"
+        },
+        "breakpoints": {
+            "sm": {
+                "blockStyles": {},
+                "blockHoverStyles": {},
+                "blockStylesSettings": {},
+                "blockHoverStylesSettings": {}
+            }
+        },
+        "textStyling": {
+            "isEllipsisText": true,
+            "selectLineDisplay": ""
+        },
+        "blockHoverStyles": {
+            "top": "0px",
+            "left": "0px",
+            "right": "0px",
+            "width": "auto",
+            "bottom": "0px",
+            "height": "auto",
+            "zIndex": 0,
+            "maxWidth": "100%",
+            "position": "relative",
+            "boxShadow": "none",
+            "marginTop": "0px",
+            "background": "transparent",
+            "marginLeft": "0px",
+            "paddingTop": "0px",
+            "borderColor": "#000000",
+            "borderStyle": "none",
+            "marginRight": "0px",
+            "paddingLeft": "0px",
+            "marginBottom": "0px",
+            "paddingRight": "0px",
+            "paddingBottom": "0px",
+            "borderTopWidth": "0px",
+            "borderLeftWidth": "0px",
+            "borderRightWidth": "0px",
+            "borderBottomWidth": "0px",
+            "borderTopLeftRadius": "0px",
+            "borderTopRightRadius": "0px",
+            "borderBottomLeftRadius": "0px",
+            "borderBottomRightRadius": "0px"
+        },
+        "blockStylesSettings": {
+            "hidden": false,
+            "customId": "",
+            "gradients": [
+                {
+                    "gradientColor": "#ffffff",
+                    "gradientColorLocation": 0
+                },
+                {
+                    "gradientColor": "#000000",
+                    "gradientColorLocation": 50
+                }
+            ],
+            "customClass": "",
+            "linearAngle": 45,
+            "gradientType": "linear-gradient",
+            "heightSuffix": "auto",
+            "marginSuffix": "px",
+            "boxShadowBlur": "0px",
+            "paddingSuffix": "px",
+            "backgroundSize": "cover",
+            "boxShadowColor": "#ffffff",
+            "boxShadowInset": false,
+            "boxShadowStyle": "none",
+            "radialPosition": "center center",
+            "backgroundColor": "transparent",
+            "boxShadowSpread": "0px",
+            "backgroundRepeat": "no-repeat",
+            "displayCondition": {
+                "pool": null,
+                "type": "visitor-attribute",
+                "value": "2025-04-22 23:59:59",
+                "operator": "after_date",
+                "attribute": {
+                    "key": "date_created",
+                    "label": "Created date",
+                    "value": "date_created",
+                    "status": 1,
+                    "dataType": "datetime",
+                    "disabled": false,
+                    "displayFormat": {
+                        "type": "DATE_AND_TIME",
+                        "config": {}
+                    }
+                },
+                "condition": "show_when",
+                "time_unit": "",
+                "value_type": "normal",
+                "event_metadata": {}
+            },
+            "borderRadiusStyle": "none",
+            "boxShadowVertical": "0px",
+            "linkedMarginInput": true,
+            "backgroundPosition": "left top",
+            "borderRadiusSuffix": "px",
+            "linkedPaddingInput": false,
+            "boxShadowHorizontal": "0px",
+            "backgroundColorStyle": "color",
+            "linkedBorderWidthInput": true,
+            "linkedBorderRadiusInput": true
+        },
+        "defaultDynamicIndex": 1,
+        "blockHoverStylesSettings": {
+            "hidden": false,
+            "customId": "",
+            "editHover": false,
+            "gradients": [
+                {
+                    "gradientColor": "#ffffff",
+                    "gradientColorLocation": 0
+                },
+                {
+                    "gradientColor": "#000000",
+                    "gradientColorLocation": 50
+                }
+            ],
+            "customClass": "",
+            "linearAngle": 45,
+            "gradientType": "linear-gradient",
+            "heightSuffix": "auto",
+            "marginSuffix": "px",
+            "boxShadowBlur": "0px",
+            "paddingSuffix": "px",
+            "backgroundSize": "cover",
+            "boxShadowColor": "#ffffff",
+            "boxShadowInset": false,
+            "boxShadowStyle": "none",
+            "radialPosition": "center center",
+            "backgroundColor": "transparent",
+            "boxShadowSpread": "0px",
+            "backgroundRepeat": "no-repeat",
+            "displayCondition": {
+                "type": "",
+                "index": 1,
+                "value": "",
+                "operator": "",
+                "attribute": {},
+                "condition": ""
+            },
+            "borderRadiusStyle": "none",
+            "boxShadowVertical": "0px",
+            "linkedMarginInput": true,
+            "backgroundPosition": "left top",
+            "borderRadiusSuffix": "px",
+            "linkedPaddingInput": false,
+            "boxShadowHorizontal": "0px",
+            "backgroundColorStyle": "color",
+            "linkedBorderWidthInput": true,
+            "linkedBorderRadiusInput": true
+        }
+    },
+    "createdAt": "18/04/2025 - 11:03:44"
+}

package/es/components/organism/TextEditor/__mocks__/text-contennt.d.ts

@@ -0,0 +1 @@
+export declare const HTML_DOM: string;

package/es/components/organism/TextEditor/__mocks__/text-contennt.js

@@ -0,0 +1,38 @@
+import SETTINGS from './text-block.settings.json';
+const CONTENT_WITH_INHERITED_STYLES = `
+    <div class="fr-box" role="application">
+      <div class="fr-wrapper" dir="auto">
+        <div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">
+          <p style="text-align: center;">
+            <span style="font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);">
+              <span id="isPasted" style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">Receive&nbsp;</span>
+              <span style="font-weight: 400; font-size: 34px; line-height: inherit; font-family: Montserrat; color: rgb(0, 0, 0); letter-spacing: normal; text-align: center; text-transform: none;">
+                <span style="font-weight: 800; font-size: inherit; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; color: rgb(255, 79, 66);"><u>10% Off</u></span>
+              </span>
+              <span style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">&nbsp;Your First Order!</span>
+            </span>
+          </p>
+        </div>
+        <span class="fr-placeholder" style="font-size: 12px; line-height: 12px; margin-top: 0px; padding-top: 0px; padding-left: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; text-align: left;">Enter your text here</span>
+      </div>
+    </div>
+`;
+export const HTML_DOM = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Raw HTML</title>
+  </head>
+  <body>
+    <p style="line-height: 1.4; text-align: center;">
+      <span style="font-family: Poppins; font-weight: 500;">Enter your email address below for a chance to spin the wheel and save big on your next purchase. <span class="fr-emoticon fr-deletable">😁</span></span>
+      <span style="font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);"></span>
+    </p>
+
+    ${CONTENT_WITH_INHERITED_STYLES}
+
+    ${SETTINGS.settings.rawHTML}
+  </body>
+</html>
+`;

package/es/components/organism/TextEditor/constants.d.ts

@@ -0,0 +1,175 @@
+export declare const SMART_TAG_HIGHLIGHT_BG = "rgba(0, 199, 97, 0.2)";
+export declare const DEFAULT_TEXT_STYLE: {
+    fontSize: string;
+    color: string;
+    fontFamily: string;
+    backgroundColor: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing: string;
+};
+export declare const FONT_WEIGHT_LABELS: {
+    readonly thin: "Thin";
+    readonly extraLight: "Extra Light";
+    readonly light: "Light";
+    readonly normal: "Normal";
+    readonly medium: "Medium";
+    readonly semiBold: "Semi Bold";
+    readonly bold: "Bold";
+    readonly extraBold: "Extra Bold";
+    readonly black: "Black";
+};
+export declare const FONT_WEIGHT_MAP: Record<number, string>;
+export declare const DEFAULT_FONT_CONFIGS: {
+    fontFamily: {
+        name: string;
+    };
+    fontWeight: number[];
+}[];
+export declare const LINK_TEXT_COLOR = "#0066CC";
+export declare const COMPONENT_CLS = "antsomi-text-editor";
+export declare const TEXT_EDITOR_CONSTANTS: {
+    COLOR_GIRD: string[][];
+    TEXT_ALIGN: {
+        TITLE: string;
+        OPTIONS: {
+            LEFT: {
+                LABEL: string;
+                VALUE: string;
+            };
+            CENTER: {
+                LABEL: string;
+                VALUE: string;
+            };
+            RIGHT: {
+                LABEL: string;
+                VALUE: string;
+            };
+            JUSTIFY: {
+                LABEL: string;
+                VALUE: string;
+            };
+        };
+        TOOLTIP: string;
+    };
+    TEXT_TRANSFORM: {
+        PLACEHOLDER: string;
+        OPTIONS: {
+            UPPERCASE: {
+                LABEL: string;
+                VALUE: string;
+            };
+            LOWERCASE: {
+                LABEL: string;
+                VALUE: string;
+            };
+            CAPITALIZE: {
+                LABEL: string;
+                VALUE: string;
+            };
+            NONE: {
+                LABEL: string;
+                VALUE: string;
+            };
+        };
+    };
+    TOOLTIPS: {
+        BOLD: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        ITALIC: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        UNDERLINE: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        STRIKE: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        BULLET_LIST: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        ORDERED_LIST: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        CLEAR_FORMATTING: {
+            TITLE: string;
+        };
+        FONT_FAMILY: {
+            PLACEHOLDER: string;
+        };
+        FONT_SIZE: {
+            PLACEHOLDER: string;
+        };
+        HIGHLIGHT: {
+            TITLE: string;
+        };
+        INDENT: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        OUTDENT: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        LINK: {
+            TITLE: string;
+        };
+        SMART_TAG: {
+            TITLE: string;
+        };
+        SUPERSCRIPT: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        SUBSCRIPT: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        TEXT_COLOR: {
+            TITLE: string;
+        };
+        UNDO: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        REDO: {
+            TITLE: string;
+            SHORTCUT: string;
+        };
+        LETTER_SPACING: {
+            TITLE: string;
+        };
+        LINE_SPACING: {
+            TITLE: string;
+        };
+        EMOJI: {
+            TITLE: string;
+        };
+        TEXT_TRANSFORM: {
+            TITLE: string;
+        };
+    };
+    LINK_TEXT_COLOR: string;
+};
+export declare const ORDERED_LIST_STYLE_TYPE: {
+    readonly decimal: "decimal";
+    readonly lowerAlpha: "lower-alpha";
+    readonly upperAlpha: "upper-alpha";
+    readonly lowerRoman: "lower-roman";
+    readonly upperRoman: "upper-roman";
+    readonly lowerGreek: "lower-greek";
+    readonly decimalLeadingZero: "decimal-leading-zero";
+};
+export declare const UNORDERED_LIST_STYLE_TYPE: {
+    readonly disc: "disc";
+    readonly circle: "circle";
+    readonly square: "square";
+    readonly custom: "custom";
+};