Studio Developer Manual / Version 2406.0
Table Of ContentsThis section will provide a rough glance at the architecture of CKEditor 5 with focus on the “data layer”, which is important to understand for CoreMedia Rich Text 1.0 integration. You will find much more details on the architecture at Introduction to CKEditor 5 architecture. And within that, you will find a detailed documentation of the various layers in CKEditor 5 at Editing engine.
CKEditor 5 Editing Layers
Figure 10.1, “CKEditor 5 Editing Layers” shows how different layers are involved dealing with CoreMedia Rich Text 1.0. Starting at reading CoreMedia Rich Text 1.0 from server, the processing steps are as follows:
Initial Data on Server:
As you see, CoreMedia Rich Text 1.0 provides only a small subset of what HTML offers. Element
<h1>is unknown, and instead represented as<p class="p--heading-1">. Anchor attributehrefis also unknown and instead CoreMedia Rich Text 1.0 relies on attributes as defined by XLink schema such asxlink:href. The value ofxlink:hrefrefers to a content with ID 42 here.REST/read:
Studio REST backend transforms content-URIs to a shortened format:
content/42instead ofcoremedia:///cap/content/42.data-converter/toView:
The
RichTextDataProcessorapplies the following transformations before the data enter the world of CKEditor 5 (starting with the data view):<p class="p--heading-1">is transformed to<h1>. This follows the design principle as described in Section 10.1.2, “Design Principle: HTML First”.The link
content/42received from Studio server is rewritten tocontent:42and set ashrefof the anchor rather than the corresponding XLink attribute. This eases CKEditor 5 plugins to accept the reference as normal URL with a custom link schemecontent:and reduces the efforts to hook deeply into corresponding plugins.
upcast:
This is CKEditor 5 terminology: As the model layer takes the lead, CKEditor 5 leverages the incoming data view to its model representation. The model knows about cursor positions, selection ranges and represents inline styles as attributed texts rather than elements around text (shown in graph with square brackets).
editingDowncast:
Now CKEditor 5 prepares the editing view for the editors. Classes are applied to highlight selections, possibly empty block elements get some so called “filler” elements, which ensure, that the cursor can be placed inside that element, and more.
For Studio integration, for example, BLOB references are resolved here, so that some image or placeholder symbol is shown.
The way back from edited text to the date stored on server is similar.
For data-processing it is important to respect: Mappings have to be
bijective: As <p class="p--heading-1">
mapped to <h1> in toView mapping, it now needs
to be transformed back from <h1> to
<p class="p--heading-1">. This also means, that when
creating the data view representation, you must add enough information,
so that, when returning from editing view, the original state can be
restored.
Relevant Change Detection
As you may guess from the previous transformation process, data set at CKEditor 5 may contain subtle differences when returning from processing through the various layers. Examples are ignorable whitespace possibly stripped or class-attribute values, which got re-ordered.
Such semantically equal data must not trigger, for example, auto-checkout in CoreMedia Studio, as it would trigger content items to be checked out by the current editor. Without being aware of this, an editor would check out a content item just by opening it in CoreMedia Studio. If this succeeds, other editors will be blocked from editing — if it fails due to missing permissions the corresponding editor would receive an alert message instead.
For the integration of CKEditor 5 into CoreMedia Studio this is prevented
by validating the model state of CKEditor 5 (see
Document and corresponding property
version). Only if this validation signals a change
from previously set data, auto-checkout is triggered.
For details take a look at CoreMedia CKEditor 5 Plugins regarding the Autosave feature. Understanding these may be important if you want to integrate CKEditor 5 into custom components. Also, the Data Facade Plugin provides support to deal with this aspect.
