Upgrade pagedown

dmoj/urls.py

@@ -12,6 +12,7 @@ from django.utils.functional import lazystr
 from django.utils.translation import ugettext_lazy as _
 from django.views.generic import RedirectView
 from django.contrib.auth.decorators import login_required
+from django.conf.urls.static import static as url_static
 
 
 from judge.feed import (
@@ -201,6 +202,7 @@ def paged_list_view(view, name, **kwargs):
 
 
 urlpatterns = [
+    url("", include("pagedown.urls")),
     url(
         r"^$",
         blog.PostList.as_view(template_name="home.html", title=_("Home")),
@@ -1086,7 +1088,7 @@ urlpatterns = [
             ]
         ),
     ),
-]
+] + url_static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
 favicon_paths = [
     "apple-touch-icon-180x180.png",

judge/views/comment.py

@@ -14,13 +14,14 @@ from django.shortcuts import get_object_or_404
 from django.utils.translation import gettext as _
 from django.views.decorators.http import require_POST
 from django.views.generic import DetailView, UpdateView
+from django.urls import reverse_lazy
 from reversion import revisions
 from reversion.models import Version
 
 from judge.dblock import LockModel
 from judge.models import Comment, CommentVote, Notification
 from judge.utils.views import TitleMixin
-from judge.widgets import MathJaxPagedownWidget
+from judge.widgets import MathJaxPagedownWidget, HeavyPreviewPageDownWidget
 from judge.comments import add_mention_notifications, del_mention_notifications
 
 __all__ = [
@@ -133,9 +134,10 @@ class CommentEditForm(ModelForm):
     class Meta:
         model = Comment
         fields = ["body"]
-        if MathJaxPagedownWidget is not None:
         widgets = {
-                "body": MathJaxPagedownWidget(attrs={"id": "id-edit-comment-body"})
+            "body": HeavyPreviewPageDownWidget(
+                id="id-edit-comment-body", preview=reverse_lazy("comment_preview")
+            ),
         }
 
 

judge/widgets/pagedown.py

@@ -3,6 +3,7 @@ from django.forms.utils import flatatt
 from django.template.loader import get_template
 from django.utils.encoding import force_text
 from django.utils.html import conditional_escape
+from django.conf import settings
 
 from judge.widgets.mixins import CompressorWidgetMixin
 
@@ -34,9 +35,15 @@ else:
         compress_js = True
 
         def __init__(self, *args, **kwargs):
-            kwargs.setdefault("css", ("pagedown_widget.css",))
             super(PagedownWidget, self).__init__(*args, **kwargs)
 
+        class Media:
+            css = {
+                "all": [
+                    "pagedown_widget.css",
+                ]
+            }
+
     class AdminPagedownWidget(PagedownWidget, admin_widgets.AdminTextareaWidget):
         class Media:
             css = {
@@ -60,7 +67,8 @@ else:
 
     class HeavyPreviewPageDownWidget(PagedownWidget):
         def __init__(self, *args, **kwargs):
-            kwargs.setdefault("template", "pagedown.html")
+            self.template = "pagedown.html"
+            self.id = kwargs.pop("id", None)
             self.preview_url = kwargs.pop("preview")
             self.preview_timeout = kwargs.pop("preview_timeout", None)
             self.hide_preview_button = kwargs.pop("hide_preview_button", False)
@@ -73,16 +81,21 @@ else:
             if "class" not in final_attrs:
                 final_attrs["class"] = ""
             final_attrs["class"] += " wmd-input"
+            if self.id:
+                final_attrs["id"] = self.id
             return get_template(self.template).render(
                 self.get_template_context(final_attrs, value)
             )
 
         def get_template_context(self, attrs, value):
             return {
+                "image_upload_enabled": getattr(
+                    settings, "PAGEDOWN_IMAGE_UPLOAD_ENABLED", False
+                ),
                 "attrs": flatatt(attrs),
                 "body": conditional_escape(force_text(value)),
-                "id": attrs["id"],
+                "postfix": attrs["id"],
-                "show_preview": self.show_preview,
+                "show_preview": True,
                 "preview_url": self.preview_url,
                 "preview_timeout": self.preview_timeout,
                 "extra_classes": "dmmd-no-button" if self.hide_preview_button else None,

requirements.txt

@@ -1,7 +1,7 @@
 Django>=2.2,<3
 django_compressor
 django-mptt
-django-pagedown<2
+django-pagedown
 django-registration-redux
 django-reversion
 django-reversion-compare

resources/pagedown_widget.css

@@ -59,14 +59,17 @@
 
 .wmd-spacer1 {
     left: 50px;
+    display: None;
 }
 
 .wmd-spacer2 {
     left: 175px;
+    display: None;
 }
 
 .wmd-spacer3 {
     left: 300px;
+    display: None;
 }
 
 .wmd-prompt-background {

templates/comments/edit-ajax.html

@@ -3,11 +3,8 @@
         <span style="display: none" class="comment-id">{{ comment.id }}</span>
         <span style="display: none" class="read-back">{{ url('comment_content', comment.id) }}</span>
         {% csrf_token %}
-        <div class="form-errors">
         {{ form.non_field_errors() }}
         {{ form.body.errors }}
-
-        </div>
         <div class="comment-post-wrapper">
             <div id="comment-form-body">{{ form.body }}</div>
         </div>

templates/comments/media-js.html

@@ -161,15 +161,13 @@
 
             $comments.find('a.edit-link').featherlight({
                 afterOpen: function () {
+                    register_dmmd_preview($('#id-edit-comment-body-preview'));
                     if ('DjangoPagedown' in window) {
                         var $wmd = $('.featherlight .wmd-input');
                         if ($wmd.length) {
                             window.DjangoPagedown.createEditor($wmd.get(0));
                             if ('MathJax' in window) {
                                 var preview = $('.featherlight div.wmd-preview')[0];
-                                window.editors[$wmd.attr('id')].hooks.chain('onPreviewRefresh', function () {
-                                    MathJax.Hub.Queue(['Typeset', MathJax.Hub, preview]);
-                                });
                                 MathJax.Hub.Queue(['Typeset', MathJax.Hub, preview]);
                             }
                         }

templates/pagedown.html

@@ -1,14 +1,35 @@
-<div id="{{ id|safe }}-wmd-wrapper" class="wmd-wrapper">
+<div class="wmd-wrapper {% if image_upload_enabled %}image-upload-enabled{% endif %}">
     <div class="wmd-panel">
-        <div id="{{ id|safe }}_wmd_button_bar"></div>
+        <div id="wmd-button-bar-{{ postfix }}"></div>
-        <textarea{{ attrs|safe }}>{{ body }}</textarea>
+        <textarea id="wmd-input-{{ postfix }}" {{ attrs|safe }}>{{ body }}</textarea>
     </div>
-
     {% if show_preview %}
-        <div id="{{ id|safe }}-preview" data-preview-url="{{ preview_url }}" data-textarea-id="{{ id }}"
+        <div id="{{ postfix|safe }}-preview" data-preview-url="{{ preview_url }}" data-textarea-id="wmd-input-{{ postfix }}"
              data-timeout="{{ preview_timeout or '' }}" class="wmd-panel wmd-preview dmmd-preview {{ extra_classes }}">
             <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> Update Preview</div>
             <div class="dmmd-preview-content content-description"></div>
         </div>
     {% endif %}
+    {% if image_upload_enabled %}
+        <div class="pagedown-image-upload">
+            <h2>Insert Image</h2>
+            <div class="form-row">
+                <div>
+                    <label class="label">From the web</label>
+                    <input class="url-input" type="text" placeholder="http://" />
+                </div>
+            </div>
+            <div class="form-row">
+                <div>
+                    <label class="label">From your computer</label>
+                    <input class="file-input" type="file" name="image" id="file" data-action="{{ url('pagedown-image-upload') }}" accept="image/*"/>
+                </div>
+            </div>
+            <div class="submit-row">
+                <div class="submit-loading"></div>
+                <input class="submit-input show" type="submit" value="Save" name="_addanother">
+                <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">Cancel</a></p>
+            </div>
+        </div>
+    {% endif %}
 </div>