@antscorp/antsomi-ui 2.0.84 → 2.0.86-text-editor-beta.1

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextEditorRef, TextEditorProps } from './types';
+export declare const TextEditor: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<TextEditorProps & import("react").RefAttributes<TextEditorRef>>>;

package/es/components/organism/TextEditor/TextEditor.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import TextStyleExt from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import TextAlign from '@tiptap/extension-text-align';
+import { FontSize } from './extensions/FontSize';
+import Strike from '@tiptap/extension-strike';
+import { TextTransform } from './extensions/TextTransform';
+import { FontFamily } from './extensions/FontFamily';
+import { SelectionDecoration } from './extensions/Selection';
+import { SmartTag } from './extensions/SmartTag';
+import { Indent } from './extensions/Indent';
+import { LineHeight } from './extensions/LineHeight';
+import { Link as LinkExtension } from './extensions/Link';
+import { Toolbar } from './ui/Toolbar/Toolbar';
+import { defaultShouldShowBubbleMenu, handleLinkAction, handleSmartTagAction, isShowLinkMenu, safeParseHTMLContent, } from './utils';
+import { useLinkHandler } from './hooks/useLinkHandler';
+import { useDebouncedCallback } from 'use-debounce';
+import { StyledBubbleMenu, StyledEditorContent } from './styled';
+import { BackgroundColor } from './extensions/BackgroundColor';
+import { isBoolean } from 'lodash';
+import { DEFAULT_TEXT_STYLE } from './constants';
+import { Color } from './extensions/Color';
+import { FontWeight } from './extensions/FontWeight';
+import { useTextEditorStore } from './provider';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { Emoji } from './extensions/Emoji';
+import { emojiSuggestion } from './ui/Emoji';
+import clsx from 'clsx';
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+import produce from 'immer';
+export const TextEditor = memo(forwardRef((props, ref) => {
+    const { id, className, config, editable = true, initialContent, dataAttributes, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, onUpdate, onFocus, onCreate, } = props;
+    const isShowBubbleMenu = useTextEditorStore(state => state.isShowBubbleMenu);
+    const setBubbleMenuContainer = useTextEditorStore(state => state.setBubbleMenuContainer);
+    const defaultTextStyle = useDeepCompareMemo(() => ({
+        ...DEFAULT_TEXT_STYLE,
+        ...defaultTextStyleProp,
+    }), [defaultTextStyleProp]);
+    const handleOnUpdateDebounce = useDebouncedCallback((editor) => {
+        const html = editor.getHTML();
+        const text = editor.getText();
+        const json = editor.getJSON();
+        onUpdate?.({ html, text, json });
+    }, 400);
+    const contentRef = useRef(null);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                bulletList: {
+                    HTMLAttributes: {
+                        style: 'padding-left:1em;margin:0.5em 0;list-style-type:disc;',
+                    },
+                },
+                orderedList: {
+                    HTMLAttributes: {
+                        style: 'padding-left:1em;margin:0.5em 0;list-style-type:decimal;',
+                    },
+                },
+                listItem: {
+                    HTMLAttributes: {
+                        style: 'line-height:normal;',
+                    },
+                },
+            }),
+            // Text Style Extensions
+            FontWeight.configure({
+                defaultWeight: defaultTextStyle.fontWeight,
+            }),
+            LineHeight.configure({
+                defaultHeight: defaultTextStyle.lineHeight,
+            }),
+            FontFamily.configure({
+                defaultFontFamily: defaultTextStyle.fontFamily,
+            }),
+            FontSize.configure({
+                defaultFontSize: defaultTextStyle.fontSize,
+            }),
+            Color.configure({
+                defaultColor: defaultTextStyle.color,
+            }),
+            BackgroundColor.configure({
+                defaultBackgroundColor: defaultTextStyle.backgroundColor,
+            }),
+            TextStyleExt.configure({
+                mergeNestedSpanStyles: true,
+            }),
+            TextTransform,
+            Underline,
+            Superscript,
+            SubScript,
+            Strike,
+            SelectionDecoration,
+            SmartTag.configure({
+                highlight: config?.SmartTag?.highlight,
+            }),
+            TextAlign.configure({
+                types: ['heading', 'paragraph'],
+            }),
+            LinkExtension.configure({
+                openOnClick: false,
+                HTMLAttributes: {
+                    class: 'link',
+                    style: 'text-decoration:inherit;color:inherit;',
+                    rel: undefined,
+                },
+            }),
+            Indent,
+            // ListItemMarker,
+            Emoji.configure({
+                suggestion: emojiSuggestion({
+                    container: bubbleMenuProps?.container,
+                }),
+            }),
+        ],
+        content: safeParseHTMLContent(initialContent || ''),
+        onCreate: ({ editor }) => {
+            const html = editor.getHTML();
+            const text = editor.getText();
+            const json = editor.getJSON();
+            onCreate?.({ html, text, json });
+        },
+        onUpdate: ({ editor }) => {
+            handleOnUpdateDebounce(editor);
+        },
+        onFocus: ({ event }) => {
+            onFocus?.(event);
+        },
+        editorProps: {
+            attributes: { spellcheck: 'false' },
+            handleKeyDown(view, event) {
+                if (event.ctrlKey && event.key === 'k') {
+                    // Add this line to prevent browser's default behavior.
+                    event.preventDefault();
+                    handleLinkAction(view, outerLinkHandler);
+                }
+            },
+        },
+    });
+    const { setLink, deleteLink, updateLinkAttrsGlobally } = useLinkHandler({
+        editor,
+    });
+    // useStyleMemory(editor);
+    useEffect(() => {
+        if (editable === undefined) {
+            editor?.setEditable(true);
+        }
+        else if (isBoolean(editable)) {
+            editor?.setEditable(editable);
+        }
+    }, [editor, editable]);
+    useEffect(() => {
+        if (editor && config?.SmartTag?.highlight !== undefined) {
+            editor.chain().updateSmartTagHighlight(config.SmartTag.highlight).run();
+        }
+    }, [editor, config?.SmartTag?.highlight]);
+    useEffect(() => {
+        if (!isBoolean(config?.Link?.highlightDynamic)) {
+            return;
+        }
+        updateLinkAttrsGlobally(attrs => produce(attrs, draft => {
+            if (!attrs.dynamic)
+                return;
+            const updatedClass = new Set(String(attrs.class).split(' '));
+            if (config?.Link?.highlightDynamic) {
+                updatedClass.add('highlight');
+            }
+            else {
+                updatedClass.delete('highlight');
+            }
+            draft.class = [...updatedClass].join(' ');
+        }));
+    }, [config?.Link?.highlightDynamic, updateLinkAttrsGlobally]);
+    const handleSetSmartTag = useCallback(({ id, content }) => {
+        editor?.chain().focus().setSmartTag({ id, content }).run();
+    }, [editor]);
+    const handleDeleteSmartTag = useCallback(id => {
+        editor
+            ?.chain()
+            .deleteSmartTagGlobally(attrs => attrs.id === id)
+            .run();
+    }, [editor]);
+    const handleUpdateSmartTagAttrs = useCallback((id, updatedAttrs) => editor
+        ?.chain()
+        .updateSmartTagAttrsGlobally(attrs => {
+        if (attrs.id === id)
+            return updatedAttrs;
+    })
+        .run(), [editor]);
+    const handleUpdateLinkAttrs = useCallback((id, updatedAttrs) => updateLinkAttrsGlobally((attrs) => {
+        if (attrs.id === id)
+            return updatedAttrs;
+    }), [updateLinkAttrsGlobally]);
+    const shouldShowBubbleMenu = useCallback((params) => {
+        const { state, view, element } = params;
+        if (isShowLinkMenu(state)) {
+            return true;
+        }
+        return defaultShouldShowBubbleMenu({
+            state,
+            view,
+            element,
+            editor: params.editor,
+        });
+    }, []);
+    const handleBlur = useCallback((perserveSelection) => {
+        if (perserveSelection) {
+            editor?.chain().blur().run();
+        }
+        else {
+            editor?.chain().blur().setTextSelection({ from: 0, to: 0 }).run();
+        }
+    }, [editor]);
+    const handleBubbleMenuRef = useCallback((htmlElement) => {
+        setBubbleMenuContainer(htmlElement);
+    }, [setBubbleMenuContainer]);
+    useImperativeHandle(ref, () => ({
+        setLink,
+        deleteLink,
+        updateLinkAttrs: handleUpdateLinkAttrs,
+        setSmartTag: handleSetSmartTag,
+        deleteSmartTag: handleDeleteSmartTag,
+        updateSmartTagAttrs: handleUpdateSmartTagAttrs,
+        blur: handleBlur,
+        style: contentRef.current?.style,
+        editor,
+    }));
+    if (!editor) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
+                    // Inline styles apply to inner html elements (support email client)
+                    lineHeight: defaultTextStyle.lineHeight,
+                    fontFamily: defaultTextStyle.fontFamily,
+                    fontSize: defaultTextStyle.fontSize,
+                    color: defaultTextStyle.color,
+                    ...style,
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(StyledBubbleMenu, { ref: handleBubbleMenuRef, editor: editor, shouldShow: shouldShowBubbleMenu, ...bubbleMenuProps, children: isShowBubbleMenu && (_jsx(Toolbar, { config: config, editor: editor, linkHanlder: {
+                        onUpsert: () => {
+                            handleLinkAction(editor.view, outerLinkHandler);
+                        },
+                    }, smartTagHandler: {
+                        onUpsert: (event) => {
+                            handleSmartTagAction(event, editor.view, outerSmartTagHandler);
+                        },
+                    } })) })] }));
+}));

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>
+`;