Monaco Syntax Highlight Redpanda Connect

Hey there, in another project i created monaco-editor to view bloblang mappings with syntax highlighting.
This is my config for the angular monaco:

const monacoConfig: NgxMonacoEditorConfig = {
  onMonacoLoad() {
    // eslint-disable-next-line
    const monaco = (window as any).monaco;

    monaco.languages.register({ id: 'bloblang' });
    monaco.languages.setMonarchTokensProvider('bloblang', {
      keywords: [
        'if',
        'else',
        'import',
        'let',
        'meta',
        'match',
      ],
      operators: [
        '+',
        '-',
        '*',
        '/',
        '%',
        '!',
        '!=',
        '>=',
        '<=',
        '==',
        '||',
        '&&',
        '=',
      ],
      symbols: /[=><!~?:&|+\-*\/\^%]+/,
      escapes: /\\(?:[abfnrtv\\"'0-7]|x[0-9A-Fa-f]{1,2}|u{0,4}[0-9A-Fa-f]{4}|U{0,8}[0-9A-Fa-f]{8})/,
      tokenizer: {
        root: [
          // Comments
          [/#.*$/, 'comment'],

          // Keywords
          [/\b(if|else|import|let|meta|match)\b/, 'keyword'],

          // Operators
          [/[+\-*/%=!<>&|]/, 'operator'],

          // Identifiers and keywords
          [/\b(root|this)\b/, 'variable'],
          [/\$\w+\b/, 'variable'],
          [/@(?:\w+\b)?/, 'variable'],

          // Strings
          [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-terminated string
          [/'([^'\\]|\\.)*$/, 'string.invalid'], // non-terminated string
          [/"/, 'string', '@string_double'],
          [/'/, 'string', '@string_single'],

          // Numbers
          [/\b\d+(\.\d+)?\b/, 'number'],

          // Constants
          [/\b(true|false|null)\b/, 'constant'],

          // Mapping
          [/\b(map)\s+(\w+)\s+({)/, ['keyword', 'type', 'delimiter.curly']],
          [/{/, 'delimiter.curly', '@mapping'],

          // Contexts
          [/\(/, 'delimiter.parenthesis', '@contexts'],

          // Calls
          [/\b(\w+)\s*(\()/, ['function', 'delimiter.parenthesis']],

          // Interpolations
          [
            /\$\{!/,
            'punctuation.definition.interpolation.begin.bloblang',
            '@interpolation',
          ],
          [/\$\{/, 'punctuation.definition.envvar.begin.bloblang', '@envvar'],
        ],

        mapping: [[/\}/, 'delimiter.curly', '@pop'], { include: 'root' }],

        contexts: [
          [/\)/, 'delimiter.parenthesis', '@pop'],
          { include: 'root' },
        ],

        string_double: [
          [/[^\\"]+/, 'string'],
          [/\\./, 'string.escape'],
          [/"/, 'string', '@pop'],
        ],

        string_single: [
          [/[^\\']+/, 'string'],
          [/\\./, 'string.escape'],
          [/'/, 'string', '@pop'],
        ],

        interpolation: [
          [/\}/, 'punctuation.definition.interpolation.end.bloblang', '@pop'],
          { include: 'root' },
        ],

        envvar: [
          [/\}/, 'punctuation.definition.envvar.end.bloblang', '@pop'],
          [
            /(:)([^}]+)?/,
            [
              'keyword.operator.defaultenvvar.bloblang',
              'constant.other.defaultenvvar.bloblang',
            ],
          ],
        ],
      },
    });

    monaco.languages.setLanguageConfiguration('bloblang', {
      comments: {
        lineComment: '#',
      },
      brackets: [
        ['{', '}'],
        ['[', ']'],
        ['(', ')'],
      ],
      autoClosingPairs: [
        { open: '{', close: '}' },
        { open: '[', close: ']' },
        { open: '(', close: ')' },
        { open: '"""', close: '"""' },
        { open: '"', close: '"' },
        { open: "'", close: "'" },
      ],
      surroundingPairs: [
        { open: '{', close: '}' },
        { open: '[', close: ']' },
        { open: '(', close: ')' },
        { open: '"', close: '"' },
        { open: "'", close: "'" },
      ],
      colorizedBracketPairs: [
        ['(', ')'],
        ['[', ']'],
        ['{', '}'],
      ],
      folding: {
        markers: {
          start: new RegExp('^\\s*#!\\s*region\\b'),
          end: new RegExp('^\\s*#!\\s*endregion\\b'),
        },
      },
    });
  },
};

Here is a screenshot of it:

Maybe this is helpful to have syntax highlighting at some point in redpanda-console.

Best regards,
Dan

No repository file or test is named. Start by locating where Redpanda Console displays Bloblang mappings, then compare that entry point with the supplied TypeScript Monaco configuration. Done means Bloblang mappings in the console receive syntax highlighting and the relevant behavior is covered by an appropriate test.