function codeView({value, mode}) { const fn = ({CodeMirror} = {}) => { return ({id, value, mode}) => { const cm = CodeMirror(document.body, { value, mode, lineNumbers: true }) CodeMirror.modeURL = 'https://codemirror.net/mode/%N/%N.js' CodeMirror.autoLoadMode(cm, mode) cm.on('change', (cm, changes) => { window.parent.postMessage({ id, value: cm.getValue(), height: document.body.offsetHeight }, `https://${document.domain}`) }) setInterval(() => { window.parent.postMessage({ id, height: document.body.offsetHeight }, `https://${document.domain}`) }, 100) } } const randomId = `el${Math.floor(Math.random() * 1000000)}` const frameSrc = ` ` const frameStyle = `width: 100%; height: 50px; border: 0; overflow-y: hidden;` const frame = html`` const messageListener = event => { if (document.contains(frame)) { if (event.data.id === randomId) { if (event.data.value !== undefined) { frame.value = event.data.value frame.dispatchEvent(new CustomEvent("input")) } frame.style.height = `${event.data.height + 30}px` } } else { window.removeEventListener('message', messageListener) } } window.addEventListener('message', messageListener, false) frame.srcdoc = frameSrc frame.value = value return frame }