Charaf Eddine Cheraa

charaf@evolvedbinary.com
 

Declarative Amsterdam @ Online
2020-10-09

 

@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

In-browser editors

  • High availablility of HTML5 Editors

  • Options for Markdown and reStructuredText

    • on the other hand, for XML:

  • Lack of editors

  • Existing commercial and/or enterprise editors are very comprehensive and complex

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.

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).

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)

LwDITA representation forms

  • XDITA (XML)

  • HDITA (HTML)

  • MDITA (Markdown)


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.

​

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.

Package 1:

    jdita

How does it work?

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).

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

Demo

Thank you