This commit is contained in:
Simon Knott 2024-09-16 11:31:21 +02:00
parent aeb4d182f7
commit b4f02bb121
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC

View file

@ -42,6 +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 _highlightEntries: HighlightEntry[] = []; private _highlightEntries: HighlightEntry[] = [];
private _highlightOptions: HighlightOptions = {}; private _highlightOptions: HighlightOptions = {};
private _actionPointElement: HTMLElement; private _actionPointElement: HTMLElement;
@ -91,6 +92,15 @@ 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._glassPaneMutationObserver = new MutationObserver(mutations => mutations.forEach(mutation => {
for (const removedNode of mutation.removedNodes) {
if (removedNode === this._glassPaneElement)
this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
}
}));
this._glassPaneMutationObserver.observe(this._glassPaneElement);
} }
setLanguage(language: Language) { setLanguage(language: Language) {
@ -107,6 +117,7 @@ export class Highlight {
uninstall() { uninstall() {
if (this._rafRequest) if (this._rafRequest)
cancelAnimationFrame(this._rafRequest); cancelAnimationFrame(this._rafRequest);
this._glassPaneMutationObserver?.disconnect();
this._glassPaneElement.remove(); this._glassPaneElement.remove();
} }