@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/shared.d.ts

@@ -0,0 +1,111 @@
+/**
+ * ⚠️ LEGACY FORMAT TYPES
+ * These types represent the OLD format from Froala editor
+ * DO NOT modify unless you understand the legacy compatibility requirements
+ */
+/**
+ * Dynamic tag data structure from Froala editor
+ * Used for backwards compatibility with old HTML format
+ */
+export type DynamicData = {
+    type: string;
+    attribute?: {
+        label: string;
+        value: string;
+        dataType?: string;
+        [key: string]: any;
+    };
+    event?: string;
+    source?: number[];
+    mappingKey: string;
+    mappingFields: string;
+};
+/**
+ * Link data structure from Froala editor
+ * Used for backwards compatibility with old HTML format
+ */
+export type LinkData = {
+    url: string;
+    text: string;
+    linkType: string;
+    openNewTab: boolean;
+};
+/**
+ * State management for old format demo
+ */
+export type State = {
+    link: {
+        data: Record<string, LinkData>;
+        selectedId: string;
+    };
+    dynamic: {
+        data: Record<string, DynamicData>;
+        selectedId: string;
+        highlight: boolean;
+    };
+};
+/**
+ * Actions for state reducer
+ */
+export type Action = {
+    type: 'add_smart_tag';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'delete_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'save_smart_tag';
+    payload: {
+        id: string;
+        data: DynamicData;
+    };
+} | {
+    type: 'add_link';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_link';
+    payload: {
+        id: string;
+        data?: Partial<LinkData>;
+    };
+} | {
+    type: 'delete_link';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'close_smart_tag_modal';
+} | {
+    type: 'close_link_modal';
+} | {
+    type: 'toggle_highlight';
+};
+/**
+ * Reducer for managing old format demo state
+ */
+export declare const reducer: (state: State, action: Action) => State;
+/**
+ * Constants for dynamic tag types
+ */
+export declare const DYNAMIC_TAG_TYPES: {
+    label: string;
+    value: string;
+}[];
+/**
+ * Constants for data types
+ */
+export declare const DATA_TYPES: {
+    label: string;
+    value: string;
+}[];

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/shared.js

@@ -0,0 +1,82 @@
+import { produce } from 'immer';
+import uniqid from 'uniqid';
+/**
+ * Reducer for managing old format demo state
+ */
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'add_smart_tag': {
+            draft.dynamic.selectedId = uniqid();
+            break;
+        }
+        case 'edit_smart_tag': {
+            draft.dynamic.selectedId = action.payload.id;
+            break;
+        }
+        case 'delete_smart_tag': {
+            delete draft.dynamic.data[action.payload.id];
+            break;
+        }
+        case 'save_smart_tag': {
+            draft.dynamic.data[action.payload.id] = action.payload.data;
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'close_smart_tag_modal': {
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'add_link': {
+            const newLinkId = uniqid();
+            draft.link.selectedId = newLinkId;
+            draft.link.data[newLinkId] = {
+                url: '',
+                text: action.payload.selectionText,
+                linkType: 'static',
+                openNewTab: true,
+            };
+            break;
+        }
+        case 'edit_link': {
+            draft.link.selectedId = action.payload.id;
+            if (action.payload.data) {
+                draft.link.data[action.payload.id] = {
+                    ...state.link.data[action.payload.id],
+                    ...action.payload.data,
+                };
+            }
+            break;
+        }
+        case 'delete_link': {
+            delete draft.link.data[action.payload.id];
+            break;
+        }
+        case 'close_link_modal': {
+            draft.link.selectedId = '';
+            break;
+        }
+        case 'toggle_highlight': {
+            draft.dynamic.highlight = !draft.dynamic.highlight;
+            break;
+        }
+        default:
+            break;
+    }
+});
+/**
+ * Constants for dynamic tag types
+ */
+export const DYNAMIC_TAG_TYPES = [
+    { label: 'Customer Attribute', value: 'customer-attribute' },
+    { label: 'Visitor Attribute', value: 'visitor-attribute' },
+    { label: 'Event Attribute', value: 'event-attribute' },
+];
+/**
+ * Constants for data types
+ */
+export const DATA_TYPES = [
+    { label: 'String', value: 'string' },
+    { label: 'Number', value: 'number' },
+    { label: 'Datetime', value: 'datetime' },
+    { label: 'Boolean', value: 'boolean' },
+];

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

