chore: fix modal close on escape

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -237,7 +237,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
   })
 
   return (
-    <ModalOverlay isOpen={true} key={challenge.id} ref={setModalElement}>
+    <ModalOverlay isOpen={true} key={challenge.id} ref={setModalElement} close={cancelChallenge}>
       <Modal
         title="Authenticate"
         close={cancelChallenge}

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -255,7 +255,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
             )
           })}
       </Menu>
-      <ModalOverlay isOpen={showSuperNoteImporter}>
+      <ModalOverlay isOpen={showSuperNoteImporter} close={closeSuperNoteImporter}>
         {note && (
           <SuperNoteImporter
             note={note}
@@ -265,7 +265,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
           />
         )}
       </ModalOverlay>
-      <ModalOverlay isOpen={showSuperNoteConverter}>
+      <ModalOverlay isOpen={showSuperNoteConverter} close={closeSuperNoteConverter}>
         {note && pendingConversionItem && (
           <SuperNoteConverter
             note={note}

packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx

@@ -180,7 +180,7 @@ const ChangeMultipleMenu = ({ application, notes, setDisableClickOutside }: Prop
           </Fragment>
         ))}
       </Menu>
-      <ModalOverlay isOpen={showSuperImporter}>
+      <ModalOverlay isOpen={showSuperImporter} close={closeCurrentSuperNoteImporter}>
         {confirmationQueue[0] && (
           <SuperNoteImporter
             note={confirmationQueue[0]}

packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx

@@ -108,10 +108,10 @@ const AddItemMenuButton = ({
           </MenuItem>
         </Menu>
       </Popover>
-      <ModalOverlay isOpen={captureType === 'photo'}>
+      <ModalOverlay isOpen={captureType === 'photo'} close={closeCaptureModal}>
         <PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
       </ModalOverlay>
-      <ModalOverlay isOpen={captureType === 'video'}>
+      <ModalOverlay isOpen={captureType === 'video'} close={closeCaptureModal}>
         <VideoCaptureModal filesController={filesController} close={closeCaptureModal} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx

@@ -8,7 +8,7 @@ import RadioButtonGroup from '../RadioButtonGroup/RadioButtonGroup'
 import { EditorMargins, EditorMaxWidths } from './EditorWidths'
 import { useApplication } from '../ApplicationProvider'
 import ModalOverlay from '../Modal/ModalOverlay'
-import { CHANGE_EDITOR_WIDTH_COMMAND, ESCAPE_COMMAND } from '@standardnotes/ui-services'
+import { CHANGE_EDITOR_WIDTH_COMMAND } from '@standardnotes/ui-services'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { observer } from 'mobx-react-lite'
 import Switch from '../Switch/Switch'
@@ -37,7 +37,6 @@ const EditorWidthSelectionModal = ({
   close: () => void
   note: SNNote | undefined
 }) => {
-  const application = useApplication()
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
   const [value, setValue] = useState<EditorLineWidth>(() => initialValue)
@@ -88,16 +87,6 @@ const EditorWidthSelectionModal = ({
     [accept, close],
   )
 
-  useEffect(() => {
-    return application.keyboardService.addCommandHandler({
-      command: ESCAPE_COMMAND,
-      onKeyDown() {
-        close()
-        return true
-      },
-    })
-  }, [application.keyboardService, close])
-
   const DynamicMargin = (
     <div className="text-center text-sm text-passive-2">
       <div className={value !== EditorLineWidth.Dynamic ? 'hidden' : ''}>
@@ -207,7 +196,7 @@ const EditorWidthSelectionModalWrapper = () => {
   }, [application, toggle])
 
   return (
-    <ModalOverlay isOpen={isOpen}>
+    <ModalOverlay isOpen={isOpen} close={toggle}>
       <EditorWidthSelectionModal initialValue={lineWidth} handleChange={setLineWidth} close={toggle} note={note} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -285,7 +285,11 @@ FilePreviewModal.displayName = 'FilePreviewModal'
 
 const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   return (
-    <ModalOverlay aria-label="File preview modal" isOpen={viewControllerManager.filePreviewModalController.isOpen}>
+    <ModalOverlay
+      aria-label="File preview modal"
+      isOpen={viewControllerManager.filePreviewModalController.isOpen}
+      close={viewControllerManager.filePreviewModalController.dismiss}
+    >
       <FilePreviewModal application={application} viewControllerManager={viewControllerManager} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx

@@ -33,7 +33,7 @@ const ImportModal = ({ importModalController }: { importModalController: ImportM
   )
 
   return (
-    <ModalOverlay isOpen={isVisible}>
+    <ModalOverlay isOpen={isVisible} close={close}>
       <Modal title="Import" close={close} actions={modalActions}>
         <div className="px-4 py-4">
           {!files.length && <ImportModalInitialPage setFiles={setFiles} />}

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -7,13 +7,19 @@ type Props = {
   isOpen: boolean
   children: ReactNode
   animationVariant?: 'horizontal' | 'vertical'
+  close: () => void
 }
 
 const ModalOverlay = forwardRef(
-  ({ isOpen, children, animationVariant, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ isOpen, children, animationVariant, close, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
     const [isMounted, setElement] = useModalAnimation(isOpen, animationVariant)
     const dialog = useDialogStore({
       open: isMounted,
+      setOpen: (open) => {
+        if (!open) {
+          close()
+        }
+      },
     })
 
     if (!isMounted) {

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -413,7 +413,7 @@ const NotesOptions = ({
         </>
       ) : null}
 
-      <ModalOverlay isOpen={showExportSuperModal}>
+      <ModalOverlay isOpen={showExportSuperModal} close={closeSuperExportModal}>
         <SuperExportModal exportNotes={downloadSelectedItems} close={closeSuperExportModal} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx

@@ -44,7 +44,7 @@ const PermissionsModalWrapper: FunctionComponent<Props> = ({ application }) => {
   }, [application, onAppStart])
 
   return (
-    <ModalOverlay isOpen={!!dialog}>
+    <ModalOverlay isOpen={!!dialog} close={dismissPermissionsDialog}>
       {dialog && (
         <PermissionsModal
           callback={dialog.callback}

packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -58,12 +58,12 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
             Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
           </Text>
           <Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
-          <ModalOverlay isOpen={isChangeEmailDialogOpen}>
+          <ModalOverlay isOpen={isChangeEmailDialogOpen} close={closeChangeEmailDialog}>
             <ChangeEmail onCloseDialog={closeChangeEmailDialog} application={application} />
           </ModalOverlay>
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowPasswordWizard}>
+      <ModalOverlay isOpen={shouldShowPasswordWizard} close={dismissPasswordWizard}>
         <PasswordWizard application={application} dismissModal={dismissPasswordWizard} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx

@@ -48,7 +48,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
                 {!subscriptionState.allInvitationsUsed && (
                   <Button className="min-w-20" label="Invite" onClick={() => setIsInviteDialogOpen(true)} />
                 )}
-                <ModalOverlay isOpen={isInviteDialogOpen}>
+                <ModalOverlay isOpen={isInviteDialogOpen} close={closeInviteDialog}>
                   <Invite
                     onCloseDialog={closeInviteDialog}
                     application={application}

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx

@@ -89,10 +89,13 @@ const SmartViews = ({ application, featuresController }: Props) => {
           )}
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={!!editSmartViewModalController.view}>
+      <ModalOverlay isOpen={!!editSmartViewModalController.view} close={editSmartViewModalController.closeDialog}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
-      <ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
+      <ModalOverlay
+        isOpen={addSmartViewModalController.isAddingSmartView}
+        close={addSmartViewModalController.closeModal}
+      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx

@@ -113,7 +113,7 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowActivationModal}>
+      <ModalOverlay isOpen={shouldShowActivationModal} close={closeActivationModal}>
         <Modal title={activationModalTitle} close={closeActivationModal} actions={activationModalActions}>
           {shouldShowActivationModal && <TwoFactorActivationView activation={auth.status} />}
         </Modal>

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx

@@ -76,7 +76,7 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      <ModalOverlay isOpen={showDeviceAddingModal}>
+      <ModalOverlay isOpen={showDeviceAddingModal} close={() => setShowDeviceAddingModal(false)}>
         <U2FAddDeviceView
           onDeviceAddingModalToggle={setShowDeviceAddingModal}
           onDeviceAdded={loadAuthenticatorDevices}

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -7,8 +7,6 @@ import { PreferencesProps } from './PreferencesProps'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import Modal, { ModalAction } from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
-import { useCommandService } from '../CommandProvider'
-import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
 import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import Icon from '../Icon/Icon'
@@ -20,8 +18,6 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
   userProvider,
   mfaProvider,
 }) => {
-  const commandService = useCommandService()
-
   const menu = useMemo(
     () => new PreferencesMenu(application, viewControllerManager.enableUnfinishedFeatures),
     [viewControllerManager.enableUnfinishedFeatures, application],
@@ -47,16 +43,6 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
     }
   }, [addAndroidBackHandler, closePreferences])
 
-  useEffect(() => {
-    return commandService.addCommandHandler({
-      command: ESCAPE_COMMAND,
-      onKeyDown: () => {
-        closePreferences()
-        return true
-      },
-    })
-  }, [commandService, closePreferences])
-
   const { hasTopInset } = useAvailableSafeAreaPadding()
 
   const modalActions = useMemo(

packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -51,6 +51,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
       isOpen={viewControllerManager.preferencesController.isOpen}
       ref={setElement}
       animationVariant="horizontal"
+      close={viewControllerManager.preferencesController.closePreferences}
     >
       <PreferencesView
         closePreferences={viewControllerManager.preferencesController.closePreferences}

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -212,7 +212,10 @@ const SessionsModal: FunctionComponent<{
   application: WebApplication
 }> = ({ viewControllerManager, application }) => {
   return (
-    <ModalOverlay isOpen={viewControllerManager.isSessionsModalVisible}>
+    <ModalOverlay
+      isOpen={viewControllerManager.isSessionsModalVisible}
+      close={viewControllerManager.closeSessionsModal}
+    >
       <SessionsModalContent application={application} viewControllerManager={viewControllerManager} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx

@@ -234,7 +234,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
             </BlocksEditorComposer>
           </FilesControllerProvider>
         </LinkingControllerProvider>
-        <ModalOverlay isOpen={showMarkdownPreview}>
+        <ModalOverlay isOpen={showMarkdownPreview} close={closeMarkdownPreview}>
           <SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />
         </ModalOverlay>
       </ErrorBoundary>

packages/web/src/javascripts/Components/SuperEditor/SuperNoteMarkdownPreview.tsx

@@ -1,5 +1,5 @@
 import { SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
+import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
 import MarkdownPreviewPlugin from './Plugins/MarkdownPreviewPlugin/MarkdownPreviewPlugin'
 import { copyTextToClipboard } from '../../Utils/copyTextToClipboard'
@@ -7,8 +7,6 @@ import Modal, { ModalAction } from '@/Components/Modal/Modal'
 import { BlocksEditor } from './BlocksEditor'
 import { BlocksEditorComposer } from './BlocksEditorComposer'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
-import { useApplication } from '../ApplicationProvider'
-import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
 
 type Props = {
   note: SNNote
@@ -16,8 +14,6 @@ type Props = {
 }
 
 export const SuperNoteMarkdownPreview: FunctionComponent<Props> = ({ note, closeDialog }) => {
-  const application = useApplication()
-
   const [markdown, setMarkdown] = useState('')
   const [didCopy, setDidCopy] = useState(false)
 
@@ -54,16 +50,6 @@ export const SuperNoteMarkdownPreview: FunctionComponent<Props> = ({ note, close
     [closeDialog, copy, didCopy, isMobileScreen],
   )
 
-  useEffect(() => {
-    return application.keyboardService.addCommandHandler({
-      command: ESCAPE_COMMAND,
-      onKeyDown: () => {
-        closeDialog()
-        return true
-      },
-    })
-  }, [application.keyboardService, closeDialog])
-
   return (
     <Modal title="Markdown Preview" close={closeDialog} actions={modalActions}>
       <div className="relative w-full px-4 py-4">

packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx

@@ -54,10 +54,13 @@ const SmartViewsSection: FunctionComponent<Props> = ({ application, navigationCo
         featuresController={featuresController}
         setEditingSmartView={editSmartViewModalController.setView}
       />
-      <ModalOverlay isOpen={!!editSmartViewModalController.view}>
+      <ModalOverlay isOpen={!!editSmartViewModalController.view} close={editSmartViewModalController.closeDialog}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
-      <ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
+      <ModalOverlay
+        isOpen={addSmartViewModalController.isAddingSmartView}
+        close={addSmartViewModalController.closeModal}
+      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
     </section>