Page History
HTML Wrap | ||||
---|---|---|---|---|
| ||||
Related topics: |
The SPA front-end helper JavaScript libraries provide APIs 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 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 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. respectivelyrenderer. 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
...