[HTML5 preview] Use asciidoctor.js when user chooses Offline mode

[mgreau]

When the writer choose to work on the offline mode, he also wants to see the output rendered in real-time.

It would be interesting to load asciidoctor.js file when the user works in offline mode so that the asciidoc source is rendered as HTML5.

[mgreau]

This application uses AngularJS.
Asciidoctorjs is based on Opal.
But there is an incompatibility between this 2 projects and it's clear that this will not be fixed (opal/opal#400)

One workaround (for Chrome users) is to use the possibility to communicate between the AsciiDoctor Chrome extension and this application with the feature "Message passing" http://developer.chrome.com/extensions/messaging.html

@Mogztter will try this feature "Message passing" between an app and the AsciiDoctor Chrome extension.

[lordofthejars]

I Don't know what to suggest you, change AngularJs could be an option but it is the worst one because you will throw away a lot of work.

[ggrossetie]

@mgreau Yep, I will have a look this weekend.

As an alternative, the next version of the extension will have a "Render selection" feature asciidoctor/asciidoctor-browser-extension#26
Users will be able to render the selection in a new tab... not ideal but it's a start!

[mgreau]

@lordofthejars indeed it is the worst one...for me :)
@Mogztter it's a cool feature !

[ggrossetie]

Sending messages from web pages is working, I can receive a message with an AsciiDoc content from an application... But the message is received in the background script. That mean that I can't render directly the AsciiDoc content in HTML. I must open a new tab or window to load content scripts (Opal.js, Asciidoctor.js...) to be able to render the AsciiDoc content, then retrieve the generated HTML, close the tab or window and send a message back with the result. A bit complicated and not user friendly.

Maybe you should look at sandbox environment to isolate Opal.js and Asciidoctor.js from Angular.js ? iframe ? 😢

[mgreau]

Ok thanks for your test.
You just make me think that finally I don't need the Chrome app, indeed the "HTML5 preview" is already an iframe so I should have to inject the correct DOM in order to let the iframe do the job with asciidoctor.js and opal.js
I will test it tonight, thanks :)

[mgreau]

Good news this morning, @anthonny released an angularjs directive to play with Asciidoctor.
Very good job !

https://github.com/anthonny/angular-asciidoc-directive
http://anthonny.github.io/ascii-demo/

This is perfect for the offline mode (and maybe for online mode too).

[mgreau]

I close this issue for the 0.1-alpha3 release.
I've created an other issue #28 in order to include the directive in an other release