@@ -0,0 +1,64 @@
+/**
+ * Parse HTML content from mock data
+ */
+export declare const htmlContent: string;
+/**
+ * State type for TextBlock component
+ */
+export type State = {
+    link: {
+        data: Record<string, {
+            url: string;
+            text: string;
+            title: string;
+        }>;
+        selectedId: string;
+    };
+    dynamic: {
+        data: Record<string, unknown>;
+        selectedId: string;
+    };
+};
+/**
+ * Action types for TextBlock reducer
+ */
+export type Action = {
+    type: 'add_smart_tag';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'add_link';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_link';
+    payload: {
+        id: string;
+        data?: Partial<{
+            url: string;
+            text: string;
+            title: string;
+        }>;
+    };
+} | {
+    type: 'close_smart_tag_modal';
+} | {
+    type: 'close_link_modal';
+};
+/**
+ * Reducer for TextBlock component state management
+ */
+export declare const reducer: (state: State, action: Action) => State;
+/**
+ * Props for TextBlock component
+ */
+export type TextBlockProps = {
+    defaultValue?: string;
+};

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

@@ -0,0 +1,57 @@
+import { produce } from 'immer';
+import uniqid from 'uniqid';
+import { HTML_DOM } from '../__mocks__/text-contennt';
+/**
+ * Parse HTML content from mock data
+ */
+export const htmlContent = (() => {
+    const dom = new DOMParser().parseFromString(HTML_DOM, 'text/html');
+    const body = dom.querySelector('body');
+    if (body) {
+        return body.innerHTML;
+    }
+    return '';
+})();
+/**
+ * Reducer for TextBlock component state management
+ */
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'add_smart_tag': {
+            draft.dynamic.selectedId = uniqid();
+            break;
+        }
+        case 'edit_smart_tag': {
+            draft.dynamic.selectedId = action.payload.id;
+            break;
+        }
+        case 'close_smart_tag_modal': {
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'add_link': {
+            const newLinkId = uniqid();
+            draft.link.selectedId = newLinkId;
+            draft.link.data[newLinkId] = {
+                title: '',
+                url: '',
+                text: action.payload.selectionText,
+            };
+            break;
+        }
+        case 'edit_link': {
+            draft.link.selectedId = action.payload.id;
+            draft.link.data[action.payload.id] = {
+                ...state.link.data[action.payload.id],
+                ...action.payload.data,
+            };
+            break;
+        }
+        case 'close_link_modal': {
+            draft.link.selectedId = '';
+            break;
+        }
+        default:
+            break;
+    }
+});

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextStyle } from './types';
-export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, any, {
+export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").NamedExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $textStyle: TextStyle;
 }, never>;
 export declare const ColorBox: import("styled-components").StyledComponent<"div", any, {

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

@@ -2,59 +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
-
-      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

@@ -1,14 +1,13 @@
 import type React from 'react';
-import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
-import type { Mark } from '@tiptap/pm/model';
-import type { SmartTagAttrs } from './extensions/SmartTag';
+import type { Editor, JSONContent, MarkRange } from '@tiptap/core';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { Mark, Node } from '@tiptap/pm/model';
 import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
 import type { OverrideProperties } from 'type-fest';
-import { BubbleMenuPluginProps } from './extensions/BubbleMenu';
 export type HandleSmartTagRef = {
     setSmartTag: (attrs: SmartTagAttrs) => void;
     deleteSmartTag: (id: string) => void;
-    updateSmartTagAttrs: (id: string, updatedAttrs: Omit<SmartTagAttrs, 'id'>) => void;
+    updateSmartTagAttrs: (id: string, updatedAttrs: Partial<SmartTagAttrs>) => void;
 };
 export type HandleLinkRef = {
     setLink: (params: {
@@ -22,11 +21,21 @@ export type HandleLinkRef = {
         updated: (currentText: string) => string;
         mergeAdjacentEqualFn?: (currentAttrs: LinkAttrs, candidateAttrs: LinkAttrs) => boolean;
     }) => void;
+    eachLinkGroup: (callback: (params: {
+        attrs: LinkAttrs;
+        content: string;
+    }) => void) => void;
+    eachSmartag: (callback: (attrs: SmartTagAttrs) => void) => void;
 };
 export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
+    focus: () => void;
     style?: CSSStyleDeclaration;
-    readonly editor: Editor | null;
+    getHTML?: () => string;
+    setContent?: (text: string, options?: Partial<{
+        emitUpdate: boolean;
+    }>) => void;
+    readonly editor: Editor;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;
@@ -43,6 +52,28 @@ export type LinkHandler = Partial<{
         selectionText: string;
     }) => void;
 }>;
