self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app-mobile/components/ExtendedWebView.tsx
View File

@ -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'
/>
);
};

14
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@ -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}