Is it possible to get JetBrains-style debug-time line hints in Ace Editor?

user_16652503 0
Viewed 59

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

enter image description here

here's an image of my application

enter image description here

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.

ace-editor javascript
1 Answers

There are two ways

  1. 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()
  1. 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>

user_17433280
Related