From 5dc442c61c52c59730750cb03cec71ade2595c93 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 12:07:54 -0800
Subject: [PATCH 1/8] merge editor refactor branches #9004

---
 app/assets/javascripts/editor.js          | 188 +++++++++-----------
 app/assets/javascripts/editorToolbar.js   |  69 ++------
 app/assets/javascripts/post.js            |   2 +-
 app/helpers/application_helper.rb         |  14 +-
 app/views/comments/_edit.html.erb         | 204 ++++++++--------------
 app/views/comments/_form.html.erb         |  54 +++---
 app/views/editor/_editor.html.erb         |   4 +-
 app/views/editor/_toolbar.html.erb        |  13 +-
 app/views/map/edit.html.erb               |   2 +-
 app/views/notes/_comments.html.erb        |   7 +-
 app/views/notes/show.html.erb             |   1 -
 app/views/questions/show.html.erb         |  12 +-
 app/views/wiki/show.html.erb              |  18 +-
 test/functional/editor_controller_test.rb |   2 +-
 test/functional/wiki_controller_test.rb   |   2 +-
 test/system/comment_test.rb               |  14 +-
 test/system/post_test.rb                  |   4 +-
 17 files changed, 255 insertions(+), 355 deletions(-)

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
index 997f0b176c..70393b00ca 100644
--- a/app/assets/javascripts/editor.js
+++ b/app/assets/javascripts/editor.js
@@ -1,13 +1,16 @@
-// jQuery (document).ready function:
-
-$E = {
-  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();
-    
+class Editor {
+  // default parameter references the ID of:
+  //   1. main comment form in multi-comment wikis, questions, & research notes.
+  //   2. the only editor form on /wiki/new and /wiki/edit
+  constructor(commentFormID = "main") {
+    this.commentFormID = commentFormID;
+    this.textarea = $("#text-input-" + commentFormID);
+    this.preview = $("#comment-preview-" + commentFormID);
+    this.previewing = false;
+    this.previewed = false;
+    // this will get deleted in the next few PRs, so collapsing into one line to pass codeclimate
+    this.templates = { 'blog': "## The beginning\n\n## What we did\n\n## Why it matters\n\n## How can you help", 'default': "## What I want to do\n\n## My attempt and results\n\n## Questions and next steps\n\n## Why I'm interested", 'support': "## Details about the problem\n\n## A photo or screenshot of the setup", 'event': "## Event details\n\nWhen, where, what\n\n## Background\n\nWho, why", 'question': "## What I want to do or know\n\n## Background story" };
+      
     marked.setOptions({
       gfm: true,
       tables: true,
@@ -23,96 +26,74 @@ $E = {
         return code;
       }
     });
-  },
-  setState: function(textarea = 'text-input', preview = 'comment-preview-main', title = 'title') {
-    $E.title = $('#' + title + 'title'); // not sure why this exists? seems like $E.title is always #title
-    $E.textarea = $('#' + textarea);
+  }
+  setState(commentFormID = "main") {
+    this.commentFormID = commentFormID;
+    $E.textarea = $("#text-input-" + commentFormID);
     $E.textarea.bind('input propertychange', $E.save);
-    $E.preview = $('#' + preview);
-  },
-  is_editing: function() {
-    return ($E.textarea[0].selectionStart == 0 && $E.textarea[0].selectionEnd == 0)
-  },
-  refresh: function() {
-    // textarea
-    $E.textarea = ($D.selected).find('textarea').eq(0);
-    $E.textarea.bind('input propertychange',$E.save);
-    // preview
-    $E.preview = ($D.selected).find('.comment-preview').eq(0);
-  },
-  isRichTextEditor: function(url) {
-    // this RegEx matches three different cases where the legacy editor is still used:
-    //   1. /wiki/new
-    //   2. /wiki/{wiki name}/edit
-    //   3. /features/new
-    const legacyEditorPath = RegExp(/\/(wiki|features)(\/[^\/]+\/edit|\/new)/);
-    return !legacyEditorPath.test(url); // if we're not on one of these pages, we are using the rich-text editor.
-  },
+    $E.preview = $("#comment-preview-" + commentFormID);
+  }
   // wraps currently selected text in textarea with strings a and b
-  wrap: function(a, b, args) {
-    // we only refresh $E's values if we are on a page using the rich-text editor (most pages).
-    // the legacy editor pages only have one editor form, unlike pages with multiple comments.
-    if (this.isRichTextEditor(window.location.pathname)) { this.refresh(); }
-    var len = $E.textarea.val().length;
-    var start = $E.textarea[0].selectionStart;
-    var end = $E.textarea[0].selectionEnd;
-    const fallbackParameterExists = args && args['fallback'];
-    const newlineParameterExists = args && args['newline'];
-    var sel = fallbackParameterExists ? args['fallback'] : $E.textarea.val().substring(start, end); // // fallback if nothing has been selected, and we're simply dealing with an insertion point
-    var replace = a + sel + b;
-    if (newlineParameterExists) {
-      replace = replace + "\n\n";
-    }
-    if (newlineParameterExists && $E.textarea[0].selectionStart > 0) { 
-      replace = "\n" + replace; 
-    }
-    $E.textarea.val($E.textarea.val().substring(0,start) + replace + $E.textarea.val().substring(end,len));
-  },
-  bold: function() {
+  wrap(a, b, newlineDesired = false, fallback) {
+    const selectionStart = $E.textarea[0].selectionStart;
+    const selectionEnd = $E.textarea[0].selectionEnd;
+    const selection = fallback || $E.textarea.val().substring(selectionStart, selectionEnd); // fallback if nothing has been selected, and we're simply dealing with an insertion point
+
+    let newText = a + selection + b; // ie. ** + selection + ** (wrapping selection in bold)
+    if (newlineDesired) { newText = newText + "\n\n"; }
+    const selectionStartsMidText = $E.textarea[0].selectionStart > 0;
+    if (newlineDesired && selectionStartsMidText) { newText = "\n" + newText; }
+
+    const textLength = $E.textarea.val().length;
+    const textBeforeSelection = $E.textarea.val().substring(0, selectionStart);
+    const textAfterSelection = $E.textarea.val().substring(selectionEnd, textLength);
+    $E.textarea.val(textBeforeSelection + newText + textAfterSelection);
+  }
+  bold() {
     $E.wrap('**','**')
-  },
-  italic: function() {
+  }
+  italic() {
     $E.wrap('_','_')
-  },
-  link: function(uri) {
+  }
+  link(uri) {
     uri = prompt('Enter a URL');
     if (uri === null) { uri = ""; }
     $E.wrap('[', '](' + uri + ')');
-  },
-  image: function(src) {
+  }
+  image(src) {
     $E.wrap('\n![',']('+src+')\n')
-  },
-  h1: function() {
-    $E.wrap('#','')
-  },
-  h2: function() {
+  }
+  // these header formatting functions are not used anywhere, so commenting them out for now to pass codeclimate:
+
+  // h1() {
+  //   $E.wrap('#','')
+  // }
+  h2() {
     $E.wrap('##','')
-  },
-  h3: function() {
-    $E.wrap('###','')
-  },
-  h4: function() {
-    $E.wrap('####','')
-  },
-  h5: function() {
-    $E.wrap('#####','')
-  },
-  h6: function() {
-    $E.wrap('######','')
-  },
-  h7: function() {
-    $E.wrap('#######','')
-  },
+  }
+  // h3() {
+  //   $E.wrap('###','')
+  // }
+  // h4() {
+  //   $E.wrap('####','')
+  // }
+  // h5() {
+  //   $E.wrap('#####','')
+  // }
+  // h6() {
+  //   $E.wrap('######','')
+  // }
+  // h7() {
+  //   $E.wrap('#######','')
+  // }
   // this function is dedicated to Don Blair https://github.com/donblair
-  save: function() {
-    localStorage.setItem('plots:lastpost',$E.textarea.val())
-    localStorage.setItem('plots:lasttitle',$E.title.val())
-  },
-  recover: function() {
-    $E.textarea.val(localStorage.getItem('plots:lastpost'))
-    $E.title.val(localStorage.getItem('plots:lasttitle'))
-  },
-  apply_template: function(template) {
+  save() {
+    localStorage.setItem('plots:lastpost',$E.textarea.val());
+  }
+  recover() {
+    $E.textarea.val(localStorage.getItem('plots:lastpost'));
+  }
+  apply_template(template) {
     if($E.textarea.val() == ""){
       $E.textarea.val($E.templates[template])
     }else if(($E.textarea.val() == $E.templates['event']) || ($E.textarea.val() == $E.templates['default']) || ($E.textarea.val() == $E.templates['support'])){
@@ -120,34 +101,25 @@ $E = {
     }else{
       $E.textarea.val($E.textarea.val()+'\n\n'+$E.templates[template])
     }
-  },
-  templates: {
-    'blog': "## The beginning\n\n## What we did\n\n## Why it matters\n\n## How can you help",
-    'default': "## What I want to do\n\n## My attempt and results\n\n## Questions and next steps\n\n## Why I'm interested",
-    'support': "## Details about the problem\n\n## A photo or screenshot of the setup",
-    'event': "## Event details\n\nWhen, where, what\n\n## Background\n\nWho, why",
-    'question': "## What I want to do or know\n\n## Background story"
-  },
-  previewing: false,
-  previewed: false,
-  generate_preview: function(id,text) {
+  }
+  generate_preview(id,text) {
     $('#'+id)[0].innerHTML = marked(text)
-  },
-  toggle_preview: function() {
+  }
+  toggle_preview() {
     let previewBtn;
     let dropzone;
     // if the element is part of a multi-comment page,
     // ensure to grab the current element and not the other comment element.
-    previewBtn = $(this.textarea.context).find('.preview-btn');
-    dropzone = $(this.textarea.context).find('.dropzone');
+    previewBtn = $("#toggle-preview-button-" + this.commentFormID);
+    dropzone = $("#dropzone-large-" + this.commentFormID);
 
     $E.preview[0].innerHTML = marked($E.textarea.val());
     $E.preview.toggle();
     dropzone.toggle();
 
     this.toggleButtonPreviewMode(previewBtn);
-  },
-  toggleButtonPreviewMode: function (previewBtn) {
+  }
+  toggleButtonPreviewMode(previewBtn) {
     let isPreviewing = previewBtn.attr('data-previewing');
 
     // If data-previewing attribute is not present -> we are not in "preview" mode
@@ -166,4 +138,4 @@ $E = {
       previewBtn.text('Preview');
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/editorToolbar.js b/app/assets/javascripts/editorToolbar.js
index 37159c3244..870e26083d 100644
--- a/app/assets/javascripts/editorToolbar.js
+++ b/app/assets/javascripts/editorToolbar.js
@@ -1,29 +1,9 @@
-// this script is used in a variety of different contexts including:
+// this script is used wherever the legacy editor is used.
 //   pages (wikis, questions, research notes) with multiple comments & editors for each comment
 //   pages with JUST ONE form, and no other comments, eg. /wiki/new & /wiki/edit
 //   /app/views/features/_form.html.erb
 //   /app/views/map/edit.html.erb
-//   the legacy editor: /app/views/editor/_editor.html.erb (if it's still in use live?)
-
-const getEditorParams = (targetDiv) => {
-  const closestCommentFormWrapper = targetDiv.closest('div.comment-form-wrapper'); // this returns null if there is no match
-  let params = {};
-  // there are no .comment-form-wrappers on /wiki/edit or /wiki/new
-  // these pages just have a single text-input form.
-  if (closestCommentFormWrapper) {
-    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'] = 'comment-preview-main';
-  }
-  return params;
-};
+//   and wherever /app/views/editor/editor.html.erb is still used in production
 
 const progressAll = (elem, data) => {
   var progress = parseInt(data.loaded / data.total * 100, 10);
@@ -36,13 +16,8 @@ const progressAll = (elem, data) => {
 // attach eventListeners on document.load for toolbar rich-text buttons & image upload .dropzones
 $(function() {
   // for rich-text buttons (bold, italic, header, and link):
-  // click eventHandler that assigns $D.selected to the appropriate comment form
-  // 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
   $('.rich-text-button').on('click', function(e) {
-    const { textArea, preview, dSelected } = getEditorParams(e.target);
-    // assign dSelected
-    if (dSelected) { $D.selected = dSelected; }
-    $E.setState(textArea, preview);
+    $E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
     const action = e.currentTarget.dataset.action // 'bold', 'italic', etc.
     $E[action](); // call the appropriate editor function
   });
@@ -65,10 +40,8 @@ $(function() {
 
     // runs on drag & drop
     $(this).on('drop',function(e) {
-      const { textArea, preview, dSelected } = getEditorParams(e.target);
       e.preventDefault();
-      if (dSelected) { $D.selected = dSelected; }
-      $E.setState(textArea, preview);
+      $E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
     });
 
     $(this).fileupload({
@@ -84,22 +57,18 @@ $(function() {
           //   1. when user drag-and-drops image
           //   2. when user clicks on upload button.
         start: function(e) {
+          $E.setState(e.target.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
           $(e.target).removeClass('hover');
-          // for click-upload-button scenarios, it's important to set $D.selected here, because the 'drop' listener above doesn't run in those:
-          $D.selected = $(e.target).closest('div.comment-form-wrapper');
-          // the above line is redundant in drag & drop, because it's assigned in 'drop' listener too.
-          // on /wiki/new & /wiki/edit, $D.selected will = undefined from this assignment
-          elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
-          elem.find('.progress-bar-container').eq(0).show();
-          elem.find('.uploading-text').eq(0).show();
-          elem.find('.choose-one-prompt-text').eq(0).hide();
+          console.log($("#image-upload-progress-container-" + $E.commentFormID));
+          $("#image-upload-progress-container-" + $E.commentFormID).show();
+          $("#image-upload-text-" + $E.commentFormID).show();
+          $("#dropzone-choose-one-" + $E.commentFormID).hide();
         },
         done: function (e, data) {
-          elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
-          elem.find('.progress-bar-container').hide();
-          elem.find('.progress-bar').css('width', 0);
-          elem.find('.uploading-text').hide();
-          elem.find('.choose-one-prompt-text').show();
+          $("#image-upload-progress-container-" + $E.commentFormID).hide();
+          $("#image-upload-text-" + $E.commentFormID).hide();
+          $("#dropzone-choose-one-" + $E.commentFormID).show();
+          $("#image-upload-progress-bar-" + $E.commentFormID).css('width', 0);
           var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1]; var file_url = data.result.url.split('?')[0]; var file_type;
           if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension))
             file_type = 'image'
@@ -108,27 +77,23 @@ $(function() {
           switch (file_type) {
             case 'image':
               orig_image_url = file_url + '?s=o' // size = original
-              $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js
+              $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', true, data.result['filename']);
               break;
             case 'csv':
-              $E.wrap('[graph:' + file_url + ']', '', {'newline': true})
+              $E.wrap('[graph:' + file_url + ']', '', true);
               break;
             default:
-              $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js
+              $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ', '</a>', true, data.result['filename'].replace(/[()]/g , "-")); // on its own line; see /app/assets/js/editor.js
           }
           // here append the image id to the wiki edit form:
           if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(','))
           else $('#node_images').val(data.result.id)
-          // eventual handling of multiple files; must add "multiple" to file input and handle on server side:
-          //$.each(data.result.files, function (index, file) {
-          //    $('<p/>').text(file.name).appendTo(document.body);
-          //});
         },
         fileuploadfail: function(e, data) {
           console.log(e);
         },
         progressall: function (e, data) {
-          const closestProgressBar = $($D.selected).closest('div.comment-form-wrapper').find('.progress-bar').eq(0);
+          const closestProgressBar = $("#image-upload-progress-bar-" + $E.commentFormID);
           return progressAll(closestProgressBar, data);
         }
     });
diff --git a/app/assets/javascripts/post.js b/app/assets/javascripts/post.js
index 027a5d4925..529a094143 100644
--- a/app/assets/javascripts/post.js
+++ b/app/assets/javascripts/post.js
@@ -2,7 +2,7 @@ jQuery(document).ready(function() {
 
   $('.datepicker').datepicker()
   
-  $E.initialize()
+  $E = new Editor();
 
   $('#side-fileinput').bind('focus',function(e) { $('#side-dropzone').css('border-color','#4ac') })
   $('#side-fileinput').bind('focusout',function(e) { $('#side-dropzone').css('border-color','#ccc') })
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1da3e1d90d..2a9115302b 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -66,19 +66,7 @@ def feature_node(title)
   end
 
   # used in views/comments/_form.html.erb
-  def get_comment_form_id(location, reply_to)
-    case location
-    when :main
-      'main'
-    when :reply
-      'reply-' + reply_to.to_s
-    when :responses
-      'responses'
-    end
-  end
-
-  # used in views/editor/_toolbar.html.erb
-  def get_toolbar_element_id(location, reply_to, comment_id)
+  def get_comment_form_id(location, reply_to, comment_id)
     case location
     when :main
       'main'
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index c12329829c..d18c36385e 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -1,155 +1,103 @@
-
 <div id="edit-comment-form-wrapper-<%= comment.id %>" class="card card-body bg-light comment-form-wrapper" style="display: none;">
-  <form method="post" id="comment-form-edit-<%= comment.id %>" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>>
+  <form 
+    method="post" 
+    id="comment-form-edit-<%= comment.id %>" 
+    style="display: none;" 
+    class="well" 
+    <% if comment.is_a?Answer %>
+      action= "/answers/update/<%= comment.id %>" 
+    <% else %>
+      action="/comment/update/<%= comment.id %>"
+    <% end %>
+  >
     <h4 style="margin-top:0;"><%= title %></h4>
     <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-
     <style>
-      #imagebar {width:100%;}
+      .imagebar {width:100%;}
     </style>
     <!-- toolbar needs location & comment_id to make unique element IDs -->
     <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
-    <div id="c<%= comment.id%>div" class="form-group dropzone">
-      <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="text-input-edit-<%= comment.id%>" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
+    <div id="c<%= comment.id%>div" class="form-group dropzone" data-form-id="edit-<%= comment.id %>">
+      <textarea 
+        aria-label="Edit Comment" 
+        onFocus="editing=true" 
+        name="body" 
+        class="form-control" 
+        id="text-input-edit-<%= comment.id%>" 
+        rows="6" 
+        cols="40" 
+        placeholder="<%= placeholder %>"
+      ><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
       <div class="imagebar">
-        <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
-          <div id="c<%= comment.id%>progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
+        <div 
+          id="image-upload-progress-container-edit-<%= comment.id %>" style="display: none;" 
+          class="progress progress-bar-container active pull-right"
+        >
+          <div 
+            id="image-upload-progress-bar-edit-<%= comment.id %>" 
+            class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"
+          >
+          </div>
         </div>
         <p>
-        <span id="c<%= comment.id%>uploading" class="uploading uploading-text" style="display:none;">
+        <span 
+          id="image-upload-text-edit-<%= comment.id %>" 
+          class="uploading uploading-text" 
+          style="display:none;"
+        >
           <%= translation('comments._edit.uploading') %>
         </span>
-        <span id="c<%= comment.id%>prompt" class="prompt choose-one-prompt-text">
+        <span id="dropzone-choose-one-edit-<%= comment.id%>" class="prompt choose-one-prompt-text dropzone">
           <span style="padding-right:4px;float:left;" class="hidden-xs">
             <%= raw translation('comments._edit.drag_and_drop') %>
           </span>
-          <span id="c<%= comment.id%>prompt" class="prompt choose-one-prompt-text">
-            <span style="padding-right:4px;float:left;" class="hidden-xs">
-              <%= raw translation('comments._edit.drag_and_drop') %>
+          <label id="c<%= comment.id%>input_label" for="fileinput-choose-one-edit-<%= comment.id%>">
+            <input id="fileinput-choose-one-edit-<%= comment.id%>" type="file" name="image[photo]" style="display:none;" />
+            <a class="hidden-xs"><%= translation('comments._edit.choose_one') %></a>
+            <span class="visible-xs">
+              <i class="fa fa-upload"></i>
+              <a><%= translation('comments._edit.upload_image') %></a>
             </span>
-            <label id="c<%= comment.id%>input_label" for="c<%= comment.id%>input">
-              <input id="c<%= comment.id%>input" type="file" name="image[photo]" style="display:none;" />
-              <a class="hidden-xs"><%= translation('comments._edit.choose_one') %></a>
-              <span class="visible-xs">
-                <i class="fa fa-upload"></i>
-                <a><%= translation('comments._edit.upload_image') %></a>
-              </span>
-            </label>
-          </span>
+          </label>
+        </span>
         </p>
       </div>
     </div>
-  <script type="application/javascript">
-//   function setInit(id) {
-//     const textArea = 'c'+id+'text';
-//     const preview = 'c'+id+'preview';
-//     $E.setState(textArea, preview);
-//   }
-//   $('#c<%= comment.id%>div').on('dragover',function(e) {
-//     e.preventDefault();
-//     $('#c<%= comment.id%>div').addClass('hover');
-//   });
-
-//   $('#c<%= comment.id%>div').on('dragout',function(e) {
-//     $('#c<%= comment.id%>div').removeClass('hover');
-//   });
-
-//   $('#c<%= comment.id%>div').on('drop',function(e) {
-//     e.preventDefault();
-//     $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
-//     setInit(<%= comment.id %>);
-//   });
-
-//   $('#c<%= comment.id%>div').fileupload({
-//     url: "/images",
-//     paramName: "image[photo]",
-//     dropZone: $('#c<%= comment.id%>div'),
-//     dataType: 'json',
-//     formData: {
-//       'uid':<%= current_user.uid %>,
-//       'nid':<%= comment.uid %>
-//     },
-//     start: function(e) {
-//       $('#c<%= comment.id%>progress').show()
-//       $('#c<%= comment.id%>uploading').show()
-//       $('#c<%= comment.id%>prompt').hide()
-//       $('#c<%= comment.id%>div').removeClass('hover');
-//     },
-//     done: function (e, data) {
-//       $('#c<%= comment.id%>progress').hide()
-//       $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css('width', 0);
-//       $('#c<%= comment.id%>uploading').hide()
-//       $('#c<%= comment.id%>prompt').show()
-//       var is_image = false
-//       if (data.result['filename'].substr(-3,3) == "jpg") is_image = true
-//       if (data.result['filename'].substr(-4,4) == "jpeg") is_image = true
-//       if (data.result['filename'].substr(-3,3) == "png") is_image = true
-//       if (data.result['filename'].substr(-3,3) == "gif") is_image = true
-//       if (data.result['filename'].substr(-3,3) == "JPG") is_image = true
-//       if (data.result['filename'].substr(-4,4) == "JPEG") is_image = true
-//       if (data.result['filename'].substr(-3,3) == "PNG") is_image = true
-//       if (data.result['filename'].substr(-3,3) == "GIF") is_image = true
-
-//       if (is_image) {
-//         image_url = data.result.url.split('?')[0];
-//         orig_image_url = image_url.replace('medium','original');
-//         $E.wrap('[![',']('+image_url+')]('+orig_image_url+')', {'newline': true, 'fallback': data.result['filename']});
-//       } else {
-//         $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'newline': true, 'fallback': data.result['filename']});
-//       }
-
-//       if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(','));
-//       else $('#node_images').val(data.result.id)
-//     },
-
-//     // fileuploadfail: function(e,data) {},
-//     progressall: function (e, data) {
-//       var progress = parseInt(data.loaded / data.total * 100, 10);
-//       $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css(
-//           'width',
-//           progress + '%'
-//       );
-//     }
-//   });
-  </script>
-
-  <div class="comment-preview well col-md-11" id="comment-preview-edit-<%= comment.id %>" style="background: white; display: none">
-  </div>
-  <div class="control-group">
-    <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button>
+    <div class="comment-preview well col-md-11" id="comment-preview-edit-<%= comment.id %>" style="background: white; display: none">
+    </div>
+    <div class="control-group">
+      <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button>
+        <a 
+          class="btn btn-default preview-btn" 
+          id="toggle-preview-button-edit-<%= comment.id %>"  
+          data-previewing-text="Hide Preview" 
+          onClick="
+            $E.setState('edit-<%= comment.id %>');
+            $E.toggle_preview();
+          "
+        >
+          Preview
+        </a>
       <a 
-        class="btn btn-default preview-btn"  
-        data-previewing-text="Hide Preview" 
+        class="btn btn-default" 
         onClick="
-          $E.setState(
-            'text-input-edit-<%= comment.id%>', 
-            'comment-preview-edit-<%= comment.id %>'
-          );
-          $E.toggle_preview();
+          $('#edit-comment-form-wrapper-<%= comment.id %>').toggle();
+          $('#c<%= comment.id %>show').toggle();
+          $('#<%= comment.id %>-like-emojis').toggle();
+          $('#comment-form-edit-<%= comment.id %>').toggle()
         "
       >
-        Preview
+        Cancel
       </a>
-    <a 
-      class="btn btn-default" 
-      onClick="
-        $('#edit-comment-form-wrapper-<%= comment.id %>').toggle();
-        $('#c<%= comment.id %>show').toggle();
-        $('#<%= comment.id %>-like-emojis').toggle();
-        $('#comment-form-edit-<%= comment.id %>').toggle()
-      "
-    >
-      Cancel
-    </a>
-    <span class="form-grey"> &nbsp;
-      <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> |
-      <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> |
-      <a onClick="$('#who-is-notified').toggle()"><%= translation('comments._edit.notifications') %></a>
-    </span>
-  </div>
+      <span class="form-grey"> &nbsp;
+        <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> |
+        <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> |
+        <a onClick="$('#who-is-notified').toggle()"><%= translation('comments._edit.notifications') %></a>
+      </span>
+    </div>
 
-  <p id="who-is-notified" style="display:none;color:#888;">
-    <%= translation('comments._edit.email_notifications') %>
-  </p>
+    <p id="who-is-notified" style="display:none;color:#888;">
+      <%= translation('comments._edit.email_notifications') %>
+    </p>
   </form>
 </div>
\ No newline at end of file
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 480c27a16e..6e359d1574 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -1,5 +1,5 @@
 <!-- get_comment_form_id defined in app/helpers/application_helper.rb: -->
-<% comment_form_id = get_comment_form_id(location, local_assigns[:reply_to]) %>
+<% comment_form_id = get_comment_form_id(location, local_assigns[:reply_to], nil) %>
 <div class="comment-form-wrapper card-body" style="background-color:#f8f8f8; border: 1px solid #e7e7e7;padding: 18px;">
   <form id="comment-form-<%= comment_form_id %>" class="comment-form" data-remote="true" action="/comment/create/<%= @node.nid %><%= "?type=question" if local_assigns[:type]=="question" %>" <% if local_assigns[:aid].blank? %>method="post"<% end %>>
     <% if current_user && current_user.id == @node.uid %>
@@ -34,7 +34,7 @@
 
     <!-- most comment forms have two dropzones: 1) small button, 2) large form that covers textarea -->
     <!-- this is the large dropzone -->
-    <div id="dropzone-large-<%= comment_form_id %>" class="form-group dropzone">
+    <div id="dropzone-large-<%= comment_form_id %>" class="form-group dropzone" data-form-id="<%= comment_form_id %>">
       <%
         body = body || params[:body]
         # Look for comment templates
@@ -55,28 +55,39 @@
         onFocus="editing=true" 
         name="body" 
         class="form-control text-input" 
-        <%# a messy workaround for now. many dependencies rely on this being #text-input instead of #text-input-main. %>
-        id="text-input<%= comment_form_id == 'main' ? '' : '-' + comment_form_id %>" 
+        id="text-input-<%= comment_form_id %>" 
         rows="6" 
         cols="40" 
         placeholder="<%= placeholder %>"><%= body %>
       </textarea>
       <div class="imagebar">
-        <div style="display:none;" class="progress progress-bar-container float-right">
-          <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
+        <div 
+          id="image-upload-progress-container-<%= comment_form_id %>"
+          style="display:none;" 
+          class="progress progress-bar-container float-right"
+        >
+          <div 
+            id="image-upload-progress-bar-<%= comment_form_id %>"
+            class="progress-bar progress-bar-striped progress-bar-animated" 
+            style="width: 0%;">
+          </div>
         </div>
         <p>
-          <span class="uploading-text" style="display:none;">
+          <span 
+            id="image-upload-text-<%= comment_form_id %>" 
+            class="uploading-text" 
+            style="display:none;"
+          >
             <%= translation('comments._form.uploading') %>
           </span>
-          <span class="prompt choose-one-prompt-text">
+          <span id="dropzone-choose-one-<%= comment_form_id %>" class="prompt choose-one-prompt-text dropzone">
             <span style="padding-right:4px;float:left;" class="d-none d-md-inline">
               <%= raw translation('comments._form.drag_and_drop') %>
             </span>
             <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
             <label for="fileinput-choose-one-<%= comment_form_id %>">
               <input id="fileinput-choose-one-<%= comment_form_id %>" type="file" name="image[photo]" style="display:none;" />
-              <a onClick="handleClick()" style="cursor: pointer;" class="d-none d-md-inline text-underline"><%= translation('comments._form.choose_one') %></a>
+              <a style="cursor: pointer;" class="d-none d-md-inline text-underline"><%= translation('comments._form.choose_one') %></a>
               <span class="d-md-none">
                 <i class="fa fa-upload"></i>
                 <a><%= translation('comments._form.upload_image') %></a>
@@ -93,28 +104,21 @@
         uid: <%= current_user.uid if current_user %>,
         type: 'comment'
       };
-
-      function handleClick() {
-        $D.selected = $(event.target.closest('div.comment-form-wrapper'));
-        $E.refresh();
-      }
     </script>
     <script src="/emoji.js" type="text/javascript"></script>
     <script src="/assets/atwho_autocomplete.js" type="text/javascript"></script>
 
     <div class="control-group">
       <button type="submit" class="btn btn-primary"><%= translation('comments._form.publish') %></button>
-      <% if local_assigns[:comment] %>
-        <a class="btn btn-outline-secondary preview-btn" onClick="$('#c<%= comment.cid %>preview').toggle();
-            $('#c<%= comment.cid %>text-input').toggle();
-            $('#c<%= comment.cid %>edit .preview-btn').button('toggle');
-            $E.generate_preview('c<%= comment.cid %>preview',$('#c<%= comment.cid %>text-input').val())">
-          <%= translation('comments._form.preview') %>
-        </a>
-        <a class="btn btn-outline-secondary" onClick="$('#c<%= comment.cid %>show').toggle();$('#c<%= comment.cid %>edit').toggle()"><%= translation('comments._form.cancel') %></a>
-      <% else %>
-        <a class="btn btn-outline-secondary preview-btn" id="toggle-preview-button-<%= comment_form_id %>" data-previewing-text="Hide Preview" onClick="handleClick();$E.toggle_preview()"><%= translation('comments._form.preview') %></a>
-      <% end %>
+      <a 
+        class="btn btn-outline-secondary preview-btn" id="toggle-preview-button-<%= comment_form_id %>" data-previewing-text="Hide Preview" 
+        onClick="
+          $E.setState('<%= comment_form_id %>');
+          $E.toggle_preview();
+        "
+      >
+        <%= translation('comments._form.preview') %>
+      </a>
       <span style="color:#888;"> &nbsp;
         <br class="d-md-none" /><%= raw translation('comments._form.logged_in', :username => current_user.username) %> &nbsp;
         <a aria-label="Authoring Help" target="_blank" href="/wiki/authoring-help#Formatting"><i class="fa fa-question-circle"></i></a> &nbsp;
diff --git a/app/views/editor/_editor.html.erb b/app/views/editor/_editor.html.erb
index 56ebe58c61..49401f4605 100644
--- a/app/views/editor/_editor.html.erb
+++ b/app/views/editor/_editor.html.erb
@@ -2,7 +2,7 @@
 <%= render :partial => "editor/toolbar", :locals => { :location => :main } %>
 
 <div class="form-group dropzone">
-  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
+  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
   <div id="imagebar">
     <div class = "inline_image_drop" style="display:none;">
       <div id="create_progress" style="display:none;" class="progress float-right">
@@ -21,6 +21,6 @@
 
 <script>
   jQuery(document).ready(function() {
-    $E.initialize();
+    $E = new Editor();
   })
 </script>
diff --git a/app/views/editor/_toolbar.html.erb b/app/views/editor/_toolbar.html.erb
index 20a685258a..6b6a1d5b67 100644
--- a/app/views/editor/_toolbar.html.erb
+++ b/app/views/editor/_toolbar.html.erb
@@ -13,12 +13,14 @@
     </div>
   </div>
   <!-- defined in application_helper.rb -->
-  <% toolbar_element_id = get_toolbar_element_id(location, local_assigns[:reply_to], local_assigns[:comment_id]) %>
+  <% toolbar_element_id = get_comment_form_id(location, local_assigns[:reply_to], local_assigns[:comment_id]) %>
   <div class="btn-group mr-2">
     <a
       id="bold-button-<%= toolbar_element_id %>"
       title="Bold" 
       data-action="bold"
+      <%# to setState on editor.js %>
+      data-form-id="<%= toolbar_element_id %>" 
       data-placement="bottom" 
       data-toggle="tooltip" 
       class="bold-button btn btn-outline-secondary btn-sm rich-text-button" 
@@ -29,6 +31,8 @@
       id="italic-button-<%= toolbar_element_id %>"
       title="Italic" 
       data-action="italic"
+      <%# to setState on editor.js %>
+      data-form-id="<%= toolbar_element_id %>"
       data-placement="bottom" 
       data-toggle="tooltip" 
       class="italic-button btn btn-outline-secondary btn-sm rich-text-button" 
@@ -39,6 +43,8 @@
       id="header-button-<%= toolbar_element_id %>"
       title="Header" 
       data-action="h2"
+      <%# to setState on editor.js %>
+      data-form-id="<%= toolbar_element_id %>"
       data-placement="bottom" 
       data-toggle="tooltip" 
       class="header-button btn btn-outline-secondary btn-sm rich-text-button" 
@@ -54,6 +60,8 @@
       aria-label="Make a link" 
       title="Make a link" 
       data-action="link"
+      <%# to setState on editor.js %>
+      data-form-id="<%= toolbar_element_id %>"
       data-placement="bottom" 
       data-toggle="tooltip" 
       class="link-button btn btn-outline-secondary btn-sm rich-text-button" href="javascript:void(0)" 
@@ -68,7 +76,8 @@
       data-placement="bottom" 
       class="upload-button btn btn-outline-secondary btn-sm"
     >
-      <div id="dropzone-small-<%= toolbar_element_id %>" class="dropzone">
+      <%# data-form-id is for setState on editor.js %>
+      <div id="dropzone-small-<%= toolbar_element_id %>" class="dropzone" data-form-id="<%= toolbar_element_id %>">
         <span id="create_prompt" class="prompt">
           <label class="" for="fileinput-button-<%= toolbar_element_id %>" style="margin-bottom: 0;">
             <input id="fileinput-button-<%= toolbar_element_id %>" class="fileinput" type="file" name="image[photo]" accept="image/*" style="display:none;" />
diff --git a/app/views/map/edit.html.erb b/app/views/map/edit.html.erb
index a25bbba2cd..bec2ba0157 100644
--- a/app/views/map/edit.html.erb
+++ b/app/views/map/edit.html.erb
@@ -56,7 +56,7 @@
         <input id="longitude" tabindex="3" name="lon" type="text" class="form-control" placeholder="-71" value="<%= @node.lon %>"><br />
       </label>
      
-      <textarea name="body" tabindex="4" class="form-control" id="text-input" rows="20" cols="60"><% if @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
+      <textarea name="body" tabindex="4" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
     </div>
 
     <hr style="clear:both;" />
diff --git a/app/views/notes/_comments.html.erb b/app/views/notes/_comments.html.erb
index 03c33466db..ea6267d4b2 100644
--- a/app/views/notes/_comments.html.erb
+++ b/app/views/notes/_comments.html.erb
@@ -30,6 +30,11 @@
         <%= translation('layout._header.login.login_title') %> </a> to comment.
       </p>
     <% end %>
-
   </div>
 </div>
+<script>
+  $(function() {
+    // create an instance of the editor
+    $E = new Editor();
+  });
+</script>
\ No newline at end of file
diff --git a/app/views/notes/show.html.erb b/app/views/notes/show.html.erb
index 1256c96278..8d7d3e3c7f 100644
--- a/app/views/notes/show.html.erb
+++ b/app/views/notes/show.html.erb
@@ -147,7 +147,6 @@
       $(this).remove();
   });
   $(function() {
-    $E.initialize();
     $("img").lazyload();
   });
 </script>
diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
index 66fe31b531..6080d0ccb5 100644
--- a/app/views/questions/show.html.erb
+++ b/app/views/questions/show.html.erb
@@ -1,10 +1,14 @@
 <%= javascript_include_tag('comment_expand') %>
 <%= javascript_include_tag('notes') %>
 <%= javascript_include_tag('textbox_expand') %>
-<script> var comments_length = <%= @node.comments.length %>; $(function(){
-  $E.initialize();
-  $("img").lazyload();
-});</script>
+<script> 
+  var comments_length = <%= @node.comments.length %>; 
+  $(function(){
+    $("img").lazyload();
+    // create an instance of the editor
+    $E = new Editor();
+  });
+</script>
 <%= javascript_include_tag('question') %>
 <div class="col-lg-9 note-show question-show">
 
diff --git a/app/views/wiki/show.html.erb b/app/views/wiki/show.html.erb
index 2ddc8a1bec..ec21dd21f8 100644
--- a/app/views/wiki/show.html.erb
+++ b/app/views/wiki/show.html.erb
@@ -63,14 +63,18 @@
 <% end %>
 
 <script>
-(function(){
-  $("img").lazyload();
+  $(function() {
+    $("img").lazyload();
 
-  <% if @fancy %>
-    $('#content img').addClass('img-rounded');
-  <% end %>
+    <% if @fancy %>
+      $('#content img').addClass('img-rounded');
+    <% end %>
 
-  setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);
+    <% if controller.action_name == 'comments' %>
+      // create an instance of the editor
+      $E = new Editor();
+    <% end %>
 
-})()
+    setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);
+  });
 </script>
diff --git a/test/functional/editor_controller_test.rb b/test/functional/editor_controller_test.rb
index a50d8bc9e1..bd09861024 100644
--- a/test/functional/editor_controller_test.rb
+++ b/test/functional/editor_controller_test.rb
@@ -54,7 +54,7 @@ def setup
         n: nodes(:blog).id
         }
     assert_response :success
-    assert_select 'textarea#text-input', nodes(:blog).body
+    assert_select 'textarea#text-input-main', nodes(:blog).body
   end
 
   test "should use existing node body as template in legacy form based on param 'n' in rich editor" do
diff --git a/test/functional/wiki_controller_test.rb b/test/functional/wiki_controller_test.rb
index 79e3d1298e..9db808ee7c 100644
--- a/test/functional/wiki_controller_test.rb
+++ b/test/functional/wiki_controller_test.rb
@@ -49,7 +49,7 @@ def teardown
 
     assert_response :success
     assert_select '#taginput[value=?]', 'one,two'
-    assert_select 'textarea#text-input', nodes(:blog).body
+    assert_select 'textarea#text-input-main', nodes(:blog).body
   end
 
   test 'should get raw wiki markup' do
diff --git a/test/system/comment_test.rb b/test/system/comment_test.rb
index 1f1f37c35e..5e0713b507 100644
--- a/test/system/comment_test.rb
+++ b/test/system/comment_test.rb
@@ -72,7 +72,9 @@ def get_path(page_type, path)
       find("p", text: comment_text)
       # replying to the comment
       first("p", text: "Reply to this comment...").click()
-      fill_in("body", with: comment_response_text)
+      page.find('[id^=text-input-reply-]')
+        .click
+        .fill_in with: comment_response_text
       # preview reply
       first(".preview-btn").click
       find("p", text: comment_response_text)
@@ -273,8 +275,8 @@ def get_path(page_type, path)
       # find edit comment's fileinput:
       page.find('#fileinput-button-edit-' + comment_id_num).set("#{Rails.root.to_s}/public/images/pl.png")
       Capybara.ignore_hidden_elements = true
-      assert_selector('#c' + comment_id_num + 'progress')
-      assert_selector('#c' + comment_id_num + 'uploading')
+      assert_selector('#image-upload-progress-container-edit-' + comment_id_num)
+      assert_selector('#image-upload-text-edit-' + comment_id_num)
     end
   end
 
@@ -311,12 +313,12 @@ def get_path(page_type, path)
           title_text = 'pokemon'
           body_text = 'Gotta catch em all!'
           fill_in('title', with: title_text)
-          fill_in('text-input', with: body_text)
+          fill_in('text-input-main', with: body_text)
           find('#publish').click()
           visit "/wiki/#{title_text}/comments"
       end
       assert_selector('h1', text: title_text)
-      page.find("textarea#text-input")
+      page.find("textarea#text-input-main")
         .click
         .fill_in with: comment_text
       # preview comment
@@ -544,7 +546,7 @@ def get_path(page_type, path)
       visit get_path(page_type, nodes(node_name).path)
       main_comment_form =  page.find('h4', text: /Post comment|Post Comment/).find(:xpath, '..') # title text on wikis is 'Post comment'
       main_comment_form.find("[data-original-title='Bold']").click
-      text_input_value = main_comment_form.find('#text-input').value
+      text_input_value = main_comment_form.find('#text-input-main').value
       assert_equal(text_input_value, '****')
     end
 
diff --git a/test/system/post_test.rb b/test/system/post_test.rb
index 31807bbc73..dc4f8bb29b 100644
--- a/test/system/post_test.rb
+++ b/test/system/post_test.rb
@@ -129,7 +129,7 @@ def assert_page_does_not_reload(message = "page should not reload")
     old_wiki_content = find("#content p").text
 
     find("a#edit-btn").click()
-    find("#text-input").set("wiki text")
+    find("#text-input-main").set("wiki text")
     find("a#publish").click()
 
     # view wiki
@@ -156,7 +156,7 @@ def assert_page_does_not_reload(message = "page should not reload")
     visit wiki.path
 
     find("a#edit-btn").click()
-    find("#text-input").native.send_keys(:enter, :enter, "wiki text")
+    find("#text-input-main").native.send_keys(:enter, :enter, "wiki text")
     find("a#publish").click()
 
     find("a[data-original-title='View all revisions for this page.']").click()

From 1bc9f2594e97ea3eb3f25231dd8ba21940b14b35 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 16:43:30 -0800
Subject: [PATCH 2/8] remove dropzone class #9004

---
 app/views/comments/_edit.html.erb | 2 +-
 app/views/comments/_form.html.erb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index d18c36385e..40983c5aff 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -47,7 +47,7 @@
         >
           <%= translation('comments._edit.uploading') %>
         </span>
-        <span id="dropzone-choose-one-edit-<%= comment.id%>" class="prompt choose-one-prompt-text dropzone">
+        <span id="dropzone-choose-one-edit-<%= comment.id%>" class="prompt choose-one-prompt-text">
           <span style="padding-right:4px;float:left;" class="hidden-xs">
             <%= raw translation('comments._edit.drag_and_drop') %>
           </span>
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 6e359d1574..c386a4ce43 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -80,7 +80,7 @@
           >
             <%= translation('comments._form.uploading') %>
           </span>
-          <span id="dropzone-choose-one-<%= comment_form_id %>" class="prompt choose-one-prompt-text dropzone">
+          <span id="dropzone-choose-one-<%= comment_form_id %>" class="prompt choose-one-prompt-text">
             <span style="padding-right:4px;float:left;" class="d-none d-md-inline">
               <%= raw translation('comments._form.drag_and_drop') %>
             </span>

From a61264cd3abd5dac611cedfacced75f8dd39be64 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 16:44:05 -0800
Subject: [PATCH 3/8] add new constructor param; write getter methods; change
 E.method to this.method #9004

---
 app/assets/javascripts/editor.js | 112 ++++++++++++++++++-------------
 1 file changed, 67 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
index 70393b00ca..344c10b2a4 100644
--- a/app/assets/javascripts/editor.js
+++ b/app/assets/javascripts/editor.js
@@ -1,13 +1,16 @@
 class Editor {
-  // default parameter references the ID of:
-  //   1. main comment form in multi-comment wikis, questions, & research notes.
-  //   2. the only editor form on /wiki/new and /wiki/edit
-  constructor(commentFormID = "main") {
-    this.commentFormID = commentFormID;
-    this.textarea = $("#text-input-" + commentFormID);
-    this.preview = $("#comment-preview-" + commentFormID);
-    this.previewing = false;
-    this.previewed = false;
+  // default parameters:
+  //   defaultForm - when the Editor is initialized, there needs to be a default editor form:
+  //     1. the main comment form in multi-comment wikis, questions, & research notes.
+  //     2. the only editor form on /wiki/new and /wiki/edit
+  //   elementIDPrefixes - the ID naming conventions are different depending on context:
+  //     1. multi-form pages with multiple comments: #comment-preview-123
+  //     2. /wiki/new and /wiki/edit: #preview-main
+  constructor(defaultForm = "main", elementIDPrefixes = {}) {
+    this.commentFormID = defaultForm;
+    this.elementIDPrefixes = elementIDPrefixes;
+    this.textarea = $("#text-input-" + this.commentFormID);
+
     // this will get deleted in the next few PRs, so collapsing into one line to pass codeclimate
     this.templates = { 'blog': "## The beginning\n\n## What we did\n\n## Why it matters\n\n## How can you help", 'default': "## What I want to do\n\n## My attempt and results\n\n## Questions and next steps\n\n## Why I'm interested", 'support': "## Details about the problem\n\n## A photo or screenshot of the setup", 'event': "## Event details\n\nWhen, where, what\n\n## Background\n\nWho, why", 'question': "## What I want to do or know\n\n## Background story" };
       
@@ -27,94 +30,113 @@ class Editor {
       }
     });
   }
-  setState(commentFormID = "main") {
+  setState(commentFormID) {
     this.commentFormID = commentFormID;
-    $E.textarea = $("#text-input-" + commentFormID);
+    this.textarea = $("#text-input-" + commentFormID);
     $E.textarea.bind('input propertychange', $E.save);
-    $E.preview = $("#comment-preview-" + commentFormID);
+  }
+  get textAreaElement() {
+    const textAreaID = "#text-input-" + this.commentFormID;
+    return $(textAreaID);
+  }
+  get textAreaValue() { 
+    return this.textAreaElement.val(); 
+  }
+  get previewElement() {
+    let previewIDPrefix = "#comment-preview-";
+    if (this.elementIDPrefixes.hasOwnProperty("preview")) {
+      // eg. on /wiki/new & /wiki/edit, the preview element is called #preview-main
+      previewIDPrefix = "#" + this.elementIDPrefixes["preview"] + "-";
+    }
+    const previewID = previewIDPrefix + this.commentFormID;
+    return $(previewID);
   }
   // wraps currently selected text in textarea with strings a and b
   wrap(a, b, newlineDesired = false, fallback) {
-    const selectionStart = $E.textarea[0].selectionStart;
-    const selectionEnd = $E.textarea[0].selectionEnd;
-    const selection = fallback || $E.textarea.val().substring(selectionStart, selectionEnd); // fallback if nothing has been selected, and we're simply dealing with an insertion point
+    const selectionStart = this.textAreaElement[0].selectionStart;
+    const selectionEnd = this.textAreaElement[0].selectionEnd;
+    const selection = fallback || this.textAreaValue.substring(selectionStart, selectionEnd); // fallback if nothing has been selected, and we're simply dealing with an insertion point
 
     let newText = a + selection + b; // ie. ** + selection + ** (wrapping selection in bold)
     if (newlineDesired) { newText = newText + "\n\n"; }
-    const selectionStartsMidText = $E.textarea[0].selectionStart > 0;
+    const selectionStartsMidText = this.textAreaElement[0].selectionStart > 0;
     if (newlineDesired && selectionStartsMidText) { newText = "\n" + newText; }
 
-    const textLength = $E.textarea.val().length;
-    const textBeforeSelection = $E.textarea.val().substring(0, selectionStart);
-    const textAfterSelection = $E.textarea.val().substring(selectionEnd, textLength);
-    $E.textarea.val(textBeforeSelection + newText + textAfterSelection);
+    const textLength = this.textAreaValue.length;
+    const textBeforeSelection = this.textAreaValue.substring(0, selectionStart);
+    const textAfterSelection = this.textAreaValue.substring(selectionEnd, textLength);
+    this.textAreaElement.val(textBeforeSelection + newText + textAfterSelection);
   }
   bold() {
-    $E.wrap('**','**')
+    this.wrap('**', '**');
   }
   italic() {
-    $E.wrap('_','_')
+    this.wrap('_', '_');
   }
   link(uri) {
     uri = prompt('Enter a URL');
     if (uri === null) { uri = ""; }
-    $E.wrap('[', '](' + uri + ')');
+    this.wrap(
+      '[', 
+      '](' + uri + ')'
+    );
   }
   image(src) {
-    $E.wrap('\n![',']('+src+')\n')
+    this.wrap(
+      '\n![', 
+      '](' + src + ')\n'
+    );
   }
   // these header formatting functions are not used anywhere, so commenting them out for now to pass codeclimate:
 
   // h1() {
-  //   $E.wrap('#','')
+  //   this.wrap('#','')
   // }
   h2() {
-    $E.wrap('##','')
+    this.wrap('##', '');
   }
   // h3() {
-  //   $E.wrap('###','')
+  //   this.wrap('###','')
   // }
   // h4() {
-  //   $E.wrap('####','')
+  //   this.wrap('####','')
   // }
   // h5() {
-  //   $E.wrap('#####','')
+  //   this.wrap('#####','')
   // }
   // h6() {
-  //   $E.wrap('######','')
+  //   this.wrap('######','')
   // }
   // h7() {
-  //   $E.wrap('#######','')
+  //   this.wrap('#######','')
   // }
   // this function is dedicated to Don Blair https://github.com/donblair
   save() {
-    localStorage.setItem('plots:lastpost',$E.textarea.val());
+    localStorage.setItem('plots:lastpost', this.textAreaValue);
   }
   recover() {
-    $E.textarea.val(localStorage.getItem('plots:lastpost'));
+    this.textAreaElement.val(localStorage.getItem('plots:lastpost'));
   }
   apply_template(template) {
-    if($E.textarea.val() == ""){
-      $E.textarea.val($E.templates[template])
-    }else if(($E.textarea.val() == $E.templates['event']) || ($E.textarea.val() == $E.templates['default']) || ($E.textarea.val() == $E.templates['support'])){
-        $E.textarea.val($E.templates[template])
+    if(this.textAreaValue == ""){
+      this.textAreaElement.val(this.templates[template])
+    }else if((this.textAreaValue == this.templates['event']) || (this.textAreaValue == this.templates['default']) || (this.textAreaValue == this.templates['support'])){
+        this.textAreaElement.val(this.templates[template])
     }else{
-      $E.textarea.val($E.textarea.val()+'\n\n'+$E.templates[template])
+      this.textAreaElement.val(this.textAreaValue+'\n\n'+this.templates[template])
     }
   }
   generate_preview(id,text) {
-    $('#'+id)[0].innerHTML = marked(text)
+    $('#' + id)[0].innerHTML = marked(text)
   }
   toggle_preview() {
-    let previewBtn;
-    let dropzone;
     // if the element is part of a multi-comment page,
     // ensure to grab the current element and not the other comment element.
-    previewBtn = $("#toggle-preview-button-" + this.commentFormID);
-    dropzone = $("#dropzone-large-" + this.commentFormID);
+    const previewBtn = $("#toggle-preview-button-" + this.commentFormID);
+    const dropzone = $("#dropzone-large-" + this.commentFormID);
 
-    $E.preview[0].innerHTML = marked($E.textarea.val());
-    $E.preview.toggle();
+    this.previewElement[0].innerHTML = marked(this.textAreaValue);
+    this.previewElement.toggle();
     dropzone.toggle();
 
     this.toggleButtonPreviewMode(previewBtn);

From d1bb02bf9934c64e1f81e6bd37e4378a93ec3c60 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 16:44:35 -0800
Subject: [PATCH 4/8] call new E.textAreaValue getter #9004

---
 app/assets/javascripts/post.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/post.js b/app/assets/javascripts/post.js
index 529a094143..d9fef6190d 100644
--- a/app/assets/javascripts/post.js
+++ b/app/assets/javascripts/post.js
@@ -22,7 +22,7 @@ jQuery(document).ready(function() {
     if (e.which == 32 || e.which == 13) publish()
   })
 
-  if ($E.textarea.val() == "") $E.apply_template(getUrlParameter('template') || "default")
+  if ($E.textAreaValue === "") $E.apply_template(getUrlParameter('template') || "default")
   
   /* tag autocomplete */
   $('#taginput').typeahead({

From 8ef8d4077215512cde86ac8e004545f5da1259b4 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 16:45:09 -0800
Subject: [PATCH 5/8] call new E.constructor; change imagebar IDs #9004

---
 app/views/editor/_editor.html.erb | 34 +++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/views/editor/_editor.html.erb b/app/views/editor/_editor.html.erb
index 49401f4605..037e1818f8 100644
--- a/app/views/editor/_editor.html.erb
+++ b/app/views/editor/_editor.html.erb
@@ -3,24 +3,36 @@
 
 <div class="form-group dropzone">
   <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
-  <div id="imagebar">
-    <div class = "inline_image_drop" style="display:none;">
-      <div id="create_progress" style="display:none;" class="progress float-right">
-        <div id="create_progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
+  <div class="imagebar">
+    <div 
+      id="image-upload-progress-container-main" style="display:none;" 
+      class="progress progress-bar-container float-right"
+    >
+      <div 
+        id="image-upload-progress-bar-main" 
+        class="progress-bar progress-bar-striped progress-bar-animated" 
+        style="width: 0%;"
+      >
       </div>
-      <p>
-        <span id="create_uploading" class="uploading" style="display:none;">
-          Uploading...
-        </span>
-      </p>
     </div>
+    <p>
+      <span 
+        id="image-upload-text-main" 
+        class="uploading-text" 
+        style="display:none;">
+        Uploading...
+      </span>
+    </p>
   </div>
 </div>
 
-<div class="well" id="comment-preview-main" style="display:none;"> </div>
+<div class="well" id="preview-main" style="display:none;"></div>
 
 <script>
   jQuery(document).ready(function() {
-    $E = new Editor();
+    $E = new Editor(
+      "main", 
+      { "preview": "preview" } // the preview element here is #preview-main, not #comment-preview-main
+    );
   })
 </script>

From 1eabf4fd8df84268c3cc84ec4f64d63fc67dd081 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Mon, 1 Feb 2021 16:45:28 -0800
Subject: [PATCH 6/8] change preview ID selector #9004

---
 test/system/post_test.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/system/post_test.rb b/test/system/post_test.rb
index dc4f8bb29b..012f2eed9c 100644
--- a/test/system/post_test.rb
+++ b/test/system/post_test.rb
@@ -119,7 +119,7 @@ def assert_page_does_not_reload(message = "page should not reload")
     find('.preview-btn').click()
 
     # Make sure that image has been uploaded
-    page.assert_selector('#comment-preview-main img', count: 1)
+    page.assert_selector('#preview-main img', count: 1)
   end
 
   test "changing and reverting versions works correctly for wiki" do

From fde3b9ffc5c9c8602e03639c0ee186c1098cc556 Mon Sep 17 00:00:00 2001
From: Will Gutierrez <will.gutierrez@gmail.com>
Date: Wed, 3 Feb 2021 20:37:28 -0800
Subject: [PATCH 7/8] delete typo from merge conflict #9004

---
 app/assets/javascripts/editor.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
index c103d1f6f5..ab709959ac 100644
--- a/app/assets/javascripts/editor.js
+++ b/app/assets/javascripts/editor.js
@@ -128,7 +128,6 @@ class Editor {
     $('#' + id)[0].innerHTML = marked(text)
   }
   toggle_preview() {
-    $('#'+id)[0].innerHTML = marked(text)
     // if the element is part of a multi-comment page,
     // ensure to grab the current element and not the other comment element.
     const previewBtn = $("#toggle-preview-button-" + this.commentFormID);

From f3dae9fc30ed217d093743582aff57b9558820ca Mon Sep 17 00:00:00 2001
From: noi5e <will.gutierrez@gmail.com>
Date: Wed, 3 Feb 2021 21:36:56 -0800
Subject: [PATCH 8/8] apply suggestions from code review

Co-authored-by: Sagarpreet <53554917+Sagarpreet@users.noreply.github.com>
---
 app/assets/javascripts/editor.js | 4 ++--
 app/assets/javascripts/post.js   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
index ab709959ac..93644d28b8 100644
--- a/app/assets/javascripts/editor.js
+++ b/app/assets/javascripts/editor.js
@@ -73,7 +73,7 @@ class Editor {
   }
   link(uri) {
     uri = prompt('Enter a URL');
-    if (uri === null) { uri = ""; }
+    if (!uri) { uri = ""; }
     this.wrap(
       '[', 
       '](' + uri + ')'
@@ -158,4 +158,4 @@ class Editor {
       previewBtn.text('Preview');
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/post.js b/app/assets/javascripts/post.js
index d9fef6190d..e093a42e1a 100644
--- a/app/assets/javascripts/post.js
+++ b/app/assets/javascripts/post.js
@@ -22,7 +22,7 @@ jQuery(document).ready(function() {
     if (e.which == 32 || e.which == 13) publish()
   })
 
-  if ($E.textAreaValue === "") $E.apply_template(getUrlParameter('template') || "default")
+  if (!$E.textAreaValue ) $E.apply_template(getUrlParameter('template') || "default")
   
   /* tag autocomplete */
   $('#taginput').typeahead({