Markdown Editor (#85)

dmoj/urls.py

@@ -44,6 +44,7 @@ from judge.views import (
     language,
     license,
     mailgun,
+    markdown_editor,
     notification,
     organization,
     preview,
@@ -405,6 +406,11 @@ urlpatterns = [
             ]
         ),
     ),
+    url(
+        r"^markdown_editor/",
+        markdown_editor.MarkdownEditor.as_view(),
+        name="markdown_editor",
+    ),
     url(
         r"^submission_source_file/(?P<filename>(\w|\.)+)",
         submission.SubmissionSourceFileView.as_view(),

judge/views/markdown_editor.py

@@ -0,0 +1,14 @@
+from django.views import View
+from django.shortcuts import render
+from django.utils.translation import gettext_lazy as _
+
+
+class MarkdownEditor(View):
+    def get(self, request):
+        return render(
+            request,
+            "markdown_editor/markdown_editor.html",
+            {
+                "title": _("Markdown Editor"),
+            },
+        )

locale/vi/LC_MESSAGES/django.po

@@ -130,6 +130,18 @@ msgstr "Thể thức"
 msgid "Rating"
 msgstr ""
 
+#: templates/markdown_editor/markdown_editor.html:107
+msgid "Insert Image"
+msgstr "Chèn hình ảnh"
+
+#: templates/markdown_editor/markdown_editor.html:110
+msgid "From the web"
+msgstr "Từ web" 
+
+#: templates/markdown_editor/markdown_editor.html:116
+msgid "From your computer"
+msgstr "Từ máy tính của bạn"
+
 #: judge/admin/contest.py:201
 msgid "Access"
 msgstr "Truy cập"
@@ -6255,3 +6267,4 @@ msgstr "Chọn tất cả"
 
 #~ msgid "Hard"
 #~ msgstr "Khó"
+

locale/vi/LC_MESSAGES/dmoj-user.po

@@ -39,6 +39,12 @@ msgstr "Đăng ký tên"
 msgid "Report"
 msgstr "Báo cáo"
 
+msgid "Insert Image"
+msgstr "Chèn hình ảnh"
+
+msgid "Save"
+msgstr "Lưu"
+
 msgid "2sat"
 msgstr ""
 
@@ -593,3 +599,4 @@ msgstr ""
 
 msgid "z-function"
 msgstr ""
+

templates/markdown_editor/markdown_editor.html

@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+
+{% block media %}
+  <style>
+    main {
+      overflow: hidden;
+    }
+    #content {
+      width: 100%;
+    }
+    #content.wrapper {
+      padding: 0;
+    }
+    .form-area {
+      float: left;
+      width: 47%;
+      height: 100%
+
+    }
+    .wmd-preview{
+      float: right;
+      margin-top: 0;
+    }
+    .width-controller{
+      width: 51%;
+    }
+    .wmd-input {
+      height: calc(100vh - 114px);
+    }
+    .right-markdown{
+      height: calc(100vh - 69px);
+      overflow-y: scroll;
+    }
+  </style>
+{% endblock %}
+
+{% block js_media %}
+  <script>
+    $(document).ready(function(){
+      $("#wmd-input-id_body").on("keyup", function() {
+        const csrfToken = "{{ csrf_token }}";
+        $.ajax({
+          url: "{{url('blog_preview')}}",
+          type: 'POST',
+          headers: {
+            'X-CSRFToken': csrfToken,  // Include the CSRF token in the headers
+          },
+          data: {
+            preview: $(this).val()
+          },
+          success: function(data) {
+            $('#display').html(data)
+          },
+          error: function(error) {
+            alert(error);
+            console.log(error.message)
+          }
+        })
+      });
+    });
+  </script>
+
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const leftDiv = document.getElementById("wmd-input-id_body");
+      const rightDiv = document.getElementById("display");
+
+      leftDiv.addEventListener("scroll", function() {
+        rightDiv.scrollTop = leftDiv.scrollTop;
+      });
+
+      rightDiv.addEventListener("scroll", function() {
+        leftDiv.scrollTop = rightDiv.scrollTop;
+      });
+    });
+  </script>
+
+  <script src="{{ static('pagedown/Markdown.Converter.js') }}"></script>
+  <script src="{{ static('pagedown-extra/pagedown/Markdown.Converter.js') }}"></script>
+  <script src="{{ static('pagedown/Markdown.Sanitizer.js') }}"></script>
+  <script src="{{ static('pagedown/Markdown.Editor.js') }}"></script>
+  <script src="{{ static('pagedown-extra/Markdown.Extra.js') }}"></script>
+  <script src="{{ static('pagedown_init.js') }}"></script>
+  <script src="{{ static('mathjax3_config.js') }}"></script>
+  <script src="http://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+  <script src="{{ static('pagedown_math.js') }}"></script>
+{% endblock %}
+
+{% block title_row %}
+{% endblock %}
+
+{% block body %}
+  <div id="new-comment" class="form-area" style="">
+    <input type="hidden" name="parent" id="id_parent">
+    <div class="comment-post-wrapper">
+      <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
+        <div class="wmd-panel">
+          <div id="wmd-button-bar-id_body"></div>
+          <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
+        </div>
+        <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
+          <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
+          <div class="dmmd-preview-content content-description"></div>
+        </div>
+        <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="/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>
+      </div></div>
+    </div>
+  </div>
+
+  <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
+    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
+  </div>
+{% endblock %}
+