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

Desktop: Fixed scrolling issue when editing while searching in CodeMirror (#3593)

Browse Source 
Only scroll to search matchs when the user changes the search or
explicitly changes the search index
https://discourse.joplinapp.org/t/codemirror-feedback/10397
This commit is contained in:
Caleb John 2020-08-08 03:11:55 -06:00 committed by GitHub
parent 5c5cb0f781
commit e1144c098e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.ts
View File

@ -6,6 +6,7 @@ export default function useEditorSearch(CodeMirror: any) {
const [overlay, setOverlay] = useState(null);
const [scrollbarMarks, setScrollbarMarks] = useState(null);
const [previousKeywordValue, setPreviousKeywordValue] = useState(null);
const [previousIndex, setPreviousIndex] = useState(null);
const [overlayTimeout, setOverlayTimeout] = useState(null);
const overlayTimeoutRef = useRef(null);
overlayTimeoutRef.current = overlayTimeout;
@ -49,12 +50,10 @@ export default function useEditorSearch(CodeMirror: any) {
// Highlights the currently active found work
// It's possible to get tricky with this fucntions and just use findNext/findPrev
// but this is fast enough and works more naturally with the current search logic
function highlightSearch(cm: any, searchTerm: RegExp, index: number) {
const marks: any = [];
function highlightSearch(cm: any, searchTerm: RegExp, index: number, scrollTo: boolean) {
const cursor = cm.getSearchCursor(searchTerm);
let match = null;
let match: any = null;
for (let j = 0; j < index + 1; j++) {
if (!cursor.findNext()) {
// If we run out of matches then just highlight the final match
@ -64,11 +63,11 @@ export default function useEditorSearch(CodeMirror: any) {
}
if (match) {
marks.push(cm.markText(match.from, match.to, { className: 'cm-search-marker-selected' }));
cm.scrollIntoView(match);
if (scrollTo) cm.scrollIntoView(match);
return cm.markText(match.from, match.to, { className: 'cm-search-marker-selected' });
}
return marks;
return null;
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
@ -98,7 +97,7 @@ export default function useEditorSearch(CodeMirror: any) {
// HIGHLIGHT KEYWORDS
// When doing a global search it's possible to have multiple keywords
// This means we need to highlight each one
let marks: any = [];
const marks: any = [];
for (let i = 0; i < keywords.length; i++) {
const keyword = keywords[i];
@ -106,10 +105,15 @@ export default function useEditorSearch(CodeMirror: any) {
const searchTerm = getSearchTerm(keyword);
marks = marks.concat(highlightSearch(this, searchTerm, options.selectedIndex));
// We only want to scroll the first keyword into view in the case of a multi keyword search
const scrollTo = i === 0 && (previousKeywordValue !== keyword.value || previousIndex !== options.selectedIndex);
const match = highlightSearch(this, searchTerm, options.selectedIndex, scrollTo);
if (match) marks.push(match);
}
setMarkers(marks);
setPreviousIndex(options.selectedIndex);
// SEARCHOVERLAY
// We only want to highlight all matches when there is only 1 search term