+/**
+ * Link form data structure
+ */
+export type LinkFormData = {
+    /** The URL/href of the link */
+    url: string;
+    /** The text content to display */
+    text: string;
+    /** Whether to open link in new tab */
+    openInNewTab: boolean;
+};
+/**
+ * Link form state in store
+ */
+export type LinkFormState = {
+    /** Whether the link form is visible */
+    isVisible: boolean;
+    /** Mode: insert new link or edit existing link */
+    mode: 'insert' | 'edit';
+    /** Form data */
+    data: LinkFormData;
+} | null;
 export type FontConfig = {
     fontFamily: {
         name: string;
@@ -73,10 +104,34 @@ export type FontGroupResult = {
  * @returns Array of group keys in desired display order
  */
 export type GroupOrderFunction = (groups: string[]) => string[];
+/**
+ * Toolbar action names - union type for type safety
+ */
+export type ToolbarActionName = 'bold' | 'italic' | 'underline' | 'strike' | 'superscript' | 'subscript' | 'fontFamily' | 'fontSize' | 'textColor' | 'backgroundColor' | 'textTransform' | 'bulletList' | 'orderedList' | 'indent' | 'outdent' | 'textAlign' | 'lineSpacing' | 'letterSpacing' | 'link' | 'smartTag' | 'emoji' | 'history' | 'clearFormatting';
+/**
+ * Toolbar configuration options
+ */
+export type ToolbarConfig = {
+    /**
+     * Which toolbar actions to show
+     * - Array: Show only specified actions in given order
+     * - 'all': Show all available actions (default)
+     * - false: Hide toolbar entirely
+     */
+    items?: ToolbarActionName[] | 'all' | false;
+    /**
+     * Which toolbar actions to hide (ignored if items is an array)
+     * Useful when you want to show most items but exclude a few
+     * @example
+     * config={{ Toolbar: { exclude: ['smartTag', 'emoji'] } }}
+     */
+    exclude?: ToolbarActionName[];
+};
 /**
  * Configuration options for TextEditor components
  */
 export type Config = Partial<{
+    UndoRedo: false;
     /** Font family configuration */
     FontFamily: {
         /** Array of available font configurations */
@@ -91,6 +146,11 @@ export type Config = Partial<{
         /** Whether to use custom bullet styles */
         useCustomBullet?: boolean;
     };
+    SmartTag: {
+        generateId?: () => string;
+    };
+    /** Toolbar configuration */
+    Toolbar: ToolbarConfig;
 }>;
 export type TextStyle = {
     fontFamily: string;
@@ -109,8 +169,6 @@ export type TextEditorComponentsRender = {
         unlink: React.ReactNode;
     }) => React.ReactNode;
 };
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React.HTMLAttributes<HTMLDivElement>;
 export type TextEditorProps = {
     id?: string;
     className?: string;
@@ -120,9 +178,9 @@ export type TextEditorProps = {
     smartTagHandler?: SmartTagHandler;
     linkHandler?: LinkHandler;
     editable?: boolean;
-    bubbleMenuProps?: {
-        container?: HTMLElement | null;
-    } & Pick<BubbleMenuProps, 'options'>;
+    bubbleMenuProps?: Pick<BubbleMenuPluginProps, 'options' | 'appendTo'> & {
+        enabled?: boolean;
+    };
     defaultTextStyle?: Partial<TextStyle>;
     dataAttributes?: Record<`data-${string}`, unknown>;
     onUpdateDebounced?: number;
@@ -133,6 +191,11 @@ export type TextEditorProps = {
         text: string;
         json: JSONContent;
     }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
     onChangeFont?: (changeInfo: {
         font: FontConfig;
         weight: number;
@@ -142,6 +205,13 @@ export type TextEditorProps = {
         };
     }) => void;
 };
+export type TextEditorAllProps = TextEditorProps & {
+    colors?: string[];
+    onChangeColors?: (colors: string[]) => void;
+};
+export type TextEditorWithProviderRef = TextEditorRef & {
+    updateColors?: (colors: string[]) => void;
+};
 export type OrderedListStyleType = (typeof ORDERED_LIST_STYLE_TYPE)[keyof typeof ORDERED_LIST_STYLE_TYPE];
 export type UnorderedListStyleType = (typeof UNORDERED_LIST_STYLE_TYPE)[keyof typeof UNORDERED_LIST_STYLE_TYPE];
 export declare const isOrderedListStyleType: (value: unknown) => value is OrderedListStyleType;
@@ -155,9 +225,19 @@ export type LinkAttrs = {
     title: string | null;
     data: Record<string, string>;
 }>;
+export type SmartTagAttrs = {
+    id: string;
+    sourceId?: string;
+} & Partial<{
+    content: string;
+    tag: string;
+}>;
 export type LinkMark = OverrideProperties<Mark, {
     attrs: LinkAttrs;
 }>;
+export type SmartTagNode = OverrideProperties<Node, {
+    attrs: SmartTagAttrs;
+}>;
 export type LinkMarkRange = OverrideProperties<MarkRange, {
     mark: LinkMark;
 }>;
@@ -170,6 +250,76 @@ export declare const isLinkMark: (mark: Mark) => mark is {
     toJSON: () => any;
     attrs: LinkAttrs;
 };
+type ProtocolOptions = {
+    /**
+     * The protocol scheme to be registered.
+     * @default '''
+     * @example 'ftp'
+     * @example 'git'
+     */
+    scheme: string;
+    /**
+     * If enabled, it allows optional slashes after the protocol.
+     * @default false
+     * @example true
+     */
+    optionalSlashes?: boolean;
+};
+export type ProtocolConfig = Array<ProtocolOptions | string>;
+export declare const isSmartTagNode: (node: Node) => node is {
+    toString: () => string;
+    readonly type: import("prosemirror-model").NodeType;
+    readonly marks: readonly Mark[];
+    readonly content: import("prosemirror-model").Fragment;
+    readonly children: readonly Node[];
+    readonly text: string | undefined;
+    readonly nodeSize: number;
+    readonly childCount: number;
+    child: (index: number) => Node;
+    maybeChild: (index: number) => Node | null;
+    forEach: (f: (node: Node, offset: number, index: number) => void) => void;
+    nodesBetween: (from: number, to: number, f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void, startPos?: number | undefined) => void;
+    descendants: (f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void) => void;
+    readonly textContent: string;
+    textBetween: (from: number, to: number, blockSeparator?: string | null | undefined, leafText?: string | ((leafNode: Node) => string) | null | undefined) => string;
+    readonly firstChild: Node | null;
+    readonly lastChild: Node | null;
+    eq: (other: Node) => boolean;
+    sameMarkup: (other: Node) => boolean;
+    hasMarkup: (type: import("prosemirror-model").NodeType, attrs?: import("prosemirror-model").Attrs | null | undefined, marks?: readonly Mark[] | undefined) => boolean;
+    copy: (content?: import("prosemirror-model").Fragment | null | undefined) => Node;
+    mark: (marks: readonly Mark[]) => Node;
+    cut: (from: number, to?: number | undefined) => Node;
+    slice: (from: number, to?: number | undefined, includeParents?: boolean | undefined) => import("prosemirror-model").Slice;
+    replace: (from: number, to: number, slice: import("prosemirror-model").Slice) => Node;
+    nodeAt: (pos: number) => Node | null;
+    childAfter: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    childBefore: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    resolve: (pos: number) => import("prosemirror-model").ResolvedPos;
+    rangeHasMark: (from: number, to: number, type: import("prosemirror-model").MarkType | Mark) => boolean;
+    readonly isBlock: boolean;
+    readonly isTextblock: boolean;
+    readonly inlineContent: boolean;
+    readonly isInline: boolean;
+    readonly isText: boolean;
+    readonly isLeaf: boolean;
+    readonly isAtom: boolean;
+    contentMatchAt: (index: number) => import("prosemirror-model").ContentMatch;
+    canReplace: (from: number, to: number, replacement?: import("prosemirror-model").Fragment | undefined, start?: number | undefined, end?: number | undefined) => boolean;
+    canReplaceWith: (from: number, to: number, type: import("prosemirror-model").NodeType, marks?: readonly Mark[] | undefined) => boolean;
+    canAppend: (other: Node) => boolean;
+    check: () => void;
+    toJSON: () => any;
+    attrs: SmartTagAttrs;
+};
 export declare const isLinkMarkRange: (markRange: MarkRange) => markRange is {
     from: number;
     to: number;