when-websocket-met-asciidoctor
when-websocket-met-asciidoctor copied to clipboard
Real-time collaborative editor for AsciiDoc file (based on Asciidoctor.js, AsciidoctorJ and Java EE 7 WebSocket)
= Real-time collaborative editor for AsciiDoc Maxime Greau https://github.com/mgreau[@mgreau] v2.0, Jan 28, 2014 :imagesdir: https://raw.github.com/mgreau/when-websocket-met-asciidoctor/master/doc/img/ :toc: :toclevels: 3 :idseparator: - :online-demo: http://wildfly-mgreau.rhcloud.com/ad-editor :milestones: https://github.com/mgreau/when-websocket-met-asciidoctor/issues/milestones :issues: https://github.com/mgreau/when-websocket-met-asciidoctor/issues :asciidoctor-url: http://asciidoctor.org :asciidoctorj-url: https://github.com/asciidoctor/asciidoctorj :asciidoctorjs-url: https://github.com/asciidoctor/asciidoctor.js :asciidoctor-backends-url: https://github.com/asciidoctor/asciidoctor-backends :wildfly-url: http://download.jboss.org/wildfly/8.0.0.Final/wildfly-8.0.0.Final.zip :demo-url: https://raw.github.com/mgreau/when-websocket-met-asciidoctor/master/doc/demo/
This project gives you the possibility to work on the same AsciiDoc file with a team and see the rendering in realtime.
It's based on the {asciidoctor-url}[Asciidoctor project] thanks to :
- the Java API provided by {asciidoctorj-url}[AsciidoctorJ]
- the Javascript libraries provided by {asciidoctorjs-url}[Asciidoctor.js]
== How to test it ?
. Install it quickly (0.1.0-alpha3)
curl https://raw.github.com/mgreau/when-websocket-met-asciidoctor/master/install.sh | bash
. or try it online at {online-demo} (running on OpenShift). . or clone the project and follow the instructions below
[[collaborative-editor]] .Demo Collaborative Editor image::../demo/collaborative-editor.gif[Collaborative-editor, 600, link="{demo-url}collaborative-editor.gif"]
If you have an existing asciidoc file, you can drag and drop this file to the editor :
[[drag-drop]] .Drag and drop feature image::ad-editor-dragdrop.png[Drag and drop feature, 600, link="{demo-url}ad-editor-dragdrop.png"]
You can also work on an offline mode with just your browser :
[[offline]] .Offline mode feature image::ad-editor-offline.png[Offline mode feature, 600, link="{imagesdir}ad-editor-offline.png"]
== 0.1.0-alpha4-SNAPSHOT (dev in progress)
- +dzSlides backend+ : you can work on your slides for a presentation !
== 0.1.0-alpha3 - new features
- +Full offline mode+ : if you are not connected to the server by WebScoket protocol, then the rendering view is still working in real-time with the Javascript project asciidoctor.js
- +Drag and Drop+ : you can drag a AsciiDoc file from your laptop and drop it into the editor and the content of the file will be loaded into the editor
== 0.1.0-alpha2 new features
- Create a new space OR join others author with a spaceID
- Browser storage with HTML5 IndexedDB for backup (save and load AsciiDoc source)
- Fullscreen mode for HTML5 preview
- Improved UI Design
- HTML5 preview in realtime : ** each time the AsciiDoc source is changed if you have clicked on +Render On Change+ ** each time you press "Alt+R" if you have clicked on +Render On Alt+R+ button
- Patch feature : ** if an other author send a version, you can click on +Compute Diff+ button to see differences between your adoc file and the last adoc file ** if the patch seems ok, click on +Apply Patch+ and you adoc source will be up to date
- Load the last AsciiDoc source send by an other author
[diff feature] .Compute diff feature image::ad-editor-diff.png[Diff feature example, 600]
[patch feature] .patch feature image::ad-editor-patch.png[Patch feature example, 600]
== Changelog
You can read all changes between each release in the link:CHANGELOG.adoc[changelog file].
== Roadmap
A lot of cool features are planned :) You can read all {issues}[open and closed issues] and {milestones}[milestones]
== [DEV MODE] Install on your laptop
[IMPORTANT] .Prerequisites
- JDK 7
- Apache Maven 3.1 ====
. Clone or download this github project (+$APP_HOME+)
. Installing the Java EE 7 Compliance App server
.. Download {wildfly-url}[WildFly 8.0.0-Final] (+$JBOSS_HOME+)
.. Then you need to deploy the link:module/README.adoc[Asciidoctor module] into your WildFly app server
.. For the slides features, you have to install {asciidoctor-backends-url}[asciidoctor-backends] into +$JBOSS_HOME/standalone/datas+
. Installing Bower .. Bower depends on Node and npm. It's installed globally using npm:
npm install -g bower
.. Installing the bower dependencies needed by this app (into +$APP_HOME/src/main/webapp/libs+)
cd $APP_HOME bower install
. Build the WAR and test it into WildFly AS with maven/arquillian :
.. if the environement variable +$JBOSS_HOME+ is set :
mvn clean package -Pwildfly-managed-arquillian
.. if you haven't set the +$JBOSS_HOME+ env variable :
mvn clean package -Pwildfly-managed-arquillian -DserverRoot=<path_to_the_server>
. Deploy the app automatically with maven :
.. if the app server is started
mvn wildfly:deploy -Dmaven.test.skip=true
.. if the app server isn't started
mvn wildfly:run -Dmaven.test.skip=true -Djboss-as.home=<path_to_the_server>
. Launch your browser and enjoy :)
- http://localhost:8080/ad-editor
== Technology used
- Asciidoctor project ** AsciidoctorJ 0.1.4 ** asciidocor.js
- Java EE 7 ** CDI 1.1 ** WebSocket 1.0 ** JSON-P 1.0 ** EJB 3.2
- Web Client ** AngularJS 1.2.11 ** Ace Editor ** Bootstrap 3.0
- Tests ** JUnit 4.8 ** Arquillian 1.1.2
- Java EE 7 Compliance App server