30:T750,{ return editor({ value: "x + 1 +", options: { gutter: true, }, grammar: testGrammar, on: { beforeSelectionChange(marks) { console.log("beforeSelectionChange", marks) } }, marks: { endOfLine: { _markText: true, _bookmarkEnd: (existing, value, node) => ({insertLeft: true, widget: html`› ${node.sourceString}`}), Exp: true, }, cursorNumber: { number: {}, }, syntaxHighlighting: { _markText: (doc, start, end, value, node) => doc.markText(start, end, value), _terminal: { "+": {className: 'cm-meta'}, }, number: {className: 'cm-number'}, ident: {className: 'cm-keyword'}, }, }, }) // comment // comment.block // comment.line // comment.line.double-slash // constant.character.escape // entity.name.function // entity.name.tag // entity.name.type // entity.other.inherited-class // invalid.illegal.string // keyword.operator // punctuation // punctuation.definition.string.begin // punctuation.definition.string.end // punctuation.whitespace.comment.leading // string.quoted.double // support.class // variable.parameter // "cm-keyword" // "cm-atom" // "cm-number" // "cm-def" // "cm-variable" // "cm-punctuation" // "cm-property" // "cm-operator" // "cm-variable-2" // "cm-variable-3" // "cm-meta" // "cm-comment" // "cm-string" // "cm-string-2" // "cm-qualifier" // "cm-builtin" // "cm-quote" // "cm-bracket" // "cm-tag" // "cm-attribute" // "cm-hr" // "cm-link" // "cm-plus" // "cm-minus" // "cm-error" // "cm-invalidchar" }31:T25c8,function editor(config = {}) { let {value, height, width, style, grammar, semantics, marks, on, maxTimeWindow, onMatch, options} = config; if (typeof config == "string") value = config; if (value == null) value = ""; if (maxTimeWindow == null) { maxTimeWindow = 50 } const errorColor = '#c42e2a' const errorGutterName = "editor-error-gutter" let div = html`

${grammar ? html`

` : ''}

` // div.style.border = '1px solid #ccc'; // div.style.borderRadius = '3px'; Object.assign(div.style, style) const errorMessageDiv = div.querySelector('div.editor-error-message') const editor = CodeMirror(div, Object.assign({ gutters: [errorGutterName], }, options)); editor.setSize(width, height); const markIdTag = Symbol("markId") const markValueTag = Symbol("markValue") const subsemantics = grammar && (semantics ? grammar.extendSemantics(semantics) : grammar.createSemantics()) let markAttributes = marks && grammar && Object.entries(marks).map( ([markName, markDef]) => [markName, markDef, new IncrementalSemanticAttribute(grammar, markDef, subsemantics, markName)]) let previousMarks = [] function fireSelectionChange({ranges, origin}) { // console.log('beforeSelectionChange', {ranges, origin}) const doc = editor.doc let activeMarks = undefined let markIx = 0 function considerMarks(marks) { // console.log('considerMarks', marks) for (const mark of marks) { if (mark[markIdTag] === undefined) { continue } if (activeMarks === undefined) { if (previousMarks[markIx] === mark) { ++markIx continue } activeMarks = previousMarks.slice(0, markIx) } activeMarks.push(mark) ++markIx } } for (const {anchor, head} of ranges) { if (anchor.line === head.line && anchor.ch === head.ch) { considerMarks(doc.findMarksAt(anchor)) } else if (anchor.line < head.line || (anchor.line === head.line && anchor.ch <= head.ch)) { considerMarks( doc.findMarks( Object.assign({sticky: "before"}, anchor), head, )) } else { considerMarks( doc.findMarks( Object.assign({sticky: "before"}, head), anchor, )) } } if (activeMarks === undefined && previousMarks.length !== markIx) { activeMarks = previousMarks.slice(0, markIx) } if (activeMarks !== undefined) { previousMarks = activeMarks on.beforeSelectionChange(activeMarks.map(mark => ({type: mark[markIdTag], mark, ...mark[markValueTag]}))) } } if (on && markAttributes && markAttributes.length > 0) { if (on.beforeSelectionChange) { let previousMarks = [] const doc = editor.doc doc.on('beforeSelectionChange', function(cmInstance, {ranges, update, origin}) { fireSelectionChange({ranges, origin}) }) } } let matcher = grammar && grammar.matcher(); let parseErrorWidget = undefined const markIdsToClear = new Set() function markInterval(markId, interval, options, value) { markIdsToClear.add(markId) const doc = editor.doc const from = doc.posFromIndex(interval.startIdx) const to = doc.posFromIndex(interval.endIdx) const mark = doc.markText(from, to, options) mark[markIdTag] = markId mark[markValueTag] = value return mark } if (markAttributes) { markAttributes.forEach(([markId, markDef, markAttribute]) => markIdsToClear.add(markId)) } function clearMatchingMarks(markId, marks) { for (const mark of marks) { if (mark[markIdTag] === markId) { // console.log("clearing mark", markId, mark) mark.clear() } } } if (matcher) { editor.on('beforeChange', function(cmInstance, changeObj) { var insertedText = changeObj.text.join('\n'); var fromIdx = editor.indexFromPos(changeObj.from); var toIdx = editor.indexFromPos(changeObj.to); const doc = editor.doc; matcher.replaceInputRange(fromIdx, toIdx, insertedText); const changedMarks = doc.findMarks(changeObj.from, changeObj.to) for (const mark of changedMarks) { if (markIdsToClear.has(mark[markIdTag])) { mark.clear() } } }); } let errorMark; let errorMessage; const parseTimes = []; const getExpectedTextTimes = []; const onMatchTimes = []; function time(fn) { var startTime = Date.now(); fn(); var endTime = Date.now(); return endTime - startTime; } editor.on('change', (cm, val) => { // console.log('change') if (errorMark) { errorMark.clear() editor.clearGutter(errorGutterName) errorMark = undefined } if (errorMessage) { errorMessageDiv.innerText = '\u00a0'; errorMessageDiv.classList.remove('active') errorMessage = undefined; } let eventValueSet = false let eventValue; let parseNode; if (matcher) { let r; parseTimes.push(time(() => { r = matcher.match(); })); if (parseTimes.length === maxTimeWindow) { parseTimes.shift(); } if (r.succeeded()) { onMatchTimes.push(time(() => { parseNode = subsemantics(r) })) if (onMatchTimes.length === maxTimeWindow) { onMatchTimes.shift(); } } if (onMatch && r.succeeded()) { eventValue = onMatch(parseNode, {editor, markInterval}) eventValueSet = true } if (markAttributes && r.succeeded()) { function maybeCreateBookmark(markId, idx, cs, fn) { const pos = doc.posFromIndex(idx) const existing = doc.findMarksAt(pos).find(m => m[markIdTag] === markId) const bookmarkOptions = fn(existing, cs.value, cs.node) if (bookmarkOptions) { existing && existing.clear() const mark = doc.setBookmark(pos, bookmarkOptions) mark[markIdTag] = markId mark[markValueTag] = cs } } const doc = editor.doc // console.log("markAttributes", markAttributes) markAttributes.forEach(([markId, markDef, markAttribute]) => markAttribute(parseNode).forEach(cs => { // console.log("cs", cs) const source = cs.node.source if (markDef._bookmarkStart) { maybeCreateBookmark(markId, source.startIdx, cs, markDef._bookmarkStart) } if (markDef._bookmarkEnd) { maybeCreateBookmark(markId, source.endIdx, cs, markDef._bookmarkEnd) } if (markDef._markText || (!markDef._bookmarkStart && !markDef._bookmarkEnd)) { const from = doc.posFromIndex(source.startIdx) const to = doc.posFromIndex(source.endIdx) clearMatchingMarks(markId, doc.findMarks(from, to)) const mark = (typeof markDef._markText === 'function') ? markDef._markText(doc, from, to, cs.value, cs.node) : doc.markText(from, to, cs.value) if (mark) { mark[markIdTag] = markId mark[markValueTag] = cs } } }) ) } // Need to refresh region because we clear it before editing fireSelectionChange({ranges: editor.doc.listSelections()}) if (r.failed()) { let expected; getExpectedTextTimes.push(time(() => { expected = r.getExpectedText(); })); let pos = editor.doc.posFromIndex(r.getRightmostFailurePosition()); errorMessage = `Expected ${expected}` errorMessageDiv.innerText = errorMessage errorMessageDiv.classList.add('active') const useTrailingErrorMark = editor.getLine(pos.line).length === pos.ch if (useTrailingErrorMark) { pos.ch-- } errorMark = editor.markText(pos, {line: pos.line, ch: pos.ch+1}, { className: useTrailingErrorMark ? 'editor-syntax-error-mark-trailing' : 'editor-syntax-error-mark', title: errorMessage }) editor.setGutterMarker(pos.line, errorGutterName, html`

`) } } if (!onMatch) { eventValue = editor.getValue() eventValueSet = true } if (eventValueSet) { // console.log("dispatch") div.value = eventValue div.dispatchEvent(new CustomEvent("input")) } }); editor.setValue(value) div.editor = editor if (!onMatch) { div.value = value div.dispatchEvent(new CustomEvent("input")) } return div; }32:T4a2,class IncrementalSemanticAttribute { constructor(grammar, dict, semantics, attributeName) { // Take an Array of nodes, and whenever an _iter node is encountered, splice in its // recursively-flattened children instead. function* iterNodes(nodes) { for (var i = 0; i < nodes.length; ++i) { if (nodes[i]._node.ctorName === '_iter') { yield* iterNodes(nodes[i].children); } else { yield nodes[i]; } } } let latest = [] const declare = (a) => (latest.push(a), a) semantics.addAttribute(attributeName, { _terminal: function() { const value = dict._terminal && dict._terminal[this.sourceString] if (value !== undefined) { return declare({node: this, value}) } }, _nonterminal: function(children) { const value = dict && dict[this._node.ctorName] if (value !== undefined) { return declare({node: this, value}) } // Recurse for (const child of iterNodes(children)) { child[attributeName] } }, }) return (parseNode) => (latest = [], parseNode[attributeName], latest) } }33:T748,function definePlaceholderOption(CodeMirror) { function clearPlaceholder(cm) { if (cm.state.placeholder) { cm.state.placeholder.parentNode.removeChild(cm.state.placeholder); cm.state.placeholder = null; } } function setPlaceholder(cm) { clearPlaceholder(cm); var elt = cm.state.placeholder = document.createElement("pre"); elt.style.cssText = "height: 0; overflow: visible"; elt.style.direction = cm.getOption("direction"); elt.className = "CodeMirror-placeholder"; var placeHolder = cm.getOption("placeholder") if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder) elt.appendChild(placeHolder) cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild); } function isEmpty(cm) { return (cm.lineCount() === 1) && (cm.getLine(0) === ""); } function onBlur(cm) { if (isEmpty(cm)) setPlaceholder(cm); } function onChange(cm) { console.log("onChage") var wrapper = cm.getWrapperElement(), empty = isEmpty(cm); wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : ""); if (empty) setPlaceholder(cm); else clearPlaceholder(cm); } CodeMirror.defineOption("placeholder", "", function(cm, val, old) { console.log("placeholder", val, old) var prev = old && old != CodeMirror.Init; if (val && !prev) { cm.on("blur", onBlur); cm.on("change", onChange); cm.on("swapDoc", onChange); onChange(cm); } else if (!val && prev) { cm.off("blur", onBlur); cm.off("change", onChange); cm.off("swapDoc", onChange); clearPlaceholder(cm); var wrapper = cm.getWrapperElement(); wrapper.className = wrapper.className.replace(" CodeMirror-empty", ""); } if (val && !cm.hasFocus()) onBlur(cm); }); }34:[] 2e:{"title":"An Ohm-based CodeMirror editor","cells":[{"id":0,"value":"# An Ohm-based CodeMirror editor\n\nThis is an implementation of a CodeMirror editor that implements syntax highlighting from the same ohm grammar that your compiler might use. [Learn more about Ohm](https://ohmjs.org/)","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"# Example usage\n\nBelow is an example CodeMirror editor instance for a simple arithmetic-focused grammar. A few things to note in particular:\n\n- Notice that the text at the end of the line updates as you edit the expression. The current implementation just echoes the expression itself, but you might use functionality like this to implement \"live inspection\" of an expression in your programming environment\n- Numbers and variables are parsed and highlighted in different colors.\n- You can edit the grammar farther down the page to define other expression types. See [Ohm's own documentation](https://ohmjs.org/docs/syntax-reference) for details about what's possible\n- You can use the ObservableHQ `viewof` operator to get the current value of the editor instance. Along these lines, the current value of the editor is: `${e}`\n","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"viewof e = {\n return editor({\n value: \"x + 1 + 2*y\",\n options: {\n gutter: true,\n },\n grammar: testGrammar,\n on: {\n beforeSelectionChange(marks) {\n console.log(\"beforeSelectionChange\", marks)\n }\n },\n marks: {\n endOfLine: {\n _markText: true,\n _bookmarkEnd: (existing, value, node) => ({insertLeft: true, widget: html`› ${node.sourceString}`}),\n Exp: true,\n },\n cursorNumber: {\n number: {},\n },\n syntaxHighlighting: {\n _markText: (doc, start, end, value, node) => doc.markText(start, end, value),\n _terminal: {\n \"+\": {className: 'cm-meta'},\n },\n number: {className: 'cm-number'},\n ident: {className: 'cm-keyword'},\n },\n },\n })\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"This editor also live updates to provide feedback about syntax errors. Here's an example of an editor with an error in it:","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"testGrammar = ohm.grammar(`\nArithmetic {\n Exp\n = AddExp*\n AddExp\n = AddExp \"+\" MulExp -- plus\n | AddExp \"-\" MulExp -- minus\n | MulExp\n MulExp\n = MulExp \"*\" ExpExp -- times\n | MulExp \"/\" ExpExp -- divide\n | ExpExp\n ExpExp\n = PriExp \"^\" ExpExp -- power\n | PriExp\n PriExp\n = \"(\" Exp \")\" -- paren\n | \"+\" PriExp -- pos\n | \"-\" PriExp -- neg\n | ident\n | number\n\nident (an identifier)\n = letter alnum*\n number (a number)\n = digit* \".\" digit+ -- fract\n | digit+ -- whole\n}\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"### Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"CodeMirror = {\n const CodeMirror = await require('codemirror@5.46.0')\n definePlaceholderOption(CodeMirror)\n return CodeMirror\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"ohm = require(\"https://unpkg.com/ohm-js@15/dist/ohm.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"css = await (await (await fetch('https://unpkg.com/codemirror@5.46.0/lib/codemirror.css')).text()).replace(/height: 300px;/, '').replace(/font-family: monospace;/, 'font-family: Menlo, Consolas, monospace;')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}