Published unlisted
Edited
Jul 11, 2019
Insert cell
Insert cell
CodeMirror = require('https://unpkg.com/codemirror@5/lib/codemirror')
.then(CodeMirror => require(
'https://unpkg.com/codemirror@5/mode/javascript/javascript.js',
).then(() => CodeMirror))
Insert cell
html`<style>
${await (await fetch('https://unpkg.com/codemirror/lib/codemirror.css')).text()}
.cm-container {
border: 1px solid;
}`
Insert cell
function cmEditor(opts0) {
const div = html`<div>CodeMirror
<div class='cm-container'></div>`;
const cmDiv = div.querySelector('.cm-container');
const opts = Object.assign({
value: 'function myScript(){return 100;}\n',
mode: 'javascript',
}, opts0);
const editor = CodeMirror(cmDiv, opts);
div.value = editor;
editor.on('change', () => div.dispatchEvent(new CustomEvent('input')));
setTimeout(() => {
editor.setSize('100%', '500');
editor.refresh();
div.style.height = div.clientHeight + 'px';
}, 0);
return div;
}
Insert cell
param = new UrlParam('code')
Insert cell
viewof editor = cmEditor({ value: param.hasData() ? param.getData() : cmEditor.toString() })
Insert cell
value = param.getUrl(editor.getValue())
Insert cell
value.length
Insert cell
Insert cell
import {UrlParam} from '@mootari/triangles-and-circles@802'
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more