2024-10-02 23:45:29 +00:00
|
|
|
import 'codemirror/lib/codemirror.css'
|
|
|
|
import 'easymde/src/css/easymde.css'
|
|
|
|
import EasyMDE from 'easymde'
|
2024-09-17 21:42:05 +00:00
|
|
|
|
2024-10-02 20:06:55 +00:00
|
|
|
// This scripts dependens on Alpine but it should be loaded on every page
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Create a new easymde based textarea
|
|
|
|
* @param {HTMLTextAreaElement} textarea to use
|
|
|
|
* @param {string} link to the markdown api
|
|
|
|
**/
|
2024-10-06 22:10:24 +00:00
|
|
|
export function easymdeFactory (textarea, markdownApiURL) {
|
2024-10-02 20:06:55 +00:00
|
|
|
const easymde = new EasyMDE({
|
|
|
|
element: textarea,
|
|
|
|
spellChecker: false,
|
|
|
|
autoDownloadFontAwesome: false,
|
|
|
|
previewRender: Alpine.debounce(async (plainText, preview) => {
|
2024-10-06 22:10:24 +00:00
|
|
|
const res = await fetch(markdownApiURL, {
|
|
|
|
method: 'POST',
|
|
|
|
body: JSON.stringify({ text: plainText })
|
|
|
|
})
|
|
|
|
preview.innerHTML = await res.text()
|
|
|
|
return null
|
2024-10-02 20:06:55 +00:00
|
|
|
}, 300),
|
|
|
|
forceSync: true, // Avoid validation error on generic create view
|
|
|
|
toolbar: [
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'heading-smaller',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleHeadingSmaller,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-header',
|
|
|
|
title: gettext('Heading')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'italic',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleItalic,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-italic',
|
|
|
|
title: gettext('Italic')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'bold',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleBold,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-bold',
|
|
|
|
title: gettext('Bold')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'strikethrough',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleStrikethrough,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-strikethrough',
|
|
|
|
title: gettext('Strikethrough')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'underline',
|
|
|
|
action: function customFunction (editor) {
|
|
|
|
const cm = editor.codemirror
|
|
|
|
cm.replaceSelection('__' + cm.getSelection() + '__')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-underline',
|
|
|
|
title: gettext('Underline')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'superscript',
|
|
|
|
action: function customFunction (editor) {
|
|
|
|
const cm = editor.codemirror
|
|
|
|
cm.replaceSelection('^' + cm.getSelection() + '^')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-superscript',
|
|
|
|
title: gettext('Superscript')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'subscript',
|
|
|
|
action: function customFunction (editor) {
|
|
|
|
const cm = editor.codemirror
|
|
|
|
cm.replaceSelection('~' + cm.getSelection() + '~')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-subscript',
|
|
|
|
title: gettext('Subscript')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'code',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleCodeBlock,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-code',
|
|
|
|
title: gettext('Code')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
'|',
|
2024-10-02 20:06:55 +00:00
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'quote',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleBlockquote,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-quote-left',
|
|
|
|
title: gettext('Quote')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'unordered-list',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleUnorderedList,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-list-ul',
|
|
|
|
title: gettext('Unordered list')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'ordered-list',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleOrderedList,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-list-ol',
|
|
|
|
title: gettext('Ordered list')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
'|',
|
2024-10-02 20:06:55 +00:00
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'link',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.drawLink,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-link',
|
|
|
|
title: gettext('Insert link')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'image',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.drawImage,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa-regular fa-image',
|
|
|
|
title: gettext('Insert image')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'table',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.drawTable,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-table',
|
|
|
|
title: gettext('Insert table')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
'|',
|
2024-10-02 20:06:55 +00:00
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'clean-block',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.cleanBlock,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-eraser fa-clean-block',
|
|
|
|
title: gettext('Clean block')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
2024-10-06 22:10:24 +00:00
|
|
|
'|',
|
2024-10-02 20:06:55 +00:00
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'preview',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.togglePreview,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-eye no-disable',
|
|
|
|
title: gettext('Toggle preview')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'side-by-side',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleSideBySide,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-columns no-disable no-mobile',
|
|
|
|
title: gettext('Toggle side by side')
|
2024-10-02 20:06:55 +00:00
|
|
|
},
|
|
|
|
{
|
2024-10-06 22:10:24 +00:00
|
|
|
name: 'fullscreen',
|
2024-10-02 20:06:55 +00:00
|
|
|
action: EasyMDE.toggleFullScreen,
|
2024-10-06 22:10:24 +00:00
|
|
|
className: 'fa fa-expand no-mobile',
|
|
|
|
title: gettext('Toggle fullscreen')
|
|
|
|
},
|
|
|
|
'|',
|
|
|
|
{
|
|
|
|
name: 'guide',
|
|
|
|
action: '/page/Aide_sur_la_syntaxe',
|
|
|
|
className: 'fa fa-question-circle',
|
|
|
|
title: gettext('Markdown guide')
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
2024-10-02 20:06:55 +00:00
|
|
|
|
|
|
|
const submits = textarea
|
2024-10-06 22:10:24 +00:00
|
|
|
.closest('form')
|
|
|
|
.querySelectorAll('input[type="submit"]')
|
|
|
|
const parentDiv = textarea.parentElement
|
|
|
|
let submitPressed = false
|
2024-10-02 20:06:55 +00:00
|
|
|
|
2024-10-06 22:10:24 +00:00
|
|
|
function checkMarkdownInput (e) {
|
2024-10-02 20:06:55 +00:00
|
|
|
// an attribute is null if it does not exist, else a string
|
2024-10-06 22:10:24 +00:00
|
|
|
const required = textarea.getAttribute('required') != null
|
|
|
|
const length = textarea.value.trim().length
|
2024-10-02 20:06:55 +00:00
|
|
|
|
2024-10-06 22:10:24 +00:00
|
|
|
if (required && length === 0) {
|
|
|
|
parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px'
|
2024-10-02 20:06:55 +00:00
|
|
|
} else {
|
2024-10-06 22:10:24 +00:00
|
|
|
parentDiv.style.boxShadow = ''
|
2024-10-02 20:06:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-10-06 22:10:24 +00:00
|
|
|
function onSubmitClick (e) {
|
2024-10-02 20:06:55 +00:00
|
|
|
if (!submitPressed) {
|
2024-10-06 22:10:24 +00:00
|
|
|
easymde.codemirror.on('change', checkMarkdownInput)
|
2024-10-02 20:06:55 +00:00
|
|
|
}
|
2024-10-06 22:10:24 +00:00
|
|
|
submitPressed = true
|
|
|
|
checkMarkdownInput(e)
|
2024-10-02 20:06:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
submits.forEach((submit) => {
|
2024-10-06 22:10:24 +00:00
|
|
|
submit.addEventListener('click', onSubmitClick)
|
|
|
|
})
|
2024-10-02 20:06:55 +00:00
|
|
|
};
|
|
|
|
|
2024-10-06 22:10:24 +00:00
|
|
|
window.easymdeFactory = easymdeFactory
|