From b237a92e02271640fad0aafaaca07c468ef5a02f Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sun, 17 Dec 2023 12:57:40 -0800
Subject: [PATCH] Mobile: Fixes #9322: Fix editor scrollbar on iOS (#9531)

---
 packages/app-mobile/components/ExtendedWebView.tsx |  4 ++++
 .../components/NoteEditor/NoteEditor.tsx           | 14 +++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/app-mobile/components/ExtendedWebView.tsx b/packages/app-mobile/components/ExtendedWebView.tsx
index d00042e38..dea9f4adb 100644
--- a/packages/app-mobile/components/ExtendedWebView.tsx
+++ b/packages/app-mobile/components/ExtendedWebView.tsx
@@ -129,6 +129,9 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	// to avoid various crashes and errors:
 	// https://github.com/react-native-webview/react-native-webview/issues/2920
 	// https://github.com/react-native-webview/react-native-webview/issues/2995
+	//
+	// decelerationRate='normal' is necessary on iOS for a native-like inertial scroll
+	// (the default deaccelerates too quickly).
 	return (
 		<WebView
 			style={{
@@ -150,6 +153,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 			onMessage={props.onMessage}
 			onError={props.onError}
 			onLoadEnd={props.onLoadEnd}
+			decelerationRate='normal'
 		/>
 	);
 };
diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
index a6a217401..8886b008a 100644
--- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
+++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -83,8 +83,14 @@ function useHtml(css: string): string {
 					<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 					<title>${_('Note editor')}</title>
 					<style>
-						.cm-editor {
-							height: 100%;
+						/* For better scrolling on iOS (working scrollbar) we use external, rather than internal,
+						   scrolling. */
+						.cm-scroller {
+							overflow: none;
+
+							/* Ensure that the editor can be foused 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;
 						}
 
 						${css}
@@ -456,8 +462,6 @@ function NoteEditor(props: Props, ref: any) {
 		readOnly={props.readOnly}
 	/>;
 
-	// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
-	//    when an editable region (e.g. a the full-screen NoteEditor) is focused.
 	return (
 		<View
 			testID='note-editor-root'
@@ -482,7 +486,7 @@ function NoteEditor(props: Props, ref: any) {
 				<ExtendedWebView
 					webviewInstanceId='NoteEditor'
 					themeId={props.themeId}
-					scrollEnabled={false}
+					scrollEnabled={true}
 					ref={webviewRef}
 					html={html}
 					injectedJavaScript={injectedJavaScript}