Ace Editor 自定义模式——向现有集添加高亮规则

Question

我有一个与 GraalVM 脚本相关的 JavaScript 编辑器（Ace 编辑器），我在其中添加了一些自定义 JavaScript 规则。我希望使用自定义突出显示规则将它们反映在编辑器中。但是，无论我尝试什么，似乎都无法添加新规则。我有一个正确包含的自定义模式，问题出在规则中。

我的出发点是这样的（不包括模式代码）：

ace.define('ace/mode/custom_highlight_rules', ['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'], (acequire, exports) => {
    const oop = acequire('ace/lib/oop');
    const JavaScriptHighlightRules = acequire("./javascript_highlight_rules").JavaScriptHighlightRules;

    const CustomHighlightRules = function CustomHighlightRules() {
        this.$rules = new JavaScriptHighlightRules().getRules();
    };

    oop.inherits(CustomHighlightRules, JavaScriptHighlightRules);

    exports.CustomHighlightRules = CustomHighlightRules;
});

现在，我尝试使用文档中的 addRules()，如下所示：

this.addRules({
    start: [ {
        token: "keyword",
        regex: "my_keyword",
    } ]
}, 'custom-');

但是，my_keyword 没有突出显示。

需要注意的是，将其替换为：

this.$rules = {
    start: [ {
        token: "keyword",
        regex: "my_keyword",
    } ]
};

会突出显示此关键字，但不会突出显示其他任何内容，因为没有其他规则 – 这就是我知道代码正在执行任何操作的方式。

我也试过这样的：

this.$rules.start.push({
    token: "keyword",
    regex: "my_keyword",
    next: "start",
});

所以规则在内置 start 对象中，但它似乎不起作用。还尝试了正则表达式的变体（例如使用像 /my_keyword/ 这样的本机正则表达式代码）。

我注意到在使用addRules()时，我的自定义对象中没有processed: true，这表明我添加规则的时间可能太晚了？看来这是正确的地方。

我做错了什么？

Answer 1

我没有深入探讨为什么会这样，但看起来 this.$rules 的赋值需要在最后完成——所以首先需要构建对象，然后再赋值。可以在此处找到有关如何执行此操作的工作示例：TypeScript 下的 https://ace.c9.io/tool/mode_creator.html，它完全按照我的意愿继承了 JavaScript。

因此我的函数现在看起来像这样：

const CustomHighlightRules = function CustomHighlightRules(options) {
    let customRules = [
        {
            token: "keyword",
            regex: "my_keyword"
        }
    ];

    let JSRules = new JavaScriptHighlightRules({jsx: (options && options.jsx)}).getRules();

    JSRules.no_regex = customRules.concat(JSRules.no_regex);
    this.$rules = JSRules;
}

Ace Editor 自定义模式——向现有集添加高亮规则

Ace Editor custom mode – adding highlight rules to existing set

ace-editor