markdown live preview (fixes #8)

jdabtieu · Dec 10, 2020 · e668028 · e668028
1 parent f60dfc8
commit e668028
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/application.py b/application.py
@@ -535,7 +535,7 @@ def edit_contest_problem(contest_id, problem_id):
         return render_template('problem/editproblem.html', data=data[0])
 
     new_name = request.form.get("name")
-    new_description = request.form.get("description")
+    new_description = request.form.get("description").replace('\r', '')
     new_hint = request.form.get("hints")
     if not new_description:
         new_description = ""
@@ -839,7 +839,7 @@ def editproblem(problem_id):
         return render_template('problem/editproblem.html', data=data[0])
 
     new_name = request.form.get("name")
-    new_description = request.form.get("description")
+    new_description = request.form.get("description").replace('\r', '')
     new_hint = request.form.get("hints")
     if not new_hint:
         new_hint = ""
@@ -1209,7 +1209,7 @@ def editannouncement(a_id):
 
     # Reached via POST
     new_name = request.form.get("name")
-    new_description = request.form.get("description")
+    new_description = request.form.get("description").replace('\r', '')
 
     if not new_name:
         return render_template('admin/editannouncement.html',

diff --git a/templates/admin/editannouncement.html b/templates/admin/editannouncement.html
@@ -6,16 +6,32 @@
 <h1>Edit Announcement</h1>
 {% if message %}
     <div class="alert alert-danger alert-dismissible fade show" role="alert">
-      {{ message }}
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
+        {{ message }}
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
     </div>
 {% endif %}
 <form autocomplete="off" method="post" id="edit" name="edit">
     <input class="form-control form-group" type="text" id="name" name="name" placeholder="Name" value="{{ data["name"] }}" required>
-    <textarea class="form-control form-group" id="description" name="description" rows="20" placeholder="Description" required>{{ data["description"] }}</textarea>
+    <div style="position: relative;">
+        <textarea class="form-control form-group md-preview" id="description" name="description" rows="20" placeholder="Description" required>{{ data["description"] }}</textarea>
+        <div id="description-out" class="md-preview"></div>
+    </div>
     <input class="btn btn-primary" type="submit" id="submit" name="submit" value="Edit">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
 </form>
+<script>
+    $(() => {
+        var product = converter.makeHtml(document.getElementById('description').value);
+        $('#description-out').html(product);
+        $('#description').css('height', $('#description-out').css('height'));
+    });
+
+    $('#description').bind('input propertychange', function() {
+        var product = converter.makeHtml(this.value);
+        $('#description-out').html(product);
+        $('#description').css('height', $('#description-out').css('height'));
+    });
+</script>
 {% endblock %}
diff --git a/templates/problem/editproblem.html b/templates/problem/editproblem.html
@@ -6,9 +6,37 @@
 <h1>Edit {{ data["name"] }}</h1>
 <form autocomplete="off" method="post">
     <input class="form-control form-group" id="name" name="name" value="{{ data["name"] }}" required>
-    <textarea class="form-control form-group" id="description" name="description" rows="20" placeholder="Description" required>{{ data["description"] }}</textarea>
-    <textarea class="form-control form-group" id="hints" name="hints" rows="10" placeholder="Hints">{{ data["hints"] if data["hints"] }}</textarea>
+    <div style="position: relative;">
+        <textarea class="form-control form-group md-preview" id="description" name="description" rows="20" placeholder="Description" required>{{ data["description"] }}</textarea>
+        <div id="description-out" class="md-preview"></div>
+    </div>
+    <div style="position: relative;">
+        <textarea class="form-control form-group md-preview" id="hints" name="hints" rows="20" placeholder="Hints">{{ data["hints"] if data["hints"] }}</textarea>
+        <div id="hints-out" class="md-preview"></div>
+    </div>
     <input class="btn btn-primary" type="submit" id="submit" name="submit" value="Submit">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
 </form>
+<script>
+	$(() => {
+        var product = converter.makeHtml(document.getElementById('description').value);
+        $('#description-out').html(product);
+        $('#description').css('height', $('#description-out').css('height'));
+
+        product = converter.makeHtml(document.getElementById('hints').value);
+        $('#hints-out').html(product);
+        $('#hints').css('height', $('#hints-out').css('height'));
+    });
+
+    $('#description').bind('input propertychange', function() {
+        var product = converter.makeHtml(this.value);
+        $('#description-out').html(product);
+        $('#description').css('height', $('#description-out').css('height'));
+    });
+    $('#hints').bind('input propertychange', function() {
+        var product = converter.makeHtml(this.value);
+        $('#hints-out').html(product);
+        $('#hints').css('height', $('#hints-out').css('height'));
+    });
+</script>
 {% endblock %}