Uploaded image for project: 'Suggestion Box'
  1. Suggestion Box
  2. SUGGEST-175

Expose the Magnolia pages Editor/Form Framework as JavaScript library

    XMLWordPrintable

    Details

      Description

      We're almost exclusively using the headless approach to integrate the Frontend Code into Magnolia (we're using react). However as correctly stated in the recent Magnolia Blog Post (https://blog.magnolia-cms.com/author/jan-schulte/what-is-a-headless-cms.html) one hit's a few limitations when it comes to the editing experience:

      • display of content when editing can only be schematic
      • preview must be customized
      • the structure of the JCR content often does not match the one expected by the Frontend

      The issue with the preview can be quickly dealt with by overriding theĀ info.magnolia.pages.app.editor.pagebar.nativepagepreviewlink.NativePagePreviewLinkExtensionDefinition.

      However, presenting the user with a meaningful Editor UI in the Pages App is still a challenge when using this approach. One problem is that the Magnolia Editor uses HTML comments to annotate rendered markup, which is later on analyzed and replaced with editor controls.

      One idea to solve this would be to expose the editor UI as JavaScript API which can then be used by the actual Frontend to present Editor controls.

      I imagine something like this:

      let pagePath = '/de/de/home';
      
      let areaContainer = mgnlEditor.createAreaBox(pagePath, 'header');
      lat componentElement = mgnlEditor.createComponentBox(pagePath, 'header', 'some-component-id);
      

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              martyglaubitz Marty Glaubitz
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Date of First Response: