TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 22:02:11 +03:00
Code Issues Projects Releases Wiki 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() { render() {
if (this.state.hasError) { if (this.state.hasError) {
return ( 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 { export default class KoenigReactEditor extends Component {
ReactComponent = () => { ReactComponent = () => {
return ( return (
<ErrorHandler> <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
<Suspense fallback={<p>Loading editor...</p>}> <ErrorHandler>
<Koenig <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
mobiledoc={this.args.mobiledoc} <Koenig
didCreateEditor={this.args.didCreateEditor} mobiledoc={this.args.mobiledoc}
onChange={this.args.onChange} didCreateEditor={this.args.didCreateEditor}
/> onChange={this.args.onChange}
</Suspense> />
</ErrorHandler> </Suspense>
</ErrorHandler>
</div>
); );
}; };
} }