From ced90c23db5b13bd374ad4e64cd262c7eea16fdd Mon Sep 17 00:00:00 2001
From: tleb <theo.lebrun@live.fr>
Date: Tue, 15 Oct 2019 09:53:44 +0200
Subject: [PATCH 1/5] More JS-like, callback as last argument

---
 core/templates/core/markdown_textarea.jinja | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/core/templates/core/markdown_textarea.jinja b/core/templates/core/markdown_textarea.jinja
index 2f2b69c9..eb5b021c 100644
--- a/core/templates/core/markdown_textarea.jinja
+++ b/core/templates/core/markdown_textarea.jinja
@@ -14,14 +14,12 @@
 		}
 
 		// Custom markdown parser
-		function customMarkdownParser(plainText, preview) {
+		function customMarkdownParser(plainText, cb) {
 			$.ajax({
 				url: "{{ markdown_api_url }}",
 				method: "POST",
 				data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
-			}).done(function (msg) {
-				preview.innerHTML = msg;
-			});
+			}).done(cb);
 		}
 
 		// Pretty markdown input
@@ -31,9 +29,9 @@
 			autoDownloadFontAwesome: false,
 			previewRender: function(plainText, preview){ // Async method
 				clearTimeout(lastAPICall);
-				lastAPICall = setTimeout(function (plainText, preview){
-					customMarkdownParser(plainText, preview);
-				}, 300, plainText, preview);
+				lastAPICall = setTimeout(() => {
+					customMarkdownParser(plainText, (msg) => preview.innerHTML = msg);
+				}, 300);
 				return preview.innerHTML;
 			},
 			forceSync: true, // Avoid validation error on generic create view
@@ -169,4 +167,4 @@
 			]
 		});
 	</script>
-</div>
\ No newline at end of file
+</div>

From 13312e98799fdcbdb4b8fa09e96ebf65dc614faf Mon Sep 17 00:00:00 2001
From: tleb <theo.lebrun@live.fr>
Date: Tue, 15 Oct 2019 09:54:10 +0200
Subject: [PATCH 2/5] Highlight a markdown input in red if required and submit
 is pressed

Kind of copy the behaviour of a Firefox input
Once the submit button has been pressed, highlight in red the text
input if it's required but empty
---
 core/templates/core/markdown_textarea.jinja | 31 +++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/core/templates/core/markdown_textarea.jinja b/core/templates/core/markdown_textarea.jinja
index eb5b021c..c83497b2 100644
--- a/core/templates/core/markdown_textarea.jinja
+++ b/core/templates/core/markdown_textarea.jinja
@@ -166,5 +166,36 @@
 				},
 			]
 		});
+
+		$(function() {
+			let textarea = document.getElementById('{{ widget.attrs.id }}')
+			let submit = textarea
+				.closest('form')
+				.querySelector('input[type="submit"]')
+			let parentDiv = textarea.parentElement
+			let submitPressed = false
+
+			function checkMarkdownInput() {
+				// an attribute is null if it does not exist, else a string
+				let required = textarea.getAttribute('required') != null
+				let length = textarea.value.trim().length
+
+				if (required && length == 0) {
+					parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px'
+				} else {
+					parentDiv.style.boxShadow = ''
+				}
+			}
+
+			submit.addEventListener('click', () => {
+				submitPressed = true
+				checkMarkdownInput()
+			})
+			easymde.codemirror.on('change', () => {
+				if (submitPressed) {
+					checkMarkdownInput()
+				}
+			})
+		})
 	</script>
 </div>

From 0011f4c7b0b97eebb0a2c23091f54706ba773504 Mon Sep 17 00:00:00 2001
From: tleb <theo.lebrun@live.fr>
Date: Tue, 15 Oct 2019 10:23:15 +0200
Subject: [PATCH 3/5] Only register onchange once the submit button has been
 pressed

---
 core/templates/core/markdown_textarea.jinja | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/core/templates/core/markdown_textarea.jinja b/core/templates/core/markdown_textarea.jinja
index c83497b2..733aed97 100644
--- a/core/templates/core/markdown_textarea.jinja
+++ b/core/templates/core/markdown_textarea.jinja
@@ -188,14 +188,12 @@
 			}
 
 			submit.addEventListener('click', () => {
+				if (!submitPressed) {
+					easymde.codemirror.on('change', checkMarkdownInput)
+				}
 				submitPressed = true
 				checkMarkdownInput()
 			})
-			easymde.codemirror.on('change', () => {
-				if (submitPressed) {
-					checkMarkdownInput()
-				}
-			})
 		})
 	</script>
 </div>

