Page History

The SPA front-end helper JavaScript libraries provide APIs that let you know about the current renderer context of a SPA page, that is whether it is running in the Pages editor, Pages preview or in a production setup. This is through which you can stay informed about the status of the current editor context of an SPA page. The status can be that your SPA page is running in:

• A developer mode.
• The page editor of the Pages app.
• The preview mode of the page editor.

Being aware of the current editor context can be useful if you need to hit different URLs for content, do rendering or other things conditionally. The status information is retrievable in both frameworks integrating SPA development in Magnolia – Angular and ReactJS.

Editor/preview check (Angular and ReactJS)

To find out whether your SPA page is running in the page editor or in its page preview mode, inject

• either the EditorContextService from the @magnolia/angular-editor,
• or the EditorContextHelper from the @magnolia/react-editor,

depending on which framework you are using, Angular or ReactJS. respectively. You can then call the following functions to get the status:

• inEditor()
• inEditorPreview()

Developer mode check (Angular)

In the Angular framework, the status of an SPA page being in the developer mode can be checked by calling the isDevMode() function, which is part of the @angular/core library.

Developer mode check (ReactJS)

To retrieve the status of the developer mode in ReactJS, make sure that you import {EditorContext} from the @magnolia/react-editor, and that the class of YourComponent extends the React.Component. 

After assigning static contextType = EditorContext you can call the following functions to get the status:

• this.context.isDevMode