diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx index da4b0bc36..586cb3aeb 100644 --- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx +++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx @@ -75,7 +75,7 @@ type State = { stackComponentViewers: ComponentViewerInterface[] syncTakingTooLong: boolean monospaceFont?: boolean - plainEditorFocused?: boolean + editorFocused?: boolean paneGestureEnabled?: boolean noteLastEditedByUuid?: string updateSavingIndicator?: boolean @@ -780,15 +780,15 @@ class NoteView extends AbstractComponent { } } - onPlainFocus = () => { - this.setState({ plainEditorFocused: true }) + onEditorFocus = () => { + this.setState({ editorFocused: true }) } - onPlainBlur = (event: FocusEvent) => { + onEditorBlur = (event: FocusEvent) => { if (event.relatedTarget?.id === ElementIds.NoteOptionsButton) { return } - this.setState({ plainEditorFocused: false }) + this.setState({ editorFocused: false }) } toggleConflictResolutionModal = () => { @@ -817,7 +817,7 @@ class NoteView extends AbstractComponent { ) } - const renderHeaderOptions = isMobileScreen() ? !this.state.plainEditorFocused : true + const renderHeaderOptions = isMobileScreen() ? !this.state.editorFocused : true const editorMode = this.note.noteType === NoteType.Super @@ -930,7 +930,7 @@ class NoteView extends AbstractComponent { onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction} onButtonBlur={() => { this.setState({ - plainEditorFocused: false, + editorFocused: false, }) }} /> @@ -983,8 +983,8 @@ class NoteView extends AbstractComponent { ref={this.setPlainEditorRef} controller={this.controller} locked={this.state.noteLocked || !!this.state.readonly} - onFocus={this.onPlainFocus} - onBlur={this.onPlainBlur} + onFocus={this.onEditorFocus} + onBlur={this.onEditorBlur} /> )} @@ -998,6 +998,8 @@ class NoteView extends AbstractComponent { spellcheck={this.state.spellcheck} controller={this.controller} readonly={this.state.readonly} + onFocus={this.onEditorFocus} + onBlur={this.onEditorBlur} /> )} diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx index 8fa272f7c..b2014c957 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx +++ b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx @@ -1,4 +1,4 @@ -import { FunctionComponent, useCallback, useState } from 'react' +import { FocusEvent, FunctionComponent, useCallback, useState } from 'react' import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin' import { ContentEditable } from '@lexical/react/LexicalContentEditable' import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin' @@ -44,8 +44,8 @@ type BlocksEditorProps = { spellcheck?: boolean ignoreFirstChange?: boolean readonly?: boolean - onFocus?: () => void - onBlur?: () => void + onFocus?: (event: FocusEvent) => void + onBlur?: (event: FocusEvent) => void } export const BlocksEditor: FunctionComponent = ({ diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx index 95f5d252d..7101dc172 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx +++ b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx @@ -8,7 +8,7 @@ import { EditorLineHeightValues, WebAppEvent, } from '@standardnotes/snjs' -import { CSSProperties, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react' +import { CSSProperties, FocusEvent, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react' import { BlocksEditor } from './BlocksEditor' import { BlocksEditorComposer } from './BlocksEditorComposer' import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin' @@ -50,6 +50,8 @@ type Props = { filesController: FilesController spellcheck: boolean readonly?: boolean + onFocus?: (event: FocusEvent) => void + onBlur?: (event: FocusEvent) => void } export const SuperEditor: FunctionComponent = ({ @@ -59,6 +61,8 @@ export const SuperEditor: FunctionComponent = ({ spellcheck, controller, readonly, + onFocus, + onBlur, }) => { const note = useRef(controller.item) const changeEditorFunction = useRef() @@ -220,9 +224,13 @@ export const SuperEditor: FunctionComponent = ({ } }, []) - const onFocus = useCallback(() => { - application.notifyWebEvent(WebAppEvent.EditorDidFocus, { eventSource: EditorEventSource.UserInteraction }) - }, [application]) + const handleFocus = useCallback( + (event: FocusEvent) => { + application.notifyWebEvent(WebAppEvent.EditorDidFocus, { eventSource: EditorEventSource.UserInteraction }) + onFocus?.(event) + }, + [application, onFocus], + ) return (
= ({ previewLength={SuperNotePreviewCharLimit} spellcheck={spellcheck} readonly={note.current.locked || readonly} - onFocus={onFocus} + onFocus={handleFocus} + onBlur={onBlur} >