Page History

The SPA front-end helper JavaScript libraries provide APIs that let you know through which you can stay informed about the status of the current renderer editor context of a an SPA page, that is whether it . 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 editor, Pages preview or in a production setup. This is useful if you need to hit different URLs for content, do rendering or other things conditionally. The APIs provide context status functions for Angular and React.  Angularstatus information is retrievable in both frameworks integrating SPA development in Magnolia – Angular and ReactJS.

Editor/preview check (Angular and ReactJS)

To find out about the editor/preview status, inject the RendererContextServicewhether 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. respectivelyrenderer. You can then call the following functions to get the status:

RendererContextService#inEditor() # Tell SPA is in editor or not

inEditorPreview() # Tell SPA is in editor and in preview mode

• 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 To get the current status of the dev mode, call the isDevMode() function that , which is part of the @angular/core library. If the dev mode is enabled, you can see the comment when inspect the DOM element when running in node dev server.

React

Developer mode check (ReactJS)

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

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

...

• this.context.

...

• isDevMode

...