Motivation

Rich text editor provides a link dialog where the user can define a link to any external resource. This is however not very suitable for creating links to internal Magnolia resources as the user would need to be aware of implementation details of how pages are referenced in Magnolia.

Goals

To solve the problem of hiding details of how pages are referenced we introduced a new button to the rich text editor which opens the Pages App as a dialog window and the user can choose a page from the list. Workflow will be similar with dealing with external links where rich text editor allows to add, modify and remove links. Link to a Magnolia page will be shown with same style as external link and in general it will be in format: "/some-page".

Stories

Adding link

1. User would click add Magnolia link
2. Pages App will be shown embedded in a dialog
3. User selects a page from the dialog
4. Rich text editor now has link to external resource

Modifying link

1. User opens up context menu of selected link
2. Context menu offers option to modify or remove the link
3. On modifying Pages App will be shown to allow the selection of a link source

Removing link

1. User opens up context menu of selected link
2. Context menu offers option to modify or remove the link
3. On removing link the link nature is removed leaving the link as plain text

Implementation

• Creating a link will be handled on server side. Client side will make a request to create link and the server will respond to that with a link.
• Links are stored in HTML formatted rich text as they were stored in Magnolia 4. Client side plugin is necessary to render the appearance.

Dialogs

Basic use case

Editing existing link

Choose the link

External link choosing (as a reference)