diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx index 52adab90f..bbcac23a0 100644 --- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx +++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx @@ -29,7 +29,7 @@ import { VaultUserServiceEvent, } from '@standardnotes/snjs' import { confirmDialog, DELETE_NOTE_KEYBOARD_COMMAND, KeyboardKey } from '@standardnotes/ui-services' -import { ChangeEventHandler, createRef, CSSProperties, KeyboardEventHandler, RefObject } from 'react' +import { ChangeEventHandler, createRef, CSSProperties, FocusEvent, KeyboardEventHandler, RefObject } from 'react' import { SuperEditor } from '../SuperEditor/SuperEditor' import IndicatorCircle from '../IndicatorCircle/IndicatorCircle' import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer' @@ -826,7 +826,10 @@ class NoteView extends AbstractComponent { this.setState({ plainEditorFocused: true }) } - onPlainBlur = () => { + onPlainBlur = (event: FocusEvent) => { + if (event.relatedTarget?.id === ElementIds.NoteOptionsButton) { + return + } this.setState({ plainEditorFocused: false }) } @@ -937,30 +940,33 @@ class NoteView extends AbstractComponent { {pluralize(this.state.conflictedNotes.length, 'conflict', 'conflicts')} )} - {renderHeaderOptions && ( -
- {!this.state.readonly && ( - <> - - - - - )} - -
- )} +
+ {!this.state.readonly && renderHeaderOptions && ( + <> + + + + + )} + { + this.setState({ + plainEditorFocused: false, + }) + }} + /> +
diff --git a/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx b/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx index fdbdf32e0..6f0cca3d8 100644 --- a/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx +++ b/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx @@ -16,7 +16,16 @@ import { PrefDefaults, } from '@standardnotes/snjs' import { TAB_COMMAND } from '@standardnotes/ui-services' -import { ChangeEventHandler, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react' +import { + ChangeEventHandler, + forwardRef, + useCallback, + useEffect, + useImperativeHandle, + useRef, + useState, + FocusEvent, +} from 'react' import { NoteViewController } from '../Controller/NoteViewController' type Props = { @@ -25,7 +34,7 @@ type Props = { controller: NoteViewController locked: boolean onFocus: () => void - onBlur: () => void + onBlur: (event: FocusEvent) => void } export type PlainEditorInterface = { @@ -106,13 +115,16 @@ export const PlainEditor = forwardRef( onFocus() }, [application, isAdjustingMobileCursor, lastEditorFocusEventSource, onFocus]) - const onContentBlur = useCallback(() => { - if (lastEditorFocusEventSource.current) { - application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: lastEditorFocusEventSource }) - } - lastEditorFocusEventSource.current = undefined - onBlur() - }, [application, lastEditorFocusEventSource, onBlur]) + const onContentBlur = useCallback( + (event: FocusEvent) => { + if (lastEditorFocusEventSource.current) { + application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: lastEditorFocusEventSource }) + } + lastEditorFocusEventSource.current = undefined + onBlur(event) + }, + [application, lastEditorFocusEventSource, onBlur], + ) const scrollMobileCursorIntoViewAfterWebviewResize = useCallback(() => { if (needsAdjustMobileCursor.current) { diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx index 4562e507e..55c492841 100644 --- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx +++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx @@ -1,17 +1,19 @@ -import { useCallback, useRef, useState } from 'react' +import { FocusEvent, useCallback, useRef, useState } from 'react' import { observer } from 'mobx-react-lite' import NotesOptions from './NotesOptions' import { NotesController } from '@/Controllers/NotesController/NotesController' import Popover from '../Popover/Popover' import RoundIconButton from '../Button/RoundIconButton' import Menu from '../Menu/Menu' +import { ElementIds } from '@/Constants/ElementIDs' type Props = { notesController: NotesController onClickPreprocessing?: () => Promise + onButtonBlur?: (event: FocusEvent) => void } -const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) => { +const NotesOptionsPanel = ({ notesController, onClickPreprocessing, onButtonBlur }: Props) => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) @@ -30,7 +32,14 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) => return ( <> - +