Create a GUI-based fully featured Metanorma distribution

[strogonoff]

To simplify end-user experience (not everyone is even familiar with a terminal), we could bundle a cross-platform GUI app that provides a visual editor for AsciiDoc-based markup languages used in Metanorma and is capable of outputting deliverables.

I believe, now there exist the key components that make the most tricky aspects of this doable with reasonable amount of effort:

• Cross-platform app: Electron. Metanorma GUI could either work with a local Ruby runtime (that user would have to install), or query an online service for actual document processing (viable for paying customers who can be offered the required compute time). There are examples of both types of apps created with Electron.

• A visual editor with consistent behavior: Draft.js. This is not a typical WYSIWYG editor but rather a framework. It allows to build an editor with arbitrary output format and any controls with behavior needed, and provides abstractions for that. E.g., we could have a button to “insert bibliographic reference”, and so on. (Here’s an example of an editor created with Draft.js which outputs Markdown: http://www.roserobertson.me/markdown-draft-js/.)

Branded versions of the app can be bundled for different enterprise users of Metanorma, incorporating the appropriate customizations for editor controls and (if the app works locally) output deliverable formatting.

[strogonoff]

Concerns:

• Electron-based apps are known for their large size and low performance (relatively speaking), requiring users to basically download a Chrome runtime environment with each app. (That said, Atom is an editor built with Electron, and most find its performance acceptable.)

• There are no known examples of Draft.js-based editors that output AsciiDoc in the wild (much less Metanorma-specific formats), however from my experience the framework is a pleasure to use and is completely agnostic as to which blocks to manipulate and in which way to output them.

[ronaldtse]

@strogonoff this is a good idea (which we've all discussed to death), but with solid research here!

The best bet may be Electron. Technically we can compile Metanorma into JS via Opal (given that we abstract the XML and PDF printing dependencies).

[strogonoff]

Thank you @ronaldtse! I did not imagine this idea would be new at all😅 just had to document one way of achieving this that occurred to me.

(Until today I did’t make the connection that Draft.js could help us make it a fully self-contained GUI, even though I’ve used Draft.js on another project not long ago)

References:

• Draft.js data conversion: https://draftjs.org/docs/api-reference-data-conversion.html
• Draft.js ContentState object: https://draftjs.org/docs/api-reference-content-state

[ronaldtse]

@strogonoff this is certainly not a new idea, and we've discussed this issue for the longest time (since this is what people really want, a UI). But we haven't made efforts towards it yet for the obvious reasons...

[ronaldtse]

It seems to me that with Electron we can also utilize Draft.js?

[strogonoff]

Note that Draft.js is React-based, though I have successfully bundled it into an Angular app before (and created a lib for that, though this one specifically works with HTML format).

[strogonoff]

@ronaldtse absolutely, can’t see why we wouldn’t be able to use it. Even if we don’t build the whole app in React, we can still use it in the editor UI.

[strogonoff]

I’ll need to research some more what kinds of controls we might need for writing Metanorma’s Ascii{flavor} formats. Looks like one of the trickiest aspects might be wiring up editor controls, such as the aforementioned bibliographic reference insertion, in a way that ensures the result is compliant with the Ascii{flavor} format requirements.

[strogonoff]

Here’s an interesting example, possibly source of inspiration or implementation avenue as alternative to DraftJS & Electron.

https://html-notepad.com/

It’s a cross-platform GUI app that allows to visually author HTML. (The author plans to add more markup languages as output, such as Markdown.) It opens folders, treating them as projects.

It doesn’t use Electron, but some other cross-platform GUI framework. It doesn’t look extremely fancy and fully native on macOS, but it feels much faster than an average Electron-based app (not that speed is a number one concern though, honestly).

I imagine a GUI for the Metanorma app in a somewhat similar way.