CODEWITHSUNDEEP
monaco-editorngx-monaco-editor
guoqing deng
guoqing deng

Reputation: 3

In monaco editor tokenizer, is there a way to make a rule always take effect, and other rule take effect based on it?

Encountered such a requirement, for the entire editor, only columns 0~71 can be used. If the following columns (72~) have content, then these contents should be marked as comments. And if a comma appears in columns 0 to 71, the comma and the content after it are comments.

I wrote the following tokenizer:


return {
  tokenizer: {
    root: [
      [/(,\s+)(.*)/, ['default', 'comment']],
      [/^(.{0,71})(.*)/, ['default', 'comment']]
    ],
  },
};

I want to regard the second rule as a "global rule", which will always take effect, and then other rules can also take effect. But I found that the first rule never takes effect, and the second rule always takes effect.

Tried to put [/,\s+/, { token: 'default', next: '@comment'}], on the first line. If you enter ddd, ,this rule will not be matched. It directly matches the second rule.

I don’t know where the error occurred, or whether there is any configuration in the Monaco editor that can meet the above requirements?

Upvotes: 0

Views: 385

Answers (1)

LIQI Lu
LIQI Lu

Reputation: 16

Maybe you should change your mind. You should put the rule that match comment first and let them match first.

Here's an example of what you need: playground

// Register a new language
monaco.languages.register({ id: "mySpecialLanguage" });

// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider("mySpecialLanguage", {
    tokenizer: {
        root: [
            [/^.{72,}$/, "comment"],
            [/(.*)(,\s+)(.*)/, ['default','default', 'comment']],
        ],
    },
});

monaco.editor.defineTheme("myCoolTheme", {
    base: "vs",
    inherit: false,
    rules: [
        { token: "comment", foreground: "ff0000", fontStyle: "bold" },
    ],
    colors: {
        "editor.foreground": "#000000",
    },
});

monaco.editor.create(document.getElementById("container"), {
    theme: "myCoolTheme",
    value: getCode(),
    language: "mySpecialLanguage",
});

function getCode() {
    return [
        "This is comment: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "normal line",
        "normal line with comment, 123",
    ].join("\n");
}

Upvotes: 0

Related Questions