Move to markdown-it, render markdown in DOMContentLoaded

No more separate <script>s for comments
Adds a link to a GFM cheatsheet on markdown form
Spaces to tabs on "markdownEditors" DOMContentLoaded

nyaa/forms.py

@@ -168,7 +168,7 @@ class EditForm(FlaskForm):
     information = StringField('Information', [
         Length(max=255, message='Information must be at most %(max)d characters long.')
     ])
-    description = TextAreaField('Description (markdown supported)', [
+    description = TextAreaField('Description', [
         Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
     ])
 
@@ -222,7 +222,7 @@ class UploadForm(FlaskForm):
     information = StringField('Information', [
         Length(max=255, message='Information must be at most %(max)d characters long.')
     ])
-    description = TextAreaField('Description (markdown supported)', [
+    description = TextAreaField('Description', [
         Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
     ])
 

nyaa/static/js/main.js

@@ -145,28 +145,46 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	}
 });
 
+var markdownOptions = {
+	html : false,
+	breaks : true,
+	typographer:  true
+}
+var markdown = window.markdownit(markdownOptions);
+markdown.renderer.rules.table_open = function (tokens, idx) {
+	// Format tables nicer (bootstrap). Force auto-width (default is 100%)
+	return '<table class="table table-striped table-bordered" style="width: auto;">';
+}
+
 // Initialise markdown editors on page
 document.addEventListener("DOMContentLoaded", function() {
-  var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
+	var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
 
-  markdownEditors.forEach(function (markdownEditor) {
+	markdownEditors.forEach(function (markdownEditor) {
-    var fieldName = markdownEditor.getAttribute('data-field-name');
+		var fieldName = markdownEditor.getAttribute('data-field-name');
 
-    var previewTabSelector = '#' + fieldName + '-preview-tab';
+		var previewTabSelector = '#' + fieldName + '-preview-tab';
-    var targetSelector = '#' + fieldName + '-markdown-target';
+		var targetSelector = '#' + fieldName + '-markdown-target';
-    var sourceSelector = markdownEditor.querySelector('.markdown-source');
+		var sourceSelector = markdownEditor.querySelector('.markdown-source');
 
-    var previewTabEl = markdownEditor.querySelector(previewTabSelector);
+		var previewTabEl = markdownEditor.querySelector(previewTabSelector);
-    var targetEl = markdownEditor.querySelector(targetSelector);
+		var targetEl = markdownEditor.querySelector(targetSelector);
 
-    var reader = new commonmark.Parser({safe: true});
+		previewTabEl.addEventListener('click', function () {
-    var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
+			var rendered = markdown.render(sourceSelector.value.trim());
+			targetEl.innerHTML = rendered;
+		});
+	});
+});
 
-    previewTabEl.addEventListener('click', function () {
+// Render markdown from elements with "markdown-text" attribute
-      var parsed = reader.parse(sourceSelector.value.trim());
+document.addEventListener("DOMContentLoaded", function() {
-      targetEl.innerHTML = writer.render(parsed);
+
-    });
+	var markdownTargets = document.querySelectorAll('[markdown-text]');
-  });
+	for (var target of markdownTargets) {
+		var rendered = markdown.render(target.innerHTML);
+		target.innerHTML = rendered;
+	}
 });
 
 //

nyaa/templates/_formhelpers.html

@@ -35,6 +35,7 @@
 {% endif %}
 	<div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
 		{{ field.label(class='control-label') }}
+		<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" class="small">Markdown supported</a>
 		<ul class="nav nav-tabs" role="tablist">
 			<li role="presentation" class="active">
 				<a href="#{{ field_name }}-tab" role="tab" data-toggle="tab">

nyaa/templates/layout.html

@@ -43,7 +43,7 @@
 		<!-- Core JavaScript -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.27.0/commonmark.min.js" integrity="sha256-10JreQhQG80GtKuzsioj0K46DlaB/CK/EG+NuG0q97E=" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.1/markdown-it.min.js" integrity="sha256-3WZyZQOe+ql3pLo90lrkRtALrlniGdnf//gRpW0UQks=" crossorigin="anonymous"></script>
 		<!-- Modified to not apply border-radius to selectpickers and stuff so our navbar looks cool -->
 		<script src="{{ static_cachebuster('js/bootstrap-select.js') }}"></script>
 		<script src="{{ static_cachebuster('js/main.js') }}"></script>

nyaa/templates/view.html

@@ -81,13 +81,13 @@
 </div>
 
 <div class="panel panel-default">
-	<div class="panel-body" id="torrent-description">
+	<div markdown-text class="panel-body" id="torrent-description">
-		{% if torrent.description %}
+		{%- if torrent.description -%}
 		{# Escape newlines into html entities because CF strips blank newlines #}
-		{{ torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) }}
+		{{- torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) -}}
-		{% else %}
+		{%- else -%}
 		#### No description.
-		{% endif%}
+		{%- endif -%}
 	</div>
 </div>
 
@@ -161,19 +161,12 @@
 				</div>
 				<div class="row">
 					{# Escape newlines into html entities because CF strips blank newlines #}
-					<div class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
+					<div markdown-text class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<script type="text/javascript">
+
-		var target = document.getElementById('torrent-comment{{ comment.id }}');
-		var text = target.innerHTML;
-		var reader = new commonmark.Parser({safe: true});
-		var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
-		var parsed = reader.parse(text.trim());
-		target.innerHTML = writer.render(parsed);
-	</script>
 	{% endfor %}
 	{% if comment_form %}
 	<form class="comment-box" method="POST">
@@ -207,13 +200,4 @@
 		</div>
 	</div>
 
-<script>
-	var target = document.getElementById('torrent-description');
-	var text = target.innerHTML;
-	var reader = new commonmark.Parser({safe: true});
-	var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
-	var parsed = reader.parse(text.trim());
-	target.innerHTML = writer.render(parsed);
-</script>
-
 {% endblock %}