Fixed hooks not being usable inside of react components

no issue

- switched to using the `window.ReactDOM` instance that is created when importing the react/react-dom libraries
  - React stores state/component references inside of the ReactDOM instance when rendering so we need to make sure all renders use the same instance otherwise it loses track of which component a hook belongs to
- cleaned up unnecessary vendor shims and `prop-types` import
  - `react` and `react-dom` vendor shims are unused when using the globals instead of imports
  - `prop-types` import+shim is not required as it's part of the `@tryghost/koenig-react` build unlike the earlier direct import of `react-mobiledoc-editor`

ghost/admin/app/components/react-component.js

@@ -1,6 +1,6 @@
+/* global ReactDOM */
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import {createRoot} from 'react-dom/client';
 
 export default class ReactComponent extends Component {
     @action
@@ -19,7 +19,7 @@ export default class ReactComponent extends Component {
         }
 
         this.elem = element;
-        this.root = createRoot(this.elem);
+        this.root = ReactDOM.createRoot(this.elem);
         this.root.render(reactComponent);
     }
 

ghost/admin/app/components/react-mobiledoc-editor.js

@@ -71,7 +71,7 @@ const Koenig = (props) => {
     return <KoenigEditor {...props} />;
 };
 
-export default function ReactMobiledocEditorComponent(props) {
+const ReactMobiledocEditor = (props) => {
     return (
         <ErrorHandler>
             <Suspense fallback={<p>Loading editor...</p>}>
@@ -82,4 +82,6 @@ export default function ReactMobiledocEditorComponent(props) {
             </Suspense>
         </ErrorHandler>
     );
-}
+};
+
+export default ReactMobiledocEditor;

ghost/admin/ember-cli-build.js

@@ -266,7 +266,7 @@ module.exports = function (defaults) {
     }
 
     // Support react components
-    // React and ReactDOM globals
+    // adds React and ReactDOM to window.
     app.import({
         development: 'node_modules/react/umd/react.development.js',
         production: 'node_modules/react/umd/react.production.min.js'
@@ -275,12 +275,6 @@ module.exports = function (defaults) {
         development: 'node_modules/react-dom/umd/react-dom.development.js',
         production: 'node_modules/react-dom/umd/react-dom.production.min.js'
     });
-    // support `import React from 'react'`
-    app.import('vendor/shims/react.js');
-    app.import('vendor/shims/react-dom.js');
-    // required dependency for dynamically fetched react-mobiledoc-editor
-    app.import('node_modules/prop-types/prop-types.min.js');
-    app.import('vendor/shims/prop-types.js');
 
     return app.toTree();
 };

ghost/admin/vendor/shims/prop-types.js

@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['prop-types'],
-      __esModule: true,
-    };
-  }
-
-  define('prop-types', [], vendorModule);
-})();

ghost/admin/vendor/shims/react-dom.js

@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['react-dom'],
-      __esModule: true,
-    };
-  }
-
-  define('react-dom', [], vendorModule);
-})();

ghost/admin/vendor/shims/react.js

@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['react'],
-      __esModule: true,
-    };
-  }
-
-  define('react', [], vendorModule);
-})();