@antscorp/antsomi-ui 2.0.89 → 2.0.90

package/es/components/molecules/QuillEditor/EditorToolbar.js

@@ -69,6 +69,7 @@ export const formats = [
     'image',
     'color',
     'code-block',
+    'imageBlot',
 ];
 const ToolBarWrapper = styled.div `
   border: 1px solid ${props => props.borderColor} !important;

package/es/components/molecules/QuillEditor/QuillEditor.d.ts

@@ -1,7 +1,12 @@
 import 'quill/dist/quill.snow.css';
+export declare enum TCallBack {
+    LOADING_UPLOAD = "LOADING_UPLOAD",
+    ERROR = "error"
+}
 type TEditorProps = {
     value: string;
     onChange: (value: string) => void;
+    callback?: (type: TCallBack, value: string | boolean) => void;
     placeholder: string;
     uploadService?: Function;
     height?: string | number;
@@ -9,5 +14,5 @@ type TEditorProps = {
     borderColor?: string;
     isRoundCorner?: boolean;
 };
-export declare const QuillEditor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, borderColor, isRoundCorner, }: TEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillEditor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, borderColor, isRoundCorner, callback, }: TEditorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/es/components/molecules/QuillEditor/QuillEditor.js

@@ -1,48 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Quill from 'quill';
-import { ImageHandler } from 'quill-upload';
+import { isFunction } from 'lodash';
+import QuillImageDropAndPaste from 'quill-image-drop-and-paste';
 // Hooks
 import debounce from 'lodash/debounce';
 // Components
 import EditorToolbar, { modules, formats } from './EditorToolbar';
 // Styles
 import 'quill/dist/quill.snow.css';
-import styled from 'styled-components';
-Quill.register('modules/imageHandler', ImageHandler);
+import { EditorWrapper, LoadingOverlay, QuillWrapper } from './styled';
+import { Spin } from '../../atoms';
 const Block = Quill.import('blots/block');
 Block.tagName = 'DIV';
 Quill.register(Block, true);
-// const toolbarOptions = [
-//   ['bold', 'italic', 'underline', 'strike'],
-//   ['blockquote', 'code-block'],
-//   ['link', 'image', 'video', 'formula'],
-//   [{ header: 1 }, { header: 2 }],
-//   [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
-//   [{ script: 'sub' }, { script: 'super' }],
-//   [{ indent: '-1' }, { indent: '+1' }],
-//   [{ direction: 'rtl' }],
-//   [{ size: ['small', false, 'large', 'huge'] }],
-//   [{ header: [1, 2, 3, 4, 5, 6, false] }],
-//   [{ color: [] }, { background: [] }],
-//   [{ font: [] }],
-//   [{ align: [] }],
-//   ['clean'],
-// ];
-const EditorWrapper = styled.div `
-  border: 1px solid ${props => props.borderColor} !important;
-
-  .ql-editor.ql-blank::before {
-    font-style: normal !important;
-  }
-
-  .ql-editor a {
-    color: #06c !important;
-  }
-`;
-export const QuillEditor = ({ value, onChange, placeholder = '', uploadService, height = 'auto', maxImgHeight = '300px', borderColor = '#d4d4d4', isRoundCorner, }) => {
+Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste);
+export var TCallBack;
+(function (TCallBack) {
+    TCallBack["LOADING_UPLOAD"] = "LOADING_UPLOAD";
+    TCallBack["ERROR"] = "error";
+})(TCallBack || (TCallBack = {}));
+export const QuillEditor = ({ value, onChange, placeholder = '', uploadService, height = 'auto', maxImgHeight = '300px', borderColor = '#d4d4d4', isRoundCorner, callback = () => { }, }) => {
     const editor = useRef(null);
     const rand = useRef(String(Math.random()).replace(/\./g, ''));
+    const [isUploading, setIsUploading] = useState(false);
     const processText = () => {
         editor.current?.root.querySelectorAll('li').forEach(li => {
             let max = 0;
@@ -56,22 +37,76 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
     const debounceQuickProcess = debounce(processText, 100);
     const debounceChange = debounce(onChange, 500);
     // Upload handler function
-    const _onUpload = async (file, resolve) => {
+    const _onUpload = async (file) => {
         try {
+            setIsUploading(true);
+            callback(TCallBack.LOADING_UPLOAD, true);
             const result = await uploadService({ files: [file], mode: 'file' });
             if (result?.data?.length) {
-                resolve(result.data[0].url);
-                editor.current.root.querySelectorAll('img.quill-upload-progress').forEach(el => {
-                    el.classList.remove('quill-upload-progress');
-                    el.style.maxHeight = maxImgHeight;
-                });
+                return result.data[0].url;
+            }
+            return '';
+        }
+        finally {
+            setIsUploading(false);
+            isFunction(callback) && callback(TCallBack.LOADING_UPLOAD, false);
+        }
+    };
+    const handlerDropImage = async (_imageDataUrl, _type, imageData) => {
+        callback(TCallBack.ERROR, 'RESET');
+        const file = imageData.toFile();
+        if (!editor.current)
+            return;
+        if (file.size > 10 * 1024 * 1024) {
+            callback(TCallBack.ERROR, 'FILE_TOO_LARGE');
+            return;
+        }
+        const range = editor.current?.getSelection();
+        if (!range)
+            return;
+        // Insert loading placeholder
+        try {
+            const fileUrl = await _onUpload(file);
+            if (fileUrl) {
+                const currentRange = editor.current?.getSelection();
+                editor.current?.insertEmbed(currentRange?.index || range.index, 'image', fileUrl, Quill.sources.USER);
             }
-            resolve('');
         }
         catch (error) {
-            resolve('');
+            callback(TCallBack.ERROR, 'UPLOAD_FAILED');
         }
     };
+    const imageHandler = useCallback(() => {
+        callback(TCallBack.ERROR, 'RESET');
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.click();
+        input.onchange = async () => {
+            if (input !== null && input.files !== null) {
+                if (!editor.current)
+                    return;
+                const file = input.files[0];
+                if (file.size > 10 * 1024 * 1024) {
+                    callback(TCallBack.ERROR, 'FILE_TOO_LARGE');
+                    return;
+                }
+                const range = editor.current?.getSelection();
+                if (!range)
+                    return;
+                try {
+                    const fileUrl = await _onUpload(file);
+                    if (fileUrl) {
+                        const currentRange = editor.current?.getSelection();
+                        editor.current?.insertEmbed(currentRange?.index || range.index, 'image', fileUrl, Quill.sources.USER);
+                    }
+                }
+                catch (error) {
+                    callback(TCallBack.ERROR, 'UPLOAD_FAILED');
+                }
+            }
+        };
+    }, []);
     useEffect(() => {
         if (!value && editor.current) {
             editor.current.setText('');
@@ -80,22 +115,21 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
     useEffect(() => {
         if (editor.current)
             return;
+        const configModule = modules(`toolbar-${rand.current}`);
         editor.current = new Quill(`#editor-${rand.current}`, {
             theme: 'snow',
             modules: {
-                ...modules(`toolbar-${rand.current}`),
-                imageHandler: uploadService
-                    ? {
-                        imageClass: 'custom-image-class',
-                        upload: file => new Promise(resolve => {
-                            if (file.size > 10 * 1024 * 1024) {
-                                resolve('');
-                                return;
-                            }
-                            _onUpload(file, resolve);
-                        }),
-                    }
-                    : undefined,
+                ...configModule,
+                toolbar: {
+                    ...configModule.toolbar,
+                    handlers: {
+                        ...configModule.toolbar.handlers,
+                        image: imageHandler,
+                    },
+                },
+                imageDropAndPaste: {
+                    handler: handlerDropImage,
+                },
             },
             formats,
             placeholder,
