XML Prague
@ University of Economics, Prague
2024-06-07

Petal

Roundtrip LwDITA
Document Editing

Alexandra von Criegern, Younes Bahloul, and Adam Retter

tech@evolvedbinary.com
 

github.com/evolvedbinary

Alexandra
von Criegern

Younes
Bahloul

  • Senior Engineer @Evolved Binary

  • Web Developer (Since 2008)

  • XML & XQuery (Since 2015)

  • Engineer @Evolved Binary

  • Masters in Computer Vision

  • Developer

    • React / TypeScript / Node.js

    • Java

  • Contributor to eXist-db since 2022

alexandra@evolvedbinary.com
@plutonik-a
younes@evolvedbinary.com
@marmoure

Our Motivation

Documentation

Documentation

< ??? />

DITA

Darwin Information Typing Architecture

OASIS Standard

is expressive

too complex

has over 600 elements

DITA

Lightweight DITA

(LwDITA)

LwDITA

Lightweight DITA

OASIS Standard

is expressive

simple

has 50 elements

LwDITA

XDITA 

HDITA

MDITA 

JDITA 

Authoring Formats

<xml />

<html5 />

# Markdown

{ JSON }

JDITA

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
<topic id="example">
  <title>Title</title>
  <body>
    <section>
      <p>A paragraph.</p>
    </section>
  </body>
</topic>
  {
    "nodeName": "document",
    "children": [
      {
        "nodeName": "topic",
        "attributes": {
          "id": "example"
        },
        "children": [
          {
            "nodeName": "title",
            "attributes": {}
          }
          ...
        ]
      }
    ]
  }

Title

A paragraph

...is a JSON Representation of an LwDITA document

...makes it easy to use LwDITA with JavaScript

We can use JDITA to create an in-browser editor for LwDITA

Documentation

< XDITA />

  • Toolkit for building rich text WYSIWYG editors

  • Can be extended with custom schema

  • Written in TypeScript

  • https://prosemirror.net

ProseMirror

What is ProseMirror?

ProseMirror Node

{ JavaScript Object}

ProseMirror Schema

{ JavaScript Object}

Blocks

Marks

{
    "type": "doc",
    "attrs": {},
    "content": [
      {
        "type": "topic",
        "attrs": {
          "id": "example",
          "parent": "doc"
        },
        "content": [
          {
            "type": "title",
            "attrs": {
              "parent": "topic"
            },
            ...
<p>, <title>,...

<i>, <b>, <sup>,...

  • Proven tool

  • Customisable

  • Open Source

  • Supportive community

  • Speeds up our development

Why ProseMirror?

ProseMirror

Petal, Our Editor

Petal

lwdita library

lwdita library

prosemirror-lwdita

prosemirror-lwdita

prosemirror-lwdita

prosemirror-lwdita

prosemirror-lwdita

lwdita-xdita

lwdita-ast

Petal

lwdita library

lwdita library

prosemirror-jdita

prosemirror-jdita

prosemirror-lwdita

Petal

lwdita library

lwdita library

prosemirror-lwdita

prosemirror-lwdita

Petal

lwdita Library

Parse

Serialize

Generate

Read

XML

JSON

Document Node

(AST object)

The Round Trip

  • Open an XDITA document

  • See an HTML rendered representation of the document

  • Edit the text

  • Insert new elements

  • Transform content

  • Save the updated XDITA document

Petal Allows Users To

Our Challenges

  • TypeScript!

  • Legacy code

  • Outdated TypeScript, libraries & dependencies

  • Deprecated TypeScript functions and concepts

    • e.g. Declaration Merging

Our Challenges

  • Learn TypeScript

  • Extract lwdita library into 2 components

  • Update libraries & dependencies

  • Replace deprecated TypeScript functions

  • Implemented roundtrip of upload and download of XDITA

Our Solutions

  • Two lwdita library packages

  • TSDoc Documentation

  • Increased test coverage

  • Published lwdita libraries as npm packages

  • Implemented a roundtrip from uploading XDITA, editing it, and downloading the updated document back

Our Status

  • GitHub integration

  • Code editor view to edit the XDITA sourcefile

  • Collaborative editing

Our Roadmap

Demo Time

Questions?

Thank You