0
253
ViewsIs it possible to get JetBrains-style debug-time line hints in Ace Editor?
I currently have ace editor embedded in my browser. I'd like to use line hints when i run code in thr browser application. Does ace offer any such functionality, or would it be advicable to add and delete comments at the end of the line? note that I only want a single character in these hints. I also considered using the gutter in my application, but line numbers are important to me as well
here's an image of my application
I would like to have ~F appear on the green line, and ~D appear on the blue line. This is a RISC ISA executing, but I don't think that should matter.
·
Juan Pablo Isaza
1 answers
Answer question0
There are two ways
- hook into tokenizer to add extra token
// update lines
editor.session.bgTokenizer.lines[0].push({type: "comment", value: " // ~D "})
// hook into $tokenizeRow to add tokens after text is changed too
if (!editor.session.bgTokenizer.$tokenizeRow_orig)
editor.session.bgTokenizer.$tokenizeRow_orig = editor.session.bgTokenizer.$tokenizeRow
editor.session.bgTokenizer.$tokenizeRow = function(row) {
var tokens = editor.session.bgTokenizer.$tokenizeRow_orig(row)
tokens.push({type: "comment", value: " // ~D " + row})
return tokens
}
// redraw editor
editor.renderer.updateFull()
- add render listener and add dom elements to the editor
var dom = require("ace/lib/dom")
var annotations = {5: {text: "foo"}, 25: {text: "bar"}}
editor.renderer.on("afterRender", function() {
editor.renderer.$textLayer.$lines.cells.forEach(function(cell) {
if (annotations[cell.row]) {
if (!annotations[cell.row].element)
annotations[cell.row].element = dom.buildDom(["span", {style: "color:red"}, annotations[cell.row].text])
cell.element.append(annotations[cell.row].element)
}
})
})
editor.renderer.updateText()
var value = Array(100).fill(0).map((x,i)=>i+3).join(" ~ \n")
function isPrime(num) {
var max = Math.sqrt(num) + 1
for (var i = 2; i < max; i++)
if (num%i == 0) return false
return true
}
var editor = ace.edit("editor", {
value
})
var annotations = {}
editor.on("change", updateAnnotations)
function updateAnnotations() {
clearAnnotations()
editor.session.doc.getAllLines().forEach(function(line, lineNumber) {
var num = parseInt(line)
if (isPrime(num)) {
if (isPrime(num - 2) || isPrime(num + 2)) text = " is a twin prime"
else text = " is a prime"
annotations[lineNumber] = {text}
}
})
}
function clearAnnotations() {
for (var i in annotations) {
if (annotations[i]?.element)
annotations[i].element.remove()
}
annotations = {}
}
var dom = ace.require("ace/lib/dom")
function renderAnnotations() {
editor.renderer.$textLayer.$lines.cells.forEach(function(cell) {
if (annotations[cell.row]) {
if (!annotations[cell.row].element)
annotations[cell.row].element = dom.buildDom(["span", {style: "color:red"}, annotations[cell.row].text])
cell.element.append(annotations[cell.row].element)
}
})
}
editor.renderer.on("afterRender", renderAnnotations)
updateAnnotations()
editor.renderer.updateText()<script src=https://ajaxorg.github.io/ace-builds/src/ace.js></script>
<div id="editor" style="height: 200px"></div>
·
Juan Pablo Isaza
Report
Answer question