WYSISYG editor for prompts (in studio)

openassessment/templates/openassessmentblock/oa_submission_answer.html

@@ -8,7 +8,7 @@
             </div>
             <article class="submission__answer__part__prompt">
                 <div class="submission__answer__part__prompt__value">
-                    {{ part.prompt.description|linebreaks }}
+                    {% autoescape off %}{{ part.prompt.description }}{% endautoescape %}
                 </div>
             </article>
             {% if part.text %}

openassessment/templates/openassessmentblock/response/oa_response.html

@@ -74,7 +74,7 @@
                                 <h5 class="submission__answer__part__text__title">{% trans "The prompt for this section" %}</h5>
                                 <article class="submission__answer__part__prompt">
                                     <div class="submission__answer__part__prompt__copy">
-                                        {{ part.prompt.description|linebreaks }}
+                                        {% autoescape off %}{{ part.prompt.description }}{% endautoescape %}
                                     </div>
                                 </article>
 

openassessment/xblock/defaults.py

@@ -2,14 +2,14 @@
 # -*- coding: utf-8 -*-
 # pylint: disable=line-too-long
 
-DEFAULT_PROMPT = """
-    Censorship in the Libraries
-
-    'All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.' --Katherine Paterson, Author
-
-    Write a persuasive essay to a newspaper reflecting your views on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.
-
-    Read for conciseness, clarity of thought, and form.
+DEFAULT_PROMPT = """<p>
+    Censorship in the Libraries<br />
+    <br />
+    'All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.' --Katherine Paterson, Author<br />
+    <br />
+    Write a persuasive essay to a newspaper reflecting your views on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.<br />
+    <br />
+    Read for conciseness, clarity of thought, and form.</p>
 """
 
 DEFAULT_RUBRIC_CRITERIA = [

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -76,11 +76,36 @@ OpenAssessment.ItemUtilities = {
  OpenAssessment.Prompt
  **/
 OpenAssessment.Prompt = function(element, notifier) {
+    if (this.tinyMCEEnabled) {
+        element = this.attachWysiwygToPrompt(element);
+    }
     this.element = element;
     this.notifier = notifier;
 };
 
 OpenAssessment.Prompt.prototype = {
+    tinyMCEEnabled: window.tinyMCE !== undefined,
+
+    /**
+     Attach Wysiwyg editor to the textarea field.
+
+     Args:
+     el (OpenAssessment.Container): The container that the prompt is a member of.
+
+     Returns:
+     Updated OpenAssessment.Container
+
+     **/
+    attachWysiwygToPrompt: function(el) {
+        var elId = $(el).find('textarea').attr('id');
+        if (!elId) {
+            /* jshint undef:false */
+            var newElId = Date.now() + '-textarea-' + (Math.random() * 100);
+            $(el).find('textarea').attr('id', newElId).tinymce(tinymceCfg());
+        }
+        return $(el);
+    },
+
     /**
      Finds the values currently entered in the Prompts's fields, and returns them.
 
@@ -109,7 +134,17 @@ OpenAssessment.Prompt.prototype = {
      **/
     description: function(text) {
         var sel = $('.openassessment_prompt_description', this.element);
-        return OpenAssessment.Fields.stringField(sel, text);
+
+        if (!this.tinyMCEEnabled) {
+            return OpenAssessment.Fields.stringField(sel, text);
+        }
+
+        var tinyEl = window.tinyMCE.get(sel.attr('id'));
+        if (text) {
+            tinyEl.setContent(text);
+        } else {
+            return tinyEl.getContent();
+        }
     },
 
     addEventListeners: function() {},

openassessment/xblock/static/js/src/studio/oa_edit.js

@@ -278,6 +278,66 @@ OpenAssessment.StudioView.prototype = {
     }
 };
 
+/* Get tinyMCE comfig */
+/* jshint unused:false */
+function tinymceCfg() {
+    var CUSTOM_FONTS, STANDARD_FONTS, _getFonts;
+
+    CUSTOM_FONTS = "Default='Open Sans', Verdana, Arial, Helvetica, sans-serif;";
+    STANDARD_FONTS = "Andale Mono=andale mono,times;" +
+        "Arial=arial,helvetica,sans-serif;" +
+        "Arial Black=arial black,avant garde;" +
+        "Book Antiqua=book antiqua,palatino;" +
+        "Comic Sans MS=comic sans ms,sans-serif;" +
+        "Courier New=courier new,courier;" +
+        "Georgia=georgia,palatino;" +
+        "Helvetica=helvetica;" +
+        "Impact=impact,chicago;" +
+        "Symbol=symbol;" +
+        "Tahoma=tahoma,arial,helvetica,sans-serif;" +
+        "Terminal=terminal,monaco;" +
+        "Times New Roman=times new roman,times;" +
+        "Trebuchet MS=trebuchet ms,geneva;" +
+        "Verdana=verdana,geneva;" +
+        "Webdings=webdings;" +
+        "Wingdings=wingdings,zapf dingbats";
+
+    _getFonts = function() {
+        return CUSTOM_FONTS + STANDARD_FONTS;
+    };
+
+    return {
+        height: "300",
+        font_formats: _getFonts(),
+        theme: "modern",
+        skin: 'studio-tmce4',
+        schema: "html5",
+        convert_urls: false,
+        directionality: $(".wrapper-view, .window-wrap").prop('dir'),
+        formats: {
+            code: {inline: 'code'}
+        },
+        visual: false,
+        plugins: "textcolor, link, image, media",
+        image_advtab: true,
+        toolbar: "formatselect | fontselect | bold italic underline forecolor | " +
+                 "bullist numlist outdent indent blockquote | link unlink image media",
+        block_formats: gettext("Paragraph") + "=p;" +
+            gettext("Preformatted") + "=pre;" +
+            gettext("Heading 3") + "=h3;" +
+            gettext("Heading 4") + "=h4;" +
+            gettext("Heading 5") + "=h5;" +
+            gettext("Heading 6") + "=h6",
+        menubar: false,
+        statusbar: false,
+        valid_children: "+body[style]",
+        valid_elements: "*[*]",
+        extended_valid_elements: "*[*]",
+        invalid_elements: "",
+        browser_spellcheck: true
+    };
+}
+
 /* XBlock entry point for Studio view */
 /* jshint unused:false */
 function OpenAssessmentEditor(runtime, element, data) {

openassessment/xblock/test/test_submission.py

@@ -125,7 +125,7 @@ class SubmissionTest(XBlockHandlerTestCase):
     def test_prompt_line_breaks(self, xblock):
         # Verify that prompts with multiple lines retain line breaks
         resp = self.request(xblock, 'render_submission', json.dumps(dict()))
-        expected_prompt = u"<p><br />Line 1</p><p>Line 2</p><p>Line 3<br /></p>"
+        expected_prompt = u"Line 1\n\nLine 2\n\n\nLine 3"
         self.assertIn(expected_prompt, resp)
 
     @mock_s3