self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

Desktop: Fixes #5890: Scroll jump when checkbox is toggled in Viewer (#5941)

Browse Source
This commit is contained in:
Kenichi Kobayashi
2022-01-09 20:26:40 +09:00
committed by GitHub
parent 70e623e741
commit 24dbede6c1
3 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@@ -67,7 +67,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
usePluginServiceRegistration(ref);
const { resetScroll, editor_scroll, setEditorPercentScroll, setViewerPercentScroll, editor_resize,
const { resetScroll, editor_scroll, setEditorPercentScroll, setViewerPercentScroll, editor_resize, getLineScrollPercent,
} = useScrollHandler(editorRef, webviewRef, props.onScroll);
const codeMirror_change = useCallback((newBody: string) => {
@@ -576,9 +576,14 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
const arg0 = args && args.length >= 1 ? args[0] : null;
if (msg.indexOf('checkboxclick:') === 0) {
const newBody = shared.toggleCheckbox(msg, props.content);
const { line, from, to } = shared.toggleCheckboxRange(msg, props.content);
if (editorRef.current) {
editorRef.current.updateBody(newBody);
// To cancel CodeMirror's layout drift, the scroll position
// is recorded before updated, and then it is restored.
// Ref. https://github.com/laurent22/joplin/issues/5890
const percent = getLineScrollPercent();
editorRef.current.replaceRange(line, from, to);
setEditorPercentScroll(percent);
}
} else if (msg === 'percentScroll') {
const percent = arg0;

12
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.ts
View File

@@ -130,8 +130,18 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
}
}, []);
const getLineScrollPercent = useCallback(() => {
const cm = editorRef.current;
if (isCodeMirrorReady(cm)) {
const ePercent = cm.getScrollPercent();
return translateScrollPercentE2L(cm, ePercent);
} else {
return scrollPercent_.current;
}
}, []);
return {
resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll, editor_resize,
resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll, editor_resize, getLineScrollPercent,
};
}

13
packages/lib/components/shared/note-screen-shared.js
View File

@@ -248,7 +248,7 @@ shared.toggleIsTodo_onPress = function(comp) {
comp.setState(newState);
};
shared.toggleCheckbox = function(ipcMessage, noteBody) {
function toggleCheckboxLine(ipcMessage, noteBody) {
const newBody = noteBody.split('\n');
const p = ipcMessage.split(':');
const lineIndex = Number(p[p.length - 1]);
@@ -281,7 +281,18 @@ shared.toggleCheckbox = function(ipcMessage, noteBody) {
} else {
line = line.replace(/- \[x\] /i, '- [ ] ');
}
return [newBody, lineIndex, line];
}
shared.toggleCheckboxRange = function(ipcMessage, noteBody) {
const [lineIndex, line] = toggleCheckboxLine(ipcMessage, noteBody).slice(1);
const from = { line: lineIndex, ch: 0 };
const to = { line: lineIndex, ch: line.length };
return { line, from, to };
};
shared.toggleCheckbox = function(ipcMessage, noteBody) {
const [newBody, lineIndex, line] = toggleCheckboxLine(ipcMessage, noteBody);
newBody[lineIndex] = line;
return newBody.join('\n');
};