Editor context of an SPA page

The SPA front-end helper 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 useful if you need to hit different URLs for content, do rendering or other things conditionally. The status information is retrievable in all frameworks integrating SPA development in Magnolia: React, Angular, and Vue.

Magnolia Context object

Version 1.3.0 of the SPA front-end helper libraries introduces the magnoliaContext object, which standardizes usage of the helper libraries.

You can use not only absolute but also relative paths as requestUrl to build the Magnolia Context object.

Editor/preview check

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

  • EditorContextService from the @magnolia/angular-editor,

  • EditorContextHelper from the @magnolia/react-editor,

  • EditorContextHelper from the @magnolia/vue-editor,

depending on which framework you are using, Angular, ReactJS or Vue. respectively.

global.mgnlInPageEditor is deprecated and not necessary.

Get the context object by calling:

const magnoliaContext = EditorContextHelper.getMagnoliaContext(fullURL, pageRootPath, languages);

You can then use the following properties to get the status:

  • magnoliaContext.isMagnolia

  • magnoliaContext.isMagnoliaEdit

  • magnoliaContext.isMagnoliaPreview

In the EditorContextHelper/EditorContextService context, the inEditor() functions will return false for Server-Side Rendering (SSR).

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

Related topics

Some topics below may take you to a different part of the docs site and away from the current headless section.

Feedback

Headless

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Headless docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules