Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
AE UTBM
Sith
Commits
6d0eba6b
Commit
6d0eba6b
authored
Oct 17, 2019
by
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
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
core/templates/core/markdown_textarea.jinja
View file @
6d0eba6b
...
...
@@ -5,168 +5,199 @@
{# The easymde script can be included twice, it's safe in the code #}
<script
src=
"
{{
statics.js
}}
"
>
</script>
<script
type=
"text/javascript"
>
var
css
=
"
{{
statics.css
}}
"
;
var
lastAPICall
;
$
(
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
+
'
">
'
;
}
// 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
,
preview
)
{
$
.
ajax
({
url
:
"
{{
markdown_api_url
}}
"
,
method
:
"
POST
"
,
data
:
{
text
:
plainText
,
csrfmiddlewaretoken
:
getCSRFToken
()
},
}).
done
(
function
(
msg
)
{
preview
.
innerHTML
=
msg
;
// 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
}}
"
},
]
});
}
// Pretty markdown input
var
easymde
=
new
EasyMDE
({
element
:
document
.
getElementById
(
"
{{
widget.attrs.id
}}
"
),
spellChecker
:
false
,
autoDownloadFontAwesome
:
false
,
previewRender
:
function
(
plainText
,
preview
){
// Async method
clearTimeout
(
lastAPICall
);
lastAPICall
=
setTimeout
(
function
(
plainText
,
preview
){
customMarkdownParser
(
plainText
,
preview
);
},
300
,
plainText
,
preview
);
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
){
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
}}
"
},
]
});
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>
\ No newline at end of file
</div>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment