Creating or Extending an Edit Mode wrong

[jmthomas]

Describe the issue

I was trying to follow the documentation on Creating or Extending an Edit Mode and was unsuccessful. I was simply trying to add a few keywords to the existing Ruby highligher. I'm in a Vue.js 2 project using webpack and this was how I got it to work:

<script>
import * as ace from 'ace-builds'
export default {
...
  mounted: function () {
    this.editor = ace.edit('editor')
    this.editor.setTheme('ace/theme/twilight')
    const openC3Mode = this.buildOpenC3Mode()
    this.editor.session.setMode(new openC3Mode())
    ...
  }
  methods: {
    buildOpenC3Mode() {
      var oop = ace.require('ace/lib/oop')
      var RubyHighlightRules = ace.require(
        'ace/mode/ruby_highlight_rules'
      ).RubyHighlightRules

      let apis = Object.getOwnPropertyNames(OpenC3Api.prototype)
        .filter((a) => a !== 'constructor')
        .filter((a) => a !== 'exec')
      // Create a RegExp with all our keywords like (cmd|tlm|...)
      let regex = new RegExp(`(${apis.join('|')})`)
      var OpenC3HighlightRules = function () {
        RubyHighlightRules.call(this)
        // add openc3 rules to the ruby rules
        for (var rule in this.$rules) {
          this.$rules[rule].unshift({
            regex: regex,
            token: 'support.function',
          })
        }
      }
      oop.inherits(OpenC3HighlightRules, RubyHighlightRules)

      var MatchingBraceOutdent = ace.require(
        'ace/mode/matching_brace_outdent'
      ).MatchingBraceOutdent
      var CstyleBehaviour = ace.require(
        'ace/mode/behaviour/cstyle'
      ).CstyleBehaviour
      var FoldMode = ace.require('ace/mode/folding/ruby').FoldMode
      var Mode = function () {
        this.HighlightRules = OpenC3HighlightRules
        this.$outdent = new MatchingBraceOutdent()
        this.$behaviour = new CstyleBehaviour()
        this.foldingRules = new FoldMode()
        this.indentKeywords = this.foldingRules.indentKeywords
      }
      var RubyMode = ace.require('ace/mode/ruby').Mode
      oop.inherits(Mode, RubyMode)
      ;(function () {
        this.$id = 'ace/mode/openc3'
      }.call(Mode.prototype))
      return Mode
    },
  },
}
</script>

Links

https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode