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
- User would click add Magnolia link
- Pages App will be shown embedded in a dialog
- User selects a page from the dialog
- Rich text editor now has link to external resource
Modifying link
- User opens up context menu of selected link
- Context menu offers option to modify or remove the link
- On modifying Pages App will be shown to allow the selection of a link source
Removing link
- User opens up context menu of selected link
- Context menu offers option to modify or remove the link
- 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.
- Functionality is implemented as a plugin for CKEditor. Will investigate possibility to create plugins purely on server side.
- This would make it possible to allow modifying plugins during runtime.
Dialogs
Basic use case
Editing existing link
Choose the link
External link choosing (as a reference)