Sith/core/templates/core/markdown_textarea.jinja

<div>
	{# Depends on this package https://github.com/lonaru/easy-markdown-editor #}
	<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>

	{# The easymde script can be included twice, it's safe in the code #}
	<script src="{{ statics.js }}"> </script>
	<script type="text/javascript">
		$(function() {
			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')
				.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
				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';
				} else {
					parentDiv.style.boxShadow = '';
				}
			}

			function onSubmitClick(e) {
				if (!submitPressed) {
					easymde.codemirror.on('change', checkMarkdownInput);
				}
				submitPressed = true;
				checkMarkdownInput(e);
			}

			submits.forEach((submit) => {
				submit.addEventListener('click', onSubmitClick);
			})
		})
	</script>
</div>