working implementation

js/custom-element-markitup.js

@@ -0,0 +1,58 @@
+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
+  }
+});
+
+