diff --git a/src/Modal.tsx b/src/Modal.tsx index 53a1935294..9e6a7672be 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { StrictMode } from "react"; import ReactDOM from "react-dom"; import classNames from "classnames"; import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils"; @@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter -
- -
{this.staticModal.elem}
-
-
-
- + + +
+ +
{this.staticModal.elem}
+
+
+
+ + ); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); @@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter -
- -
{modal.elem}
-
-
-
- + + +
+ +
{modal.elem}
+
+
+
+ + ); setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0); diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index 1b7b6543e9..20584f3794 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React, { MutableRefObject, ReactNode } from "react"; +import React, { MutableRefObject, ReactNode, StrictMode } from "react"; import ReactDOM from "react-dom"; import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; import { TooltipProvider } from "@vector-im/compound-web"; @@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component { private renderApp(): void { const content = ( - - -
- {this.props.children} -
-
-
+ + + +
+ {this.props.children} +
+
+
+
); ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey)); diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 0e0c29747f..7955d964a3 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React, { createRef, SyntheticEvent, MouseEvent } from "react"; +import React, { createRef, SyntheticEvent, MouseEvent, StrictMode } from "react"; import ReactDOM from "react-dom"; import { MsgType } from "matrix-js-sdk/src/matrix"; import { TooltipProvider } from "@vector-im/compound-web"; @@ -118,7 +118,12 @@ export default class TextualBody extends React.Component { // Insert containing div in place of
 block
         pre.parentNode?.replaceChild(root, pre);
 
-        ReactDOM.render({pre}, root);
+        ReactDOM.render(
+            
+                {pre}
+            ,
+            root,
+        );
     }
 
     public componentDidUpdate(prevProps: Readonly): void {
@@ -192,9 +197,11 @@ export default class TextualBody extends React.Component {
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
                 const spoiler = (
-                    
-                        
-                    
+                    
+                        
+                            
+                        
+                    
                 );
 
                 ReactDOM.render(spoiler, spoilerContainer);
diff --git a/src/utils/pillify.tsx b/src/utils/pillify.tsx
index 2c19f11491..063012d16f 100644
--- a/src/utils/pillify.tsx
+++ b/src/utils/pillify.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
@@ -76,9 +76,11 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    
-                        
-                    
+                    
+                        
+                            
+                        
+                    
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -133,14 +135,16 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            
-                                
-                            
+                            
+                                
+                                    
+                                
+                            
                         );
 
                         ReactDOM.render(pill, pillContainer);
diff --git a/src/utils/tooltipify.tsx b/src/utils/tooltipify.tsx
index 65ce431a97..bcda256a9c 100644
--- a/src/utils/tooltipify.tsx
+++ b/src/utils/tooltipify.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 
@@ -53,11 +53,13 @@ export function tooltipifyLinks(rootNodes: ArrayLike, ignoredNodes: Ele
             // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
             // without the superfluous span but this is not something React trivially supports at this time.
             const tooltip = (
-                
-                    
-                        
-                    
-                
+                
+                    
+                        
+                            
+                        
+                    
+                
             );
 
             ReactDOM.render(tooltip, node);
diff --git a/src/vector/app.tsx b/src/vector/app.tsx
index 0c2230bbb8..da0f3f3941 100644
--- a/src/vector/app.tsx
+++ b/src/vector/app.tsx
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 
 // To ensure we load the browser-matrix version first
 import "matrix-js-sdk/src/browser-index";
-import React, { ReactElement } from "react";
+import React, { ReactElement, StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix";
 import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
@@ -111,17 +111,19 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref
-            
+            
+                
+            
         
     );
 }
diff --git a/src/vector/init.tsx b/src/vector/init.tsx
index da9827cb55..2028f9af36 100644
--- a/src/vector/init.tsx
+++ b/src/vector/init.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import * as ReactDOM from "react-dom";
-import * as React from "react";
+import React, { StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import * as languageHandler from "../languageHandler";
@@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise,
+        
+            
+        ,
         document.getElementById("matrixchat"),
     );
 }
@@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise,
+        
+            
+        ,
         document.getElementById("matrixchat"),
     );
 }