Support React 18

README.md

@@ -343,6 +343,17 @@ mobiledoc-specific props:
 - `name`: The name of this card.
 - `onTeardown`: A callback that can be called when the rendered content is torn down.
 
+### 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:
+
+ ```js
+ import ReactDOM from 'react-dom/client';
+
+ <Container ReactDOM={ReactDOM}>...</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';
+import ReactDOM from 'react-dom/client';
 import '../node_modules/mobiledoc-kit/dist/mobiledoc.css';
 
 import * as ReactMobiledoc from 'react-mobiledoc-editor';
@@ -46,6 +46,7 @@ const App = () => {
         {...config}
         mobiledoc={state}
         onChange={setState}
+        ReactDOM={ReactDOM}
       >
         <ReactMobiledoc.Toolbar />
         <ImageButton />
@@ -57,4 +58,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

karma.conf.js

@@ -25,6 +25,12 @@ module.exports = function (config) {
       resolve: {
         alias: {
           'react-mobiledoc-editor': __dirname,
+          ...(process.env.REACT_17 && {
+            react: 'react-17',
+            'react-dom': 'react-dom-17',
+            '@cfaester/enzyme-adapter-react-18':
+              '@wojtekmaj/enzyme-adapter-react-17',
+          }),
         },
       },
       module: {