@antscorp/antsomi-ui 1.3.7-beta.32 → 1.3.7-beta.34

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/froala-legacy-format.settings.json

@@ -1,95 +1,95 @@
-{
-  "rawHTML": "<div class=\"fr-element fr-view\" dir=\"auto\" contenteditable=\"true\" aria-disabled=\"false\" spellcheck=\"true\"><p><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: #000000;\"><a data-link-id=\"j24jwuk2\" target=\"_blank\" href=\"https://ant.design/components/modal\"><span data-dynamic=\"true\" data-dynamic-id=\"i6fapgk6\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Last modified by</span></a> Special <a data-link-id=\"rrd48wh5\" target=\"_blank\" href=\"https://ant.design\">Bonus <span data-dynamic=\"true\" data-dynamic-id=\"4ip5g3w4\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Created date</span> Has</a> Been <span data-dynamic=\"true\" data-dynamic-id=\"vd3tmfc3\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\"><a data-link-id=\"ir1h7e67\" target=\"_blank\" href=\"https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev\">Name</a></span>&nbsp;Special <a data-link-id=\"rrd48wh5\" href=\"https://ant.design\" target=\"_blank\" id=\"isPasted\">Bonus</a>&nbsp;fasdfas&nbsp; sdfadf</span></p></div>",
-  "dynamic": {
-    "data": {
-      "4ip5g3w4": {
-        "type": "visitor-attribute",
-        "attribute": {
-          "label": "Created date",
-          "value": "date_created",
-          "status": 1,
-          "dataType": "datetime",
-          "disabled": false,
-          "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": "lg5pk39o2qmxyc7oano5-4ip5g3w4",
-        "mappingFields": "visitor.date_created"
-      },
-      "i6fapgk6": {
-        "type": "event-attribute",
-        "event": "226539:17",
-        "source": [556657814],
-        "attribute": {
-          "type": 1,
-          "label": "Last modified by",
-          "value": "ad_zone.u_user_id",
-          "status": 1,
-          "children": [],
-          "dataType": "number",
-          "itemTypeId": -1013,
-          "itemTypeName": "ad_zone",
-          "propertyName": "u_user_id",
-          "eventPropertySyntax": "dims.ad_zone_id",
-          "numberFormatSettings": {
-            "type": "number",
-            "decimal": ".",
-            "grouping": ",",
-            "isCompact": false,
-            "prefixType": "code",
-            "currencyCode": "USD",
-            "decimalPlaces": 2
-          }
-        },
-        "mappingKey": "lg5pk39o2qmxyc7oano5-i6fapgk6",
-        "mappingFields": "event.ad_zone.u_user_id"
-      },
-      "vd3tmfc3": {
-        "type": "customer-attribute",
-        "attribute": {
-          "label": "Name",
-          "value": "name",
-          "status": 1,
-          "dataType": "string",
-          "disabled": false
-        },
-        "mappingKey": "lg5pk39o2qmxyc7oano5-vd3tmfc3",
-        "mappingFields": "customer.name"
-      }
-    },
-    "highlight": true,
-    "selectedId": ""
-  },
-  "link": {
-    "data": {
-      "ir1h7e67": {
-        "url": "https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev",
-        "text": "Name",
-        "linkType": "static",
-        "openNewTab": true
-      },
-      "j24jwuk2": {
-        "url": "https://ant.design/components/modal",
-        "text": "Your",
-        "linkType": "static",
-        "openNewTab": true
-      },
-      "rrd48wh5": {
-        "url": "https://ant.design",
-        "text": "Bonus Offer Has",
-        "linkType": "static",
-        "openNewTab": true
-      }
-    },
-    "selectedId": ""
-  }
-}
+{
+  "rawHTML": "<div class=\"fr-element fr-view\" dir=\"auto\" contenteditable=\"true\" aria-disabled=\"false\" spellcheck=\"true\"><p><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: #000000;\"><a data-link-id=\"j24jwuk2\" target=\"_blank\" href=\"https://ant.design/components/modal\"><span data-dynamic=\"true\" data-dynamic-id=\"i6fapgk6\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Last modified by</span></a> Special <a data-link-id=\"rrd48wh5\" target=\"_blank\" href=\"https://ant.design\">Bonus <span data-dynamic=\"true\" data-dynamic-id=\"4ip5g3w4\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Created date</span> Has</a> Been <span data-dynamic=\"true\" data-dynamic-id=\"vd3tmfc3\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\"><a data-link-id=\"ir1h7e67\" target=\"_blank\" href=\"https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev\">Name</a></span>&nbsp;Special <a data-link-id=\"rrd48wh5\" href=\"https://ant.design\" target=\"_blank\" id=\"isPasted\">Bonus</a>&nbsp;fasdfas&nbsp; sdfadf</span></p></div>",
+  "dynamic": {
+    "data": {
+      "4ip5g3w4": {
+        "type": "visitor-attribute",
+        "attribute": {
+          "label": "Created date",
+          "value": "date_created",
+          "status": 1,
+          "dataType": "datetime",
+          "disabled": false,
+          "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": "lg5pk39o2qmxyc7oano5-4ip5g3w4",
+        "mappingFields": "visitor.date_created"
+      },
+      "i6fapgk6": {
+        "type": "event-attribute",
+        "event": "226539:17",
+        "source": [556657814],
+        "attribute": {
+          "type": 1,
+          "label": "Last modified by",
+          "value": "ad_zone.u_user_id",
+          "status": 1,
+          "children": [],
+          "dataType": "number",
+          "itemTypeId": -1013,
+          "itemTypeName": "ad_zone",
+          "propertyName": "u_user_id",
+          "eventPropertySyntax": "dims.ad_zone_id",
+          "numberFormatSettings": {
+            "type": "number",
+            "decimal": ".",
+            "grouping": ",",
+            "isCompact": false,
+            "prefixType": "code",
+            "currencyCode": "USD",
+            "decimalPlaces": 2
+          }
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-i6fapgk6",
+        "mappingFields": "event.ad_zone.u_user_id"
+      },
+      "vd3tmfc3": {
+        "type": "customer-attribute",
+        "attribute": {
+          "label": "Name",
+          "value": "name",
+          "status": 1,
+          "dataType": "string",
+          "disabled": false
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-vd3tmfc3",
+        "mappingFields": "customer.name"
+      }
+    },
+    "highlight": true,
+    "selectedId": ""
+  },
+  "link": {
+    "data": {
+      "ir1h7e67": {
+        "url": "https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev",
+        "text": "Name",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "j24jwuk2": {
+        "url": "https://ant.design/components/modal",
+        "text": "Your",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "rrd48wh5": {
+        "url": "https://ant.design",
+        "text": "Bonus Offer Has",
+        "linkType": "static",
+        "openNewTab": true
+      }
+    },
+    "selectedId": ""
+  }
+}

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

@@ -2,60 +2,60 @@ import { EditorContent } from '@tiptap/react';
 import styled from 'styled-components';
 import { Flex } from 'antd';
 import tinycolor from 'tinycolor2';
-export const StyledEditorContent = styled(EditorContent) `
-  .tiptap {
-    outline: none;
-
-    p {
-      margin: 0;
-      padding: 0;
-
-      // Some apps have global p styles, so we need to override it
-
-      font-size: ${p => p.$textStyle.fontSize};
-      line-height: ${p => p.$textStyle.lineHeight};
-      font-family: ${p => p.$textStyle.fontFamily};
-      color: ${p => p.$textStyle.color};
-      letter-spacing: ${p => p.$textStyle.letterSpacing};
-    }
-
-    &:not([contenteditable='false']) {
-      p {
-        cursor: text;
-      }
-
-      .selection {
-        background-color: #d7cac9;
-        background-color: color-mix(in lab, var(--text-style-bg-color, transparent), #d7cac9);
-      }
-
-      .smart-tag {
-        cursor: pointer;
-      }
-    }
-  }
+export const StyledEditorContent = styled(EditorContent) `
+  .tiptap {
+    outline: none;
+
+    p {
+      margin: 0;
+      padding: 0;
+
+      // Some apps have global p styles, so we need to override it
+
+      font-size: ${p => p.$textStyle.fontSize};
+      line-height: ${p => p.$textStyle.lineHeight};
+      font-family: ${p => p.$textStyle.fontFamily};
+      color: ${p => p.$textStyle.color};
+      letter-spacing: ${p => p.$textStyle.letterSpacing};
+    }
+
+    &:not([contenteditable='false']) {
+      p {
+        cursor: text;
+      }
+
+      .selection {
+        background-color: #d7cac9;
+        background-color: color-mix(in lab, var(--text-style-bg-color, transparent), #d7cac9);
+      }
+
+      .smart-tag {
+        cursor: pointer;
+      }
+    }
+  }
 `;
-export const ColorBox = styled.div `
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  transition: box-shadow 0.3s ease-in-out;
-  border: 1px solid #d9d9d9;
-  background-color: ${p => p.$color};
-
-  &:hover {
-    box-shadow: 0 0 5px ${p => tinycolor(p.$color).setAlpha(0.45).toRgbString()};
-    cursor: pointer;
-  }
+export const ColorBox = styled.div `
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  transition: box-shadow 0.3s ease-in-out;
+  border: 1px solid #d9d9d9;
+  background-color: ${p => p.$color};
+
+  &:hover {
+    box-shadow: 0 0 5px ${p => tinycolor(p.$color).setAlpha(0.45).toRgbString()};
+    cursor: pointer;
+  }
 `;
-export const ToolbarWrapper = styled(Flex) `
-  .antsomi-divider.toolbar-separator {
-    height: 28px;
-    margin: 2px;
-  }
+export const ToolbarWrapper = styled(Flex) `
+  .antsomi-divider.toolbar-separator {
+    height: 28px;
+    margin: 2px;
+  }
 `;

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

@@ -31,6 +31,7 @@ export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
     style?: CSSStyleDeclaration;
     getHTML?: () => string;
+    setContent?: (text: string) => void;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;
@@ -126,6 +127,7 @@ export type ToolbarConfig = {
  * Configuration options for TextEditor components
  */
 export type Config = Partial<{
+    UndoRedo: false;
     /** Font family configuration */
     FontFamily: {
         /** Array of available font configurations */

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

@@ -4,28 +4,28 @@ import clsx from 'clsx';
 import styled from 'styled-components';
 import { forwardRef } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const StyledButton = styled(Button) `
-  &.antsomi-btn.antsomi-btn-text {
-    height: 24px;
-    width: 24px;
-    padding: 0;
-    flex-shrink: 0;
-    border-radius: 2px;
-    color: ${THEME.token?.bw8};
-
-    &.is-active {
-      color: ${THEME.token?.colorPrimary};
-      background-color: #e0ebf7;
-
-      &:hover {
-        background-color: #e0ebf7;
-      }
-    }
-
-    &:hover:not(:disabled, .is-active) {
-      color: ${THEME.token?.colorPrimary};
-    }
-  }
+const StyledButton = styled(Button) `
+  &.antsomi-btn.antsomi-btn-text {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    flex-shrink: 0;
+    border-radius: 2px;
+    color: ${THEME.token?.bw8};
+
+    &.is-active {
+      color: ${THEME.token?.colorPrimary};
+      background-color: #e0ebf7;
+
+      &:hover {
+        background-color: #e0ebf7;
+      }
+    }
+
+    &:hover:not(:disabled, .is-active) {
+      color: ${THEME.token?.colorPrimary};
+    }
+  }
 `;
 export const TextEditorButton = forwardRef((props, ref) => {
     const { children, isActive, tooltipProps, className, disabled, ...restProps } = props;

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

@@ -5,19 +5,19 @@ import { TextEditorButton } from '../Button';
 import { ArrowDropDownIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import styled from 'styled-components';
 import clsx from 'clsx';
-const StyledTriggerButton = styled(TextEditorButton) `
-  &.antsomi-dropdown-trigger.antsomi-btn {
-    gap: 0;
-    padding: 0;
-    width: 40px;
-    height: 24px;
-  }
-
-  &.is-open {
-    svg.icon-dropdown {
-      transform: rotate(180deg);
-    }
-  }
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-dropdown-trigger.antsomi-btn {
+    gap: 0;
+    padding: 0;
+    width: 40px;
+    height: 24px;
+  }
+
+  &.is-open {
+    svg.icon-dropdown {
+      transform: rotate(180deg);
+    }
+  }
 `;
 export const DropdownButton = (props) => {
     const { className, children, disabled, tooltipProps, options = [], value, onClickOption } = props;

package/es/components/organism/TextEditor/ui/FontPopover/styled.js

@@ -1,36 +1,36 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const PopoverTrigger = styled.div `
-  &.font-popover-trigger {
-    width: 100px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    padding: 0 7px;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: ${THEME.token?.fontSize || 12}px;
-    border-bottom: 1px solid ${THEME.token?.blue1};
-    flex-shrink: 0;
-
-    &:hover {
-      background-color: ${THEME.token?.blue};
-    }
-  }
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 100px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: ${THEME.token?.fontSize || 12}px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: ${THEME.token?.blue};
+    }
+  }
 `;
-export const FontGroupTitle = styled.div `
-  color: ${THEME.token?.bw8};
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-
-  &.font-popover-item {
-    cursor: default;
-
-    &:hover {
-      background-color: white;
-    }
-  }
+export const FontGroupTitle = styled.div `
+  color: ${THEME.token?.bw8};
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+
+  &.font-popover-item {
+    cursor: default;
+
+    &:hover {
+      background-color: white;
+    }
+  }
 `;

package/es/components/organism/TextEditor/ui/SplitButtonDropdown/styled.js

@@ -1,58 +1,58 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Dropdown } from 'antd';
 import styled from 'styled-components';
-export const StyledDropdownButton = styled(Dropdown.Button) `
-  &.antsomi-dropdown-button {
-    width: fit-content;
-
-    .antsomi-btn {
-      border-radius: 4px;
-    }
-
-    .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
-      width: 24px;
-      height: 24px;
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      padding: 0;
-      color: ${THEME.token?.bw8};
-
-      &:hover:not(:disabled, .is-active) {
-        background-color: #ebebeb;
-      }
-    }
-
-    .antsomi-btn-compact-item:not(.antsomi-btn-compact-first-item).antsomi-btn-compact-last-item {
-      width: 16px;
-      height: 24px;
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      padding: 0;
-
-      &:hover:not(:disabled),
-      &.antsomi-dropdown-open:not(:disabled) {
-        background-color: #ebebeb;
-      }
-    }
-
-    &.is-active {
-      .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
-        :not(:disabled) {
-          color: ${THEME.token?.colorPrimary};
-          background-color: #e0ebf7;
-
-          &:hover {
-            color: ${THEME.token?.colorPrimary};
-            background-color: #e0ebf7;
-          }
-        }
-      }
-    }
-
-    &.is-open {
-      .antsomi-btn-icon svg {
-        transform: rotate(180deg);
-      }
-    }
-  }
+export const StyledDropdownButton = styled(Dropdown.Button) `
+  &.antsomi-dropdown-button {
+    width: fit-content;
+
+    .antsomi-btn {
+      border-radius: 4px;
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+      width: 24px;
+      height: 24px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding: 0;
+      color: ${THEME.token?.bw8};
+
+      &:hover:not(:disabled, .is-active) {
+        background-color: #ebebeb;
+      }
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-first-item).antsomi-btn-compact-last-item {
+      width: 16px;
+      height: 24px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding: 0;
+
+      &:hover:not(:disabled),
+      &.antsomi-dropdown-open:not(:disabled) {
+        background-color: #ebebeb;
+      }
+    }
+
+    &.is-active {
+      .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+        :not(:disabled) {
+          color: ${THEME.token?.colorPrimary};
+          background-color: #e0ebf7;
+
+          &:hover {
+            color: ${THEME.token?.colorPrimary};
+            background-color: #e0ebf7;
+          }
+        }
+      }
+    }
+
+    &.is-open {
+      .antsomi-btn-icon svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 `;

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

@@ -35,15 +35,15 @@ const textAlignOptions = [
         icon: AlignJustifyIcon,
     },
 ];
-const StyledTriggerButton = styled(TextEditorButton) `
-  &.antsomi-btn.antsomi-btn-text {
-    width: 40px;
-    gap: 0;
-
-    &.is-active {
-      background-color: unset;
-    }
-  }
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-btn.antsomi-btn-text {
+    width: 40px;
+    gap: 0;
+
+    &.is-active {
+      background-color: unset;
+    }
+  }
 `;
 export const TextAlignSelect = (props) => {
     const { editor, onChange } = props;

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.js

@@ -7,17 +7,17 @@ import { useThrottledCallback } from 'use-debounce';
 import { useEditorState } from '@tiptap/react';
 import { toString } from 'lodash';
 import { DEFAULT_TEXT_STYLE } from '../../../constants';
-const StyledFontSizeInput = styled(FontSizeInput) `
-  &.antsomi-input-number {
-    width: 36px;
-
-    input.antsomi-input-number-input {
-      text-align: center;
-      height: 30px;
-      padding-inline: 0;
-      font-size: 12px;
-    }
-  }
+const StyledFontSizeInput = styled(FontSizeInput) `
+  &.antsomi-input-number {
+    width: 36px;
+
+    input.antsomi-input-number-input {
+      text-align: center;
+      height: 30px;
+      padding-inline: 0;
+      font-size: 12px;
+    }
+  }
 `;
 export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize = DEFAULT_TEXT_STYLE.fontSize, }) => {
     const inputRef = useRef(null);