diff --git a/src/utils/pillify.tsx b/src/utils/pillify.tsx index 1859e90fd6..208f595af6 100644 --- a/src/utils/pillify.tsx +++ b/src/utils/pillify.tsx @@ -83,9 +83,8 @@ export function pillifyLinks( ); - pills.render(pill, pillContainer); - - node.parentNode?.replaceChild(pillContainer, node); + pills.render(pill, pillContainer, node); + node.replaceWith(pillContainer); // Pills within pills aren't going to go well, so move on pillified = true; @@ -147,8 +146,8 @@ export function pillifyLinks( ); - pills.render(pill, pillContainer); - roomNotifTextNode.parentNode?.replaceChild(pillContainer, roomNotifTextNode); + pills.render(pill, pillContainer, roomNotifTextNode); + roomNotifTextNode.replaceWith(pillContainer); } // Nothing else to do for a text node (and we don't need to advance // the loop pointer because we did it above) diff --git a/src/utils/react.tsx b/src/utils/react.tsx index b78f574fa9..1918562c4b 100644 --- a/src/utils/react.tsx +++ b/src/utils/react.tsx @@ -15,7 +15,7 @@ import { createRoot, Root } from "react-dom/client"; export class ReactRootManager { private roots: Root[] = []; private rootElements: Element[] = []; - private revertElements: Array = []; + private revertElements: Array = []; public get elements(): Element[] { return this.rootElements; @@ -26,12 +26,13 @@ export class ReactRootManager { * @param children the React component to render * @param rootElement the root element to render the component into * @param revertElement the element to replace the root element with when unmounting + * needed to support double-rendering in React 18 Strict Dev mode */ - public render(children: ReactNode, rootElement: Element, revertElement?: Element): void { + public render(children: ReactNode, rootElement: Element, revertElement: Node | null): void { const root = createRoot(rootElement); this.roots.push(root); this.rootElements.push(rootElement); - this.revertElements.push(revertElement ?? null); + this.revertElements.push(revertElement); root.render(children); } diff --git a/src/utils/tooltipify.tsx b/src/utils/tooltipify.tsx index fc319b2024..791f0327f9 100644 --- a/src/utils/tooltipify.tsx +++ b/src/utils/tooltipify.tsx @@ -66,7 +66,7 @@ export function tooltipifyLinks( ); - tooltips.render(tooltip, node); + tooltips.render(tooltip, node, null); } else if (node.childNodes?.length) { tooltipifyLinks(node.childNodes as NodeListOf, ignoredNodes, tooltips); }