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

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

@@ -0,0 +1,25 @@
+import { EditorState } from '@tiptap/pm/state';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export declare const isNoSelection: (state: EditorState) => boolean;
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export declare const getSelectionText: (state: EditorState) => string;
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export declare const isMultiNodeSelection: (state: EditorState) => boolean;
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export declare const getSelectionDepth: (state: EditorState) => number;

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

@@ -0,0 +1,57 @@
+import { isNodeSelection, isTextSelection } from '@tiptap/core';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export const isNoSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return true;
+    // Kiểm tra trường hợp text selection không có nội dung
+    if (isTextSelection(selection)) {
+        const { from, to } = selection;
+        if (from === to)
+            return true;
+        const selectedText = state.doc.textBetween(from, to);
+        return selectedText.length === 0;
+    }
+    // Nếu là node selection, thì có selection
+    if (isNodeSelection(selection))
+        return false;
+    return false;
+};
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export const getSelectionText = (state) => {
+    const { selection } = state;
+    const { from, to } = selection;
+    return state.doc.textBetween(from, to);
+};
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export const isMultiNodeSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return false;
+    const { from, to } = selection;
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    return $from.parent !== $to.parent;
+};
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export const getSelectionDepth = (state) => {
+    const { selection } = state;
+    const { $from } = selection;
+    return $from.depth;
+};

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

@@ -0,0 +1 @@
+export declare function clamp(val: number, min: number, max: number): number;

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

@@ -0,0 +1,9 @@
+export function clamp(val, min, max) {
+    if (val < min) {
+        return min;
+    }
+    if (val > max) {
+        return max;
+    }
+    return val;
+}

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

@@ -0,0 +1,49 @@
+import { EditorView } from '@tiptap/pm/view';
+import { SmartTagHandler } from '../types';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export declare const handleSmartTagAction: (event: React.MouseEvent, view: EditorView, smartTagHandler?: SmartTagHandler) => void;
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export declare const getSmartTagAtPosition: (view: EditorView, pos: number) => import("prosemirror-model").Node | null;
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export declare const getAllSmartTags: (view: EditorView) => {
+    node: any;
+    pos: number;
+}[];
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export declare const findSmartTagById: (view: EditorView, id: string) => null;
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export declare const isPositionInSmartTag: (view: EditorView, pos: number) => boolean;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export declare const getSmartTagAtCursor: (view: EditorView) => {
+    id: any;
+    content: any;
+    node: import("prosemirror-model").Node;
+} | null;

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

@@ -0,0 +1,89 @@
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export const handleSmartTagAction = (event, view, smartTagHandler) => {
+    const { state } = view;
+    const { from, to } = state.selection;
+    const smartTagNode = state.doc.nodeAt(from);
+    const smartTagId = smartTagNode?.attrs.id;
+    if (smartTagId) {
+        smartTagHandler?.edit?.(smartTagId, event);
+    }
+    else {
+        const selectedText = state.doc.textBetween(from, to);
+        if (selectedText) {
+            smartTagHandler?.setNew?.({
+                selectionText: selectedText,
+            });
+        }
+    }
+};
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export const getSmartTagAtPosition = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (node && node.type.name === 'smartTag') {
+        return node;
+    }
+    return null;
+};
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export const getAllSmartTags = (view) => {
+    const smartTags = [];
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag') {
+            smartTags.push({ node, pos });
+        }
+    });
+    return smartTags;
+};
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export const findSmartTagById = (view, id) => {
+    let result = null;
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag' && node.attrs.id === id) {
+            result = { node, pos };
+            return false; // Stop traversal
+        }
+    });
+    return result;
+};
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export const isPositionInSmartTag = (view, pos) => getSmartTagAtPosition(view, pos) !== null;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export const getSmartTagAtCursor = (view) => {
+    const { selection } = view.state;
+    const node = getSmartTagAtPosition(view, selection.from);
+    return node
+        ? {
+            id: node.attrs.id,
+            content: node.attrs.content,
+            node,
+        }
+        : null;
+};

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

@@ -0,0 +1,78 @@
+import { TextStyle } from '../types';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export declare const textStyleFromElStyle: <T extends CSSStyleDeclaration>(style: T) => Partial<TextStyle>;
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export declare const appendTextStyleToEl: (el: HTMLElement, style: Partial<TextStyle>) => void;
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export declare function styleObjectToString(styleObj: Record<string, unknown>): string;
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export declare function normalizeFontFamily(fontFamily: string): string;
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export declare const fontWithFallback: (fontFamily: string, defaultFont?: string) => string;
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export declare const isLinkColor: (color: string) => boolean;
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export declare function extractCSSVariables(styleObj: Record<string, unknown>): {
+    cssVariables: Record<string, unknown>;
+    regularStyles: Record<string, unknown>;
+};
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export declare function mergeTextStyles(...styles: Partial<TextStyle>[]): Partial<TextStyle>;
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export declare function isCompleteTextStyle(style: Partial<TextStyle>): style is TextStyle;
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export declare function textStyleToCSSStyle(textStyle: Partial<TextStyle>): React.CSSProperties;

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

