Updated project to React 19

packages/noodl-editor/package.json

@@ -103,8 +103,8 @@
     "@types/checksum": "^0.1.35",
     "@types/jasmine": "^4.6.5",
     "@types/jquery": "^3.5.33",
-    "@types/react": "^19.0.00",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/remarkable": "^2.0.8",
     "@types/rimraf": "^3.0.2",
     "@types/split2": "^3.2.1",

packages/noodl-editor/src/editor/src/utils/projectBackup.ts

@@ -0,0 +1,234 @@
+/**
+ * Project Backup Utility
+ * 
+ * Provides automatic backup functionality before project upgrades or migrations.
+ * Creates timestamped backups of project.json files to prevent data loss.
+ * 
+ * @module noodl-editor
+ * @since 2.0.0 (OpenNoodl)
+ */
+
+import { filesystem } from '@noodl/platform';
+import path from 'path';
+
+export interface BackupResult {
+  success: boolean;
+  backupPath?: string;
+  error?: string;
+  timestamp?: string;
+}
+
+export interface BackupOptions {
+  /** Maximum number of backups to keep per project (default: 5) */
+  maxBackups?: number;
+  /** Custom prefix for backup file names */
+  prefix?: string;
+}
+
+const DEFAULT_MAX_BACKUPS = 5;
+const BACKUP_FOLDER_NAME = '.noodl-backups';
+
+/**
+ * Creates a backup of the project.json file before migration/upgrade.
+ * 
+ * @param projectDir - The directory containing the project
+ * @param options - Backup configuration options
+ * @returns BackupResult with success status and backup path
+ * 
+ * @example
+ * ```typescript
+ * const result = await createProjectBackup('/path/to/project');
+ * if (result.success) {
+ *   console.log('Backup created at:', result.backupPath);
+ * }
+ * ```
+ */
+export async function createProjectBackup(
+  projectDir: string,
+  options: BackupOptions = {}
+): Promise<BackupResult> {
+  const { maxBackups = DEFAULT_MAX_BACKUPS, prefix = 'backup' } = options;
+  
+  try {
+    const projectJsonPath = path.join(projectDir, 'project.json');
+    const backupDir = path.join(projectDir, BACKUP_FOLDER_NAME);
+    
+    // Check if project.json exists
+    const exists = await filesystem.exists(projectJsonPath);
+    if (!exists) {
+      return {
+        success: false,
+        error: 'project.json not found in project directory'
+      };
+    }
+    
+    // Create backup directory if it doesn't exist
+    await filesystem.makeDirectory(backupDir);
+    
+    // Generate timestamp for backup filename
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupFileName = `${prefix}-${timestamp}.json`;
+    const backupPath = path.join(backupDir, backupFileName);
+    
+    // Read original project.json
+    const projectContent = await filesystem.readFile(projectJsonPath);
+    
+    // Write backup file
+    await filesystem.writeFile(backupPath, projectContent);
+    
+    // Clean up old backups if we exceed maxBackups
+    await cleanupOldBackups(backupDir, prefix, maxBackups);
+    
+    return {
+      success: true,
+      backupPath,
+      timestamp
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
+/**
+ * Lists all available backups for a project.
+ * 
+ * @param projectDir - The directory containing the project
+ * @returns Array of backup file paths sorted by date (newest first)
+ */
+export async function listProjectBackups(projectDir: string): Promise<string[]> {
+  try {
+    const backupDir = path.join(projectDir, BACKUP_FOLDER_NAME);
+    
+    const exists = await filesystem.exists(backupDir);
+    if (!exists) {
+      return [];
+    }
+    
+    const files = await filesystem.listDirectory(backupDir);
+    const backupFiles = files
+      .filter(f => !f.isDirectory && f.name.endsWith('.json'))
+      .map(f => f.name)
+      .sort()
+      .reverse(); // Newest first
+    
+    return backupFiles.map(f => path.join(backupDir, f));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Restores a project from a backup file.
+ * 
+ * @param projectDir - The directory containing the project
+ * @param backupPath - Path to the backup file to restore
+ * @returns BackupResult with success status
+ */
+export async function restoreProjectBackup(
+  projectDir: string,
+  backupPath: string
+): Promise<BackupResult> {
+  try {
+    const projectJsonPath = path.join(projectDir, 'project.json');
+    
+    // Verify backup exists
+    const backupExists = await filesystem.exists(backupPath);
+    if (!backupExists) {
+      return {
+        success: false,
+        error: 'Backup file not found'
+      };
+    }
+    
+    // Create a backup of the current state before restoring
+    // (so user can undo the restore if needed)
+    const preRestoreBackup = await createProjectBackup(projectDir, {
+      prefix: 'pre-restore'
+    });
+    
+    if (!preRestoreBackup.success) {
+      console.warn('Could not create pre-restore backup:', preRestoreBackup.error);
+    }
+    
+    // Read backup content
+    const backupContent = await filesystem.readFile(backupPath);
+    
+    // Write to project.json
+    await filesystem.writeFile(projectJsonPath, backupContent);
+    
+    return {
+      success: true,
+      backupPath
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
+/**
+ * Cleans up old backups, keeping only the most recent ones.
+ * 
+ * @param backupDir - Directory containing backups
+ * @param prefix - Prefix to filter backups by
+ * @param maxBackups - Maximum number of backups to keep
+ */
+async function cleanupOldBackups(
+  backupDir: string,
+  prefix: string,
+  maxBackups: number
+): Promise<void> {
+  try {
+    const files = await filesystem.listDirectory(backupDir);
+    
+    // Filter to only backups with our prefix and sort by name (which includes timestamp)
+    const backupFileNames = files
+      .filter(f => !f.isDirectory && f.name.startsWith(prefix) && f.name.endsWith('.json'))
+      .map(f => f.name)
+      .sort()
+      .reverse(); // Newest first
+    
+    // Remove old backups
+    if (backupFileNames.length > maxBackups) {
+      const filesToDelete = backupFileNames.slice(maxBackups);
+      for (const fileName of filesToDelete) {
+        const filePath = path.join(backupDir, fileName);
+        await filesystem.removeFile(filePath);
+      }
+    }
+  } catch (error) {
+    console.warn('Failed to cleanup old backups:', error);
+  }
+}
+
+/**
+ * Gets the most recent backup for a project.
+ * 
+ * @param projectDir - The directory containing the project
+ * @returns Path to the most recent backup, or null if none exist
+ */
+export async function getLatestBackup(projectDir: string): Promise<string | null> {
+  const backups = await listProjectBackups(projectDir);
+  return backups.length > 0 ? backups[0] : null;
+}
+
+/**
+ * Validates a backup file by attempting to parse it as JSON.
+ * 
+ * @param backupPath - Path to the backup file
+ * @returns true if backup is valid JSON, false otherwise
+ */
+export async function validateBackup(backupPath: string): Promise<boolean> {
+  try {
+    const content = await filesystem.readFile(backupPath);
+    JSON.parse(content);
+    return true;
+  } catch {
+    return false;
+  }
+}

packages/noodl-editor/src/editor/src/views/CommentLayer/CommentForeground.tsx

@@ -188,7 +188,7 @@ function CommentForeground(props) {
 
 function CommentControls(props) {
   const [showColorPicker, setShowColorPicker] = useState(false);
-  const colorPickerRef = useRef();
+  const colorPickerRef = useRef<HTMLDivElement>(null);
 
   const color = getColor(props);
 

packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx

@@ -18,8 +18,7 @@ function DeployPopupChild() {
           backgroundColor: '#444444',
           position: 'relative',
           maxHeight: `calc(90vh - 40px)`,
-          // @ts-expect-error https://github.com/frenic/csstype/issues/62
-          overflowY: 'overlay',
+          overflowY: 'overlay' as React.CSSProperties['overflowY'],
           overflowX: 'hidden'
         }}
       >

packages/noodl-editor/src/editor/src/views/EditorTopbar/EditorTopbar.tsx

@@ -72,12 +72,12 @@ export function EditorTopbar({
   deployIsDisabled
 }: EditorTopbarProps) {
   const urlBarRef = useRef<HTMLInputElement>(null);
-  const deployButtonRef = useRef();
-  const warningButtonRef = useRef();
-  const urlInputRef = useRef();
-  const zoomLevelTrigger = useRef();
-  const screenSizeTrigger = useRef();
-  const previewLayoutTrigger = useRef();
+  const deployButtonRef = useRef<HTMLSpanElement>(null);
+  const warningButtonRef = useRef<HTMLDivElement>(null);
+  const urlInputRef = useRef<HTMLDivElement>(null);
+  const zoomLevelTrigger = useRef<HTMLDivElement>(null);
+  const screenSizeTrigger = useRef<HTMLDivElement>(null);
+  const previewLayoutTrigger = useRef<HTMLDivElement>(null);
   const [isDeployVisible, setIsDeployVisible] = useState(false);
   const [isWarningsDialogVisible, setIsWarningsDialogVisible] = useState(false);
   const [isZoomDialogVisible, setIsZoomDialogVisible] = useState(false);
@@ -162,7 +162,7 @@ export function EditorTopbar({
       onClose: () => createNewNodePanel.dispose()
     });
   }
-  const rootRef = useRef<HTMLDivElement>();
+  const rootRef = useRef<HTMLDivElement>(null);
 
   const bounds = useTrackBounds(rootRef);
   const isSmall = bounds?.width < 850;

packages/noodl-editor/src/editor/src/views/HelpCenter/HelpCenter.tsx

@@ -1,4 +1,4 @@
-import algoliasearch from 'algoliasearch/lite';
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
 import React, { useRef, useState } from 'react';
 import { InstantSearch, Hits, Highlight, useSearchBox, Configure } from 'react-instantsearch';
 import { platform } from '@noodl/platform';
@@ -17,7 +17,7 @@ import { Title, TitleSize } from '@noodl-core-ui/components/typography/Title';
 import css from './HelpCenter.module.scss';
 
 export function HelpCenter() {
-  const rootRef = useRef();
+  const rootRef = useRef<HTMLDivElement>(null);
   const [version] = useState(platform.getVersion().slice(0, 3));
   const [isDialogVisible, setIsDialogVisible] = useState(false);
   const [isSearchModalVisible, setIsSearchModalVisible] = useState(false);

packages/noodl-editor/src/editor/src/views/NodeGraphComponentTrail/NodeGraphComponentTrail.tsx

@@ -103,7 +103,7 @@ interface ItemProps {
 
 function Item({ item, onSwitchToComponent }: ItemProps) {
   let icon = getIconFromItem(item);
-  const itemRef = useRef<HTMLDivElement>();
+  const itemRef = useRef<HTMLDivElement>(null);
 
   // change a visual component icon to be a regular component icon in the trail
   // @ts-expect-error fix this when we refactor the component sidebar to not use the old HTML templates

packages/noodl-editor/src/editor/src/views/NodePicker/components/NodePickerCategory/NodePickerCategory.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactChild, ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { NodeType } from '@noodl-constants/NodeType';
 import { Collapsible } from '@noodl-core-ui/components/layout/Collapsible';
 

packages/noodl-editor/src/editor/src/views/NodePicker/components/NodePickerSection/NodePickerSection.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import css from './NodePickerSection.module.scss';
 
 interface NodePickerSectionProps {

packages/noodl-editor/src/editor/src/views/NodePicker/components/NodePickerSubCategory/NodePickerSubCategory.tsx

@@ -1,10 +1,10 @@
 import { Text, TextSize, TextType } from '@noodl-core-ui/components/typography/Text';
-import React, { ReactChild } from 'react';
+import React, { ReactNode } from 'react';
 import css from './NodePickerSubCategory.module.scss';
 
 interface NodePickerSubCategoryProps {
   title: string;
-  children: ReactChild;
+  children: ReactNode;
 }
 
 export default function NodePickerSubCategory({ title, children }: NodePickerSubCategoryProps) {

packages/noodl-editor/src/editor/src/views/SidePanel/SidePanel.tsx

@@ -22,7 +22,7 @@ export function SidePanel() {
 
   // All the panel data
   const [activeId, setActiveId] = useState(null);
-  const [panels, setPanels] = useState<Record<string, React.ReactChild>>({});
+  const [panels, setPanels] = useState<Record<string, React.ReactElement>>({});
 
   useEffect(() => {
     // ---

packages/noodl-editor/src/editor/src/views/VisualCanvas/CanvasView.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { platform } from '@noodl/platform';
 
 import { EventDispatcher } from '../../../../shared/utils/EventDispatcher';
@@ -19,6 +19,8 @@ export class CanvasView extends View {
   inspectMode: boolean;
   selectedNodeId: string | null;
 
+  private root: Root | null = null;
+
   props: {
     deviceName?: string;
     zoom?: number;
@@ -152,7 +154,10 @@ export class CanvasView extends View {
     return this.el;
   }
   renderReact() {
-    ReactDOM.render(React.createElement(VisualCanvas, this.props), this.el[0]);
+    if (!this.root) {
+      this.root = createRoot(this.el[0]);
+    }
+    this.root.render(React.createElement(VisualCanvas, this.props as any));
   }
   setCurrentRoute(route: string) {
     const protocol = process.env.ssl ? 'https://' : 'http://';
@@ -171,7 +176,10 @@ export class CanvasView extends View {
       });
     }
 
-    ReactDOM.unmountComponentAtNode(this.el[0]);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
     ipcRenderer.off('editor-api-response', this._onEditorApiResponse);
   }
   refresh() {

packages/noodl-editor/src/editor/src/views/VisualCanvas/ShowInspectMenu.tsx

@@ -1,6 +1,6 @@
 import { getCurrentWindow, screen } from '@electron/remote';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { MenuDialog, MenuDialogWidth } from '@noodl-core-ui/components/popups/MenuDialog';
 
@@ -11,6 +11,8 @@ export function showInspectMenu(items: TSFixme) {
   const screenPoint = screen.getCursorScreenPoint();
   const [winX, winY] = getCurrentWindow().getPosition();
 
+  let root: Root | null = null;
+
   const popout = PopupLayer.instance.showPopout({
     content: { el: $(container) },
     arrowColor: 'transparent',
@@ -20,11 +22,15 @@ export function showInspectMenu(items: TSFixme) {
     },
     position: 'top',
     onClose: () => {
-      ReactDOM.unmountComponentAtNode(container);
+      if (root) {
+        root.unmount();
+        root = null;
+      }
     }
   });
 
-  ReactDOM.render(
+  root = createRoot(container);
+  root.render(
     <MenuDialog
       title="Nodes"
       width={MenuDialogWidth.Large}
@@ -34,7 +40,6 @@ export function showInspectMenu(items: TSFixme) {
         PopupLayer.instance.hidePopout(popout);
       }}
       items={items}
-    />,
-    container
+    />
   );
 }

packages/noodl-editor/src/editor/src/views/createnewnodepanel.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { ComponentModel } from '@noodl-models/componentmodel';
 import { NodeGraphModel, NodeGraphNode } from '@noodl-models/nodegraphmodel';
@@ -24,6 +24,7 @@ export class CreateNewNodePanel extends View {
   attachToRoot: boolean;
   pos: IVector2;
   runtimeType: string;
+  root: Root | null = null;
 
   static shouldShow(context: { component: ComponentModel; parentModel: NodeGraphNode }) {
     const nodeTypes = NodeLibrary.instance.getNodeTypes();
@@ -55,11 +56,14 @@ export class CreateNewNodePanel extends View {
   }
 
   dispose() {
-    ReactDOM.unmountComponentAtNode(this.el[0]);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
     ipcRenderer.send('viewer-show');
   }
 
-  renderReact(div) {
+  renderReact(div: HTMLElement) {
     const props = {
       model: this.model,
       parentModel: this.parentModel,
@@ -72,8 +76,10 @@ export class CreateNewNodePanel extends View {
     ipcRenderer.send('viewer-hide');
 
     // ... then render the picker
-    ReactDOM.unmountComponentAtNode(div);
-    ReactDOM.render(React.createElement(NodePicker, props), div);
+    if (!this.root) {
+      this.root = createRoot(div);
+    }
+    this.root.render(React.createElement(NodePicker, props));
   }
 
   render() {

packages/noodl-editor/src/editor/src/views/documents/ComponentDiffDocument/CodeDiffDialog.tsx

@@ -22,7 +22,7 @@ function anyToString(value: unknown) {
 }
 
 export function CodeDiffDialog({ diff, onClose }: CodeDiffDialogProps) {
-  const codeEditorRef = useRef();
+  const codeEditorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!codeEditorRef.current) {

packages/noodl-editor/src/editor/src/views/lessonlayer2.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { App } from '@noodl-models/app';
 import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
@@ -30,6 +30,7 @@ export class LessonLayer {
   steps: ILessonStep[];
   el: TSFixme;
   refreshTimeout: NodeJS.Timeout;
+  root: Root | null = null;
 
   constructor() {
     this.keyboardCommands = [
@@ -116,12 +117,16 @@ export class LessonLayer {
       }
     };
 
-    ReactDOM.render(React.createElement(LessonLayerView, props), this.div);
+    if (!this.root) {
+      this.root = createRoot(this.div);
+    }
+    this.root.render(React.createElement(LessonLayerView, props));
   }
 
   _render() {
-    if (this.div) {
-      ReactDOM.unmountComponentAtNode(this.div);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
     }
 
     this.div = document.createElement('div');
@@ -320,7 +325,10 @@ export class LessonLayer {
     this.model.off(this);
     EventDispatcher.instance.off(this);
 
-    ReactDOM.unmountComponentAtNode(this.div);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
   }
 
   resize() {}

packages/noodl-editor/src/editor/src/views/panels/componentspanel/ComponentTemplates.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { IconName } from '@noodl-core-ui/components/common/Icon';
 
@@ -230,7 +230,8 @@ class PageComponentTemplate extends ComponentTemplate {
       }
     };
     const div = document.createElement('div');
-    ReactDOM.render(React.createElement(PageComponentTemplatePopup, props), div);
+    const root = createRoot(div);
+    root.render(React.createElement(PageComponentTemplatePopup, props));
 
     return { el: $(div) };
   }

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditor.tsx

@@ -27,8 +27,8 @@ export interface CodeEditorProps {
 }
 
 export function CodeEditor({ model, initialSize, onSave, outEditor }: CodeEditorProps) {
-  const rootRef = useRef<HTMLDivElement>();
-  const editorRef = useRef<HTMLDivElement>();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<HTMLDivElement>(null);
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>(null);
   const [size, setSize] = useState<{ width: number; height: number }>({
     width: initialSize?.x ?? 700,

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditorType.ts

@@ -1,6 +1,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { WarningsModel } from '@noodl-models/warningsmodel';
 import { createModel } from '@noodl-utils/CodeEditor';
@@ -66,6 +66,9 @@ export class CodeEditorType extends TypeView {
 
   isPrimary: boolean;
 
+  propertyRoot: Root | null = null;
+  popoutRoot: Root | null = null;
+
   static fromPort(args): TSFixme {
     const view = new CodeEditorType();
 
@@ -97,8 +100,11 @@ export class CodeEditorType extends TypeView {
     this.model?.dispose();
     this.model = null;
 
-    // ReactDOM.unmountComponentAtNode(this.propertyDiv);
-    ReactDOM.unmountComponentAtNode(this.popoutDiv);
+    // Unmount popout root
+    if (this.popoutRoot) {
+      this.popoutRoot.unmount();
+      this.popoutRoot = null;
+    }
 
     WarningsModel.instance.off(this);
   }
@@ -107,7 +113,7 @@ export class CodeEditorType extends TypeView {
     this.el = this.bindView($(`<div></div>`), this);
     super.render();
 
-    const _this = this;
+    const self = this;
 
     const propertyProps: PropertyProps = {
       isPrimary: this.isPrimary,
@@ -115,12 +121,13 @@ export class CodeEditorType extends TypeView {
       tooltip: this.tooltip,
       isDefault: this.isDefault,
       onClick(event) {
-        _this.onLaunchClicked(_this, event.currentTarget, event);
+        self.onLaunchClicked(self, event.currentTarget, event);
       }
     };
 
     this.propertyDiv = document.createElement('div');
-    ReactDOM.render(React.createElement(Property, propertyProps), this.propertyDiv);
+    this.propertyRoot = createRoot(this.propertyDiv);
+    this.propertyRoot.render(React.createElement(Property, propertyProps));
 
     return this.propertyDiv;
   }
@@ -261,7 +268,8 @@ export class CodeEditorType extends TypeView {
     }
 
     this.popoutDiv = document.createElement('div');
-    ReactDOM.render(React.createElement(CodeEditor, props), this.popoutDiv);
+    this.popoutRoot = createRoot(this.popoutDiv);
+    this.popoutRoot.render(React.createElement(CodeEditor, props));
 
     const popoutDiv = this.popoutDiv;
     this.parent.showPopout({

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/ColorPicker/ColorType.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { ProjectModel } from '@noodl-models/projectmodel';
 
@@ -94,9 +94,9 @@ export class ColorType extends TypeView {
       bindColorPickerToView(this);
     }
 
-    let colorStylePickerDiv;
+    let colorStylePickerDiv: HTMLDivElement | undefined;
+    let colorStylePickerRoot: Root | null = null;
     const props = {};
-    let isShowingColorStylePicker = false;
 
     EventDispatcher.instance.on(
       'Model.stylesChanged',
@@ -113,10 +113,10 @@ export class ColorType extends TypeView {
     });
 
     this.$('input').on('click', (e) => {
-      // @ts-expect-error
+      // @ts-expect-error - Dynamic props assignment for legacy component
       delete props.filter; //delete filter in case the user opens/closes multiple times
 
-      // @ts-expect-error
+      // @ts-expect-error - Dynamic props assignment for legacy component
       props.onItemSelected = (name) => {
         this.parent.setParameter(this.name, name);
         this.updateCurrentValue();
@@ -124,36 +124,39 @@ export class ColorType extends TypeView {
       };
 
       const current = this.getCurrentValue();
-      // @ts-expect-error
+      // @ts-expect-error - Dynamic props assignment for legacy component
       props.inputValue = current.value;
 
       colorStylePickerDiv = document.createElement('div');
-      ReactDOM.render(React.createElement(ColorStylePicker, props), colorStylePickerDiv);
+      colorStylePickerRoot = createRoot(colorStylePickerDiv);
+      colorStylePickerRoot.render(React.createElement(ColorStylePicker, props));
 
       this.parent.showPopout({
         content: { el: $(colorStylePickerDiv) },
         attachTo: this.el,
         position: 'right',
         onClose: () => {
-          ReactDOM.unmountComponentAtNode(colorStylePickerDiv);
-          isShowingColorStylePicker = false;
+          if (colorStylePickerRoot) {
+            colorStylePickerRoot.unmount();
+            colorStylePickerRoot = null;
+            colorStylePickerDiv = undefined;
+          }
         }
       });
-      isShowingColorStylePicker = true;
 
       e.stopPropagation(); // Stop propagation, otherwise the popup will close
     });
 
     this.$('input').on('keyup', (e) => {
-      if (!isShowingColorStylePicker) {
+      if (!colorStylePickerRoot) {
         return;
       }
       if (e.key === 'Enter') {
         this.parent.hidePopout();
       } else {
-        // @ts-expect-error
+        // @ts-expect-error - Dynamic props assignment for legacy component
         props.filter = e.target.value;
-        ReactDOM.render(React.createElement(ColorStylePicker, props), colorStylePickerDiv);
+        colorStylePickerRoot.render(React.createElement(ColorStylePicker, props));
       }
     });
 

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/CurveEditor/CurveType.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { TypeView } from '../../TypeView';
 import { getEditType } from '../../utils';
@@ -53,7 +53,8 @@ export class CurveType extends TypeView {
       }
     };
     const div = document.createElement('div');
-    ReactDOM.render(React.createElement(require('./curveeditor.jsx'), props), div);
+    const root = createRoot(div);
+    root.render(React.createElement(require('./curveeditor.jsx'), props));
 
     const curveEditorView = {
       el: $(div)

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/IconType.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { NodeLibrary } from '@noodl-models/nodelibrary';
 
@@ -77,7 +77,8 @@ export class IconType extends TypeView {
       }
     };
     const div = document.createElement('div');
-    ReactDOM.render(React.createElement(IconPicker, props), div);
+    const root = createRoot(div);
+    root.render(React.createElement(IconPicker, props));
 
     this.parent.showPopout({
       content: {

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/QueryFilterType.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import QueryEditor from '../components/QueryEditor';
 import { TypeView } from '../TypeView';
 import { getEditType } from '../utils';
 
 export class QueryFilterType extends TypeView {
+  private root: Root | null = null;
+
   static fromPort(args) {
     const view = new QueryFilterType();
 
@@ -33,6 +35,8 @@ export class QueryFilterType extends TypeView {
       this.isDefault = false;
     };
 
+    const div = document.createElement('div');
+
     const renderFilters = () => {
       const props = {
         filter: this.value,
@@ -40,10 +44,12 @@ export class QueryFilterType extends TypeView {
         onChange
       };
 
-      ReactDOM.render(React.createElement(QueryEditor.Filter, props), div);
+      if (!this.root) {
+        this.root = createRoot(div);
+      }
+      this.root.render(React.createElement(QueryEditor.Filter, props));
     };
 
-    const div = document.createElement('div');
     renderFilters();
 
     this.el = $(div);

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/QuerySortingType.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import QueryEditor from '../components/QueryEditor';
 import { TypeView } from '../TypeView';
 import { getEditType } from '../utils';
 
 export class QuerySortingType extends TypeView {
+  private root: Root | null = null;
+
   public static fromPort(args: TSFixme) {
     const view = new QuerySortingType();
 
@@ -34,6 +36,8 @@ export class QuerySortingType extends TypeView {
       this.isDefault = false;
     };
 
+    const div = document.createElement('div');
+
     const renderSorting = () => {
       const props = {
         sorting: this.value,
@@ -41,10 +45,12 @@ export class QuerySortingType extends TypeView {
         onChange
       };
 
-      ReactDOM.render(React.createElement(QueryEditor.Sorting, props), div);
+      if (!this.root) {
+        this.root = createRoot(div);
+      }
+      this.root.render(React.createElement(QueryEditor.Sorting, props));
     };
 
-    const div = document.createElement('div');
     renderSorting();
 
     this.el = $(div);

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/TextStyleType.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { NodeLibrary } from '@noodl-models/nodelibrary';
 import { StylesModel } from '@noodl-models/StylesModel';
@@ -54,7 +54,8 @@ export class TextStyleType extends TypeView {
       this
     );
 
-    let textStylePickerDiv;
+    let textStylePickerDiv: HTMLDivElement | undefined;
+    let textStylePickerRoot: Root | null = null;
 
     const props = {};
 
@@ -158,19 +159,21 @@ export class TextStyleType extends TypeView {
         });
       };
 
-      // @ts-expect-error
+      // @ts-expect-error - Dynamic props assignment for legacy component
       props.inputValue = this.$('input').val();
 
       textStylePickerDiv = document.createElement('div');
-      ReactDOM.render(React.createElement(TextStylePicker, props), textStylePickerDiv);
+      textStylePickerRoot = createRoot(textStylePickerDiv);
+      textStylePickerRoot.render(React.createElement(TextStylePicker, props));
 
       this.parent.showPopout({
         content: { el: $(textStylePickerDiv) },
         attachTo: this.el,
         position: 'right',
         onClose: () => {
-          if (textStylePickerDiv) {
-            ReactDOM.unmountComponentAtNode(textStylePickerDiv);
+          if (textStylePickerRoot) {
+            textStylePickerRoot.unmount();
+            textStylePickerRoot = null;
             textStylePickerDiv = undefined;
           }
         }
@@ -180,16 +183,16 @@ export class TextStyleType extends TypeView {
     });
 
     this.$('input').on('keyup', (e) => {
-      if (!textStylePickerDiv) {
+      if (!textStylePickerRoot) {
         return;
       }
 
       if (e.key === 'Enter') {
         this.parent.hidePopout();
       } else {
-        // @ts-expect-error
+        // @ts-expect-error - Dynamic props assignment for legacy component
         props.filter = e.target.value;
-        ReactDOM.render(React.createElement(TextStylePicker, props), textStylePickerDiv);
+        textStylePickerRoot.render(React.createElement(TextStylePicker, props));
       }
     });
 

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/Pages/Pages.tsx

@@ -1,6 +1,6 @@
 import { NodeGraphContextTmp } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
 import React, { useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
 import { IconButton, IconButtonVariant } from '@noodl-core-ui/components/inputs/IconButton';
@@ -234,14 +234,17 @@ export class Pages extends React.Component {
       }
     };
     const div = document.createElement('div');
-    ReactDOM.render(React.createElement(AddNewPagePopup, props), div);
+    const root = createRoot(div);
+    root.render(React.createElement(AddNewPagePopup, props));
 
     PopupLayer.instance.showPopup({
       content: { el: $(div) },
-      // @ts-expect-error
+      // @ts-expect-error - Legacy class component without proper typing
       attachTo: $(this.popupAnchor),
       position: 'right',
-      onClose: function () {}
+      onClose: function () {
+        root.unmount();
+      }
     });
   }
 

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/Pages/PagesType.tsx

@@ -1,6 +1,6 @@
 import { NodeGraphContextTmp } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { ProjectModel } from '@noodl-models/projectmodel';
 
@@ -10,6 +10,7 @@ import { Pages } from './Pages';
 
 export class PagesType extends TypeView {
   el: TSFixme;
+  private root: Root | null = null;
 
   static fromPort(args) {
     const view = new PagesType();
@@ -50,10 +51,19 @@ export class PagesType extends TypeView {
     };
 
     const div = document.createElement('div');
-    ReactDOM.render(React.createElement(Pages, props), div);
+    this.root = createRoot(div);
+    this.root.render(React.createElement(Pages, props));
 
     this.el = $(div);
 
     return this.el;
   }
+
+  dispose() {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+    TypeView.prototype.dispose.call(this);
+  }
 }

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/componentpicker.ts

@@ -1,7 +1,7 @@
 import { NodeGraphContextTmp } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
 import _ from 'underscore';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { ComponentModel } from '@noodl-models/componentmodel';
 import { getComponentIconType, ComponentIconType } from '@noodl-models/nodelibrary/ComponentIcon';
@@ -34,6 +34,7 @@ export class ComponentPicker {
   private reactMount: HTMLElement;
   private componentsToShow: ComponentPickerOptions['components'];
   private ignoreSheetName: boolean;
+  private root: Root | null = null;
 
   constructor(args: ComponentPickerOptions) {
     this.onItemSelected = args.onItemSelected;
@@ -159,7 +160,10 @@ export class ComponentPicker {
       width: MenuDialogWidth.Medium
     };
 
-    ReactDOM.render(React.createElement(MenuDialog, props), this.reactMount);
+    if (!this.root) {
+      this.root = createRoot(this.reactMount);
+    }
+    this.root.render(React.createElement(MenuDialog, props));
   }
 
   render(target: HTMLElement) {
@@ -168,8 +172,9 @@ export class ComponentPicker {
   }
 
   dispose() {
-    if (this.reactMount) {
-      ReactDOM.unmountComponentAtNode(this.reactMount);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
     }
   }
 }

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/QueryEditor/QueryGroup/QueryGroup.tsx

@@ -137,7 +137,7 @@ export class QueryGroup extends React.Component<QueryGroupProps> {
         className={'queryeditor-group' + (this.props.isTopLevel ? ' toplevel' : '')}
         style={{ position: 'relative' }}
       >
-        <div className="queryeditor-group-children" ref={(el) => (this.childContainer = el)}>
+        <div className="queryeditor-group-children" ref={(el) => { this.childContainer = el; }}>
           {this.renderChildren()}
         </div>
         <div className="queryeditor-group-row">

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/QueryEditor/QuerySortingEditor/QuerySortingEditor.tsx

@@ -77,7 +77,7 @@ export class QuerySortingEditor extends React.Component<QuerySortingEditorProps>
         {this.sorting !== undefined ? (
           <div>
             <div className="queryeditor-sorting-rules">
-              <div ref={(el) => (this.childContainer = el)}>
+              <div ref={(el) => { this.childContainer = el; }}>
                 {this.sorting.map((s, idx) => (
                   <div key={idx /* TODO: Invalid key */}>
                     <QuerySortingRule

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/QueryEditor/utils.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import PopupLayer from '../../../../popuplayer';
 
 export function openPopup(args) {
+  let root: Root | null = null;
+
   const onChange = () => {
     args.onChange && args.onChange();
     renderPopup();
@@ -21,7 +23,10 @@ export function openPopup(args) {
       onDelete
     };
 
-    ReactDOM.render(React.createElement(args.reactComponent, props), div);
+    if (!root) {
+      root = createRoot(div);
+    }
+    root.render(React.createElement(args.reactComponent, props));
   };
 
   const div = document.createElement('div');
@@ -33,7 +38,10 @@ export function openPopup(args) {
     attachTo: $(args.attachTo),
     position: 'right',
     onClose() {
-      ReactDOM.unmountComponentAtNode(div);
+      if (root) {
+        root.unmount();
+        root = null;
+      }
     }
   });
 }

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/VariantStates/PickVariantPopup.tsx

@@ -135,7 +135,7 @@ export class PickVariantPopup extends React.Component<PickVariantPopupProps, Sta
           <div className="variants-input-container">
             <input
               className="variants-input"
-              ref={(ref) => ref && setTimeout(() => ref.focus(), 10)}
+              ref={(ref) => { if (ref) setTimeout(() => ref.focus(), 10); }}
               autoFocus
               onKeyUp={this.onKeyUp.bind(this)}
               onChange={(e) => (this.newVariantName = e.target.value)}

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/VariantStates/variantseditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { ProjectModel } from '@noodl-models/projectmodel';
 
@@ -26,6 +26,7 @@ export class VariantsEditor extends React.Component<VariantsEditorProps, State>
   model: VariantsEditorProps['model'];
   popout: any;
   popupAnchor: HTMLDivElement;
+  private popupRoot: Root | null = null;
 
   constructor(props: VariantsEditorProps) {
     super(props);
@@ -128,7 +129,7 @@ export class VariantsEditor extends React.Component<VariantsEditorProps, State>
     }
 
     return (
-      <div className="variants-editor" ref={(el) => (this.popupAnchor = el)}>
+      <div className="variants-editor" ref={(el) => { this.popupAnchor = el; }}>
         {content}
       </div>
     );
@@ -185,13 +186,18 @@ export class VariantsEditor extends React.Component<VariantsEditorProps, State>
         PopupLayer.instance.hidePopout(this.popout);
       }
     };
-    ReactDOM.render(React.createElement(PickVariantPopup, props), div);
+    this.popupRoot = createRoot(div);
+    this.popupRoot.render(React.createElement(PickVariantPopup, props));
 
     this.popout = PopupLayer.instance.showPopout({
       content: { el: $(div) },
       attachTo: $(this.popupAnchor),
       position: 'right',
-      onClose: function () {
+      onClose: () => {
+        if (this.popupRoot) {
+          this.popupRoot.unmount();
+          this.popupRoot = null;
+        }
         this.popout = undefined;
       }
     });

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/VisualStates/visualstates.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { TransitionEditor } from './TransitionEditor';
 
@@ -23,6 +23,7 @@ type State = {
 
 export class VisualStates extends React.Component<VisualStatesProps, State> {
   popupAnchor: TSFixme;
+  private popupRoot: Root | null = null;
 
   constructor(props: VisualStatesProps) {
     super(props);
@@ -83,13 +84,20 @@ export class VisualStates extends React.Component<VisualStatesProps, State> {
       model: this.props.model,
       visualState: this.state.selectedVisualState
     };
-    ReactDOM.render(React.createElement(TransitionEditor, props), div);
+    this.popupRoot = createRoot(div);
+    this.popupRoot.render(React.createElement(TransitionEditor, props));
 
     this.props.portsView.showPopout({
       arrowColor: '#444444',
       content: { el: $(div) },
       attachTo: $(this.popupAnchor),
-      position: 'right'
+      position: 'right',
+      onClose: () => {
+        if (this.popupRoot) {
+          this.popupRoot.unmount();
+          this.popupRoot = null;
+        }
+      }
     });
 
     evt.stopPropagation();
@@ -100,7 +108,7 @@ export class VisualStates extends React.Component<VisualStatesProps, State> {
       <div
         className="variants-section property-editor-visual-states"
         style={{ position: 'relative', display: 'flex', alignItems: 'center' }}
-        ref={(el) => (this.popupAnchor = el)}
+        ref={(el) => { this.popupAnchor = el; }}
       >
         <div className="variants-name-section" onClick={this.onCurrentStateClicked.bind(this)}>
           <label>{this.state.selectedVisualState.label} state</label>

packages/noodl-editor/src/editor/src/views/panels/propertyeditor/propertyeditor.ts

@@ -1,7 +1,7 @@
 import { NodeGraphContextTmp } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
 import _ from 'underscore';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
 import { NodeGraphNode } from '@noodl-models/nodegraphmodel';
 import { UndoQueue, UndoActionGroup } from '@noodl-models/undo-queue-model';
@@ -27,6 +27,8 @@ export class PropertyEditor extends View {
   allowAsRoot: TSFixme;
   portsView: TSFixme;
   renderPortsViewScheduled: TSFixme;
+  variantsRoot: Root | null = null;
+  visualStatesRoot: Root | null = null;
 
   constructor(args) {
     super();
@@ -76,7 +78,11 @@ export class PropertyEditor extends View {
           this.$('.sidebar-property-editor').removeClass('variants-sidepanel-edit-mode');
         }
       };
-      ReactDOM.render(React.createElement(VariantsEditor, props), this.$('.variants')[0]);
+      const container = this.$('.variants')[0];
+      if (!this.variantsRoot) {
+        this.variantsRoot = createRoot(container);
+      }
+      this.variantsRoot.render(React.createElement(VariantsEditor, props));
     }
   }
   renderVisualStates() {
@@ -86,7 +92,11 @@ export class PropertyEditor extends View {
         onVisualStateChanged: this.onVisualStateChanged.bind(this),
         portsView: this.portsView
       };
-      ReactDOM.render(React.createElement(VisualStates, props), this.$('.visual-states')[0]);
+      const container = this.$('.visual-states')[0];
+      if (!this.visualStatesRoot) {
+        this.visualStatesRoot = createRoot(container);
+      }
+      this.visualStatesRoot.render(React.createElement(VisualStates, props));
     }
   }
   onVisualStateChanged(state) {

packages/noodl-editor/src/shared/ReactView.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import View from './view';
 
 export interface ReactViewDefaultProps {
@@ -8,6 +8,7 @@ export interface ReactViewDefaultProps {
 
 export abstract class ReactView<TProps extends ReactViewDefaultProps> extends View {
   private props: TProps;
+  private root: Root | null = null;
 
   public el: any;
 
@@ -31,14 +32,20 @@ export abstract class ReactView<TProps extends ReactViewDefaultProps> extends Vi
       });
     }
 
-    ReactDOM.render(React.createElement(this.renderReact.bind(this), this.props), this.el[0]);
+    if (!this.root) {
+      this.root = createRoot(this.el[0]);
+    }
+    this.root.render(React.createElement(this.renderReact.bind(this), this.props));
 
     return this.el;
   }
 
   public dispose() {
-    this.el && ReactDOM.unmountComponentAtNode(this.el[0]);
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
   }
 
-  protected abstract renderReact(props: TProps): JSX.Element;
+  protected abstract renderReact(props: TProps): React.JSX.Element;
 }