Page History
...
The SPA front-end helper libraries provide APIs that can inform you through which you can stay informed about the status of the current renderer editor context of a an SPA page. The status An can be that your SPA page can be is running in:
- A production environmentdeveloper mode.
- The page editor of the Pages editorapp.
- Page The preview mode of the page editor.
Being aware of the current renderer editor context can be 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 RendererContextService
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-renderer. You can then call the following functions to get the status:
Code Block |
---|
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
...