diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index e4f383e1..124a3222 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/apps/frontend/src/components/launches/add.edit.model.tsx @@ -86,6 +86,7 @@ export const AddEditModal: FC<{ const [customer, setCustomer] = useState(''); const [loading, setLoading] = useState(false); const [uploading, setUploading] = useState(false); + const [canUseClose, setCanUseClose] = useState(true); // selected integrations to allow edit const [selectedIntegrations, setSelectedIntegrations] = useStateCallback< @@ -251,6 +252,10 @@ export const AddEditModal: FC<{ // override the close modal to ask the user if he is sure to close const askClose = useCallback(async () => { + if (!canUseClose) { + return; + } + if ( await deleteDialog( 'Are you sure you want to close this modal? (all data will be lost)', @@ -259,7 +264,7 @@ export const AddEditModal: FC<{ ) { modal.closeAll(); } - }, []); + }, [canUseClose]); // sometimes it's easier to click escape to close useKeypress('Escape', askClose); @@ -644,6 +649,8 @@ export const AddEditModal: FC<{ value={p.image} name="image" onChange={changeImage(index)} + onOpen={() => setCanUseClose(false)} + onClose={() => setCanUseClose(true)} />
diff --git a/apps/frontend/src/components/launches/bold.text.tsx b/apps/frontend/src/components/launches/bold.text.tsx index 04f8371f..216e8192 100644 --- a/apps/frontend/src/components/launches/bold.text.tsx +++ b/apps/frontend/src/components/launches/bold.text.tsx @@ -67,21 +67,25 @@ const originalMap = { '0': '𝟬', }; +const reverseMap = Object.fromEntries( + Object.entries(originalMap).map(([key, value]) => [value, key]) +); + export const BoldText: FC<{ editor: any; currentValue: string }> = ({ editor, }) => { const mark = () => { const selectedText = Editor.string(editor, editor.selection); - const newText = ( + const newText = Array.from( !selectedText ? prompt('What do you want to write?') || '' : selectedText ) - .split('') - // @ts-ignore - .map((char) => originalMap?.[char] || char) + .map((char) => { + // @ts-ignore + return originalMap?.[char] || reverseMap?.[char] || char; + }) .join(''); - Transforms.insertText(editor, newText); ReactEditor.focus(editor); }; diff --git a/apps/frontend/src/components/launches/editor.tsx b/apps/frontend/src/components/launches/editor.tsx index 39131433..224ca0e3 100644 --- a/apps/frontend/src/components/launches/editor.tsx +++ b/apps/frontend/src/components/launches/editor.tsx @@ -50,8 +50,10 @@ export const Editor = forwardRef< const addText = useCallback( (emoji: string) => { - // @ts-ignore - Transforms.insertText(newRef?.current?.editor!, emoji); + setTimeout(() => { + // @ts-ignore + Transforms.insertText(newRef?.current?.editor!, emoji); + }, 10); }, [props.value, id] ); diff --git a/apps/frontend/src/components/launches/u.text.tsx b/apps/frontend/src/components/launches/u.text.tsx index 143d6410..2115816e 100644 --- a/apps/frontend/src/components/launches/u.text.tsx +++ b/apps/frontend/src/components/launches/u.text.tsx @@ -66,18 +66,25 @@ const underlineMap = { '9': '9̲', '0': '0̲', }; + +const reverseMap = Object.fromEntries( + Object.entries(underlineMap).map(([key, value]) => [value, key]) +); + export const UText: FC<{ editor: any; currentValue: string }> = ({ editor, }) => { const mark = () => { const selectedText = Editor.string(editor, editor.selection); - const newText = ( - !selectedText ? prompt('What do you want to write?') || '' : selectedText + const setUnderline = selectedText.indexOf('̲') === -1; + const newText = Array.from( + !selectedText ? prompt('What do you want to write?') || '' : selectedText.replace(/̲/g, '') ) - .split('') - // @ts-ignore - .map((char) => underlineMap?.[char] || char) + .map((char) => { + // @ts-ignore + return (setUnderline ? underlineMap?.[char] : reverseMap?.[char]) || char; + }) .join(''); Transforms.insertText(editor, newText); @@ -101,7 +108,10 @@ export const UText: FC<{ editor: any; currentValue: string }> = ({ d="M10.4119 6.47V12.77C10.4119 13.4 10.5669 13.885 10.8769 14.225C11.1869 14.565 11.6419 14.735 12.2419 14.735C12.8419 14.735 13.3019 14.565 13.6219 14.225C13.9419 13.885 14.1019 13.4 14.1019 12.77V6.47H16.6669V12.755C16.6669 13.695 16.4669 14.49 16.0669 15.14C15.6669 15.79 15.1269 16.28 14.4469 16.61C13.7769 16.94 13.0269 17.105 12.1969 17.105C11.3669 17.105 10.6219 16.945 9.96191 16.625C9.31191 16.295 8.79691 15.805 8.41691 15.155C8.03691 14.495 7.84691 13.695 7.84691 12.755V6.47H10.4119Z" fill="currentColor" /> - + diff --git a/apps/frontend/src/components/layout/click.outside.tsx b/apps/frontend/src/components/layout/click.outside.tsx index 806df528..7139ecb1 100644 --- a/apps/frontend/src/components/layout/click.outside.tsx +++ b/apps/frontend/src/components/layout/click.outside.tsx @@ -5,13 +5,11 @@ export const useClickOutside = (callback: () => Promise) => { const selector = document.querySelector('#add-edit-modal'); const copilotkit = document.querySelector('.copilotKitPopup'); const emoji = document.querySelector('.EmojiPickerReact'); + if ( - selector && - !selector.contains(event.target as HTMLElement) && - copilotkit && - !copilotkit.contains(event.target as HTMLElement) && - emoji && - !emoji.contains(event.target as HTMLElement) + !selector?.contains(event.target as HTMLElement) && + !copilotkit?.contains(event.target as HTMLElement) && + !emoji ) { callback(); } diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index bc4772ce..0e9d6f95 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -439,11 +439,21 @@ export const MultiMediaComponent: FC<{ text: string; name: string; error?: any; + onOpen?: () => void; + onClose?: () => void; onChange: (event: { target: { name: string; value?: Array<{ id: string; path: string }> }; }) => void; }> = (props) => { - const { name, label, error, text, description, onChange, value } = props; + const { + onOpen, + onClose, + name, + error, + text, + onChange, + value, + } = props; const user = useUser(); useEffect(() => { @@ -469,10 +479,16 @@ export const MultiMediaComponent: FC<{ ); const showModal = useCallback(() => { + if (!modal) { + onOpen?.(); + } else { + onClose?.(); + } setShowModal(!modal); - }, [modal]); + }, [modal, onOpen, onClose]); const closeDesignModal = useCallback(() => { + onClose?.(); setMediaModal(false); }, [modal]); @@ -486,6 +502,7 @@ export const MultiMediaComponent: FC<{ ); const designMedia = useCallback(() => { + onOpen?.(); setMediaModal(true); }, []);