format xml before displaying in CodeMirror Editor

cms/static/cms/js/require-config.js

@@ -28,6 +28,7 @@
             'mustache': 'js/vendor/mustache',
             'codemirror': 'js/vendor/codemirror-compressed',
             'codemirror/stex': 'js/vendor/CodeMirror/stex',
+            'pretty-print': 'js/lib/pretty-print',
             'jquery': 'common/js/vendor/jquery',
             'jquery-migrate': 'common/js/vendor/jquery-migrate',
             'jquery.ui': 'js/vendor/jquery-ui.min',

common/djangoapps/pipeline_js/templates/xmodule.js

@@ -6,9 +6,8 @@
 ## and attach them to the global context manually.
 define(["jquery", "underscore", "codemirror", "tinymce",
         "jquery.tinymce", "jquery.qtip", "jquery.scrollTo", "jquery.flot",
-        "jquery.cookie",
-        "utility"],
-       function($, _, CodeMirror, tinymce) {
+        "jquery.cookie", "pretty-print", "utility"],
+       function($, _, CodeMirror) {
     window.$ = $;
     window._ = _;
     require(['mathjax']);

common/lib/xmodule/xmodule/js/karma_xmodule.conf.js

@@ -24,6 +24,7 @@ var options = {
         {pattern: 'common_static/common/js/vendor/underscore.js', included: true},
         {pattern: 'common_static/common/js/vendor/backbone.js', included: true},
         {pattern: 'common_static/js/vendor/codemirror-compressed.js', included: true},
+        {pattern: 'common_static/js/lib/pretty-print.js', included: true},
         {pattern: 'common_static/js/vendor/draggabilly.js'},
         {pattern: 'common_static/common/js/vendor/jquery.js', included: true},
         {pattern: 'common_static/common/js/vendor/jquery-migrate.js', included: true},

common/lib/xmodule/xmodule/js/spec/problem/edit_spec.coffee

@@ -32,6 +32,14 @@ describe 'MarkdownEditingDescriptor', ->
       expect(@descriptor.confirmConversionToXml).toHaveBeenCalled()
       expect($('.editor-bar').length).toEqual(0)
 
+  describe 'formatted xml', ->
+    it 'renders pre formatted xml', ->
+      expectedXml = '<div>\n  <h3>heading</h3>\n  <p>some text</p>\n</div>'
+      loadFixtures 'problem-with-markdown.html'
+      @descriptor = new MarkdownEditingDescriptor($('.problem-editor'))
+      @descriptor.createXMLEditor('<div><h3>heading</h3><p>some text</p></div>')
+      expect(@descriptor.xml_editor.getValue()).toEqual(expectedXml)
+
   describe 'insertMultipleChoice', ->
     it 'inserts the template if selection is empty', ->
       revisedSelection = MarkdownEditingDescriptor.insertMultipleChoice('')

common/lib/xmodule/xmodule/js/src/problem/edit.coffee

@@ -37,13 +37,18 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   text: optional argument to override the text passed in via the HTML template
   ###
   createXMLEditor: (text) ->
-    @xml_editor = CodeMirror.fromTextArea($(".xml-box", @element)[0], {
-    mode: "xml"
-    lineNumbers: true
-    lineWrapping: true
-    })
+    xmlBox = $('.xml-box', @element)
+    xmlBox.text PrettyPrint.xml(xmlBox.text())
+    @xml_editor = CodeMirror.fromTextArea(xmlBox[0],
+      mode: 'xml'
+      lineNumbers: true
+      lineWrapping: true)
+
     if text
-      @xml_editor.setValue(text)
+      # format xml before displaying
+      text = PrettyPrint.xml(text)
+      @xml_editor.setValue text
+
     @setCurrentEditor(@xml_editor)
     $(@xml_editor.getWrapperElement()).toggleClass("CodeMirror-advanced");
     # Need to refresh to get line numbers to display properly.

common/static/js/lib/pretty-print.js

+/**
+* pretty-data - nodejs plugin to pretty-print or minify data in XML, JSON and CSS formats.
+*
+* Version - 0.40.0
+* Copyright (c) 2012 Vadim Kiryukhin
+* vkiryukhin @ gmail.com
+* http://www.eslinstructor.net/pretty-data/
+*
+*
+* Code extracted for xml formatting only
+*/
+
+/* eslint-disable */
+
+(function (root, factory){
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define([], function (){
+            return (root.PrettyPrint = factory());
+        });
+    } else {
+        // Browser globals
+        root.PrettyPrint = factory();
+    }
+}(this, function () {
+    function PrettyPrint(){
+        var maxdeep = 100, // nesting level
+            ix = 0;
+
+        this.shift = ['\n']; // array of shifts
+        this.step = '  '; // 2 spaces
+
+        // initialize array with shifts //
+        for (ix = 0; ix < maxdeep; ix++) {
+            this.shift.push(this.shift[ix] + this.step);
+        }
+    }
+
+    PrettyPrint.prototype.xml = function (text) {
+        var ar = text.replace(/>\s{0,}</g, "><")
+                .replace(/</g, "~::~<")
+                .replace(/xmlns\:/g, "~::~xmlns:")
+                .replace(/xmlns\=/g, "~::~xmlns=")
+                .split('~::~'),
+            len = ar.length,
+            inComment = false,
+            deep = 0,
+            str = '',
+            ix = 0;
+
+        for (ix = 0; ix < len; ix++) {
+            // start comment or <![CDATA[...]]> or <!DOCTYPE //
+            if (ar[ix].search(/<!/) > -1) {
+                str += this.shift[deep] + ar[ix];
+                inComment = true;
+                // end comment  or <![CDATA[...]]> //
+                if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1) {
+                    inComment = false;
+                }
+            } else
+            // end comment  or <![CDATA[...]]> //
+            if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) {
+                str += ar[ix];
+                inComment = false;
+            } else
+            // <elm></elm> //
+            if (/^<\w/.exec(ar[ix - 1]) && /^<\/\w/.exec(ar[ix]) &&
+                /^<[\w:\-\.\,]+/.exec(ar[ix - 1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/', '')) {
+                str += ar[ix];
+                if (!inComment) deep--;
+            } else
+            // <elm> //
+            if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1) {
+                str = !inComment ? str += this.shift[deep++] + ar[ix] : str += ar[ix];
+            } else
+            // <elm>...</elm> //
+            if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
+                str = !inComment ? str += this.shift[deep] + ar[ix] : str += ar[ix];
+            } else
+            // </elm> //
+            if (ar[ix].search(/<\//) > -1) {
+                str = !inComment ? str += this.shift[--deep] + ar[ix] : str += ar[ix];
+            } else
+            // <elm/> //
+            if (ar[ix].search(/\/>/) > -1) {
+                str = !inComment ? str += this.shift[deep] + ar[ix] : str += ar[ix];
+            } else
+            // <? xml ... ?> //
+            if (ar[ix].search(/<\?/) > -1) {
+                str += this.shift[deep] + ar[ix];
+            } else
+            // xmlns //
+            if (ar[ix].search(/xmlns\:/) > -1 || ar[ix].search(/xmlns\=/) > -1) {
+                str += this.shift[deep] + ar[ix];
+            }
+
+            else {
+                str += ar[ix];
+            }
+        }
+
+        return (str[0] == '\n') ? str.slice(1) : str;
+    };
+
+    return new PrettyPrint();
+}));

common/static/js/spec/pretty_print_xml_spec.js

+describe('XML Formatting Lib', function() {
+    'use strict';
+
+    it('correctly format the xml', function() {
+        var rawXml = '<breakfast><food><name>Belgian Waffles</name><price>$5.95</price></food></breakfast>',
+            expectedXml = '<breakfast>\n  <food>\n    <name>Belgian Waffles</name>' +
+                '\n    <price>$5.95</price>\n  </food>\n</breakfast>';
+
+        expect(window.PrettyPrint.xml(rawXml)).toEqual(expectedXml);
+    });
+
+    it('correctly handles the whitespaces and newlines', function() {
+        var rawXml = '<breakfast>     <food>  <name>Belgian Waffles</name>' +
+                '\n\n\n<price>$5.95</price></food>   </breakfast>',
+            expectedXml = '<breakfast>\n  <food>\n    <name>Belgian Waffles</name>' +
+            '\n    <price>$5.95</price>\n  </food>\n</breakfast>';
+
+        expect(window.PrettyPrint.xml(rawXml)).toEqual(expectedXml);
+    });
+});

common/static/karma_common.conf.js

@@ -28,6 +28,7 @@ var options = {
         {pattern: 'js/vendor/URI.min.js', included: true},
         {pattern: 'js/test/add_ajax_prefix.js', included: true},
         {pattern: 'js/test/i18n.js', included: true},
+        {pattern: 'js/lib/pretty-print.js', included: true},
 
         {pattern: 'common/js/vendor/underscore.js', included: true},
         {pattern: 'common/js/vendor/underscore.string.js', included: true},