0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

Updated <ReactMobiledocEditor> to work with single-component export from koenig-react

no issue

- top-level export from `@tryghost/koenig-react` is a single component and the UMD module is loaded onto `window.koenigEditor`
This commit is contained in:
Kevin Ansfield 2022-07-26 14:34:14 +01:00
parent 5f311946b5
commit 873a2ff8e3

View file

@ -21,13 +21,13 @@ class ErrorHandler extends React.Component {
} }
} }
const fetchMobiledocEditor = function () { const fetchKoenig = function () {
let status = 'pending'; let status = 'pending';
let response; let response;
const fetchPackage = async () => { const fetchPackage = async () => {
if (window.ReactMobiledocEditor) { if (window.koenigEditor) {
return window.ReactMobiledocEditor; return window.koenigEditor.default;
} }
// the removal of `https://` and it's manual addition to the import template string is // the removal of `https://` and it's manual addition to the import template string is
@ -36,7 +36,7 @@ const fetchMobiledocEditor = function () {
const url = GhostAdmin.__container__.lookup('service:config').get('editor.url').replace('https://', ''); const url = GhostAdmin.__container__.lookup('service:config').get('editor.url').replace('https://', '');
await import(`https://${url}`); await import(`https://${url}`);
return window.ReactMobiledocEditor; return window.koenigEditor.default;
}; };
const suspender = fetchPackage().then( const suspender = fetchPackage().then(
@ -64,27 +64,20 @@ const fetchMobiledocEditor = function () {
return {read}; return {read};
}; };
const editorResource = fetchMobiledocEditor(); const editorResource = fetchKoenig();
const Container = (props) => { const Koenig = (props) => {
const MobiledocEditor = editorResource.read(); const KoenigEditor = editorResource.read();
return <MobiledocEditor.Container {...props} />; return <KoenigEditor {...props} />;
};
const Editor = (props) => {
const MobiledocEditor = editorResource.read();
return <MobiledocEditor.Editor {...props} />;
}; };
export default function ReactMobiledocEditorComponent(props) { export default function ReactMobiledocEditorComponent(props) {
return ( return (
<ErrorHandler> <ErrorHandler>
<Suspense fallback={<p>Loading editor...</p>}> <Suspense fallback={<p>Loading editor...</p>}>
<Container <Koenig
mobiledoc={props.mobiledoc} mobiledoc={props.mobiledoc}
> />
<Editor />
</Container>
</Suspense> </Suspense>
</ErrorHandler> </ErrorHandler>
); );