INT-3336: Update and provide support for React and ReactDOM 19 (#578)

* INT-3336: Bump `storybook` minor

* INT-3336: Bump `react` and `react-dom` major to v19

* INT-3336: Replace deprecated APIs and manually fix syntax errors

* INT-3336: Wait for TinyMCE to finish updating the content before rerendering

* INT-3336: Wait for editor content to have been updated

* INT-3336: Fix tests failing for TinyMCE 4

* INT-3336: Avoid casting the editor `targetElm`

* INT-3336: Update peer dependencies for React and ReactDOM to support version 19

* INT-3336: Bump integration version in package.json to 7 and update changelog

* INT-3336: Add unused `event` parameter to `once` call to be more explicit.

* INT-3336: Bump `storybook` again

* INT-3336: Remove redundant if condition

* INT-3336: Add comments and remove redundant `filter`

* INT-3336: Resolve conflicts

* INT-3336: Bump `prop-types` patch

Author: kimwoodfield

CHANGELOG.md

@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+- Support for `react` version `^19.0.0` by updating the `react` and `react-dom` in the `peerDependencies` to `^19.0.0`
+
 ## 6.0.0 - 2025-02-21
 
 ### Fixed

package.json

@@ -29,8 +29,8 @@
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^17.0.1 || ^16.7.0",
-    "react-dom": "^18.0.0 || ^17.0.1 || ^16.7.0",
+    "react": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
+    "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
     "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1"
   },
   "peerDependenciesMeta": {
@@ -50,32 +50,32 @@
     "@ephox/mcagar": "^9.0.0-alpha.0",
     "@ephox/sand": "^6.0.9",
     "@ephox/sugar": "^9.2.1",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^2.4.0",
     "@tinymce/miniature": "^6.0.0",
     "@types/node": "^22.13.10",
-    "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "gh-pages": "^6.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "gh-pages": "^6.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
-    "storybook": "^8.2.4",
-    "tinymce": "^7.7.1",
+    "storybook": "^8.6.4",
+    "tinymce": "^7.2.1",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
     "typescript": "~5.8.2",
     "vite": "^6.2.1"
   },
-  "version": "6.0.1-rc",
+  "version": "7.0.0-rc",
   "name": "@tinymce/tinymce-react"
 }

src/main/ts/components/Editor.tsx

