在 TypeScript 中实现自定义 ACE 编辑器编辑模式

Question

我尝试在这里遵循本指南： https: //github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode

...但我想用 Typescript （使用 webpack）编写它

我似乎找不到对该define方法的引用，以便我可以通过setMode()稍后设置的 ace 注册我的编辑模式。

我应该如何使用 Typescript 设置 ace 的编辑模式？

Answer 1

我知道这是一个非常晚的答案，但以防万一有人正在寻找它。

我在 ts 中这样做了Svelte，它工作正常：

记得安装 Ace 依赖项：

npm i ace-builds
npm i brace

使用此解决方案，您无需为其创建新的模式文件。

import ace from 'ace-builds';
import 'brace';
import 'brace/ext/searchbox';

//Support function to create Ace mode
function createAceMode(modeName: string, highlighterObj: ace.Ace.HighlightRulesMap) {
    (ace as any).define(modeName, ["require", "exports", "module"], function (require: any, exports: any, module: any) {
        console.log(require);
        var oop = require("ace/lib/oop");
        var TextMode = require("ace/mode/text").Mode;
        var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
        var WorkerClient = require("ace/worker/worker_client").WorkerClient;

        var myHighlightRules = function () {
            this.$rules = highlighterObj;
        };
        oop.inherits(myHighlightRules, TextHighlightRules);
        var CustomMode = function () {
            this.HighlightRules = myHighlightRules;
        };
        oop.inherits(CustomMode, TextMode);
        
        (function () {
            //Create worker for live syntax checking
            this.createWorker = function(session: ace.Ace.EditSession) {
                session.on("change", function() {
                    session.clearAnnotations();
                    let annotations: ace.Ace.Annotation[] = [];
                    for(let row = 0; row < session.getLength(); row++) {
                        let tokens = session.getTokens(row);
                        if (!tokens || tokens.length == 0) continue;
                        tokens.forEach(token => {
                            if (token.type === "invalid") annotations.push({row: row, column: 0, text: "This need to be fixed!", type: "error"});
                        });
                    }
                    session.setAnnotations(annotations);
                });
            }
            this.$id = modeName;
        }).call(CustomMode.prototype);
        exports.Mode = CustomMode;
    });
}

//Usage
createAceMode("mmd", {
    "start": [
        {token: "invalid", regex: /(OMIT_CATCH|Not support.*|\<(.*?)\>)/},
        {token: "section.property", regex: /\[(.*?)\]/},
        {token: "def", regex: /\b.*([a-zA-Z0-9_.-]+)\b(\s*)(=)/},
        {token: "variable", regex: /#\b([a-zA-Z0-9_.-]+)\b(\s*)(=)/},
    ],
});

//Options:
let aceEditorDefaultOptions: ace.Ace.EditorOptions = {
    minLines: 24,
    mode: "mmd", //Required matching the name you already defined above, else get error
    showPrintMargin: false,
    useWorker: true, // lint-like annotations through workers
} as ace.Ace.EditorOptions;

//Init Editor
ace.edit(editorElement, {...aceEditorDefaultOptions});