Skip to content

GitLab

Commit 6d0eba6b authored by Sli's avatar Sli
Browse files

Merge branch 'rework-front' into 'master' 

Markdown widget follows the required attribute

See merge request ae/Sith!249
parents 4d04b21f 7ecb057b
Pipeline #2108 passed with stage
in 49 minutes and 45 seconds
Hide whitespace changes
Inline Side-by-side
core/templates/core/markdown_textarea.jinja
View file @ 6d0eba6b
...@@ -5,168 +5,199 @@ ...@@ -5,168 +5,199 @@
{# The easymde script can be included twice, it's safe in the code #} {# The easymde script can be included twice, it's safe in the code #}
<script src="{{ statics.js }}"> </script> <script src="{{ statics.js }}"> </script>
<script type="text/javascript"> <script type="text/javascript">
var css = "{{ statics.css }}"; $(function() {
var lastAPICall; const css = "{{ statics.css }}";
let lastAPICall;
// Only import the css once // Only import the css once
if (!document.head.innerHTML.includes(css)){ if (!document.head.innerHTML.includes(css)) {
document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">'; document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
} }
// Custom markdown parser // Custom markdown parser
function customMarkdownParser(plainText, preview) { function customMarkdownParser(plainText, cb) {
$.ajax({ $.ajax({
url: "{{ markdown_api_url }}", url: "{{ markdown_api_url }}",
method: "POST", method: "POST",
data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() }, data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
}).done(function (msg) { }).done(cb);
preview.innerHTML = msg; }
// 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 }}"
},
]
}); });
}
// Pretty markdown input const textarea = document.getElementById('{{ widget.attrs.id }}');
var easymde = new EasyMDE({ const submits = textarea
element: document.getElementById("{{ widget.attrs.id }}"), .closest('form')
spellChecker: false, .querySelectorAll('input[type="submit"]');
autoDownloadFontAwesome: false, const parentDiv = textarea.parentElement;
previewRender: function(plainText, preview){ // Async method let submitPressed = false;
clearTimeout(lastAPICall);
lastAPICall = setTimeout(function (plainText, preview){ function checkMarkdownInput(e) {
customMarkdownParser(plainText, preview); // an attribute is null if it does not exist, else a string
}, 300, plainText, preview); const required = textarea.getAttribute('required') != null;
return preview.innerHTML; const length = textarea.value.trim().length;
},
forceSync: true, // Avoid validation error on generic create view if (required && length == 0) {
toolbar: [ parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px';
{ } else {
name: "heading-smaller", parentDiv.style.boxShadow = '';
action: EasyMDE.toggleHeadingSmaller, }
className: "fa fa-header", }
title: "{{ translations.heading_smaller }}"
}, function onSubmitClick(e) {
{ if (!submitPressed) {
name: "italic", easymde.codemirror.on('change', checkMarkdownInput);
action: EasyMDE.toggleItalic, }
className: "fa fa-italic", submitPressed = true;
title: "{{ translations.italic }}" checkMarkdownInput(e);
}, }
{
name: "bold", submits.forEach((submit) => {
action: EasyMDE.toggleBold, submit.addEventListener('click', onSubmitClick);
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 }}"
},
]
});
</script> </script>
</div> </div>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment