function editor(params) { //not used at moment const value = params.value || "//\nadd code here\n\n\n"; const theme = params.theme ? params.theme + "Mode" : "darkMode"; const width = params.width || "800px"; const height = params.height || "auto"; const fontSize = params.fontSize || "16px"; // modified from https://observablehq.com/@benatkin/codemirror-iframe let t = 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: "dynamic" }, //dynamic 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: ` + width + `;height: ` + 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) { value = event.data.value; 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 = (() => md`${RiTa.evaluate(value.trim())}`)(); return frame; }