Magnolia React Editor

import React from 'react';
import ReactDOM from 'react-dom';
import { EditablePage, EditorContextHelper } from '@magnolia/react-editor';
import Home from './pages/Home';

const config = {
  componentMappings: {
    'spa:pages/Home': Home,
  },
};

class App extends React.Component {
  state = {};

  async componentDidMount() {
    let templateAnnotations;
    const pageRes = await fetch('http://localhost:8080/.rest/pages/spa-home');
    const page = await pageRes.json();

    if (EditorContextHelper.inIframe()) {
      const templateAnnotationsRes = await fetch(
        'http://localhost:8080/.rest/template-annotations/v1/spa-home'
      );

      templateAnnotations = await templateAnnotationsRes.json();
    }


    this.setState({ page, templateAnnotations });
  }

  render() {
    const { page, templateAnnotations } = this.state;

    return (
      <>
        {page && config && <EditablePage content={page} config={config} templateAnnotations={templateAnnotations} />}
      </>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import { EditorContextHelper } from '@magnolia/react-editor';

const requestUrl = 'https://foo.bar/travel/?mgnlPreview=false&mgnlChannel=desktop';
const spaRootNodePath = '/home';
const languages = ['en', 'de'];
const magnoliaContext = EditorContextHelper.getMagnoliaContext(requestUrl, spaRootNodePath, languages);

/*
magnoliaContext = {
  isMagnolia: true,
  isMagnoliaEdit: true,
  isMagnoliaPreview: false,
  nodePath: /home/travel,
  currentLanguage: 'en',
  searchParams: { mgnlChannel: 'desktop', mgnlPreview: 'false', variants: 'all' },
  search: '?mgnlPreview=false&mgnlChannel=desktop&variants=all&lang=en'
}
*/

// Fetch page content
const pagesRes = await fetch(PAGES_API + magnoliaContext.nodePath + magnoliaContext.search);

// Fetch template annotations
if (magnoliaContext.isMagnolia) {
  const templateAnnotationsRes = await fetch(TEMPLATE_ANNOTATIONS_API + magnoliaContext.nodePath);
}