Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

via IPC, have webview insert and focus on a dummy element at top of content #5597

Merged
merged 3 commits into from
Oct 30, 2021
Merged

via IPC, have webview insert and focus on a dummy element at top of content #5597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47e943a
via IPC, have webview insert and focus on a dummy element at top of c…
brttbndr Oct 19, 2021
7b6dd58
* name IPC message 'focus'
brttbndr Oct 20, 2021
757cb36
use ID to element to focus, makes intentions slightly clearer
brttbndr Oct 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So does it mean that if you focus an element within the iframe, it's also going to focus the iframe itsef? Could you please confirm that's it's what's happening?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed. Focusing on the element in the iframe implicitly sets focus to the iframe (from the perspective of the containing window / main application). The differences (from simply calling focus on the iframe) are

  1. the activeElement within the iframe is the dummy element (rather than the body)
  2. arrow keys properly scroll the iframe contents

}
} else {
commandProcessed = false;
Expand Down
4 changes: 4 additions & 0 deletions packages/app-desktop/gui/NoteTextViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,10 @@ class NoteTextViewerComponent extends React.Component<Props, any> {
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 } }, '*');
}
Expand Down
11 changes: 11 additions & 0 deletions packages/app-desktop/gui/note-viewer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,17 @@

let checkAllImageLoadedIID_ = null;

ipc.focus = (event) => {
const dummyID = 'joplin-content-focus-dummy';
if (! document.getElementById(dummyID)) {
const focusDummy = '<div style="width: 0; height: 0; overflow: hidden"><a id="' + dummyID + '" href="#">focus dummy</a></div>';
contentElement.insertAdjacentHTML("afterbegin", focusDummy);
}
const scrollTop = contentElement.scrollTop;
document.getElementById(dummyID).focus();
contentElement.scrollTop = scrollTop;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason why scrollTop needs to be saved and restored?

Copy link
Contributor Author

@brttbndr brttbndr Oct 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. If the user scrolls down in the note body, and then selects another note -- then on re-selecting the original note they should return to the same scroll position.

However, putting focus on the dummy element at the beginning of the document scrolls to that element. Saving and restoring the scroll position maintains the expected behavior.

Here is a quick demonstration using the sample data. The window's active element is initially the first entry in the note list. Hitting CMD-Shift-B changes the active element to the iframe. Arrow keys can scroll. Hitting CMD-Shift-L moves focus back to the note list and arrow keys can select another note. Arrowing back to the first note and hitting CMD-Shift-B moves focus back into the note body, preserving the scroll position.

joplin-5590-scrolltop

}

ipc.setHtml = (event) => {
const html = event.html;

Expand Down