Add setState Method in editor.js

app/assets/javascripts/dragdrop.js

@@ -29,12 +29,10 @@ jQuery(function() {
     });
 
     $(this).on('drop',function(e) {
-      const params = getEditorParams(e.target); // defined in editorHelper.js
+      const { textArea, preview, dSelected } = getEditorParams(e.target); // defined in editorHelper.js
       e.preventDefault();
-      if (params.hasOwnProperty('dSelected')) {
-        $D.selected = params['dSelected'];
-      }
-      $E.initialize(params);
+      if (dSelected) { $D.selected = dSelected; }
+      $E.setState(textArea, preview);
     });
 
     $(this).fileupload({

app/assets/javascripts/editor.js

@@ -4,29 +4,22 @@ $(function() {
   // on pages with multiple comments, $D.selected needs to be accurate so that rich-text changes (bold, italic, etc.) go into the right comment form
   // however, the editor is also used on pages with JUST ONE form, and no other comments, eg. /wiki/new & /wiki/edit, so this code needs to be reusable for that context
   $('.rich-text-button').on('click', function(e) {
-    const params = getEditorParams(e.target); // defined in editorHelper.js
+    const { textArea, preview, dSelected } = getEditorParams(e.target); // defined in editorHelper.js
     // assign dSelected
-    if (params.hasOwnProperty('dSelected')) {
-      $D.selected = params['dSelected'];
-    }
-    $E.initialize(params);
+    if (dSelected) { $D.selected = dSelected; }
+    $E.setState(textArea, preview);
     const action = e.currentTarget.dataset.action // 'bold', 'italic', etc.
     $E[action](); // call the appropriate editor function
   });
 });
 
 $E = {
-  initialize: function(args) {
-    args = args || {}
-    // title
-    $E.title = $('#title')
-    // textarea
-    args['textarea'] = args['textarea'] || 'text-input'
-    $E.textarea = $('#'+args['textarea'])
-    $E.textarea.bind('input propertychange',$E.save)
-    // preview
-    args['preview'] = args['preview'] || 'preview-main'
-    $E.preview = $('#'+args['preview'])
+  initialize: function() {
+    // call setState with no parameters, aka. default parameters.
+    // default parameters point toward either:
+    //   1. the comment form at the bottom of multi-comment wikis/questions/research notes
+    //   2. the only editor form on /wiki/new and /wiki/edit
+    $E.setState();
 
     marked.setOptions({
       gfm: true,
@@ -44,6 +37,12 @@ $E = {
       }
     });
   },
+  setState: function(textarea = 'text-input', preview = 'preview-main', title = 'title') {
+    $E.title = $('#' + title + 'title'); // not sure why this exists? seems like $E.title is always #title
+    $E.textarea = $('#' + textarea);
+    $E.textarea.bind('input propertychange', $E.save);
+    $E.preview = $('#' + preview);
+  },
   is_editing: function() {
     return ($E.textarea[0].selectionStart == 0 && $E.textarea[0].selectionEnd == 0)
   },

app/assets/javascripts/editorHelper.js

@@ -8,10 +8,13 @@ const getEditorParams = (targetDiv) => {
     params['dSelected'] = $(closestCommentFormWrapper);
     // assign the ID of the textarea within the closest comment-form-wrapper
     params['textarea'] = closestCommentFormWrapper.querySelector('textarea').id;
+    params['preview'] = closestCommentFormWrapper.querySelector('.comment-preview').id;
   } else {
     // default to #text-input
     // #text-input ID should be unique, and the only comment form on /wiki/new & /wiki/edit
     params['textarea'] = 'text-input';
+    // #preview-main should be unique as well
+    params['preview'] = 'preview-main';
   }
   return params;
 };

app/views/comments/_edit.html.erb

@@ -40,11 +40,9 @@
     </div>
       <script type="application/javascript">
         function setInit(id) {
-          var args = {
-            'textarea': 'c'+id+'text',
-            'preview': 'c'+id+'preview'
-          }
-          $E.initialize(args);
+          const textArea = 'c'+id+'text';
+          const preview = 'c'+id+'preview';
+          $E.setState(textArea, preview);
         }
 
         $('#c<%= comment.id%>div').on('dragover',function(e) {
@@ -115,7 +113,7 @@
         });
       </script>
 
-      <div class="well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none">
+      <div class="comment-preview well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none">
       </div>
 
       <div class="control-group">

app/views/editor/_editor.html.erb

@@ -21,6 +21,6 @@
 
 <script>
   jQuery(document).ready(function() {
-    $E.initialize({})
+    $E.initialize();
   })
 </script>