diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts b/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts index 78afcea2a..ab6dca640 100644 --- a/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts +++ b/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts @@ -14,6 +14,7 @@ import createEditor from '@joplin/editor/CodeMirror/createEditor'; import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl'; import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger'; import { WebViewToEditorApi } from '../types'; +import { focus } from '@joplin/lib/utils/focusHandler'; export const initCodeMirror = ( parentElement: HTMLElement, @@ -47,6 +48,15 @@ export const initCodeMirror = ( } }); + // Note: Just adding an onclick listener seems sufficient to focus the editor when its background + // is tapped. + parentElement.addEventListener('click', (event) => { + const activeElement = document.querySelector(':focus'); + if (!parentElement.contains(activeElement) && event.target === parentElement) { + focus('initial editor focus', control); + } + }); + messenger.setLocalInterface(control); return control; }; diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx index db457a909..004aa792b 100644 --- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx +++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx @@ -101,10 +101,6 @@ function useHtml(initialCss: string): string { scrolling. */ .cm-scroller { overflow: none; - - /* Ensure that the editor can be focused by clicking on the lower half of the screen. - Don't use 100vh to prevent a scrollbar being present for empty notes. */ - min-height: 80vh; }