Merge pull request #18440 from edx/roux/multiple-toolbars

EDUCATOR-3042: Fixes bug where inline discussion's comment editor has multiple toolbars.

lms/static/js/Markdown.Editor.js

@@ -161,7 +161,7 @@
     //
     // If remove is true, the whitespace disappears.
     Chunks.prototype.trimWhitespace = function(remove) {
-        var beforeReplacer, afterReplacer,
+        var beforeReplacer, afterReplacer,
             that = this;
         if (remove) {
             beforeReplacer = afterReplacer = '';
@@ -236,6 +236,19 @@
 
     // end of Chunks
 
+    function findAnEmptyToolbar(toolbarClassName) {
+        var toolbars = doc.getElementsByClassName(toolbarClassName);
+        for (var i=0; i < toolbars.length; ++i)
+        {
+            var aToolbar = toolbars[i];
+            if (aToolbar.children.length == 0) {
+                var anEmptyToolbar = aToolbar;
+                return anEmptyToolbar;
+            }
+        }
+        return null;
+    }
+
     // A collection of the important regions on the page.
     // Cached so we don't have to keep traversing the DOM.
     // Also holds ieCachedRange and ieCachedScrollTop, where necessary; working around
@@ -253,7 +266,7 @@
     // and 8) and ONLY on button clicks.  Keyboard shortcuts work
     // normally since the focus never leaves the textarea.
     function PanelCollection(postfix) {
-        this.buttonBar = doc.getElementById('wmd-button-bar' + postfix);
+        this.buttonBar = findAnEmptyToolbar('wmd-button-bar' + postfix);
         this.preview = doc.getElementById('wmd-preview' + postfix);
         this.input = doc.getElementById('wmd-input' + postfix);
     }
@@ -647,7 +660,7 @@
                 inputArea.selectionStart = stateObj.start;
                 inputArea.selectionEnd = stateObj.end;
                 inputArea.scrollTop = stateObj.scrollTop;
-            } else if (doc.selection) {
+            } else if (doc.selection) {
                 if (doc.activeElement && doc.activeElement !== inputArea) {
                     return;
                 }
@@ -666,7 +679,7 @@
             if (!panels.ieCachedRange && (inputArea.selectionStart || inputArea.selectionStart === 0)) {
                 stateObj.start = inputArea.selectionStart;
                 stateObj.end = inputArea.selectionEnd;
-            } else if (doc.selection) {
+            } else if (doc.selection) {
                 stateObj.text = util.fixEolChars(inputArea.value);
 
                 // IE loses the selection in the textarea when buttons are
@@ -1558,7 +1571,7 @@
             chunk.before = chunk.before.replace(/(\s?)$/, '');
             var whitespace = re.$1;
             chunk.before = chunk.before + starsAfter + whitespace;
-        } else {
+        } else {
             // In most cases, if you don't have any selected text and click the button
             // you'll get a selected, marked up region with the default text inserted.
             if (!chunk.selection && !starsAfter) {
@@ -1672,8 +1685,8 @@
         if (chunk.endTag.length > 1 && chunk.startTag.length > 0) {
             chunk.startTag = chunk.startTag.replace(/!?\[/, '');
             chunk.endTag = '';
-            this.addLinkDef(chunk, null);
-        } else {
+            this.addLinkDef(chunk, null);
+        } else {
             // We're moving start and end tag back into the selection, since (as we're in the else block) we're not
             // *removing* a link, but *adding* one, so whatever findTags() found is now back to being part of the
             // link text. linkEnteredCallback takes care of escaping any brackets.
@@ -2166,5 +2179,5 @@
         chunk.startTag = '----------\n';
         chunk.selection = '';
         chunk.skipLines(2, 1, true);
-    };
+    };
 }());

lms/static/js/customwmd.js

@@ -182,8 +182,27 @@ Mostly adapted from math.stackexchange.com: http://cdn.sstatic.net/js/mathjax-ed
         $elem.empty();
         _append = appended_id || "";
         wmdInputId = "wmd-input" + _append;
-        $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container").attr("role", "region").attr("aria-label", gettext("HTML preview of post")).append($("<div>").addClass("wmd-preview-label").text(gettext("Preview"))).append($("<div>").attr("id", "wmd-preview" + _append).addClass("wmd-panel wmd-preview"));
-        $wmdPanel = $("<div>").addClass("wmd-panel").append($("<div>").attr("id", "wmd-button-bar" + _append)).append($("<label>").addClass("sr").attr("for", wmdInputId).text(gettext("Your question or idea (required)"))).append($("<textarea>").addClass("wmd-input").attr("id", wmdInputId).html(initialText)).append($wmdPreviewContainer); // xss-lint: disable=javascript-jquery-html
+        $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container")
+                                         .attr("role", "region")
+                                         .attr("aria-label", gettext("HTML preview of post"))
+                                         .append($("<div>")
+                                         .addClass("wmd-preview-label")
+                                         .text(gettext("Preview")))
+                                         .append($("<div>")
+                                         .attr("id", "wmd-preview" + _append)
+                                         .addClass("wmd-panel wmd-preview"));
+        $wmdPanel = $("<div>").addClass("wmd-panel")
+                              .append($("<div>")
+                              .addClass("wmd-button-bar" + _append))
+                              .append($("<label>")
+                              .addClass("sr")
+                              .attr("for", wmdInputId)
+                              .text(gettext("Your question or idea (required)")))
+                              .append($("<textarea>")
+                              .addClass("wmd-input")
+                              .attr("id", wmdInputId)
+                              .html(initialText))
+                              .append($wmdPreviewContainer); // xss-lint: disable=javascript-jquery-html
         $elem.append($wmdPanel);
       }
       converter = Markdown.getMathCompatibleConverter(postProcessor);