Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added wrapper element around react editor loading/error/editor states

Browse source 
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
This commit is contained in:
Kevin Ansfield 2022-08-04 15:55:37 +01:00
parent fa8d94fce2
commit 677f2961f4
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/admin/app/components/koenig-react-editor.js
View file

@ -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>
);
};
}