mirror of
https://codeberg.org/setop/elm-markitup.git
synced 2025-10-10 23:49:59 +00:00
59 lines
2.8 KiB
JavaScript
59 lines
2.8 KiB
JavaScript
const mySettings = {
|
|
onTab: { keepDefault: true },
|
|
onShiftEnter: { keepDefault: false, openWith: '\n\n' },
|
|
markupSet: [
|
|
{ name:'Heading 1', key:"1", className: 'h1', openWith:'# ', placeHolder:'Your title here...' },
|
|
{ name:'Heading 2', key:"2", className: 'h2', openWith:'## ', placeHolder:'Your title here...' },
|
|
{ name:'Heading 3', key:"3", className: 'h3', openWith:'### ', placeHolder:'Your title here...' },
|
|
{ name:'Heading 4', key:"4", className: 'h4', openWith:'#### ', placeHolder:'Your title here...' },
|
|
{ name:'Heading 5', key:"5", className: 'h5', openWith:'##### ', placeHolder:'Your title here...' },
|
|
{ name:'Heading 6', key:"6", className: 'h6', openWith:'###### ', placeHolder:'Your title here...' },
|
|
{ separator: '---------------' },
|
|
{ name: 'Bold', openWith: '**', closeWith: '**', className: 'bold' },
|
|
{ name: 'Italic', openWith: '__', closeWith: '__', className: 'italic' },
|
|
{ name: 'Stroke', openWith: '~~', closeWith: '~~', className: 'stroke' },
|
|
{ name: 'Teletype', openWith: '`', closeWith: '`', className: 'teletype' },
|
|
{ separator: '---------------' },
|
|
{ name: 'Ruler', openWith: '---\n', closeWith: '', className: 'ruler' },
|
|
{ name: 'Bulleted List', openWith: '* ', className: 'list-bullet'},
|
|
{ name: 'Numeric List', className: 'list-numeric', openWith: function(m) { return m.line + '. '; } },
|
|
{ name: 'Task List', className: 'list-task', openWith: '- [ ] ', placeHolder: "task", closeWith:'\n' },
|
|
{ separator: '---------------' },
|
|
{ name: 'Picture', openWith: '', placeHolder: "Titre de l'image", className: 'image' },
|
|
{ name: 'Link', openWith: '[', closeWith: ']([![Url:!:http://]!])', placeHolder: 'Texte du lien', className: 'link' },
|
|
{ separator: '---------------' },
|
|
{ name: 'Quotes', openWith: '> ', className: 'quotes' },
|
|
{ name: 'Code Block', className: 'code', openWith:'```[![langage:!:mermaid]!]\n', placeHolder: "code", closeWith:'\n```', multiline:false },
|
|
]
|
|
};
|
|
|
|
customElements.define('markitup-textarea', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._editor = document.createElement("textarea");
|
|
}
|
|
|
|
get editorValue() {
|
|
return this._editor.value;
|
|
}
|
|
|
|
set editorValue(value) {
|
|
if (this._editor.value === value) return;
|
|
if (!this._editor) return;
|
|
this._editor.value = value;
|
|
}
|
|
|
|
connectedCallback() {
|
|
const on = (e) => {
|
|
//console.debug("customElements markitup-textarea event", e);
|
|
this.dispatchEvent(new CustomEvent('editorChanged'));
|
|
};
|
|
this._editor.onchange = on;
|
|
this._editor.oninput = on;
|
|
this.appendChild(this._editor)
|
|
jQuery(this._editor).markItUp(mySettings); // decorate the textarea with toolbar
|
|
}
|
|
});
|
|
|
|
|