search

mgreau / when-websocket-met-asciidoctor

Real-time collaborative editor for AsciiDoc file (based on Asciidoctor.js, AsciidoctorJ and Java EE 7 WebSocket)
https://www.youtube.com/watch?v=9Smp9XlkOdk
MIT License
48 stars 8 forks source link

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

Closed mgreau closed 10 years ago

mgreau commented 10 years ago

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 commented 10 years ago

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 (https://github.com/opal/opal/issues/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 commented 10 years ago

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 commented 10 years ago

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

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

mgreau commented 10 years ago

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

ggrossetie commented 10 years ago

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 ? :cry:

mgreau commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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