diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx index c9c994044..9bcf17a80 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx +++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx @@ -30,6 +30,7 @@ const MobileToolbarPlugin = () => { const [modal, showModal] = useModal() const [isInEditor, setIsInEditor] = useState(false) + const [isInToolbar, setIsInToolbar] = useState(false) const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) const toolbarRef = useRef(null) @@ -151,14 +152,34 @@ const MobileToolbarPlugin = () => { } }, [editor]) - if (!isMobile || !isInEditor) { + useEffect(() => { + if (!toolbarRef.current) { + return + } + + const toolbar = toolbarRef.current + + const handleFocus = () => setIsInToolbar(true) + const handleBlur = () => setIsInToolbar(false) + + toolbar.addEventListener('focus', handleFocus) + toolbar.addEventListener('blur', handleBlur) + + return () => { + toolbar?.removeEventListener('focus', handleFocus) + toolbar?.removeEventListener('blur', handleBlur) + } + }, []) + + const isFocusInEditorOrToolbar = isInEditor || isInToolbar + if (!isMobile || !isFocusInEditorOrToolbar) { return null } return ( <> {modal} -
+
{items.map((item) => { return (