core: handle all basic editing actions in MarkdownInput

core/templates/core/markdown_textarea.jinja

@@ -1,4 +1,5 @@
 <div>
+	{# Depends on this package https://github.com/sparksuite/simplemde-markdown-editor #}
 	<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
 
 	{# The simplemde script can be included twice, it's safe in the code #}
@@ -49,12 +50,137 @@
 			previewRender: function(plainText, preview){ // Async method
 				return customMarkdownParser(plainText, preview);
 			},
-			showIcons: ["code", "table", "clean-block"]
+			// showIcons: ["code", "table", "clean-block"],
-		});
+			toolbar: [
-
+				{
-		// Change the behavior of the markdown guide button to use our page
+					name: "heading",
-		$("[title='Markdown Guide']").each(function() {
+					action: SimpleMDE.toogleHeadingSmaller,
-			$(this).prop("href", "/page/Aide_sur_la_syntaxe/");
+					className: "fa fa-header",
+					title: "Heading"
+				},
+				{
+					name: "italic",
+					action: SimpleMDE.toggleItalic,
+					className: "fa fa-italic",
+					title: "Italic"
+				},
+				{
+					name: "bold",
+					action: SimpleMDE.toggleBold,
+					className: "fa fa-bold",
+					title: "Bold"
+				},
+				{
+					name: "strikethrough",
+					action: SimpleMDE.toggleStrikethrough,
+					className: "fa fa-strikethrough",
+					title: "Strikethrough"
+				},
+				{
+					name: "underline",
+					action: function customFunction(editor){
+						var cm = editor.codemirror;
+						cm.replaceSelection('__' + cm.getSelection() + '__');
+					},
+					className: "fa fa-underline",
+					title: "Underline"
+				},
+				{
+					name: "sup",
+					action: function customFunction(editor){
+						var cm = editor.codemirror;
+						cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
+					},
+					className: "fa fa-superscript",
+					title: "Sup"
+				},
+				{
+					name: "sub",
+					action: function customFunction(editor){
+						var cm = editor.codemirror;
+						cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
+					},
+					className: "fa fa-subscript",
+					title: "Sub"
+				},
+				{
+					name: "code",
+					action: SimpleMDE.toggleCodeBlock,
+					className: "fa fa-code",
+					title: "Code"
+				},
+				"|",
+				{
+					name: "quote",
+					action: SimpleMDE.toggleBlockquote,
+					className: "fa fa-quote-left",
+					title: "Quote"
+				},
+				{
+					name: "unordered-list",
+					action: SimpleMDE.toggleUnorderedList,
+					className: "fa fa-list-ul",
+					title: "Generic List"
+				},
+				{
+					name: "ordered-list",
+					action: SimpleMDE.toggleOrderedList,
+					className: "fa fa-list-ol",
+					title: "Numbered List"
+				},
+				"|",
+				{
+					name: "link",
+					action: SimpleMDE.drawLink,
+					className: "fa fa-link",
+					title: "Create Link"
+				},
+				{
+					name: "image",
+					action: SimpleMDE.drawImage,
+					className: "fa fa-picture-o",
+					title: "Insert Image"
+				},
+				{
+					name: "table",
+					action: SimpleMDE.drawTable,
+					className: "fa fa-table",
+					title: "Insert Table"
+				},
+				"|",
+				{
+					name: "clean-block",
+					action: SimpleMDE.cleanBlock,
+					className: "fa fa-eraser fa-clean-block",
+					title: "Clean block"
+				},
+				"|",
+				{
+					name: "preview",
+					action: SimpleMDE.togglePreview,
+					className: "fa fa-eye no-disable",
+					title: "Toggle Preview"
+				},
+				{
+					name: "side-by-side",
+					action: SimpleMDE.toggleSideBySide,
+					className: "fa fa-columns no-disable no-mobile",
+					title: "Toggle Side by Side"
+				},
+				{
+					name: "fullscreen",
+					action: SimpleMDE.toggleFullScreen,
+					className: "fa fa-arrows-alt no-disable no-mobile",
+					title: "Toggle Fullscreen"
+				},
+				"|",
+				{
+					name: "guide",
+					action: "/page/Aide_sur_la_syntaxe",
+					className: "fa fa-question-circle",
+					title: "Markdown Guide"
+				},
+			]
 		});
 	</script>
 </div>