From e932abfa74b4b97f3bed470ba7052317ce84f31e Mon Sep 17 00:00:00 2001
From: tleb <theo.lebrun@live.fr>
Date: Tue, 15 Oct 2019 10:41:10 +0200
Subject: [PATCH 4/5] Prevent pressing submit if the Markdown widget is empty

---
 core/templates/core/markdown_textarea.jinja | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/core/templates/core/markdown_textarea.jinja b/core/templates/core/markdown_textarea.jinja
index 733aed97..f23b41c3 100644
--- a/core/templates/core/markdown_textarea.jinja
+++ b/core/templates/core/markdown_textarea.jinja
@@ -175,24 +175,25 @@
 			let parentDiv = textarea.parentElement
 			let submitPressed = false
 
-			function checkMarkdownInput() {
+			function checkMarkdownInput(e) {
 				// an attribute is null if it does not exist, else a string
 				let required = textarea.getAttribute('required') != null
 				let length = textarea.value.trim().length
 
 				if (required && length == 0) {
 					parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px'
+					e.preventDefault()
 				} else {
 					parentDiv.style.boxShadow = ''
 				}
 			}
 
-			submit.addEventListener('click', () => {
+			submit.addEventListener('click', (e) => {
 				if (!submitPressed) {
 					easymde.codemirror.on('change', checkMarkdownInput)
 				}
 				submitPressed = true
-				checkMarkdownInput()
+				checkMarkdownInput(e)
 			})
 		})
 	</script>

From 7ecb057b68923b274114c6c180618a6e4c90ae2c Mon Sep 17 00:00:00 2001
From: tleb <theo.lebrun@live.fr>
Date: Wed, 16 Oct 2019 12:18:23 +0200
Subject: [PATCH 5/5] Isolate easymde instances so that they can be referenced

---
 core/templates/core/markdown_textarea.jinja | 355 ++++++++++----------
 1 file changed, 179 insertions(+), 176 deletions(-)

diff --git a/core/templates/core/markdown_textarea.jinja b/core/templates/core/markdown_textarea.jinja
index f23b41c3..5d769011 100644
--- a/core/templates/core/markdown_textarea.jinja
+++ b/core/templates/core/markdown_textarea.jinja
@@ -5,195 +5,198 @@
 	{# The easymde script can be included twice, it's safe in the code #}
 	<script src="{{ statics.js }}"> </script>
 	<script type="text/javascript">
-		var css = "{{ statics.css }}";
-		var lastAPICall;
-
-		// Only import the css once
-		if (!document.head.innerHTML.includes(css)){
-			document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
-		}
-
-		// Custom markdown parser
-		function customMarkdownParser(plainText, cb) {
-			$.ajax({
-				url: "{{ markdown_api_url }}",
-				method: "POST",
-				data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
-			}).done(cb);
-		}
-
-		// Pretty markdown input
-		var easymde = new EasyMDE({
-			element: document.getElementById("{{ widget.attrs.id }}"),
-			spellChecker: false,
-			autoDownloadFontAwesome: false,
-			previewRender: function(plainText, preview){ // Async method
-				clearTimeout(lastAPICall);
-				lastAPICall = setTimeout(() => {
-					customMarkdownParser(plainText, (msg) => preview.innerHTML = msg);
-				}, 300);
-				return preview.innerHTML;
-			},
-			forceSync: true, // Avoid validation error on generic create view
-			toolbar: [
-				{
-					name: "heading-smaller",
-					action: EasyMDE.toggleHeadingSmaller,
-					className: "fa fa-header",
-					title: "{{ translations.heading_smaller }}"
-				},
-				{
-					name: "italic",
-					action: EasyMDE.toggleItalic,
-					className: "fa fa-italic",
-					title: "{{ translations.italic }}"
-				},
-				{
-					name: "bold",
-					action: EasyMDE.toggleBold,
-					className: "fa fa-bold",
-					title: "{{ translations.bold }}"
-				},
-				{
-					name: "strikethrough",
-					action: EasyMDE.toggleStrikethrough,
-					className: "fa fa-strikethrough",
-					title: "{{ translations.strikethrough }}"
-				},
-				{
-					name: "underline",
-					action: function customFunction(editor){
-						var cm = editor.codemirror;
-						cm.replaceSelection('__' + cm.getSelection() + '__');
-					},
-					className: "fa fa-underline",
-					title: "{{ translations.underline }}"
-				},
-				{
-					name: "superscript",
-					action: function customFunction(editor){
-						var cm = editor.codemirror;
-						cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
-					},
-					className: "fa fa-superscript",
-					title: "{{ translations.superscript }}"
-				},
-				{
-					name: "subscript",
-					action: function customFunction(editor){
-						var cm = editor.codemirror;
-						cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
-					},
-					className: "fa fa-subscript",
-					title: "{{ translations.subscript }}"
-				},
-				{
-					name: "code",
-					action: EasyMDE.toggleCodeBlock,
-					className: "fa fa-code",
-					title: "{{ translations.code }}"
-				},
-				"|",
-				{
-					name: "quote",
-					action: EasyMDE.toggleBlockquote,
-					className: "fa fa-quote-left",
-					title: "{{ translations.quote }}"
-				},
-				{
-					name: "unordered-list",
-					action: EasyMDE.toggleUnorderedList,
-					className: "fa fa-list-ul",
-					title: "{{ translations.unordered_list }}"
-				},
-				{
-					name: "ordered-list",
-					action: EasyMDE.toggleOrderedList,
-					className: "fa fa-list-ol",
-					title: "{{ translations.ordered_list }}"
-				},
-				"|",
-				{
-					name: "link",
-					action: EasyMDE.drawLink,
-					className: "fa fa-link",
-					title: "{{ translations.link }}"
-				},
-				{
-					name: "image",
-					action: EasyMDE.drawImage,
-					className: "fa fa-picture-o",
-					title: "{{ translations.image }}"
-				},
-				{
-					name: "table",
-					action: EasyMDE.drawTable,
-					className: "fa fa-table",
-					title: "{{ translations.table }}"
-				},
-				"|",
-				{
-					name: "clean-block",
-					action: EasyMDE.cleanBlock,
-					className: "fa fa-eraser fa-clean-block",
-					title: "{{ translations.clean_block }}"
-				},
-				"|",
-				{
-					name: "preview",
-					action: EasyMDE.togglePreview,
-					className: "fa fa-eye no-disable",
-					title: "{{ translations.preview }}"
-				},
-				{
-					name: "side-by-side",
-					action: EasyMDE.toggleSideBySide,
-					className: "fa fa-columns no-disable no-mobile",
-					title: "{{ translations.side_by_side }}"
-				},
-				{
-					name: "fullscreen",
-					action: EasyMDE.toggleFullScreen,
-					className: "fa fa-arrows-alt no-disable no-mobile",
-					title: "{{ translations.fullscreen }}"
-				},
-				"|",
-				{
-					name: "guide",
-					action: "/page/Aide_sur_la_syntaxe",
-					className: "fa fa-question-circle",
-					title: "{{ translations.guide }}"
-				},
-			]
-		});
-
 		$(function() {
-			let textarea = document.getElementById('{{ widget.attrs.id }}')
-			let submit = textarea
+			const css = "{{ statics.css }}";
+			let lastAPICall;
+
+			// Only import the css once
+			if (!document.head.innerHTML.includes(css)) {
+				document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
+			}
+
+			// Custom markdown parser
+			function customMarkdownParser(plainText, cb) {
+				$.ajax({
+					url: "{{ markdown_api_url }}",
+					method: "POST",
+					data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
+				}).done(cb);
+			}
+
+			// Pretty markdown input
+			const easymde = new EasyMDE({
+				element: document.getElementById("{{ widget.attrs.id }}"),
+				spellChecker: false,
+				autoDownloadFontAwesome: false,
+				previewRender: function(plainText, preview) { // Async method
+					clearTimeout(lastAPICall);
+					lastAPICall = setTimeout(() => {
+						customMarkdownParser(plainText, (msg) => preview.innerHTML = msg);
+					}, 300);
+					return preview.innerHTML;
+				},
+				forceSync: true, // Avoid validation error on generic create view
+				toolbar: [
+					{
+						name: "heading-smaller",
+						action: EasyMDE.toggleHeadingSmaller,
+						className: "fa fa-header",
+						title: "{{ translations.heading_smaller }}"
+					},
+					{
+						name: "italic",
+						action: EasyMDE.toggleItalic,
+						className: "fa fa-italic",
+						title: "{{ translations.italic }}"
+					},
+					{
+						name: "bold",
+						action: EasyMDE.toggleBold,
+						className: "fa fa-bold",
+						title: "{{ translations.bold }}"
+					},
+					{
+						name: "strikethrough",
+						action: EasyMDE.toggleStrikethrough,
+						className: "fa fa-strikethrough",
+						title: "{{ translations.strikethrough }}"
+					},
+					{
+						name: "underline",
+						action: function customFunction(editor){
+							let cm = editor.codemirror;
+							cm.replaceSelection('__' + cm.getSelection() + '__');
+						},
+						className: "fa fa-underline",
+						title: "{{ translations.underline }}"
+					},
+					{
+						name: "superscript",
+						action: function customFunction(editor){
+							let cm = editor.codemirror;
+							cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
+						},
+						className: "fa fa-superscript",
+						title: "{{ translations.superscript }}"
+					},
+					{
+						name: "subscript",
+						action: function customFunction(editor){
+							let cm = editor.codemirror;
+							cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
+						},
+						className: "fa fa-subscript",
+						title: "{{ translations.subscript }}"
+					},
+					{
+						name: "code",
+						action: EasyMDE.toggleCodeBlock,
+						className: "fa fa-code",
+						title: "{{ translations.code }}"
+					},
+					"|",
+					{
+						name: "quote",
+						action: EasyMDE.toggleBlockquote,
+						className: "fa fa-quote-left",
+						title: "{{ translations.quote }}"
+					},
+					{
+						name: "unordered-list",
+						action: EasyMDE.toggleUnorderedList,
+						className: "fa fa-list-ul",
+						title: "{{ translations.unordered_list }}"
+					},
+					{
+						name: "ordered-list",
+						action: EasyMDE.toggleOrderedList,
+						className: "fa fa-list-ol",
+						title: "{{ translations.ordered_list }}"
+					},
+					"|",
+					{
+						name: "link",
+						action: EasyMDE.drawLink,
+						className: "fa fa-link",
+						title: "{{ translations.link }}"
+					},
+					{
+						name: "image",
+						action: EasyMDE.drawImage,
+						className: "fa fa-picture-o",
+						title: "{{ translations.image }}"
+					},
+					{
+						name: "table",
+						action: EasyMDE.drawTable,
+						className: "fa fa-table",
+						title: "{{ translations.table }}"
+					},
+					"|",
+					{
+						name: "clean-block",
+						action: EasyMDE.cleanBlock,
+						className: "fa fa-eraser fa-clean-block",
+						title: "{{ translations.clean_block }}"
+					},
+					"|",
+					{
+						name: "preview",
+						action: EasyMDE.togglePreview,
+						className: "fa fa-eye no-disable",
+						title: "{{ translations.preview }}"
+					},
+					{
+						name: "side-by-side",
+						action: EasyMDE.toggleSideBySide,
+						className: "fa fa-columns no-disable no-mobile",
+						title: "{{ translations.side_by_side }}"
+					},
+					{
+						name: "fullscreen",
+						action: EasyMDE.toggleFullScreen,
+						className: "fa fa-arrows-alt no-disable no-mobile",
+						title: "{{ translations.fullscreen }}"
+					},
+					"|",
+					{
+						name: "guide",
+						action: "/page/Aide_sur_la_syntaxe",
+						className: "fa fa-question-circle",
+						title: "{{ translations.guide }}"
+					},
+				]
+			});
+
+			const textarea = document.getElementById('{{ widget.attrs.id }}');
+			const submits = textarea
 				.closest('form')
-				.querySelector('input[type="submit"]')
-			let parentDiv = textarea.parentElement
-			let submitPressed = false
+				.querySelectorAll('input[type="submit"]');
+			const parentDiv = textarea.parentElement;
+			let submitPressed = false;
 
 			function checkMarkdownInput(e) {
 				// an attribute is null if it does not exist, else a string
-				let required = textarea.getAttribute('required') != null
-				let length = textarea.value.trim().length
+				const required = textarea.getAttribute('required') != null;
+				const length = textarea.value.trim().length;
 
 				if (required && length == 0) {
-					parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px'
-					e.preventDefault()
+					parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px';
 				} else {
-					parentDiv.style.boxShadow = ''
+					parentDiv.style.boxShadow = '';
 				}
 			}
 
-			submit.addEventListener('click', (e) => {
+			function onSubmitClick(e) {
 				if (!submitPressed) {
-					easymde.codemirror.on('change', checkMarkdownInput)
+					easymde.codemirror.on('change', checkMarkdownInput);
 				}
-				submitPressed = true
-				checkMarkdownInput(e)
+				submitPressed = true;
+				checkMarkdownInput(e);
+			}
+
+			submits.forEach((submit) => {
+				submit.addEventListener('click', onSubmitClick);
 			})
 		})
 	</script>