self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-02-01 19:15:01 +02:00
Code Issues Releases Activity

Mobile: Fixes #10237: Automatically set focus on title or body when creating a new note

Browse Source
This commit is contained in:
Laurent Cozic 2024-05-28 14:16:48 +01:00
parent 70c5448402
commit 2386f583e8
3 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -165,6 +165,10 @@ const useEditorControl = (
return bodyControl.execCommand(command, ...args);
},
focus() {
void bodyControl.execCommand(EditorCommandType.Focus);
},
undo() {
bodyControl.undo();
},

1
packages/app-mobile/components/NoteEditor/types.ts
View File

@ -35,6 +35,7 @@ export interface EditorControl extends EditorBodyControl {
toggleUnorderedList(): void;
toggleTaskList(): void;
toggleHeaderLevel(level: number): void;
focus(): void;
scrollSelectionIntoView(): void;
showLinkDialog(): void;

47
packages/app-mobile/components/screens/Note.tsx
View File

@ -193,6 +193,8 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
voiceTypingDialogShown: false,
};
this.titleTextFieldRef = React.createRef();
this.saveActionQueues_ = {};
// this.markdownEditorRef = React.createRef(); // For focusing the Markdown editor
@ -538,7 +540,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
public componentDidUpdate(prevProps: any, prevState: any) {
if (this.doFocusUpdate_) {
this.doFocusUpdate_ = false;
this.focusUpdate();
this.scheduleFocusUpdate();
}
if (prevProps.showSideMenu !== this.props.showSideMenu && this.props.showSideMenu) {
@ -1354,27 +1356,36 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
}
public scheduleFocusUpdate() {
if (this.focusUpdateIID_) shim.clearTimeout(this.focusUpdateIID_);
if (this.focusUpdateIID_) shim.clearInterval(this.focusUpdateIID_);
this.focusUpdateIID_ = shim.setTimeout(() => {
this.focusUpdateIID_ = null;
this.focusUpdate();
}, 100);
}
const startTime = Date.now();
public focusUpdate() {
if (this.focusUpdateIID_) shim.clearTimeout(this.focusUpdateIID_);
this.focusUpdateIID_ = null;
this.focusUpdateIID_ = shim.setInterval(() => {
if (!this.state.note) return;
if (!this.state.note) return;
let fieldToFocus = this.state.note.is_todo ? 'title' : 'body';
if (this.state.mode === 'view') fieldToFocus = '';
let fieldToFocus = this.state.note.is_todo ? 'title' : 'body';
if (this.state.mode === 'view') fieldToFocus = '';
// Avoid writing `this.titleTextFieldRef.current` -- titleTextFieldRef may
// be undefined.
if (fieldToFocus === 'title' && this.titleTextFieldRef?.current) {
focus('Note::focusUpdate', this.titleTextFieldRef.current);
}
let done = false;
if (fieldToFocus === 'title' && this.titleTextFieldRef?.current) {
done = true;
focus('Note::focusUpdate::title', this.titleTextFieldRef.current);
} else if (fieldToFocus === 'body' && this.editorRef?.current) {
done = true;
focus('Note::focusUpdate::body', this.editorRef.current);
}
if (Date.now() - startTime > 5000) {
logger.warn(`Timeout while trying to set focus on ${fieldToFocus}`);
done = true;
}
if (done) {
shim.clearInterval(this.focusUpdateIID_);
this.focusUpdateIID_ = null;
}
}, 50);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied