Name : Anoop Nayak

Email : anoopknayak@gmail.com

Proposal Title : Live Syntax Highlighting for Apache Bloodhound Wiki

Apache Project Name : Bloodhound

Mentor Name : Joe Dreimann, Branko Čibej(Brane)

Link To Project Idea JIRA : Live Syntax Highlighting

Proposal Content Details :

1. Abstract

Apache Bloodhound is a web based project management and bug-tracking system which is built on top of the most famous open source project management system Trac. The most striking feature of Apache Bloodhound is the ability to host multiple projects at once. The sleek user interface which is again built with the famous front-end framework Bootstrap makes it intuitive and easy for the new users to use it.

The project was initially started with the aim to resolve three long-standing requests with Trac:

• Multiple Projects
• Ease of Installation
• Ease of use

Bloodhound uses the power of python for almost all of it's components. The addition of python library Whoosh made it possible to provide full text search and search navigation by facets

The goal is to provide a major addition to the front end by adding Live Syntax Highlighting to the editing page in the Bloodhound Wiki. The live syntax highlighting means that the response immediately along with the text similar to the implementation of iA Writer. The solution is to be done at the client side as opposed to the current system which involves sending content to the server for formatting it in preview window.

2. Detailed Description

2.1 Wiki Editor in Apache Bloodhound

Currently Apache Bloodhound uses the wiki markup language for its editing purposes and has 2 views. The editor view where in we see on the wiki editor and the editor+preview mode which is obtained by clicking the checkbox on the top right of the editor(Edit side-by-side). The screenshots are as shown below.

2.2 Current Problem

Bloodhound currently uses previews to show users what their wiki text will look like after submitting. Basic styling that allows them to highlight important elements, show hierarchies and differentiate something from the norm are not visible at all in the editor.

This encourages much back-and-forth for users wanting to get the styling just right, without adding any real value. The idea here is to not overload the interface with WYSIWYG control elements and encouraging users to fine tune every element of their text design (and thereby making it more difficult to show a coherent, immediately recognisable style throughout the application).

And as shown in the screenshots below we can see that we either have a side by side preview or no preview at all. We can see that even though the second screen is more intuitive the response is again slow after a change as the rendering is done at the server side and sent back to the client with ajax. It thus involves more network traffic and also more processing power.

2.3 Proposed Solution

The goal here is to implement live syntax highlighting which the Bloodhound ships already in the edit mode itself rather than the user waiting for the response to be seen after the response from server.

The real-time syntax highlighting can be done using javascript library CodeMirror. It complies to the Apache License standards as it has a MIT-style license. According to the docs it is a easier to create CodeMirror Modes which can effectively used as a syntax highlighter and a live previewer. The strings can be matched to a regular expression and then processed.

Since CodeMirror already has the lex engine inbuilt the only work is to call its APIs as given here. This could thus be better maintained too incase of replacing the existing CodeMirror library with a new version.

3. Timeline