Monaco Syntax Highlight Redpanda Connect

[danriedl]

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

[rikimaru0345]

Cool, thank you! I can't say when we will implement this, but it looks really simple to copy paste in.