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

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -23,10 +23,11 @@ import { MATCHES_ANY_THEME } from './constants';
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
-import { getSelectedTreeData } from './utils';
+import { getSelectedTreeData, NUMBER_REGEX } from './utils';
 // Icons
 import { DataIcon, ErrorIcon, LongerIcon, WarningIcon } from '../../icons';
 import { translate, translations as translationsLocale } from '@antscorp/antsomi-locales';
+import { DATA_TYPES } from '../../organism/FilterSetting/constants';
 const initialState = {
     isOpenPopover: false,
     searchValue: '',
@@ -43,12 +44,15 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { maxSelectedItem, maxLengthEachItem, objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
+    const { dataType, maxSelectedItem, maxLengthEachItem, objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     const [maxItemsError, setMaxItemsError] = useState(false);
     const [itemOverMaxLength, setItemOverMaxLength] = useState(false);
     const [isApply, setIsApply] = useState(false);
+    const [isExistString, setIsExistString] = useState(false);
+    // If data type is number or array number filter data
+    const shouldFilterNumber = dataType === DATA_TYPES.NUMBER || dataType === DATA_TYPES.ARRAY_NUMBER;
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
     const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
@@ -60,8 +64,10 @@ export function MatchesAny(props) {
             : false;
         setMaxItemsError(!!isOverMaxSelected);
         setItemOverMaxLength(!!isSomeTextTooLong);
-        if (isApply && !isOverMaxSelected && !isSomeTextTooLong)
+        if (isApply && !isOverMaxSelected && !isSomeTextTooLong) {
             setIsApply(false);
+            setIsExistString(false);
+        }
     }, [selectedItems, maxSelectedItem, maxLengthEachItem, isApply]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
@@ -147,6 +153,7 @@ export function MatchesAny(props) {
             selectedExpandedKeys: newSelectedExpandKeys,
             selectedTreeData: newSelectedTreeData,
         }));
+        setIsExistString(false);
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -156,6 +163,7 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
+        setIsExistString(false);
         setState(prev => {
             const newSelectedItems = prev.selectedItems?.filter(selectedItem => {
                 if (item.children) {
@@ -174,9 +182,11 @@ export function MatchesAny(props) {
         });
     };
     const onRemoveAll = () => {
+        setIsExistString(false);
         setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
     };
     const onClickApply = () => {
+        setIsExistString(false);
         if (maxItemsError || itemOverMaxLength) {
             setIsApply(true);
             return;
@@ -313,6 +323,7 @@ export function MatchesAny(props) {
             .map(item => item.key);
         const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
+        setIsExistString(false);
         setState(prev => ({
             ...prev,
             selectedItems: newSelectedItems,
@@ -359,16 +370,21 @@ export function MatchesAny(props) {
         const availableExtendValues = extendValues?.filter(value => !selectedItems?.some(item => item.title === value));
         // If there are available values to add
         if (availableExtendValues) {
+            // check extendValues has string data type
+            const isExistString = shouldFilterNumber ? availableExtendValues.some(value => !NUMBER_REGEX.test(value)) : false;
             // Create new items in the format required (MatchesAnyItem)
             const newSelectedItems = [
                 ...(selectedItems || []),
-                ...availableExtendValues.map(value => ({
+                ...(isExistString
+                    ? availableExtendValues.filter(value => NUMBER_REGEX.test(value))
+                    : availableExtendValues).map(value => ({
                     key: value,
                     title: value,
                     isExtendValue: true, // Flag to indicate that this item is an extend value
                 })),
             ];
             const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+            setIsExistString(isExistString);
             setState(prev => ({
                 ...prev,
                 selectedItems: newSelectedItems,
@@ -376,10 +392,10 @@ export function MatchesAny(props) {
             }));
         }
     };
-    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), isApply && (maxItemsError || itemOverMaxLength) && (_jsxs(_Fragment, { children: [_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) }), itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
+    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), _jsxs("div", { children: [isApply && (maxItemsError || itemOverMaxLength) && (_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) })), isExistString && (_jsx(Typography, { style: { color: globalToken?.orange6 }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_VAL_NUM_VAL) }))] }), isApply && itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, shouldFilterNumber: shouldFilterNumber, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
 }
 export function MatchesAnySelect(props) {
-    const { maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
+    const { dataType, maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -396,7 +412,7 @@ export function MatchesAnySelect(props) {
         onChange(selectedItems, selectedTreeData);
         setState(prev => ({ ...prev, isOpenPopover: false }));
     };
-    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { maxSelectedItem: maxSelectedItem, maxLengthEachItem: maxLengthEachItem, isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
+    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { maxSelectedItem: maxSelectedItem, maxLengthEachItem: maxLengthEachItem, dataType: dataType, isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
                 setState(prev => ({ ...prev, searchValue }));
                 if (onChangeSearch)
                     onChangeSearch(searchValue);

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
 interface ExtendValuePopupProps extends PopoverProps {
     onApply?: (extendValues: string[]) => void;
+    shouldFilterNumber?: boolean;
 }
 export declare const ExtendValuePopup: React.FC<ExtendValuePopupProps>;
 export {};

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.js

@@ -20,10 +20,13 @@ const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
     border: 1px solid ${blue1} !important;
     border-radius: ${borderRadius}px;
   }
+  ::-webkit-input-placeholder {
+    opacity: 1 !important;
+  }
 `;
 export const ExtendValuePopup = props => {
     // Props
-    const { children, onApply = () => { }, ...restProps } = props;
+    const { shouldFilterNumber = false, children, onApply = () => { }, ...restProps } = props;
     // State
     const [state, setState] = useState({
         isOpenPopover: false,
@@ -49,5 +52,7 @@ export const ExtendValuePopup = props => {
             width: 500,
         }, trigger: ['click'], arrow: false, placement: "topRight", onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), ...restProps, content: _jsx(ApplyPopupContent, { title: t(translations.extendValue.title).toString(), applyButtonProps: {
                 disabled: !extendValues?.trim(),
-            }, onCancel: onClosePopover, onApply: () => form.submit(), children: _jsx(Form, { form: form, onFinish: onFinishSubmit, children: _jsx(Form.Item, { noStyle: true, name: "extendValues", children: _jsx(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(translations.extendValue.placeholder).toString() }) }) }) }), children: children }));
+            }, onCancel: onClosePopover, onApply: () => form.submit(), children: _jsx(Form, { form: form, onFinish: onFinishSubmit, children: _jsx(Form.Item, { noStyle: true, name: "extendValues", children: _jsx(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(shouldFilterNumber
+                            ? translations.extendValue.placeholderNumber
+                            : translations.extendValue.placeholder).toString() }) }) }) }), children: children }));
 };

package/es/components/molecules/MatchAnySelect/types.d.ts

@@ -28,6 +28,7 @@ export type CustomItemRenders<TItem> = {
     error?: (item: MatchesAnyItem<TItem>) => ReactNode;
 };
 export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'onChange'> {
+    dataType?: string;
     /** Maximum item can select from items list */
     maxSelectedItem?: number;
     /** Max character of each item selected
@@ -67,7 +68,7 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'searchValue' | 'maxSelectedItem' | 'maxLengthEachItem'> {
+export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'searchValue' | 'maxSelectedItem' | 'maxLengthEachItem' | 'dataType'> {
     /** Indicates handle search out of component */
     isExternalSearch?: boolean;
     /**

package/es/components/molecules/MatchAnySelect/utils.d.ts

@@ -90,3 +90,4 @@ export declare const getSelectedTreeData: (items: MatchesAnyItem<any>[], selecte
     [Symbol.iterator]: () => IterableIterator<string>;
     at: (index: number) => string | undefined;
 }[];
+export declare const NUMBER_REGEX: RegExp;

package/es/components/molecules/MatchAnySelect/utils.js

@@ -66,3 +66,5 @@ export const getSelectedTreeData = (items, selectedItems, selectedTreeData = [])
     ]);
     return unionBy(treeData, 'key');
 };
+// filter number data
+export const NUMBER_REGEX = /^-?\d+(\.\d+)?$/;

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/molecules/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -7,13 +7,16 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;
-        pathKey: import("./types").PathKey;
+        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: import("./types").ItemType) => React.ReactNode);
+    action: React.ReactNode | ((item: import("./types").ItemType, others: {
+        expandEl: React.ReactNode;
+    }) => React.ReactNode);
 }> & {
     mode?: "inline" | undefined;
 } & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;