diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index fca3a238749..7fe38e573ff 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -146,7 +146,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { if (props.visiblePanes.indexOf('editor') >= 0) { editorRef.current.focus(); } else { - webviewRef.current.wrappedInstance.focus(); + // If we just call wrappedInstance.focus() then the iframe is focused, + // but not its content, such that scrolling up / down with arrow keys fails + webviewRef.current.wrappedInstance.send('focus'); } } else { commandProcessed = false; diff --git a/packages/app-desktop/gui/NoteTextViewer.tsx b/packages/app-desktop/gui/NoteTextViewer.tsx index 8d9413e012a..d211fa72450 100644 --- a/packages/app-desktop/gui/NoteTextViewer.tsx +++ b/packages/app-desktop/gui/NoteTextViewer.tsx @@ -146,6 +146,10 @@ class NoteTextViewerComponent extends React.Component { send(channel: string, arg0: any = null, arg1: any = null) { const win = this.webviewRef_.current.contentWindow; + if (channel === 'focus') { + win.postMessage({ target: 'webview', name: 'focus', data: {} }, '*'); + } + if (channel === 'setHtml') { win.postMessage({ target: 'webview', name: 'setHtml', data: { html: arg0, options: arg1 } }, '*'); } diff --git a/packages/app-desktop/gui/note-viewer/index.html b/packages/app-desktop/gui/note-viewer/index.html index dda543036bd..fc87080c621 100644 --- a/packages/app-desktop/gui/note-viewer/index.html +++ b/packages/app-desktop/gui/note-viewer/index.html @@ -197,6 +197,17 @@ let checkAllImageLoadedIID_ = null; + ipc.focus = (event) => { + const dummyID = 'joplin-content-focus-dummy'; + if (! document.getElementById(dummyID)) { + const focusDummy = '
focus dummy
'; + contentElement.insertAdjacentHTML("afterbegin", focusDummy); + } + const scrollTop = contentElement.scrollTop; + document.getElementById(dummyID).focus(); + contentElement.scrollTop = scrollTop; + } + ipc.setHtml = (event) => { const html = event.html;