@@ -0,0 +1,193 @@
+import { DEFAULT_TEXT_STYLE, LINK_TEXT_COLOR } from '../constants';
+import { uniqBy } from 'lodash';
+import tinycolor from 'tinycolor2';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export const textStyleFromElStyle = (style) => ({
+    color: style.color || DEFAULT_TEXT_STYLE.color,
+    fontFamily: style.fontFamily || DEFAULT_TEXT_STYLE.fontFamily,
+    fontSize: style.fontSize || DEFAULT_TEXT_STYLE.fontSize,
+    backgroundColor: style.backgroundColor,
+    lineHeight: style.lineHeight || DEFAULT_TEXT_STYLE.lineHeight,
+});
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export const appendTextStyleToEl = (el, style) => {
+    if (style.color) {
+        el.style.color = style.color;
+    }
+    if (style.fontSize) {
+        el.style.fontSize = style.fontSize;
+    }
+    if (style.fontFamily) {
+        el.style.fontFamily = style.fontFamily;
+    }
+    if (style.backgroundColor) {
+        el.style.backgroundColor = style.backgroundColor;
+    }
+    if (style.lineHeight) {
+        el.style.lineHeight = style.lineHeight;
+    }
+    if (style.fontWeight) {
+        el.style.fontWeight = style.fontWeight;
+    }
+};
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export function styleObjectToString(styleObj) {
+    return Object.entries(styleObj)
+        .map(([key, value]) => {
+        // Nếu key đã là kebab-case hoặc bắt đầu bằng dấu '-', giữ nguyên
+        const isPrefixed = key.startsWith('-');
+        const kebabKey = isPrefixed ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+        return `${kebabKey}: ${value}`;
+    })
+        .join('; ');
+}
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export function normalizeFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string')
+        return '';
+    const genericFamilies = new Set([
+        'serif',
+        'sans-serif',
+        'monospace',
+        'cursive',
+        'fantasy',
+        'system-ui',
+        'ui-serif',
+        'ui-sans-serif',
+        'ui-monospace',
+        'ui-rounded',
+        'math',
+        'emoji',
+        'fangsong',
+    ]);
+    return uniqBy(fontFamily.split(','), name => name.trim())
+        .map(name => {
+        const trimmed = name.trim();
+        // Preserve already quoted names
+        const isQuoted = (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+            (trimmed.startsWith("'") && trimmed.endsWith("'"));
+        if (isQuoted)
+            return trimmed;
+        // Do not quote generic family names
+        if (genericFamilies.has(trimmed))
+            return trimmed;
+        // Quote if contains whitespace or special characters
+        const needsQuotes = /[^\w-]/.test(trimmed);
+        return needsQuotes ? `"${trimmed}"` : trimmed;
+    })
+        .join(', ');
+}
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export const fontWithFallback = (fontFamily, defaultFont = DEFAULT_TEXT_STYLE.fontFamily) => normalizeFontFamily(fontFamily ? `${fontFamily}, ${defaultFont}` : defaultFont);
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export const isLinkColor = (color) => tinycolor.equals(color, LINK_TEXT_COLOR);
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export function extractCSSVariables(styleObj) {
+    const cssVariables = {};
+    const regularStyles = {};
+    Object.entries(styleObj).forEach(([key, value]) => {
+        if (key.startsWith('--')) {
+            cssVariables[key] = value;
+        }
+        else {
+            regularStyles[key] = value;
+        }
+    });
+    return { cssVariables, regularStyles };
+}
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export function mergeTextStyles(...styles) {
+    return styles.reduce((merged, style) => ({
+        ...merged,
+        ...Object.fromEntries(Object.entries(style).filter(([_, value]) => value !== undefined && value !== null)),
+    }), {});
+}
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export function isCompleteTextStyle(style) {
+    const requiredProps = [
+        'fontFamily',
+        'fontSize',
+        'color',
+        'backgroundColor',
+        'lineHeight',
+        'fontWeight',
+    ];
+    return requiredProps.every(prop => style[prop] !== undefined);
+}
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export function textStyleToCSSStyle(textStyle) {
+    const cssStyle = {};
+    if (textStyle.fontFamily) {
+        cssStyle.fontFamily = textStyle.fontFamily;
+    }
+    if (textStyle.fontSize) {
+        cssStyle.fontSize = textStyle.fontSize;
+    }
+    if (textStyle.color) {
+        cssStyle.color = textStyle.color;
+    }
+    if (textStyle.backgroundColor) {
+        cssStyle.backgroundColor = textStyle.backgroundColor;
+    }
+    if (textStyle.lineHeight) {
+        cssStyle.lineHeight = textStyle.lineHeight;
+    }
+    if (textStyle.fontWeight) {
+        cssStyle.fontWeight = textStyle.fontWeight;
+    }
+    return cssStyle;
+}

