![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Charaf Eddine Cheraa
charaf@evolvedbinary.com
Declarative Amsterdam @ Online
2020-10-09
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/4584338/gmail-logo.png)
@ccheraa
Petal
An in-browser editor
for LwDITA
Charaf Eddine Cheraa
-
Engineer @Evolved Binary
-
Web Developer (since 2009)
-
React / Angular / Vue
-
PHP / NodeJS / GraphQL
-
SQL / Mongo
-
-
Develops also using (since 2007)
-
Flutter / React Native / Cordova
-
Delphi / Visual Studio
-
Game Maker Studio / Unity 3D
-
-
Core Contributor to FusionStudio
-
Loves programming and spoken languages
-
Reach me at: charaf@evolvedbinary.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1444615/images/7778792/slack.jpg)
In-browser editors
-
High availablility of HTML5 Editors
-
Options for Markdown and reStructuredText
-
Lack of editors
-
Existing commercial and/or enterprise editors are very comprehensive and complex
on the other hand, for XML:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Why?
-
The complexity of offering a full XML editor
-
A decrease in XML processing support within browsers
-
A perceived reduction in what constitutes an acceptable level of re-use and presentation for technical documentation.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Our suggestion:
-
For the purposes of authoring and publishing the documentation for FusionDB Server, we need a markup format that's good (as XML), but not complex (as XML).
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
DITA
DITA is an XML data model for authoring and publishing.
It is an open standard that is defined and maintained by the OASIS DITA Technical Committee.
But it's too complex for our needs.
Light Weight DITA
LwDITA is a simplified version of DITA. It has a smaller element and attribute set, strictier content models, and a reduced feature set. LwDITA also defines mappings between XML, HTML5, and Markdown, enabling authoring, collaboration, and publishing across different markup languages. (more info)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
LwDITA representation forms
-
XDITA (XML)
-
HDITA (HTML)
-
MDITA (Markdown)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
And we want to add a new one:
-
JDITA (JSON)
JDITA
JDITA is a JSON representation of an LwDITA document.
Its main purpose is to make it easy to process and generate LwDITA content using modern web technologies.
Thus providing LwDITA capabilities to a wider range of users.
With the help of JDITA, we can make an in-browser editor for LwDITA.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Petal
Is a WYSIWYG editor aiming to make use of JDITA and Prosemirror to create and edit LwDITA documents on the web. This project is divided into 2 packages:
-
jdita:
-
Parses XDITA documents and produces JDITA Documents, and vise-versa.
-
-
prosemirror-jdita
-
Creates Prosemirror documents from JDITA and sets up an Editor to edit the contents on a web page.
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Package 1:
jdita
How does it work?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Parse
Serialize
Generate
Read
XML
JSON
Javascript Objects
Package 2:
prosemirror-jdita
-
Generates a schema containing the definition for all LwDITA elements, the relation between them, and how to properly display them on a web page.
-
Uses a JDITA document to create a Prosemirror document
-
Defines different commands for the editor, mainly for inserting, editing, and transforming content.
-
Generates a JDITA document from the content of the editor (Prosemirror document).
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Petal, The editor
Petal allows the user to:
-
See a readable HTML representation of the document
-
Edit the text
-
Insert new elements
-
Transform content
-
Edit attributes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1444615/images/7778527/Petal.png)
Thank you
-
-
JDita repo: https://github.com/evolvedbinary/jdita
-
Prosemirror JDita repo: https://github.com/evolvedbinary/prosemirror-jdita
-
Charaf Eddine Cheraa charaf@evolvedbinary.com
-
LwDITA specifications http://docs.oasis-open.org/dita/LwDITA/v1.0/cnprd02/LwDITA-v1.0-cnprd02.html
More...
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/119594/images/1461650/Screen_Shot_2015-06-05_at_13.12.39.png)
Petal - An in-browser editor for LwDITA
By Adam Retter
Petal - An in-browser editor for LwDITA
Presentation given for Declarative Amsterdam - 9 October 2020 - Online
- 1,983