fix: do not re-highlight when already processing highlights

This commit is contained in:
2025-10-28 15:31:46 +03:00
parent f07617fa55
commit 8be53f3240
2 changed files with 35 additions and 26 deletions

View File

@@ -68,7 +68,7 @@ export class ContentScript {
} }
private setupScrollHandler(): void { private setupScrollHandler(): void {
const debouncedProcess = DOMUtils.debounce(() => this.processHighlights(), 300); const debouncedProcess = DOMUtils.debounce(() => this.processHighlights(), CONSTANTS.DEBOUNCE_DELAY);
window.addEventListener('scroll', debouncedProcess); window.addEventListener('scroll', debouncedProcess);
} }

View File

@@ -5,25 +5,31 @@ export class HighlightEngine {
private styleSheet: CSSStyleSheet | null = null; private styleSheet: CSSStyleSheet | null = null;
private wordStyleMap = new Map<string, string>(); private wordStyleMap = new Map<string, string>();
private observer: MutationObserver; private observer: MutationObserver;
private isHighlighting = false;
constructor(private onUpdate: () => void) { constructor(private onUpdate: () => void) {
this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => { this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
const hasRelevantChanges = mutations.some((mutation: MutationRecord) => { if (this.isHighlighting) return;
const hasContentChanges = mutations.some((mutation: MutationRecord) => {
if (mutation.type !== 'childList') return false;
if (mutation.target instanceof Element && mutation.target.hasAttribute('data-gh')) { if (mutation.target instanceof Element && mutation.target.hasAttribute('data-gh')) {
return false; return false;
} }
const addedNodes = Array.from(mutation.addedNodes);
const removedNodes = Array.from(mutation.removedNodes); const allNodes = [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)];
const isOurChange = [...addedNodes, ...removedNodes].some(node => return allNodes.some(node => {
node instanceof Element && (node.hasAttribute('data-gh') || node.querySelector('[data-gh]')) if (node.nodeType === Node.TEXT_NODE) return true;
); if (node instanceof Element && !node.hasAttribute('data-gh')) return true;
return !isOurChange; return false;
});
}); });
if (hasRelevantChanges) { if (hasContentChanges) {
onUpdate(); this.onUpdate();
} }
}, 300)); }, CONSTANTS.DEBOUNCE_DELAY));
} }
private initializeStyleSheet(): void { private initializeStyleSheet(): void {
@@ -109,6 +115,9 @@ export class HighlightEngine {
} }
highlight(lists: HighlightList[], matchCase: boolean, matchWhole: boolean): void { highlight(lists: HighlightList[], matchCase: boolean, matchWhole: boolean): void {
if (this.isHighlighting) return;
this.isHighlighting = true;
this.observer.disconnect(); this.observer.disconnect();
this.clearHighlightsInternal(); this.clearHighlightsInternal();
@@ -116,6 +125,7 @@ export class HighlightEngine {
const activeWords = this.extractActiveWords(lists); const activeWords = this.extractActiveWords(lists);
if (activeWords.length === 0) { if (activeWords.length === 0) {
this.startObserving(); this.startObserving();
this.isHighlighting = false;
return; return;
} }
@@ -155,6 +165,7 @@ export class HighlightEngine {
} }
this.startObserving(); this.startObserving();
this.isHighlighting = false;
} }
private clearHighlightsInternal(): void { private clearHighlightsInternal(): void {
@@ -182,8 +193,6 @@ export class HighlightEngine {
this.observer.observe(document.body, { this.observer.observe(document.body, {
childList: true, childList: true,
subtree: true, subtree: true,
characterData: true,
// Don't observe attribute changes to avoid triggering on our own style changes
attributes: false attributes: false
}); });
} }