class Editor { constructor (params = {}){ this.value = params.value || "//\nadd code here\n\n\n"; this.theme = params.theme ? params.theme + "Mode" : "darkMode"; this.width = params.width || "800px"; this.height = params.height || "auto"; this.fontSize = params.fontSize || "16px"; this.render } toString() { return this.value.trim(); } render() { // modified from https://observablehq.com/@benatkin/codemirror-iframe let value = this.value, t = this.theme; let fn = ({CodeMirror} = {}) => { return ({id, value, t}) => { CodeMirror.defineSimpleMode("RiScript", { start: [ //RiScript { regex: /\[([^\]]*\|)+[^\]]*\]/g, token: "choice" }, //choices { regex: /(\.[\w]+()?)/g, token: "transform" }, //transforms { regex: /\$\w+/g, token: "symbol" }, //symbol { regex: /#\w+/g, token: "static" }, //static symbol { regex: /\/\/.*/g, token: "comment" }, //single line comment { regex: /\/\*/, token: "comment", next: "comment" }, //multi lines comment ], comment: [ {regex: /.*?\*\//, token: "comment", next: "start"}, {regex: /.*/, token: "comment"} ], }); const cm = CodeMirror(document.body, { value, mode: 'RiScript', theme: t, lineNumbers: true }) CodeMirror.modeURL = 'https://codemirror.net/mode/%N/%N.js' 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}`) }, 300) } } const randomId = `el${Math.floor(Math.random() * 1000000)}` const frameSrc = ` ` const frameStyle = `width: ` + this.width + `;height: ` + this.height + `; border: 0; overflow-y: auto;` const frame = html`` const messageListener = event => { if (document.contains(frame)) { if (event.data.id == randomId) { if (event.data.value != undefined) { this.value = event.data.value; frame.value = event.data.value frame.dispatchEvent(new CustomEvent("input")) } frame.style.height = `${event.data.height}px` } } else { window.removeEventListener('message', messageListener) } } window.addEventListener('message', messageListener, false) frame.srcdoc = frameSrc return frame } }