Use server-side markdown renderer in WYSIWYG preview

Fixes #117

diff --git a/app/blueprints/api/endpoints.py b/app/blueprints/api/endpoints.py
index e37454fab53232e5ab6954b6fcf434a6e38471bb..266bf936b3a3c1913b81a25a92910a7d699e13da 100644 (file)
--- a/app/blueprints/api/endpoints.py
+++ b/app/blueprints/api/endpoints.py
@@ -19,8 +19,10 @@ from flask import *
 from flask_user import *
 from . import bp
 from .auth import is_api_authd
+from app import csrf
 from app.models import *
 from app.utils import is_package_page
+from app.markdown import render_markdown
 from app.querybuilder import QueryBuilder
 
 @bp.route("/api/packages/")
@@ -107,3 +109,9 @@ def whoami(token):
                return jsonify({ "is_authenticated": False, "username": None })
        else:
                return jsonify({ "is_authenticated": True, "username": token.owner.username })
+
+
+@bp.route("/api/markdown/", methods=["POST"])
+@csrf.exempt
+def clean_markdown():
+       return render_markdown(request.data.decode("utf-8"))

diff --git a/app/public/static/markdowntextarea.js b/app/public/static/markdowntextarea.js
new file mode 100644 (file)
index 0000000..c2ba345
--- /dev/null
+++ b/app/public/static/markdowntextarea.js
@@ -0,0 +1,34 @@
+$("textarea.markdown").each(function() {
+       async function render(plainText, preview) {
+               const response = await fetch(new Request("/api/markdown/", {
+                       method: "POST",
+                       credentials: "same-origin",
+                       body: plainText,
+                       headers: {
+                               "Accept": "text/html; charset=UTF-8",
+                       },
+               }));
+
+               preview.innerHTML = await response.text();
+       }
+
+       let timeout_id = null;
+
+       new EasyMDE({
+               element: this,
+               hideIcons: ["image"],
+               forceSync: true,
+               previewRender: (plainText, preview) => {
+                       if (timeout_id) {
+                               clearTimeout(timeout_id);
+                       }
+
+                       timeout_id = setTimeout(() => {
+                               render(plainText, preview);
+                               timeout_id = null;
+                       }, 500);
+
+                       return preview.innerHTML;
+               }
+       });
+})

diff --git a/app/templates/base.html b/app/templates/base.html
index df1020884b856b58cb85d8ec2e30ad0d600f2d26..cfe2dfc7288330763c0cbbae3c1541879629cba9 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -148,12 +148,9 @@
        <script src="/static/bootstrap.min.js"></script>
        <script src="/static/easymde.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/easymde.min.css">
-       <script>
-               $("textarea.markdown").each(function() {
-                       new EasyMDE({ element: this, hideIcons: ["image"], forceSync: true });
-               })
-       </script>
        <link href="/static/fa/css/all.css" rel="stylesheet">
+       <script src="/static/markdowntextarea.js"></script>
+
        {% block scriptextra %}{% endblock %}
 </body>
 </html>