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: '![', closeWith: ']([![Url:!:http://]!])', 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
  }
});