@@ -145,7 +145,7 @@ export class Editor extends React.Component<IAllProps> {
   public editor?: TinyMCEEditor;
 
   private id: string;
-  private elementRef: React.RefObject<HTMLElement>;
+  private elementRef: React.RefObject<HTMLElement | null>;
   private inline: boolean;
   private currentContent?: string;
   private boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>;
@@ -155,7 +155,7 @@ export class Editor extends React.Component<IAllProps> {
   public constructor(props: Partial<IAllProps>) {
     super(props);
     this.id = this.props.id || uuid('tiny-react');
-    this.elementRef = React.createRef<HTMLElement>();
+    this.elementRef = React.createRef<HTMLElement | null>();
     this.inline = this.props.inline ?? this.props.init?.inline ?? false;
     this.boundHandlers = {};
   }

src/test/ts/alien/Loader.tsx

@@ -1,11 +1,12 @@
 import { Fun, Optional } from '@ephox/katamari';
 import { Remove, SugarElement, SugarNode } from '@ephox/sugar';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Editor, IAllProps, IProps, Version } from '../../../main/ts/components/Editor';
 import { Editor as TinyMCEEditor } from 'tinymce';
 import { before, context } from '@ephox/bedrock-client';
 import { VersionLoader } from '@tinymce/miniature';
+import { setMode } from 'src/main/ts/Utils';
 
 // @ts-expect-error Remove when dispose polyfill is not needed
 Symbol.dispose ??= Symbol('Symbol.dispose');
@@ -33,6 +34,7 @@ export const render = async (props: Partial<IAllProps> = {}, container: HTMLElem
   const originalInit = props.init || {};
   const originalSetup = originalInit.setup || Fun.noop;
   const ref = React.createRef<Editor>();
+  const root = ReactDOMClient.createRoot(container);
 
   const ctx = await new Promise<Context>((resolve, reject) => {
     const init: IProps['init'] = {
@@ -43,18 +45,18 @@ export const render = async (props: Partial<IAllProps> = {}, container: HTMLElem
         editor.on('SkinLoaded', () => {
           setTimeout(() => {
             Optional.from(ref.current)
-              .map(ReactDOM.findDOMNode)
-              .bind(Optional.from)
+              .bind((editorInstance) => Optional.from(editorInstance.editor?.targetElm))
               .map(SugarElement.fromDom)
               .filter(SugarNode.isHTMLElement)
               .map((val) => val.dom)
               .fold(() => reject('Could not find DOMNode'), (DOMNode) => {
                 resolve({
-                  ref,
+                  ref: ref as React.RefObject<Editor>,
                   editor,
                   DOMNode,
                 });
-              });
+              }
+              );
           }, 0);
         });
       }
@@ -67,20 +69,28 @@ export const render = async (props: Partial<IAllProps> = {}, container: HTMLElem
      * touch the nodes created by TinyMCE. Since this only seems to be an issue when rendering TinyMCE 4 directly
      * into a root and a fix would be a breaking change, let's just wrap the editor in a <div> here for now.
      */
-    ReactDOM.render(<div><Editor ref={ref} apiKey='no-api-key' {...props} init={init} /></div>, container);
+    root.render(<div><Editor ref={ref} apiKey='no-api-key' {...props} init={init} /></div>);
   });
 
   const remove = () => {
-    ReactDOM.unmountComponentAtNode(container);
+    root.unmount();
     Remove.remove(SugarElement.fromDom(container));
   };
 
   return {
     ...ctx,
     /** By rendering the Editor into the same root, React will perform a diff and update. */
-    reRender: (newProps: IAllProps) => new Promise<void>((resolve) =>
-      ReactDOM.render(<div><Editor apiKey='no-api-key' ref={ctx.ref} {...newProps} /></div>, container, resolve)
-    ),
+    reRender: (newProps: IAllProps) => new Promise<void>((resolve) => {
+      root.render(<div><Editor apiKey='no-api-key' ref={ctx.ref} {...newProps} /></div>);
+
+      if (newProps.disabled) {
+        setMode(ctx.editor, 'readonly');
+      }
+
+      newProps.value
+        ? ctx.editor.once('change', (_event) => resolve())
+        : resolve();
+    }),
     remove,
     [Symbol.dispose]: remove
   };

src/test/ts/browser/EditorBehaviorTest.ts

@@ -6,7 +6,7 @@ import { describe, it } from '@ephox/bedrock-client';
 import { getTinymce } from '../../../main/ts/TinyMCE';
 import { EventStore, VERSIONS } from '../alien/TestHelpers';
 import { Editor as TinyMCEEditor, EditorEvent, Events } from 'tinymce';
-import { Assertions } from '@ephox/agar';
+import { Assertions, Waiter } from '@ephox/agar';
 import { TinyAssertions } from '@ephox/mcagar';
 
 type SetContentEvent = EditorEvent<Events.EditorEventMap['SetContent']>;
@@ -89,6 +89,7 @@ describe('EditorBehaviourTest', () => {
         await ctx.reRender({ onSetContent: eventStore.createHandler('onSetContent') });
 
         TinyAssertions.assertContent(ctx.editor, '<p>Initial Content</p>');
+        await Waiter.pWait(0); // Wait for React's state updates to complete before setting new content
         ctx.editor.setContent('<p>New Content</p>');
 
         eventStore.each<SetContentEvent>('onSetContent', (events) => {
@@ -98,7 +99,6 @@ describe('EditorBehaviourTest', () => {
             events[0].editorEvent.content
           );
         });
-
         eventStore.clearState();
       });
 
@@ -114,8 +114,8 @@ describe('EditorBehaviourTest', () => {
         });
         eventStore.clearState();
         ctx.editor.setContent('<p>Initial Content</p>');
-
         await ctx.reRender({ onSetContent: eventStore.createHandler('NewHandler') });
+        await Waiter.pWait(0); // Wait for React's state updates to complete before setting new content
         ctx.editor.setContent('<p>New Content</p>');
 
         eventStore.each<SetContentEvent>('InitialHandler', (events) => {