Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx

@@ -7,7 +7,7 @@ import {
 import { Decoration, EditorView, WidgetType } from '@codemirror/view'
 import { undo } from '@codemirror/commands'
 import { ancestorNodeOfType } from '../../utils/tree-operations/ancestors'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { PastedContentMenu } from '../../components/paste-html/pasted-content-menu'
 import { SplitTestProvider } from '../../../../shared/context/split-test-context'
 
@@ -171,7 +171,8 @@ class PastedContentMenuWidget extends WidgetType {
 
   toDOM(view: EditorView) {
     const element = document.createElement('span')
-    ReactDOM.render(
+    const root = createRoot(element)
+    root.render(
       <SplitTestProvider>
         <PastedContentMenu
           insertPastedContent={this.insertPastedContent}
@@ -179,8 +180,7 @@ class PastedContentMenuWidget extends WidgetType {
           formatted={this.formatted}
           pastedContent={this.pastedContent}
         />
-      </SplitTestProvider>,
-      element
+      </SplitTestProvider>
     )
     return element
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tabular.tsx

@@ -1,10 +1,12 @@
+import { createRoot, Root } from 'react-dom/client'
 import { EditorView, WidgetType } from '@codemirror/view'
 import { SyntaxNode } from '@lezer/common'
-import * as ReactDOM from 'react-dom'
 import { Tabular } from '../../../components/table-generator/tabular'
 import { ParsedTableData } from '../../../components/table-generator/utils'
 
 export class TabularWidget extends WidgetType {
+  static roots: WeakMap<HTMLElement, Root> = new WeakMap()
+
   constructor(
     private parsedTableData: ParsedTableData,
     private tabularNode: SyntaxNode,
@@ -15,13 +17,21 @@ export class TabularWidget extends WidgetType {
     super()
   }
 
+  renderInDOMContainer(children: React.ReactNode, element: HTMLElement) {
+    const root = TabularWidget.roots.get(element) || createRoot(element)
+    if (!TabularWidget.roots.has(element)) {
+      TabularWidget.roots.set(element, root)
+    }
+    root.render(children)
+  }
+
   toDOM(view: EditorView) {
     const element = document.createElement('div')
     element.classList.add('ol-cm-tabular')
     if (this.tableNode) {
       element.classList.add('ol-cm-environment-table')
     }
-    ReactDOM.render(
+    this.renderInDOMContainer(
       <Tabular
         view={view}
         tabularNode={this.tabularNode}
@@ -46,7 +56,7 @@ export class TabularWidget extends WidgetType {
   }
 
   updateDOM(element: HTMLElement, view: EditorView): boolean {
-    ReactDOM.render(
+    this.renderInDOMContainer(
       <Tabular
         view={view}
         tabularNode={this.tabularNode}
@@ -68,6 +78,10 @@ export class TabularWidget extends WidgetType {
   }
 
   destroy(element: HTMLElement) {
-    ReactDOM.unmountComponentAtNode(element)
+    const root = TabularWidget.roots.get(element)
+    if (root) {
+      TabularWidget.roots.delete(element)
+      root.unmount()
+    }
   }
 }