class CodeMirrorElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); let css_styles = [ "./lib/codemirror.css", "./theme/darcula.css", //"./theme/midnight.css" ]; for(let path of css_styles){ let ele = document.createElement('link'); ele.setAttribute("rel", "stylesheet"); ele.setAttribute("href", path); this.shadowRoot.appendChild(ele); } let js_scripts = [ //"lib/codemirror.js", //"./mode/htmlmixed/htmlmixed.js", //"./mode/css/css.js", //"./mode/xml/xml.js", //"./mode/clike/clike.js", //"./mode/php/php.js" ]; for(let path of js_scripts){ let ele = document.createElement('script'); ele.setAttribute("src", path); this.shadowRoot.appendChild(ele); } this.content_textarea = document.createElement('textarea'); this.content_textarea.setAttribute("rows", 20); this.content_textarea.setAttribute("cols", 150); this.shadowRoot.appendChild(this.content_textarea); this.slot_ele = document.createElement('slot'); this.shadowRoot.appendChild(this.slot_ele); } connectedCallback(){ let style = this.hasAttribute('style') ? this.getAttribute('style') : ""; this.content_textarea.style = style; let language = this.hasAttribute('language') ? this.getAttribute('language') : "text/x-php"; let theme = this.hasAttribute('theme') ? this.getAttribute('theme') : "darcula"; let width = Number(this.hasAttribute('width') ? this.getAttribute('width') : "800"); let height = Number(this.hasAttribute('height') ? this.getAttribute('height') : "600"); const editor = CodeMirror.fromTextArea(this.content_textarea, { lineNumbers: true, matchBrackets: true, styleActiveLine: true, theme: theme, mode: language }); editor.setSize(width, height); this.slot_ele.style.display = "none"; let that = this; this.slot_ele.addEventListener('slotchange', e => { let source_code = that.innerHTML; console.log(source_code); /* const editor = CodeMirror.fromTextArea(this.content_textarea, { lineNumbers: true, matchBrackets: true, styleActiveLine: true, theme: theme, mode: language //"text/x-php" }); editor.setSize(width, height); */ //let oldCode = editor.getValue(); editor.setValue(source_code); //this.slot_ele.style.display = "none"; //this.content_textarea.children[0].setAttribute("width", this.content_textarea.style.width); //this.content_textarea.children[0].setAttribute("height", this.content_textarea.style.height); }); } disconnectedCallback() { } attributeChangedCallback(name, oldValue, newValue) { //this.displayVal.innerText = this.value; } get layout(){ } set layout(x){ } get value(){ //dot code } set value(x){ } } customElements.define('code-mirror', CodeMirrorElement);