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

package/es/components/organism/ActivityTimeline/components/ItemEvent/ItemEvent.d.ts

@@ -1,10 +1,9 @@
+import React from 'react';
 import { EventTrackingWithMap } from '../../types';
-type ItemEventProps = Partial<{
+export declare const ItemEvent: React.ForwardRefExoticComponent<Partial<{
     item: Record<string, any>;
     objectName: string;
     eventTracking: EventTrackingWithMap;
     keyItem: string;
     currency: string;
-}>;
-export declare const ItemEvent: (props: ItemEventProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+}> & React.RefAttributes<HTMLDivElement>>;

package/es/components/organism/ActivityTimeline/components/ItemEvent/ItemEvent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { checkShowRedeem, formatDateHeader, getInfoEvent } from '../../utils';
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 import { TimelineSection } from '../TimelineSection/TimelineSection';
@@ -14,7 +15,7 @@ import { getPortalCurrency, safeParseDisplayFormatCurrency, } from '@antscorp/an
 import { ListItem, ListItemTime, ListItemTimeLine, ListItemTitle } from '../ListItem';
 import { List } from '../List';
 import { Slide } from '../Slide';
-export const ItemEvent = (props) => {
+export const ItemEvent = forwardRef((props, ref) => {
     const { keyItem: key = '', item = {}, objectName = '', eventTracking = { list: [], map: {} }, currency = getPortalCurrency(), } = props;
     const { appConfig } = useAppConfigContext();
     const { etype: eType } = item;
@@ -28,5 +29,5 @@ export const ItemEvent = (props) => {
                                 : safeParseDisplayFormatCurrency(validateExtra.revenue)} `
                             : null, children: _jsx(Slide, { slidesPerView: perShow, items: renderProductCards(dataActivity[0], limitShowSlide, infoEvent, currency, key) }) }) }))] }));
     };
-    return (_jsx(TimelineContainer, { className: "item-event", children: renderSingleEvent(item) }, key));
-};
+    return (_jsx(TimelineContainer, { ref: ref, className: "item-event", children: renderSingleEvent(item) }, key));
+});

package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/ItemGroupEvent.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { EventTrackingWithMap } from '../../types';
 import 'swiper/swiper-bundle.css';
-type ItemGroupEventProps = Partial<{
+export declare const renderProductCards: (dataItem: Record<string, any>, limitShow: number, inforEvent: Record<string, any>, infoCurrency: string, key: string) => React.ReactNode[];
+export declare const ItemGroupEvent: React.ForwardRefExoticComponent<Partial<{
     keyItem: string;
     item: Record<string, any>;
     objectName: string;
     currency: string;
     eventTracking: EventTrackingWithMap;
-    timezone?: string;
-}>;
-export declare const renderProductCards: (dataItem: Record<string, any>, limitShow: number, inforEvent: Record<string, any>, infoCurrency: string, key: string) => React.ReactNode[];
-export declare const ItemGroupEvent: (props: ItemGroupEventProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    timezone?: string | undefined;
+}> & React.RefAttributes<HTMLDivElement>>;

package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/ItemGroupEvent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-underscore-dangle */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { checkShowRedeem, formatDateHeader, getInfoEvent } from '../../utils';
 import { TimelineSection } from '../TimelineSection/TimelineSection';
 import htmlParse from 'html-react-parser';
@@ -39,7 +39,7 @@ export const renderProductCards = (dataItem, limitShow, inforEvent, infoCurrency
     });
     return result;
 };
-export const ItemGroupEvent = (props) => {
+export const ItemGroupEvent = forwardRef((props, ref) => {
     const { appConfig } = useAppConfigContext();
     const { keyItem: key = '', item = {}, objectName = '', eventTracking = { map: {}, list: [] }, currency = getPortalCurrency(), timezone = getPortalTimeZone(), } = props;
     const { etype: eType } = item;
@@ -59,5 +59,5 @@ export const ItemGroupEvent = (props) => {
                                         : null, children: _jsx(Slide, { slidesPerView: perShow, items: renderProductCards(itemEvent, limitShowSlide, infoEvent, currency, key) }) }) }))] }, `${titleEvent}-${fullContentEvent}-${index.toString()}`));
                 }) }) }));
     };
-    return (_jsx(TimelineContainer, { className: "item-group-event", children: renderGroupEvent(item) }, key));
-};
+    return (_jsx(TimelineContainer, { ref: ref, className: "item-group-event", children: renderGroupEvent(item) }, key));
+});

package/es/components/organism/ActivityTimeline/components/TimeLineTitle/TimelineTitle.js

@@ -15,5 +15,5 @@ export const TimeLineTitle = (props) => {
     const content = showContent(type, data);
     if (!content)
         return null;
-    return _jsx(TimelineTitleRoot, { children: showContent(type, data) });
+    return _jsx(TimelineTitleRoot, { className: "item-title", children: showContent(type, data) });
 };

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

@@ -13,8 +13,9 @@ export type ActivityTimeLineProps = Partial<{
     title: string;
     objectName: string;
     eventTracking: EventTracking[];
-    onFetchMore: () => void;
+    onFetchMore: () => Promise<void>;
     longDateTimeFormat: string;
     header: React.ReactNode;
     className: string;
+    threshold?: number;
 }>;

package/es/components/organism/ActivityTimeline/utils.d.ts

@@ -1,5 +1,5 @@
 import { EventTrackingWithMap } from './types';
-import { AppConfigProviderProps } from '../../..';
+import { AppConfigProviderProps } from '../../../providers/AppConfigProvider/contexts';
 export declare const getValuesReplace: (objectReplace: any[], data: Record<string, any>) => {};
 export declare const getStringHtmlByType: (item: Record<string, any>, eType?: string) => string;
 export declare const getProductName: (data: any[]) => string;

package/es/components/organism/ActivityTimeline/utils.js

@@ -1,12 +1,12 @@
 /* eslint-disable no-underscore-dangle */
 import { DATA_EVENT, mapTranslateCode } from './constants';
 import { get } from 'lodash';
-import { ENV } from '../../..';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { formatDate, formatUTCDateTZ } from '@antscorp/antsomi-ui/es/utils/date';
 import { getPortalFormatDateTimeLong, getPortalTimeZone, } from '@antscorp/antsomi-ui/es/utils/portal';
 import { CDP_ROUTE } from '@antscorp/antsomi-ui/es/constants';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 const translateAt = translate(translations._INFO_LOCATION, 'at');
 const urlJourney = (data, config) => {
     const { story = {} } = data;

package/es/components/organism/Help/Help.js

@@ -30,6 +30,7 @@ import { BugIcon, CameraIcon, OpenUrlIcon, RequestIcon, ScreenshotMonitorIcon, }
 import { base64ToFile, convertBlobToFile, generateUniqueId, mergeAudioStreams, } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/utils';
 import { expendDefault, formatParams, postCustomEvent } from './utils';
 import { useGetListUser } from './queries';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const antIcon = _jsx(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
 const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoading, { className: "loader-container", height: height, width: width, children: _jsx(Spin, { indicator: antIcon }) }));
 const Help = props => {
@@ -93,6 +94,7 @@ const Help = props => {
     const streamTracks = useRef();
     const allAppOptionsRef = useRef([]);
     const [fileInputKey, setFileInputKey] = useState(0);
+    const [isLoadingUpload, setIsLoadingUpload] = useState(false);
     // const showModal = (captureKey: CaptureTypeProps) => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
@@ -250,12 +252,17 @@ const Help = props => {
         }
     }, [allAppOptions, config, domainTicket, token, userId]);
     const handleOnchangeFile = e => {
-        const limitSize = 50 * 1024 * 1024;
-        const sizeFile = e.target?.files[0]?.size;
+        const file = e.target?.files[0];
+        if (!file)
+            return;
+        const sizeFile = file.size;
+        const fileType = file.type;
+        const isImage = fileType.startsWith('image/');
+        const limitSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
-                message: '*Maximum upload file size: 50MB',
+                message: `Maximum file size is reached (10MB for image & 50MB for other types).`,
             });
         }
         else {
@@ -265,6 +272,7 @@ const Help = props => {
             });
             handleUploadFile(e.target.files[0]);
         }
+        setFileInputKey(fileInputKey + 1);
     };
     const handleRemoveFile = token => {
         let newListFile = valueInput.files;
@@ -837,10 +845,13 @@ const Help = props => {
                                                 domain: domainUpload,
                                                 token,
                                                 userId,
-                                            }), onChange: content => setValueInput(prevVal => ({
-                                                ...prevVal,
-                                                message: content,
-                                            })), placeholder: "Enter your comment...", borderColor: "#e6e6e6", isRoundCorner: false, height: 159 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map((file, index) => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
+                                            }), onChange: content => {
+                                                setValueInput(prevVal => ({
+                                                    ...prevVal,
+                                                    message: content,
+                                                }));
+                                                setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+                                            }, callback: callbackEditor, placeholder: "Enter your comment...", borderColor: "#e6e6e6", isRoundCorner: false, height: 159 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map((file, index) => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     gap: '10px',
@@ -877,9 +888,35 @@ const Help = props => {
             }
         }
     };
-    const isDisableButtonSend = useMemo(() => {
-        return !valueInput?.title || !valueInput?.message;
-    }, [valueInput]);
+    const isDisableButtonSend = useMemo(() => !valueInput?.title || !valueInput?.message || isLoadingUpload, [valueInput, isLoadingUpload]);
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                setIsLoadingUpload(value);
+                break;
+            case TCallBack.ERROR: {
+                switch (value) {
+                    case 'FILE_TOO_LARGE':
+                        setErrFile({
+                            isError: true,
+                            message: '*Maximum upload file size: 10MB',
+                        });
+                        break;
+                    case 'RESET':
+                        setErrFile({
+                            isError: false,
+                            message: '',
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
     const renderPopupLayout = (type) => (_jsxs(_Fragment, { children: [_jsx(Loading, { isLoading: isMainLoading || isFetchingUsers, width: "100%", height: "100%" }), _jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: {
                     padding: type === REPORT_TYPES.CHAT ||
                         type === REPORT_TYPES.HELP ||

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,257 @@
+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 { TextStyleKit } from '@tiptap/extension-text-style';
+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 { TextTransform } from './extensions/TextTransform';
+import { FontFamily } from './extensions/FontFamily';
+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 { Selection } from '@tiptap/extensions';
+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';
+import { LetterSpacing } from './extensions/LetterSpacing';
+import { CustomOrderedList } from './extensions/OrderedList';
+import { CustomUnorderedList } from './extensions/UnorderedList';
+export const TextEditor = memo(forwardRef((props, ref) => {
+    const { id, className, config, editable = true, initialContent, dataAttributes, onUpdateDebounced = 400, 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 });
+    }, onUpdateDebounced);
+    const contentRef = useRef(null);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                link: false,
+                bulletList: false,
+                orderedList: false,
+                listItem: {
+                    HTMLAttributes: {
+                        style: 'line-height:normal;',
+                    },
+                },
+                undoRedo: {
+                    depth: 100,
+                },
+            }),
+            CustomUnorderedList,
+            CustomOrderedList,
+            FontWeight.configure({
+                defaultWeight: defaultTextStyle.fontWeight,
+            }),
+            LineHeight.configure({
+                defaultHeight: defaultTextStyle.lineHeight,
+            }),
+            FontFamily.configure({
+                defaultFontFamily: defaultTextStyle.fontFamily,
+            }),
+            FontSize.configure({
+                defaultFontSize: defaultTextStyle.fontSize,
+            }),
+            LetterSpacing.configure({
+                defaultLetterSpacing: defaultTextStyle.letterSpacing,
+            }),
+            Color.configure({
+                defaultColor: defaultTextStyle.color,
+            }),
+            BackgroundColor.configure({
+                defaultBackgroundColor: defaultTextStyle.backgroundColor,
+            }),
+            TextStyleKit.configure({
+                backgroundColor: false,
+                color: false,
+                textStyle: {
+                    mergeNestedSpanStyles: true,
+                },
+            }),
+            TextTransform,
+            Superscript,
+            SubScript,
+            Selection.configure({
+                className: 'selection',
+            }),
+            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,
+            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,
+        highlight: config?.Link?.highlightDynamic,
+    });
+    // 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;
+        }
+        if (!attrs.id && attrs.href === updatedAttrs.href) {
+            return { id, ...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)
+                    ...defaultTextStyle,
+                    ...style,
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(StyledBubbleMenu, { ref: handleBubbleMenuRef, editor: editor, shouldShow: shouldShowBubbleMenu, resizeDelay: 700, ...bubbleMenuProps, children: isShowBubbleMenu && (_jsx(Toolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
+                        onUpsert: () => {
+                            handleLinkAction(editor.view, outerLinkHandler);
+                        },
+                    }, smartTagHandler: {
+                        onUpsert: (event) => {
+                            handleSmartTagAction(event, editor.view, outerSmartTagHandler);
+                        },
+                    } })) })] }));
+}));