when-websocket-met-asciidoctor icon indicating copy to clipboard operation
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