A basic MediaWiki editor prototype

Description: In this deliverable I have developed a prototype of a basic Mediawiki syntax editor. I have taken a subset of MediaWiki Markup features and have used in this demo. I have created an editor that enables the users markup their text with these features. I have also included an experimental preview functionality. This is a basic feature and requires more polishing.

Demo :This is what my prototype looks like

This is the function to get the Selected text, it's suffix and prefix text. Currently the text extraction is done for MSIE(older IE broswers) and Mozilla based newer browsers. This is done to make sure the code is cross-browser compatible.

function getSelection() {
    //Select the DOM element - wikiText
    var textArea = document.getElementById('wikiText');

    // IE?
    if (document.selection) {
        //console.log("IE");

        /**
         * MSIE docs referred to make things work in IE.
         * createTextRange - //http://msdn.microsoft.com/en-us/library/ms536401(v=vs.85).aspx
         * moveToBookMark - //http://msdn.microsoft.com/en-us/library/ms536628(v=vs.85).aspx
         * setEndPoint - http://msdn.microsoft.com/en-us/library/ms536745(v=vs.85).aspx
         * collapse - http://msdn.microsoft.com/en-us/library/ff975439(v=vs.85).aspx
         */

        var selectionBookmark = document.selection.createRange().getBookmark();
        var sel = textArea.createTextRange();
        sel.moveToBookmark(selectionBookmark);

        var sleft = textArea.createTextRange();
        sleft.collapse(true);
        sleft.setEndPoint("EndToStart", sel);

        textArea.selectionStart = sleft.text.length;
        textArea.selectionEnd = sleft.text.length + sel.text.length;
        textArea.selectedText = sel.text;

        var selectedTextPrefix = textArea.value.substring(0, textArea.selectionStart);
        var selection = sel.text;
        var selectedTextSuffix = textArea.value.substring(textArea.selectionEnd, textArea.textLength);
    }
    // Mozilla?
    else if (typeof (textArea.selectionStart) != "undefined") {
        /** 
         * Things are pretty straight forward in Mozilla based browsers & IE > 10.
         * We can get the selectionStart & selectionEnd character position directly.
         * Then compute the prefix and suffix using substr method.
         */

        console.log("Mozilla");
        var selectedTextPrefix = textArea.value.substr(0, textArea.selectionStart);
        var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
        var selectedTextSuffix = textArea.value.substr(textArea.selectionEnd);
    }


    var obj = {};
    obj.selection = selection;
    obj.selectedTextPrefix = selectedTextPrefix;
    obj.selectedTextSuffix = selectedTextSuffix;

    return obj;


}

function wikify(wikiPrefix, wikiSuffix) {
    //Select the DOM element - wikiText
    var textArea = document.getElementById('wikiText');

    obj = getSelection();

    var selection = obj.selection;
    var selectedTextPrefix = obj.selectedTextPrefix;
    var selectedTextSuffix = obj.selectedTextSuffix;

    if (!selection && wikiPrefix === '[') {
        var title = prompt("Link Title", "Enter Link title");
        var link = prompt("Link", "Enter link startng with http:// or https://");
        selection = link + " " + title;
    }
    //Now Add the wrap the selected text between the wiki stuff, and then wrap the 
    //selected text between actual selected text's prefix and suffix.
    //Replace the textArea contents with the result.
    textArea.value = selectedTextPrefix + wikiPrefix + selection + wikiSuffix + selectedTextSuffix;
}

This is a JS function to display preview. I will probably get rid of this when preview html can be pulled from the server side.

function displayParsedContent() {
    // Find html elements.
    var textArea = document.getElementById('wikiText');
    var div = document.getElementById('parsedContent');
    var text = textArea.value;
    var headingMaxLevel = 6;

    // Basic MediaWiki Syntax.

   // Replace newlines with <br />
    text = text.replace(/\n/gi, "<br />");

    //Regex relace for Bold characters
    text = text.replace(/'''(.*?)'''/g, function (m, l) {
        return '<b>' + l + '</b>';
    });

    //Regex relace for Italic characters
    text = text.replace(/''(.*?)''/g, function (m, l) {
        return '<i>' + l + '</i>';
    });

    //Regex replace for HR
    text = text.replace(/----(.*?)/g, function (m, l) {
        return '<hr>' + l + '</hr>';
    });
    
    for (i = headingMaxLevel; i > 0; i--) {
        var charString = "=";
        charString = fillChars(charString, i);
        var htmlPre = '<H' + charString.length + '>';
        var htmlSuff = '</H' + charString.length + '>';

        //console.log(charString + " | " + htmlPre + " | " + htmlSuff);
        var re = new RegExp(charString + "(.*?)" + charString, "g");
        text = text.replace(re, function (m, l) {
            return htmlPre + l + htmlSuff;
        });
    }

    text = text.replace(/\[(.*?)\]/g, function (m, l) { // normal link
        return '<a href="' + l + '">' + l + '</a>';
    });

    text = text.replace(/[\[](http.*)[!\]]/g, function (m, l) { // external link
        var p = l.replace(/[\[\]]/g, '').split(/ /);
        var link = p.shift();
        return '<a href="' + link + '">' + (p.length ? p.join(' ') : link) + '</a>';
    });


    

    // Print the text in the div made for it.
    div.innerHTML = text;
}

function fillChars(c, n) {
    for (var e = ""; e.length < n;) {
        e += c;
    }
    //console.log(e);
    return e;
}

References :
MSIE docs referred to make things work in IE.
createTextRange - //http://msdn.microsoft.com/en-us/library/ms536401(v=vs.85).aspx
moveToBookMark - //http://msdn.microsoft.com/en-us/library/ms536628(v=vs.85).aspx
setEndPoint - http://msdn.microsoft.com/en-us/library/ms536745(v=vs.85).aspx
collapse - http://msdn.microsoft.com/en-us/library/ff975439(v=vs.85).aspx