editor: added previews

app/forms/forum.py

@@ -9,7 +9,6 @@ class CommentForm(FlaskForm):
         validators=[vd.file.optional, vd.file.count, vd.file.extension,
             vd.file.size, vd.file.namelength])
     submit = SubmitField('Commenter')
-    preview = SubmitField('Prévisualiser')
 
 
 class AnonymousCommentForm(CommentForm):

app/routes/__init__.py

@@ -7,3 +7,4 @@ from app.routes.admin import index, groups, account, trophies, forums, \
 from app.routes.forum import index, topic
 from app.routes.programs import index
 from app.routes.posts import edit
+from app.routes.api import markdown

app/routes/api/markdown.py

@@ -0,0 +1,14 @@
+from app import app
+from app.utils.filters.markdown import md
+from flask import request, abort
+from werkzeug.exceptions import BadRequestKeyError
+
+class API():
+    @app.route("/api/markdown", methods=["POST"])
+    def api_markdown():
+        try:
+            markdown = request.get_json()['text']
+        except BadRequestKeyError:
+            return "Dummy value"
+            abort(400)
+        return str(md(markdown))

app/templates/forum/edit_comment.html

@@ -33,7 +33,6 @@
 
 			{{ widget_editor.text_editor(form.message, label=False) }}
 
-			<div>{{ form.preview(class_='bg-ok') }}</div>
 			<div>{{ form.submit(class_='bg-ok') }}</div>
 		</form>
 	</div>

app/templates/widgets/editor.html

@@ -3,18 +3,41 @@
 	{{ field() }}
 	<script>
 	window.addEventListener("load", function(){
-	    var simplemde = new SimpleMDE({
-	    	element: document.getElementById("{{field.name}}"),
-	    	autofocus: true,
-	    	hideIcons: ["guide", "side-by-side", "fullscreen", "heading"],
-	    	showIcons: ["code", "table", "horizontal-rule", "ordered-list", "unordered-list", "heading-1", "heading-2", "heading-3", "strikethrough"],
-	    	insertTexts: {
-	    			image: ["![](https://", ")"],
-	    			link: ["[", "](https://)"],
-	    		},
-	    	spellChecker: false,
-	    	forceSync: true,
-	    });
+		var simplemde = new SimpleMDE({
+			element: document.getElementById("{{field.name}}"),
+			autofocus: true,
+			autosave: {
+				enabled: true,
+				uniqueId: "{{ request.path }}+{{ field.name }}",
+				delay: 1000,
+			},
+			hideIcons: ["guide", "side-by-side", "fullscreen", "heading"],
+			showIcons: ["code", "table", "horizontal-rule", "ordered-list",
+				"unordered-list", "heading-1", "heading-2", "heading-3",
+				"strikethrough"
+			],
+			insertTexts: {
+				image: ["![](https://", ")"],
+				link: ["[", "](https://)"],
+			},
+			previewRender: function(plainText, preview) { // Async method
+				data = {text: plainText};
+				fetch('{{ url_for("api_markdown") }}', {
+					method: "POST",
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(data)
+				})
+				.then(response => response.text())
+				.then(data => preview.innerHTML = data);
+				return "Chargement…";
+			},
+			spellChecker: false, // Uses CDN jsdelivr.net
+			forceSync: true,
+			tabSize: 4,
+			shortcuts: {
+				toggleFullScreen: null,
+			},
+		});
 	});
 	</script>
 	{% for error in field.errors %}