diff --git a/packages/web/src/javascripts/Application/WebApplication.ts b/packages/web/src/javascripts/Application/WebApplication.ts index c6f4e20a8..8aa26f89d 100644 --- a/packages/web/src/javascripts/Application/WebApplication.ts +++ b/packages/web/src/javascripts/Application/WebApplication.ts @@ -56,6 +56,7 @@ import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupC import { VisibilityObserver } from './VisibilityObserver' import { MomentsService } from '@/Controllers/Moments/MomentsService' import { DevMode } from './DevMode' +import { ToastType, addToast } from '@standardnotes/toast' export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void @@ -411,6 +412,11 @@ export class WebApplication extends SNApplication implements WebApplicationInter const insertedNote = await this.mutator.insertItem(note) this.controllers.selectionController.selectItem(insertedNote.uuid, true).catch(console.error) + + addToast({ + type: ToastType.Success, + message: 'Successfully created note from shared text', + }) } private async lockApplicationAfterMobileEventIfApplicable(): Promise { diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx index 1a2b7fb19..ced112fba 100644 --- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx +++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx @@ -1,6 +1,7 @@ +import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers' import { Dialog, DialogStoreProps, useDialogStore } from '@ariakit/react' import { classNames } from '@standardnotes/snjs' -import { ReactNode } from 'react' +import { ReactNode, useCallback } from 'react' const AlertDialog = ({ children, @@ -13,6 +14,15 @@ const AlertDialog = ({ ...props, }) + const addCloseMethod = useCallback( + (element: HTMLDivElement | null) => { + if (element) { + ;(element as DialogWithClose).close = closeDialog + } + }, + [closeDialog], + ) + return (
void } -type DialogWithClose = HTMLDivElement & { close: () => void } - const ModalOverlay = forwardRef( ( { isOpen, children, animationVariant, close, ...props }: Props & Partial, diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx index 2f43522ae..251f015b3 100644 --- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx +++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx @@ -6,6 +6,7 @@ import MobileModalAction from '../Modal/MobileModalAction' import { useModalAnimation } from '../Modal/useModalAnimation' import MobileModalHeader from '../Modal/MobileModalHeader' import { mergeRefs } from '@/Hooks/mergeRefs' +import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers' const DisableScroll = () => { useDisableBodyScrollOnMobile() @@ -13,8 +14,6 @@ const DisableScroll = () => { return null } -type PopoverWithClose = HTMLDivElement & { close: () => void } - const MobilePopoverContent = ({ open, requestClose, @@ -35,7 +34,7 @@ const MobilePopoverContent = ({ const addCloseMethod = useCallback( (element: HTMLDivElement | null) => { if (element) { - ;(element as PopoverWithClose).close = requestClose + ;(element as DialogWithClose).close = requestClose } }, [requestClose], diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx index 5034ffcd3..dbe3188c2 100644 --- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx +++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx @@ -10,6 +10,8 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' import { KeyboardKey } from '@standardnotes/ui-services' import { getAdjustedStylesForNonPortalPopover } from './Utils/getAdjustedStylesForNonPortal' +import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers' +import { mergeRefs } from '@/Hooks/mergeRefs' const PositionedPopoverContent = ({ align = 'end', @@ -82,6 +84,15 @@ const PositionedPopoverContent = ({ correctInitialScrollForOverflowedContent() }, [popoverElement, correctInitialScrollForOverflowedContent]) + const addCloseMethod = useCallback( + (element: HTMLDivElement | null) => { + if (element && togglePopover) { + ;(element as DialogWithClose).close = togglePopover + } + }, + [togglePopover], + ) + return (
{ if (event.key === KeyboardKey.Escape) { diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx index 09f428152..df94f9a9b 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx @@ -1,7 +1,9 @@ import { getPlatformString } from '@/Utils' import { classNames } from '@standardnotes/utils' import { Dialog, useDialogStore } from '@ariakit/react' -import { ForwardedRef, forwardRef, ReactNode } from 'react' +import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react' +import { mergeRefs } from '@/Hooks/mergeRefs' +import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers' type Props = { children: ReactNode @@ -13,11 +15,20 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw open: true, }) + const addCloseMethod = useCallback( + (element: HTMLDivElement | null) => { + if (element) { + ;(element as DialogWithClose).close = onDismiss + } + }, + [onDismiss], + ) + return (
void } + export const requestCloseAllOpenModalsAndPopovers = () => { document.querySelectorAll('[role="dialog"], [data-popover]').forEach((element) => { + // We add the close method to dialog & popovers to allow us to + // close them from anywhere in the app. if ('close' in element && typeof element.close === 'function') { element.close() }