Syntax highlighting for noirjs

apps/remix-ide/src/app/editor/editor.js

@@ -54,7 +54,7 @@ class Editor extends Plugin {
       ts: 'typescript',
       move: 'move',
       circom: 'circom',
-      nr: 'rust',
+      nr: 'noir',
       toml: 'toml'
     }
 

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -22,6 +22,7 @@ import { RemixDefinitionProvider } from './providers/definitionProvider'
 import { RemixCodeActionProvider } from './providers/codeActionProvider'
 import './remix-ui-editor.css'
 import { circomLanguageConfig, circomTokensProvider } from './syntaxes/circom'
+import { noirLanguageConfig, noirTokensProvider } from './syntaxes/noir'
 import { IPosition } from 'monaco-editor'
 import { RemixInLineCompletionProvider } from './providers/inlineCompletionProvider'
 import { providers } from 'ethers'
@@ -248,6 +249,7 @@ export const EditorUI = (props: EditorUIProps) => {
         { token: 'keyword.selfdestruct', foreground: blueColor },
         { token: 'keyword.type ', foreground: blueColor },
         { token: 'keyword.gasleft', foreground: blueColor },
+        { token: 'function', foreground: blueColor, fontStyle: 'bold' },
 
         // specials
         { token: 'keyword.super', foreground: infoColor },
@@ -365,6 +367,8 @@ export const EditorUI = (props: EditorUIProps) => {
       monacoRef.current.editor.setModelLanguage(file.model, 'remix-circom')
     } else if (file.language === 'toml') {
       monacoRef.current.editor.setModelLanguage(file.model, 'remix-toml')
+    } else if (file.language === 'noir') {
+      monacoRef.current.editor.setModelLanguage(file.model, 'remix-noir')
     }
   }, [props.currentFile, props.isDiff])
 
@@ -994,6 +998,7 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.languages.register({ id: 'remix-move' })
     monacoRef.current.languages.register({ id: 'remix-circom' })
     monacoRef.current.languages.register({ id: 'remix-toml' })
+    monacoRef.current.languages.register({ id: 'remix-noir' })
 
     // Allow JSON schema requests
     monacoRef.current.languages.json.jsonDefaults.setDiagnosticsOptions({ enableSchemaRequest: true })
@@ -1020,6 +1025,9 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.languages.setMonarchTokensProvider('remix-toml', tomlTokenProvider as any)
     monacoRef.current.languages.setLanguageConfiguration('remix-toml', tomlLanguageConfig as any)
 
+    monacoRef.current.languages.setMonarchTokensProvider('remix-noir', noirTokensProvider as any)
+    monacoRef.current.languages.setLanguageConfiguration('remix-noir', noirLanguageConfig as any)
+
     monacoRef.current.languages.registerDefinitionProvider('remix-solidity', new RemixDefinitionProvider(props, monaco))
     monacoRef.current.languages.registerDocumentHighlightProvider('remix-solidity', new RemixHighLightProvider(props, monaco))
     monacoRef.current.languages.registerReferenceProvider('remix-solidity', new RemixReferenceProvider(props, monaco))

libs/remix-ui/editor/src/lib/syntaxes/noir.ts

@@ -0,0 +1,129 @@
+/* eslint-disable */
+export const noirLanguageConfig = (monaco) => ({
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  comments: {
+    lineComment: '//',
+    blockComment: ['/*', '*/'],
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')']
+  ],
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  surroundingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  folding: {
+    markers: {
+      start: new RegExp('^\\s*#region\\b'),
+      end: new RegExp('^\\s*#endregion\\b')
+    }
+  }
+})
+
+export const noirTokensProvider = {
+  defaultToken: "",
+
+  tokenPostfix: ".nr",
+
+  keywords: [
+    'fn', 'let', 'const', 'pub', 'private', 'struct', 'enum', 'return',
+    'if', 'else', 'for', 'while', 'break', 'continue', 'match', 'true', 'false',
+  ],
+
+  typeKeywords: [
+    'Field', 'Bool', 'Integer', 'u8', 'u16', 'u32', 'u64', 'i8', 'i16', 'i32', 'i64',
+  ],
+
+  operators: [
+    '=', '>', '<', '!', '~', '?', ':', '==', '<=', '>=', '!=', '&&', '||', '++', '--',
+    '+', '-', '*', '/', '&', '|', '^', '%', '<<', '>>', '>>>', '+=', '-=', '*=', '/=',
+    '&=', '|=', '^=', '%=', '<<=', '>>=', '>>>=',
+  ],
+
+  symbols: /[=><!~?:&|+\-*\/\^%]+/,
+
+  escapes:
+      /\\(?:[abfnrtv\\"'`]|x[0-9A-Fa-f]{1,2}|u\{[0-9A-Fa-f]{1,6}\})/,
+
+  tokenizer: {
+    root: [
+      // Match function definitions
+      [/(\bfn\b)(\s+)([a-zA-Z_$][\w$]*)/, ['keyword', '', 'function']],
+
+      // Match function calls
+      [/[a-zA-Z_$][\w$]*(?=\s*\()/, 'function.call'],
+
+      // identifiers and keywords
+      [/[a-zA-Z_$][\w$]*/, {
+        cases: {
+          '@keywords': 'keyword',
+          '@typeKeywords': 'type',
+          '@default': 'identifier'
+        }
+      }],
+
+      // whitespace
+      { include: '@whitespace' },
+
+      // delimiters and operators
+      [/[{}()\[\]]/, '@brackets'],
+      [/@symbols/, {
+        cases: {
+          '@operators': 'operator',
+          '@default': ''
+        }
+      }],
+
+      // numbers
+      [/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
+      [/0[xX][0-9a-fA-F]+/, 'number.hex'],
+      [/\d+/, 'number'],
+
+      // strings
+      [/"([^"\\]|\\.)*$/, 'string.invalid'],  // non-terminated string
+      [/'([^'\\]|\\.)*$/, 'string.invalid'],  // non-terminated string
+      [/"/, 'string', '@string_double'],
+      [/'/, 'string', '@string_single'],
+
+      // comments
+      [/\/\/.*$/, 'comment'],
+      [/\/\*/, 'comment', '@comment'],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, ''],
+    ],
+
+    comment: [
+      [/[^\/*]+/, 'comment'],
+      [/\*\//, 'comment', '@pop'],
+      [/[\/*]/, 'comment']
+    ],
+
+    string_double: [
+      [/[^\\"]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, 'string', '@pop']
+    ],
+
+    string_single: [
+      [/[^\\']+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, 'string', '@pop']
+    ],
+  },
+}

libs/remix-ui/helper/src/lib/remix-ui-helper.ts

@@ -81,7 +81,8 @@ export const getPathIcon = (path: string) => {
                   ? 'small fa-kit fa-ts-logo' : path.endsWith('.tsc')
                     ? 'fad fa-brackets-curly' : path.endsWith('.cairo')
                       ? 'small fa-kit fa-cairo' : path.endsWith('.circom')
-                        ? 'fa-kit fa-circom' : 'far fa-file'
+                        ? 'fa-kit fa-circom' : path.endsWith('.nr')
+                          ? 'fa-duotone fa-regular fa-diamond' : 'far fa-file'
 }
 
 export const isNumeric = (value) => {