package/es/components/organism/TicketEditor/Content.js

@@ -11,6 +11,8 @@ import Service from './Service';
 import { MESSAGE_TYPE, TICKET_CUSTOM_MESSAGE_KEY } from './constant';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, DrawerHeader, } from './styled';
 import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, } from './util';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
+import { isBoolean } from 'lodash';
 const initValueInput = {
     originTitle: 'Create new ticket',
     title: '',
@@ -50,23 +52,6 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
     const isUpdate = action === 'edit' && ticketId;
     const valueInputRef = useRef(valueInput);
     valueInputRef.current = valueInput;
-    // const isRulesEdit = useMemo(() => {
-    //   const { title, feature, ticketType, priority, category, ownerId, followers, message, files, referenceUrl } = valueInput
-    //   if (
-    //     !title?.length && referenceUrl === window.location.href
-    //     && Object.keys(feature)?.length <= 2
-    //     && Object.keys(ticketType)?.length <= 2 && (!Object.keys(priority)?.length || Object.values(priority)[0] === '-')
-    //     && Object.keys(category)?.length <= 2 && ((!ownerId?.length && accountEdit === 4 && isAllAccount) || (ownerId[0]?.userId === Number(initOwnerId || userId)))
-    //     && followers?.length === accountManage?.length
-    //     && !message?.length && !files.length && !isUpdate
-    //   ) {
-    //     return false
-    //   }else if(isUpdate && compareArrays(valueInput.followers, ticketDetails.followers)
-    //     && !valueInput?.message?.length && !valueInput?.files?.length) {
-    //     return false
-    //   }
-    //   return true
-    // }, [valueInput])
     const updateValueInput = value => {
         setValueInput(prev => ({
             ...prev,
@@ -248,7 +233,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
     const handleEditorChange = content => {
         setTextValue(content);
         updateValueInput({ message: content });
-        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+        // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
     };
     const handleUpdateFollowers = arrFolowers => {
         const params = {
@@ -331,12 +316,17 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         };
     }, [isOpenToast]);
     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 {
@@ -363,34 +353,58 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         });
         setFileInputKey(prev => prev + 1);
     };
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                if (isBoolean(value)) {
+                    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;
+        }
+    };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsxs(Spin, { style: { height: '100vh' }, spinning: isLoading ||
                     isLoadingDetails ||
                     isLoadingDataSouce ||
                     isLoadingFollower ||
                     isLoadingSelectedAccount, children: [_jsxs(DrawerHeader, { children: [_jsx(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
                                     ? "Title can't be empty"
-                                    : '' }), _jsx("div", { id: "header-journey-right", className: "right-content", children: !isUpdate && (_jsx(Button, { type: "primary", onClick: handleSubmit, children: "Save" })) })] }), _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
+                                    : '' }), _jsx("div", { id: "header-journey-right", className: "right-content", children: !isUpdate && (_jsx(Button, { disabled: isLoadingUpload, type: "primary", onClick: handleSubmit, children: "Save" })) })] }), _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
                                                     ...accountManage,
                                                     ...(valueInput?.followers || []).map((item) => item.userId),
-                                                ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })] }), dataSelects?.map((data) => (
-                                    // eslint-disable-next-line react/jsx-key
-                                    _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { children: data.title }), _jsx("div", { style: { flex: 1 }, children: isUpdate ? (_jsx(WrapperTextEdit, { children: !valueInput[data?.value]?.name?.length
+                                                ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })] }), dataSelects?.map((data) => (_jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { children: data.title }), _jsx("div", { style: { flex: 1 }, children: isUpdate ? (_jsx(WrapperTextEdit, { children: !valueInput[data?.value]?.name?.length
                                                         ? '--'
-                                                        : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
-                                                // width="300px"
-                                                onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadImg({
+                                                        : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadImg({
                                                             domain: domainUpload,
                                                             token,
                                                             userId,
-                                                        }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => {
+                                                        }), onChange: handleEditorChange, callback: callbackEditor, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => {
                                                                                 handleRemoveFileV2(index);
                                                                             }, className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.file_name))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                             background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                                 ? '#ccc'
                                                                                 : '#1f5fac'}`,
-                                                                        }, onClick: handleUpdateComment, loading: isLoadingUpload, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
-                                                !valueInput?.message && (_jsx("div", { className: "error-message", children: "*This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
-                                                // mailFollower={comment?.mailFollower}
-                                                message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] })] })] }));
+                                                                        }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                !valueInput?.message && (_jsx("div", { className: "error-message", children: "*This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] })] })] }));
 };
 export default Content;

package/es/components/organism/TicketEditor/components/MessageComponent.js

@@ -19,6 +19,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         if (refMesage.current) {
             refMesage.current.querySelectorAll('img')?.forEach(img => {
                 img.style.cursor = 'pointer';
+                img.style.width = '100%';
                 img.addEventListener('click', () => {
                     setModalImg({
                         ...modalImg,