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] 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>