1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00

Mobile: Fixes #9322: Fix editor scrollbar on iOS (#9531)

This commit is contained in:
Henry Heino 2023-12-17 12:57:40 -08:00 committed by GitHub
parent 0bd164642e
commit b237a92e02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions

View File

@ -129,6 +129,9 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
// to avoid various crashes and errors: // 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/2920
// https://github.com/react-native-webview/react-native-webview/issues/2995 // 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 ( return (
<WebView <WebView
style={{ style={{
@ -150,6 +153,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
onMessage={props.onMessage} onMessage={props.onMessage}
onError={props.onError} onError={props.onError}
onLoadEnd={props.onLoadEnd} onLoadEnd={props.onLoadEnd}
decelerationRate='normal'
/> />
); );
}; };

View File

@ -83,8 +83,14 @@ function useHtml(css: string): string {
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>${_('Note editor')}</title> <title>${_('Note editor')}</title>
<style> <style>
.cm-editor { /* For better scrolling on iOS (working scrollbar) we use external, rather than internal,
height: 100%; 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} ${css}
@ -456,8 +462,6 @@ function NoteEditor(props: Props, ref: any) {
readOnly={props.readOnly} 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 ( return (
<View <View
testID='note-editor-root' testID='note-editor-root'
@ -482,7 +486,7 @@ function NoteEditor(props: Props, ref: any) {
<ExtendedWebView <ExtendedWebView
webviewInstanceId='NoteEditor' webviewInstanceId='NoteEditor'
themeId={props.themeId} themeId={props.themeId}
scrollEnabled={false} scrollEnabled={true}
ref={webviewRef} ref={webviewRef}
html={html} html={html}
injectedJavaScript={injectedJavaScript} injectedJavaScript={injectedJavaScript}