make comments editable and be able to cancel edits

opentech/apply/activity/templates/activity/include/listing_base.html

@@ -3,10 +3,16 @@
     <div class="feed__pre-content">
         <p class="feed__label feed__label--{{ activity.type }}">{{ activity.type|capfirst }}</p>
     </div>
-    <div class="feed__content">
-        <div class="feed__meta">
+    <div class="feed__content js-feed-content">
+        <div class="feed__meta js-feed-meta">
             <p class="feed__label feed__label--{{ activity.type }} feed__label--mobile">{{ activity.type|capfirst }}</p>
             <p class="feed__meta-item"><span>{{ activity|display_author:request.user }}</span> – {{ activity.timestamp|date:"Y-m-d H:i" }}</p>
+            <p class="feed__meta-item">
+                <a class="link link--edit-submission is-active js-edit-comment" href="{% url 'funds:submissions:edit' object.id %}">
+                    Edit
+                    <svg class="icon icon--pen"><use xlink:href="#pen"></use></svg>
+                </a>
+            </p>
             {% if activity.private %}
                 <p class="feed__meta-item feed__meta-item--right">
                     <svg class="icon icon--eye"><use xlink:href="#eye"></use></svg>
@@ -19,7 +25,11 @@
                 updated <a href="{{ activity.submission.get_absolute_url }}">{{ activity.submission.title }}</a>
             {% endif %}
 
-            {{ activity|display_for:request.user|submission_links|markdown|bleach }}
+            <div class="feed__comment js-comment" data-comment="{{activity.message}}">
+                {{ activity|display_for:request.user|submission_links|markdown|bleach }}
+            </div>
+
+            <div class="js-edit-form"></div>
 
             {% if not submission_title and activity|user_can_see_related:request.user %}
                 {% with url=activity.related_object.get_absolute_url %}

opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html

@@ -53,4 +53,5 @@
     <script src="{% static 'js/apply/toggle-reviewers.js' %}"></script>
     <script src="{% static 'js/apply/toggle-sidebar.js' %}"></script>
     <script src="{% static 'js/apply/submission-text-cleanup.js' %}"></script>
+    <script src="{% static 'js/apply/edit-comment.js' %}"></script>
 {% endblock %}

opentech/static_src/src/javascript/apply/edit-comment.js

+(function ($) {
+
+    'use strict';
+
+    $('.js-edit-comment').click(function (e) {
+        e.preventDefault();
+        const editFormWrapper = $(this).closest('.js-feed-content').children('.js-edit-form');
+        const commentWrapper = $(this).closest('.js-feed-content').children('.js-comment');
+        const commentContents = $(this).closest('.js-feed-content').children('.js-comment').data('comment');
+
+        // hide the edit link and original comment
+        $(this).hide();
+        $(commentWrapper).hide();
+
+        const markup = `
+            <div class="js-pagedown form">
+                <div id="wmd-button-bar-edit-comment" class="wmd-button-bar"></div>
+                <textarea id="wmd-input-edit-comment" class="wmd-input" rows="10">${commentContents}</textarea>
+                <div id="wmd-preview-edit-comment" class="wmd-preview"></div>
+                <div class="wrapper--top-outer-space-small">
+                    <button class="button button--primary" type="submit">Update</button>
+                    <button class="button button--white js-cancel-edit">Cancel</button>
+                </div>
+            </div>
+        `;
+
+        // add the comment to the editor
+        $(editFormWrapper).append(markup);
+
+        // run the editor
+        const converterOne = Markdown.getSanitizingConverter();
+        const commentEditor = new Markdown.Editor(converterOne, '-edit-comment');
+        commentEditor.run();
+    });
+
+    $(document).on('click', '.js-cancel-edit', function () {
+        // show the comment, edit button and remove the editor
+        $(this).closest('.js-edit-form').prev('.js-comment').show();
+        $(this).closest('.js-edit-form').siblings('.js-feed-meta').find('.js-edit-comment').show();
+        $(this).closest('.js-pagedown').remove();
+    });
+
+})(jQuery);