Custom Mode for Ace.js causes error "Uncaught TypeError: Cannot set property 'lastIndex' of undefined"

StackOverflow https://stackoverflow.com/questions/21071406

Pergunta

I'm creating a web application that will require users to be able to write code in my custom scripting language that is currently in development. I've used Cloud9's Ace editor in projects before. Since I'm used to Ace and know quite a bit about how to implement it, I decided it'd be a perfect fit to fulfill my needs for my script editor. However, in order to use a custom scripting language, I needed to create a custom Mode for Ace to use. Here is my mode, which is stored in a file in the ace_editor directory (same directory as ace.js is in):

ace.define('ace/mode/customscript', function (require, exports, module) {

    var oop = require("ace/lib/oop");
    var TextMode = require("./text").Mode;
    var Tokenizer = require("ace/tokenizer").Tokenizer;
    this.HighlightRules = require("ace/mode/customscript_highlight_rules").CustomScriptHighlightRules;

    var Mode = function () {
        this.$tokenizer = new Tokenizer(new HighlightRules().getRules());
    };
    oop.inherits(Mode, TextMode);

    exports.Mode = Mode;
});

ace.define('ace/mode/customscript_highlight_rules', function (require, exports, module) {

    var oop = require("ace/lib/oop");
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    /*var keywords = [
        "null",
        "new",
        "task",
        "end",
        "if",
        "else",
        "elseif",
        "and",
        "or",
        "not",
        "then",
        "for",
        "loop",
        "while",
        "times",
        "print",
        "use",
        "use_csharp",
        "extend",
        "as",
        "return",
        "continue",
        "my"
    ];
    var keywordsRegex = "";
    for (var i = 0; i < keywords.length; i++) {
        keywordsRegex = keywordsRegex + keywords[i] + "|";
    }
    keywordsRegex = keywordsRegex.substr(0, keywordsRegex.length - 1);*/

    var CustomScriptHighlightRules = function () {

        this.createKeywordMapper({
            "variable.language": "this",
            "keyword":
                "new task end if else elseif and or not then for loop while times print use use_csharp extend as return continue my",
            "constant.language":
                "true false null"
        }, "text", true, " ");

        this.$rules = {
            "no_regex": [
                {
                    token: "comment",
                    regex: "(->)(.|[\r\n])*(<-)"
                },
                {
                    token: "comment",
                    regex: "--([^\n].*)"
                },
                {
                    token: "string",
                    regex: "(\"[^\"\\\\]*(?:\\\\.[^\"\\\\]*)*\")"
                },
                {
                    token: "numbers",
                    regex: "(\d)?[.]*(\d)*"
                },
                {
                    token: "booleans",
                    regex: "true|false"
                }
            ]
        };

    };

    oop.inherits(CustomScriptHighlightRules, TextHighlightRules);

    exports.CustomScriptHighlightRules = CustomScriptHighlightRules;
});

And here is the code I'm using to test the editor:

<!DOCTYPE html>
<html>
    <head>
        <title>CustomScript Editor</title>
    </head>
    <body>
        <div id="syntax_editor" style="width: 100%; height: 100%">task idk()
    alert("hi")
end</div>
        <script type="text/javascript">
            $().ready(function () {
                var editor = ace.edit("syntax_editor");
                editor.setTheme("ace/theme/twilight");
                editor.getSession().setMode("ace/mode/customscript");
                editor.getSession().setUseWrapMode(false);
                editor.getSession().setUseSoftTabs(true);
                editor.getSession().setTabSize(4);
                editor.setShowPrintMargin(false);
                editor.setFadeFoldWidgets(false);
                document.getElementById("syntax_editor").style.fontSize = 20 + 'px';
            });
        </script>
    </body>
</html>

The problem is that I'm getting an error from Ace when I load the page that reads:

Uncaught TypeError: cannot set property 'lastIndex' of undefined

I am using Ace's latest src_noconflict library from GitHub. What am I doing wrong in my custom mode?

Foi útil?

Solução

This is because "start" state is missing in your CustomScriptHighlightRules change 

    this.$rules = {
        "no_regex": [

to

    this.$rules = {
        "start": [
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top