From 677f2961f43db5bea9cf6c2a4e064fa8acef5ff9 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 4 Aug 2022 15:55:37 +0100
Subject: [PATCH] Added wrapper element around react editor
 loading/error/editor states

no issue

- has a default class of `koenig-react-editor` which can be added to by using `@className`
- adds classes of `koenig-react-editor-loading` and `koenig-react-editor-error` to the `<p>` elements rendered during loading or when loading fails
---
 .../app/components/koenig-react-editor.js     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/koenig-react-editor.js b/ghost/admin/app/components/koenig-react-editor.js
index f0bee9bcea..e5b8f70e0b 100644
--- a/ghost/admin/app/components/koenig-react-editor.js
+++ b/ghost/admin/app/components/koenig-react-editor.js
@@ -13,7 +13,7 @@ class ErrorHandler extends React.Component {
     render() {
         if (this.state.hasError) {
             return (
-                <p>Loading has failed. Try refreshing the browser!</p>
+                <p className="koenig-react-editor-error">Loading has failed. Try refreshing the browser!</p>
             );
         }
 
@@ -80,15 +80,17 @@ const Koenig = (props) => {
 export default class KoenigReactEditor extends Component {
     ReactComponent = () => {
         return (
-            <ErrorHandler>
-                <Suspense fallback={<p>Loading editor...</p>}>
-                    <Koenig
-                        mobiledoc={this.args.mobiledoc}
-                        didCreateEditor={this.args.didCreateEditor}
-                        onChange={this.args.onChange}
-                    />
-                </Suspense>
-            </ErrorHandler>
+            <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
+                <ErrorHandler>
+                    <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
+                        <Koenig
+                            mobiledoc={this.args.mobiledoc}
+                            didCreateEditor={this.args.didCreateEditor}
+                            onChange={this.args.onChange}
+                        />
+                    </Suspense>
+                </ErrorHandler>
+            </div>
         );
     };
 }