refactor: hide unnecessary header options on mobile when typing in super note [skip e2e]

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<NoteViewProps, State> {
     }
   }
 
-  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<NoteViewProps, State> {
       )
     }
 
-    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<NoteViewProps, State> {
                   onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                   onButtonBlur={() => {
                     this.setState({
-                      plainEditorFocused: false,
+                      editorFocused: false,
                     })
                   }}
                 />
@@ -983,8 +983,8 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               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<NoteViewProps, State> {
                 spellcheck={this.state.spellcheck}
                 controller={this.controller}
                 readonly={this.state.readonly}
+                onFocus={this.onEditorFocus}
+                onBlur={this.onEditorBlur}
               />
             </div>
           )}

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<BlocksEditorProps> = ({

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<Props> = ({
@@ -59,6 +61,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
   spellcheck,
   controller,
   readonly,
+  onFocus,
+  onBlur,
 }) => {
   const note = useRef(controller.item)
   const changeEditorFunction = useRef<ChangeEditorFunction>()
@@ -220,9 +224,13 @@ export const SuperEditor: FunctionComponent<Props> = ({
     }
   }, [])
 
-  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 (
     <div
@@ -249,7 +257,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
                 previewLength={SuperNotePreviewCharLimit}
                 spellcheck={spellcheck}
                 readonly={note.current.locked || readonly}
-                onFocus={onFocus}
+                onFocus={handleFocus}
+                onBlur={onBlur}
               >
                 <ItemSelectionPlugin currentNote={note.current} />
                 <FilePlugin currentNote={note.current} />