Fix pill rendering in dev mode (#28853)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/utils/pillify.tsx

@@ -83,9 +83,8 @@ export function pillifyLinks(
                     </StrictMode>
                 );
 
-                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(
                             </StrictMode>
                         );
 
-                        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)

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<null | Element> = [];
+    private revertElements: Array<Node | null> = [];
 
     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);
     }
 

src/utils/tooltipify.tsx

@@ -66,7 +66,7 @@ export function tooltipifyLinks(
                 </StrictMode>
             );
 
-            tooltips.render(tooltip, node);
+            tooltips.render(tooltip, node, null);
         } else if (node.childNodes?.length) {
             tooltipifyLinks(node.childNodes as NodeListOf<Element>, ignoredNodes, tooltips);
         }