This commit is contained in:
Simon Knott 2024-09-16 15:44:10 +02:00
parent b4f02bb121
commit 0c72ee3dbb
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC

View file

@ -42,7 +42,7 @@ export type HighlightOptions = {
export class Highlight { export class Highlight {
private _glassPaneElement: HTMLElement; private _glassPaneElement: HTMLElement;
private _glassPaneShadow: ShadowRoot; private _glassPaneShadow: ShadowRoot;
private _glassPaneMutationObserver: MutationObserver | undefined; private _glassPaneInterval?: NodeJS.Timeout;
private _highlightEntries: HighlightEntry[] = []; private _highlightEntries: HighlightEntry[] = [];
private _highlightOptions: HighlightOptions = {}; private _highlightOptions: HighlightOptions = {};
private _actionPointElement: HTMLElement; private _actionPointElement: HTMLElement;
@ -93,14 +93,10 @@ export class Highlight {
install() { install() {
this._injectedScript.document.documentElement.appendChild(this._glassPaneElement); this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
// JS frameworks like React erase the entire DOM upon hydration, so we need to recreate it this._glassPaneInterval = setInterval(() => {
this._glassPaneMutationObserver = new MutationObserver(mutations => mutations.forEach(mutation => { if (!this._injectedScript.document.documentElement.contains(this._glassPaneElement))
for (const removedNode of mutation.removedNodes) {
if (removedNode === this._glassPaneElement)
this._injectedScript.document.documentElement.appendChild(this._glassPaneElement); this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
} }, 500);
}));
this._glassPaneMutationObserver.observe(this._glassPaneElement);
} }
setLanguage(language: Language) { setLanguage(language: Language) {
@ -117,7 +113,7 @@ export class Highlight {
uninstall() { uninstall() {
if (this._rafRequest) if (this._rafRequest)
cancelAnimationFrame(this._rafRequest); cancelAnimationFrame(this._rafRequest);
this._glassPaneMutationObserver?.disconnect(); clearInterval(this._glassPaneInterval);
this._glassPaneElement.remove(); this._glassPaneElement.remove();
} }