@@ -111,8 +145,9 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
                 else {
                     debounceChange(editor.current?.root.innerHTML || '');
                 }
+                callback(TCallBack.ERROR, 'RESET');
             }
         });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(EditorToolbar, { id: `toolbar-${rand.current}`, isRoundCorner: isRoundCorner, borderColor: borderColor }), _jsx(EditorWrapper, { id: `editor-${rand.current}`, style: { height, color: '#000000' }, borderColor: borderColor })] }));
+    return (_jsxs(QuillWrapper, { children: [_jsx(EditorToolbar, { id: `toolbar-${rand.current}`, isRoundCorner: isRoundCorner, borderColor: borderColor }), _jsx(EditorWrapper, { id: `editor-${rand.current}`, style: { height, color: '#000000' }, borderColor: borderColor, children: isUploading && (_jsx(LoadingOverlay, { children: _jsx(Spin, { spinning: isUploading }) })) })] }));
 };

package/es/components/molecules/QuillEditor/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const QuillWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
+    borderColor: string;
+}, never>;
+export declare const LoadingOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/QuillEditor/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+export const QuillWrapper = styled.div `
+  position: relative;
+`;
+export const EditorWrapper = styled.div `
+  position: relative;
+  border: 1px solid ${props => props.borderColor} !important;
+
+  .ql-editor.ql-blank::before {
+    font-style: normal !important;
+  }
+
+  .ql-editor a {
+    color: #06c !important;
+  }
+`;
+export const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+`;

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/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,

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

@@ -424,6 +424,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

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

@@ -10,6 +10,7 @@ import Service from './Service';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, } from './styled';
 import { formatDatarender, handleValidateContent } from './util';
 import { get, keyBy } from 'lodash';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const initValueInput = {
     originTitle: 'Create new ticket',
     title: '',
@@ -137,7 +138,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
     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 = {
@@ -221,12 +222,17 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         };
     }, [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 {
@@ -267,15 +273,43 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                             ? '--'
                             : dataSelectOptions[ticketDetails[info?.value]]?.name }) })] }, info.id));
     };
+    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;
+        }
+    };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading || isLoadingDetails || isLoadingDataSouce || isLoadingFollower, children: _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: "*" })] }), _jsx("div", { children: ownerEmail })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: ticketDetails?.followers || [], nameKey: "userName", userIdKey: "userId", users: listUsers, onChange: (_, followers) => onChangeFollowers(followers) })] }), dataSelects?.map((data) => _jsx(_Fragment, { children: renderOptions(data) })), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (ticketDetails.referenceUrl ? (_jsx(Tooltip, { title: ticketDetails.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.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.uploadFile({
+                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs(_Fragment, { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
                                                         domain: domainUpload,
-                                                    }), 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: () => handleRemoveFileV2(index), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _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: {
+                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195, callback: callbackEditor }), _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?.token))) })), _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 &&
+                                                                    }, 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, 
                                             // mailFollower={comment?.mailFollower}
                                             message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] }) })] }));

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

@@ -18,6 +18,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,

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

@@ -34,7 +34,7 @@ export const WrapperLeftContent = styled.div `
 `;
 export const WrapperRightContent = styled.div `
   flex: 2;
-  width: 100%;
+  max-width: 66.67%;
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -423,6 +423,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.89",
+  "version": "2.0.90",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -113,6 +113,7 @@
     "qs": "6.10.3",
     "quill": "2.0.3",
     "quill-upload": "0.0.13",
+    "quill-image-drop-and-paste": "^2.0.1",
     "react-ace": "9.5.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",