From 77e74112ad1feb77b127d43a7151a5e758f0180a Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 21 Jun 2024 09:16:12 -0700 Subject: [PATCH 1/4] Mobile: Fixes #10637: Fix refocusing the note editor (#10644) --- .../components/NoteEditor/CodeMirror/CodeMirror.ts | 10 ++++++++++ .../app-mobile/components/NoteEditor/NoteEditor.tsx | 4 ---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts b/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts index 78afcea2a9..ab6dca640c 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 db457a9099..004aa792bd 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; }