Alter the text displayed for a token in ace-editor

Question

I have this example where I am locating a matching string via regex and changing the styles using highlight rules.

this.$rules = {
  start: [{
    token: 'variableRef',
    regex: /\$variable\..+\$/
  }]
};

and alter the color using a css class:

.ace_variableRef {
  color: red;
}

But what I would really like to do is change the text that is being displayed from $variable.1.name$ to the "resolved value". I have access to:

var variables = {
  1: 'timeout'
};

so I can use the reference path to get the value, but is it even possible to do this with ace-editor?

Ideally I would display the string in the user friendly way, but keep the original reference value handy (in metadata or something) since that is what is actually stored in the db.

Answer 1

You can accomplish this by defining a custom onMatch for your rule, like so

    this.$rules = {
      start: [{
        onMatch: function(value, state, stack) {
          var values = this.splitRegex.exec(value);
          return [{
            type: 'variableRef',
            value: variables[values[1]]
          }]
        },
        regex: /\$variable\.(\d+).+\$/
      }]
    };

but the actual text will remain unaltered (thus causing oddities with text selection/cursor), so you'll need to pad/clip the resulting value for it to match length of values[0]