Everything past rows and columns is a plugin, and a page
can write its own, in a <script> after
the editor. This page has two, shown in full below; see
docs/plugins.md for the
whole contract.
A container: the callout. A Bootstrap
alert whose body is a region like any other. Its
Callout button in the toolbar adds one; it moves,
deletes, nests, takes an id and classes, and round-trips
through getHtml, in some thirty lines.
A drawer tool with a modal: the animation.
The tool in the drawer of a row,
a column, a text, a container or an element opens a modal, and what you choose there is saved
on the node as a data-animation attribute, which
getPlainHtml keeps: only data-ge-*
attributes are the editor’s to take off. A node with
an animation has its tool highlighted.
Open tinyMCE on a text and set an animation on that same
text, from its drawer, while you are typing: the attribute
is kept when the editor closes, although tinyMCE puts back
the attributes it found when it opened. The plugin does
nothing special for that - a plain setAttribute() -
and nothing special for the quote either, which is an
element: a block beside the texts, never inside one.
Open as a published page puts the plain html in a page of its own, with a few lines that read the attribute and animate each node as it scrolls into view.
It came with its animation already set, in the markup the editor was started on.
Ordinary text, edited by tinyMCE.
An element, beside the texts: give it an animation.
More text, after the element.
Containers take the tool too.
A callout, from the plugin written on this page. Double click its heading to rewrite it.
A container plugin: create builds one, and
mark and unmark put the editing
furniture on and take it off again. The shipped
card plugin is barely longer.
A feature plugin: drawerTools puts a tool in
every drawer that has a gear, and the kind says whose drawer
it is.