@antscorp/antsomi-ui 2.0.120 → 2.0.122

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,7 +10,7 @@ import { Spin, Tooltip, Icon, Button, EditableName, SelectAccount, QuillEditor,
 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 { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, uploadEmbeddedImages, } from './util';
 import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 import { isBoolean } from 'lodash';
 const initValueInput = {
@@ -49,6 +49,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         isError: false,
         message: '',
     });
+    const [embeddedImageError, setEmbeddedImageError] = useState('');
     const isUpdate = action === 'edit' && ticketId;
     const valueInputRef = useRef(valueInput);
     valueInputRef.current = valueInput;
@@ -94,20 +95,54 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
             setIsLoading(false);
         });
     };
-    const handleSubmit = () => {
+    const uploadImagesBeforeSubmit = async (message) => {
+        setIsLoadingUpload(true);
+        setEmbeddedImageError('');
+        try {
+            const uploadedMessage = await uploadEmbeddedImages(message, Service.tickets.callApi.uploadImg({
+                domain: domainUpload,
+                token,
+                userId,
+            }));
+            if (uploadedMessage !== message) {
+                setTextValue(uploadedMessage);
+                updateValueInput({ message: uploadedMessage });
+            }
+            return uploadedMessage;
+        }
+        catch (error) {
+            setEmbeddedImageError(error instanceof Error && error.message === 'FILE_TOO_LARGE'
+                ? '*Maximum upload file size: 10MB'
+                : '*Image upload failed. Please try again.');
+            throw error;
+        }
+        finally {
+            setIsLoadingUpload(false);
+        }
+    };
+    const handleSubmit = async () => {
         const { title, ownerId, message } = valueInputRef.current;
         if (!title || !ownerId.length || !message) {
             setIsEmptyField(true);
         }
         else {
             if (!errFile.isError) {
-                const params = formatParams(valueInputRef.current);
-                const submitterEmail = listUsers?.find(user => user.userId === params.ownerId)?.email;
-                fetchCreateTicket({
-                    ...params,
-                    submitterId: Number(userId),
-                    submitterEmail: submitterEmail,
-                });
+                try {
+                    const uploadedMessage = await uploadImagesBeforeSubmit(message);
+                    const params = formatParams({
+                        ...valueInputRef.current,
+                        message: uploadedMessage,
+                    });
+                    const submitterEmail = listUsers?.find(user => user.userId === params.ownerId)?.email;
+                    fetchCreateTicket({
+                        ...params,
+                        submitterId: Number(userId),
+                        submitterEmail,
+                    });
+                }
+                catch (error) {
+                    // The upload error is shown below the editor.
+                }
             }
             // handleSendData(valueInput)
         }
@@ -231,6 +266,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         }
     }, [isUpdate, openDrawer]);
     const handleEditorChange = content => {
+        setEmbeddedImageError('');
         setTextValue(content);
         updateValueInput({ message: content });
         // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
@@ -244,32 +280,34 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         }
         fetchUpdateFollwers(params);
     };
-    const handleUpdateComment = () => {
-        setIsLoading(true);
-        const params = {
-            followers: [],
-            submitterId: null,
-            ownerId: null,
-            submitterEmail: '',
-            properties: {},
-            message: '',
-            attachmentsZendesk: [],
-        };
-        if (valueInput?.followers?.length) {
-            params.followers = formatAccountId(valueInput?.followers);
-        }
-        if (valueInput?.files?.length > 0) {
-            params.properties = {
-                attachments: valueInput?.files,
+    const handleUpdateComment = async () => {
+        const currentValueInput = valueInputRef.current;
+        try {
+            const uploadedMessage = await uploadImagesBeforeSubmit(currentValueInput.message);
+            const params = {
+                followers: [],
+                submitterId: userId,
+                ownerId: Number(currentValueInput?.ownerId[0]?.userId),
+                submitterEmail: listUsers?.find(user => +user.userId === +userId)?.email,
+                properties: {},
+                message: uploadedMessage,
+                attachmentsZendesk: currentValueInput.fileZendesk.map(file => file.token),
             };
+            if (currentValueInput?.followers?.length) {
+                params.followers = formatAccountId(currentValueInput.followers);
+            }
+            if (currentValueInput?.files?.length > 0) {
+                params.properties = {
+                    attachments: currentValueInput.files,
+                };
+            }
+            setIsLoading(true);
+            fetchUpdateComment(params);
+            handleUpdateFollowers(currentValueInput?.followers?.map((fol) => fol.userId));
+        }
+        catch (error) {
+            // The upload error is shown below the editor.
         }
-        params.submitterId = userId;
-        params.submitterEmail = listUsers?.find(user => +user.userId === +userId)?.email;
-        params.ownerId = Number(valueInput?.ownerId[0]?.userId);
-        params.message = valueInput?.message;
-        params.attachmentsZendesk = valueInput.fileZendesk.map(file => file.token);
-        fetchUpdateComment(params);
-        handleUpdateFollowers(valueInput?.followers?.map((fol) => fol.userId));
     };
     const handleUploadFile = async (file) => {
         setIsLoading(true);
@@ -387,7 +425,8 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
                     isLoadingDetails ||
                     isLoadingDataSouce ||
                     isLoadingFollower ||
-                    isLoadingSelectedAccount, children: [_jsxs(DrawerHeader, { children: [_jsx(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
+                    isLoadingSelectedAccount ||
+                    isLoadingUpload, 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, { 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,
@@ -404,7 +443,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
                                                                             background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                                 ? '#ccc'
                                                                                 : '#1f5fac'}`,
-                                                                        }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                                        }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), embeddedImageError ? (_jsx("div", { className: "error-message", children: embeddedImageError })) : 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;