Adjust container prop for react 18 (#109)

README.md

@@ -345,15 +345,14 @@ mobiledoc-specific props:
 
 ### React 18 Support
 
- To use custom card & atom components in React 18 without warnings, you can pass a specific ReactDOM version as a prop on the Container:
+ To use custom card & atom components with React 18 without warnings, you can pass an instance of `createRoot` from react-dom v18 as a prop on the `Container`. Internally, components will render with `createRoot` if available and fallback to the legacy `render`:
 
  ```js
- import ReactDOM from 'react-dom/client';
+ import { createRoot } from 'react-dom/client';
 
- <Container ReactDOM={ReactDOM}>...</Container>;
+ <Container createRoot={createRoot}>...</Container>;
  ```
 
- Notice the React 18 specific import path. Internally, components will render with the new `createRoot` API if available and fallback to the legacy `render` method.
 
 ## Development
 

demo/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import '../node_modules/mobiledoc-kit/dist/mobiledoc.css';
 
 import * as ReactMobiledoc from 'react-mobiledoc-editor';
@@ -46,7 +46,7 @@ const App = () => {
         {...config}
         mobiledoc={state}
         onChange={setState}
-        ReactDOM={ReactDOM}
+        createRoot={createRoot}
       >
         <ReactMobiledoc.Toolbar />
         <ImageButton />
@@ -58,5 +58,4 @@ const App = () => {
   );
 };
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+createRoot(document.getElementById('root')).render(<App />);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mobiledoc-editor",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "A Mobiledoc editor for React apps",
   "repository": "joshfrench/react-mobiledoc-editor",
   "homepage": "https://github.com/joshfrench/react-mobiledoc-editor",

src/components/Container.js

@@ -31,7 +31,7 @@ class Container extends React.Component {
       placeholder,
       serializeVersion,
       spellcheck,
-      ReactDOM,
+      createRoot,
     } = this.props;
     const mobiledoc =
       this.props.mobiledoc || (html ? undefined : EMPTY_MOBILEDOC);
@@ -40,7 +40,7 @@ class Container extends React.Component {
       ...this.props.options,
       atoms,
       autofocus,
-      cardOptions: { cardProps, ReactDOM },
+      cardOptions: { cardProps, createRoot },
       cards,
       html,
       mobiledoc,
@@ -88,7 +88,7 @@ class Container extends React.Component {
       spellcheck,
       willCreateEditor,
       onChange,
-      ReactDOM,
+      createRoot,
       ...componentProps
     } = this.props;
     /* eslint-enable no-unused-vars */

src/utils/classToAtom.js

@@ -5,7 +5,7 @@ const atomRenderer =
   (component) =>
   ({ env, options, payload, value }) => {
     const { onTeardown } = env;
-    const { ReactDOM } = options;
+    const { createRoot } = options;
 
     const element = React.createElement(component, {
       ...env,
@@ -15,9 +15,9 @@ const atomRenderer =
     });
 
     const targetNode = document.createElement('span');
-    const root = reactDomRender(ReactDOM, element, targetNode);
+    const root = reactDomRender(createRoot, element, targetNode);
 
-    onTeardown(() => reactDomUnmount(ReactDOM, root, targetNode));
+    onTeardown(() => reactDomUnmount(root, targetNode));
 
     return targetNode;
   };

src/utils/classToCard.js

@@ -6,7 +6,7 @@ const cardRenderer =
   ({ env, options, payload }) => {
     const targetNode = document.createElement('div');
     const { didRender, onTeardown } = env;
-    const { cardProps, ReactDOM } = options;
+    const { cardProps, createRoot } = options;
     let root;
 
     didRender(() => {
@@ -17,10 +17,10 @@ const cardRenderer =
         payload,
         isEditing,
       });
-      root = reactDomRender(ReactDOM, element, targetNode);
+      root = reactDomRender(createRoot, element, targetNode);
     });
 
-    onTeardown(() => reactDomUnmount(ReactDOM, root, targetNode));
+    onTeardown(() => reactDomUnmount(root, targetNode));
 
     return targetNode;
   };

src/utils/react.js

@@ -1,18 +1,17 @@
 import ReactDOM from 'react-dom';
 
-export function reactDomRender(CustomReactDOM, element, target) {
-  const ResolvedReactDOM = CustomReactDOM || ReactDOM;
-  const createRoot = ResolvedReactDOM.createRoot; // React 18+
+export function reactDomRender(createRoot, element, target) {
+  // React 18+
   if (createRoot) {
     const root = createRoot(target);
     root.render(element);
     return root;
   } else {
-    ResolvedReactDOM.render(element, target);
+    ReactDOM.render(element, target);
   }
 }
 
-export function reactDomUnmount(CustomReactDOM, root, target) {
+export function reactDomUnmount(root, target) {
   if (root) root.unmount();
-  else (CustomReactDOM || ReactDOM).unmountComponentAtNode(target);
+  else ReactDOM.unmountComponentAtNode(target);
 }