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