add zokrates syntax highlighting for monaco

libs/remix-ui/editor/src/lib/cairoSyntax.ts

@@ -1,133 +0,0 @@
-/* eslint-disable */
-export const cairoConf = {
-  comments: {
-		lineComment: '#'
-	},
-	brackets: [
-		['{', '}'],
-		['[', ']'],
-		['(', ')'],
-		['%{', '%}']
-	],
-	autoClosingPairs: [
-		{ open: '{', close: '}' },
-		{ open: '[', close: ']' },
-		{ open: '(', close: ')' },
-		{ open: '%{', close: '%}' },
-		{ open: "'", close: "'", notIn: ['string', 'comment'] }
-	],
-	surroundingPairs: [
-		{ open: '{', close: '}' },
-		{ open: '[', close: ']' },
-		{ open: '(', close: ')' },
-		{ open: '%{', close: '%}' },
-		{ open: "'", close: "'" }
-	]
-}
-
-
-export const cairoLang = {
-  defaultToken: '',
-	tokenPostfix: '.cairo',
-
-	brackets: [
-		{ token: 'delimiter.curly', open: '{', close: '}' },
-		{ token: 'delimiter.parenthesis', open: '(', close: ')' },
-		{ token: 'delimiter.square', open: '[', close: ']' },
-		{ token: 'delimiter.curly', open: '%{', close: '%}' }
-	],
-
-	keywords: [
-		// control
-		'if',
-		'else',
-		'end',
-
-		// meta
-		'alloc_locals',
-		'as',
-		'assert',
-		'cast',
-		'const',
-		'dw',
-		'felt',
-		'from',
-		'func',
-		'import',
-		'let',
-		'local',
-		'member',
-		'nondet',
-		'return',
-		'static_assert',
-		'struct',
-		'tempvar',
-		'with_attr',
-		'with',
-
-		// register
-		'ap',
-		'fp',
-
-		// opcode
-		'call',
-		'jmp',
-		'ret',
-		'abs',
-		'rel'
-	],
-
-	operators: ['=', ':', '==', '++', '+', '-', '*', '**', '/', '&', '%', '_'],
-
-	// we include these common regular expressions
-	symbols: /[=><!~?:&|+\-*\/\^%]+/,
-	numberDecimal: /[+-]?[0-9]+/,
-	numberHex: /[+-]?0x[0-9a-fA-F]+/,
-
-	// The main tokenizer for our languages
-	tokenizer: {
-		root: [
-			// identifiers and keywords
-			[
-				/[a-zA-Z_]\w*/,
-				{
-					cases: {
-						'@keywords': { token: 'keyword.$0' },
-						'@default': 'identifier'
-					}
-				}
-			],
-
-			// whitespace
-			{ include: '@whitespace' },
-
-			// directives
-			[/^%[a-zA-Z]\w*/, 'tag'],
-
-			// delimiters and operators
-			[/[{}()\[\]]/, '@brackets'],
-			[/[<>](?!@symbols)/, '@brackets'],
-			[
-				/@symbols/,
-				{
-					cases: {
-						'@operators': 'delimiter',
-						'@default': ''
-					}
-				}
-			],
-
-			// numbers
-			[/(@numberHex)/, 'number.hex'],
-			[/(@numberDecimal)/, 'number'],
-
-			// strings
-			[/'[^']*'/, 'string']
-		],
-
-		whitespace: [
-			[/\s+/, 'white'],
-			[/(^#.*$)/, 'comment']
-		]
-	}
-}

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

@@ -2,8 +2,9 @@ import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint
 import { RemixUiEditorContextView, astNode } from '@remix-ui/editor-context-view'
 import Editor, { loader } from '@monaco-editor/react'
 import { reducerActions, reducerListener, initialState } from './actions/editor'
-import { language, conf } from './syntax'
-import { cairoLang, cairoConf } from './cairoSyntax'
+import { solidityTokensProvider, solidityLanguageConfig } from './syntaxes/solidity'
+import { cairoTokensProvider, cairoLanguageConfig } from './syntaxes/cairo'
+import { zokratesTokensProvider, zokratesLanguageConfig } from './syntaxes/zokrates'
 
 import './remix-ui-editor.css'
 import { loadTypes } from './web-types'
@@ -255,6 +256,8 @@ export const EditorUI = (props: EditorUIProps) => {
       monacoRef.current.editor.setModelLanguage(file.model, 'remix-solidity')
     } else if (file.language === 'cairo') {
       monacoRef.current.editor.setModelLanguage(file.model, 'remix-cairo')
+    } else if (file.language === 'zokrates') {
+      monacoRef.current.editor.setModelLanguage(file.model, 'remix-zokrates')
     }    
   }, [props.currentFile])
 
@@ -464,12 +467,17 @@ export const EditorUI = (props: EditorUIProps) => {
     // Register a new language
     monacoRef.current.languages.register({ id: 'remix-solidity' })
     monacoRef.current.languages.register({ id: 'remix-cairo' })
+    monacoRef.current.languages.register({ id: 'remix-zokrates' })
+    
     // Register a tokens provider for the language
-    monacoRef.current.languages.setMonarchTokensProvider('remix-solidity', language)
-    monacoRef.current.languages.setLanguageConfiguration('remix-solidity', conf)
+    monacoRef.current.languages.setMonarchTokensProvider('remix-solidity', solidityTokensProvider)
+    monacoRef.current.languages.setLanguageConfiguration('remix-solidity', solidityLanguageConfig)
+
+    monacoRef.current.languages.setMonarchTokensProvider('remix-cairo', cairoTokensProvider)
+    monacoRef.current.languages.setLanguageConfiguration('remix-cairo', cairoLanguageConfig)
 
-    monacoRef.current.languages.setMonarchTokensProvider('remix-cairo', cairoLang)
-    monacoRef.current.languages.setLanguageConfiguration('remix-cairo', cairoConf)
+    monacoRef.current.languages.setMonarchTokensProvider('remix-zokrates', zokratesTokensProvider)
+    monacoRef.current.languages.setLanguageConfiguration('remix-zokrates', zokratesLanguageConfig)
 
     loadTypes(monacoRef.current)
   }

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

@@ -0,0 +1,132 @@
+/* eslint-disable */
+export const cairoLanguageConfig = {
+  comments: {
+    lineComment: "#",
+  },
+  brackets: [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"],
+    ["%{", "%}"],
+  ],
+  autoClosingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: "%{", close: "%}" },
+    { open: "'", close: "'", notIn: ["string", "comment"] },
+  ],
+  surroundingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: "%{", close: "%}" },
+    { open: "'", close: "'" },
+  ],
+}
+
+export const cairoTokensProvider = {
+  defaultToken: "",
+  tokenPostfix: ".cairo",
+
+  brackets: [
+    { token: "delimiter.curly", open: "{", close: "}" },
+    { token: "delimiter.parenthesis", open: "(", close: ")" },
+    { token: "delimiter.square", open: "[", close: "]" },
+    { token: "delimiter.curly", open: "%{", close: "%}" },
+  ],
+
+  keywords: [
+    // control
+    "if",
+    "else",
+    "end",
+
+    // meta
+    "alloc_locals",
+    "as",
+    "assert",
+    "cast",
+    "const",
+    "dw",
+    "felt",
+    "from",
+    "func",
+    "import",
+    "let",
+    "local",
+    "member",
+    "nondet",
+    "return",
+    "static_assert",
+    "struct",
+    "tempvar",
+    "with_attr",
+    "with",
+
+    // register
+    "ap",
+    "fp",
+
+    // opcode
+    "call",
+    "jmp",
+    "ret",
+    "abs",
+    "rel",
+  ],
+
+  operators: ["=", ":", "==", "++", "+", "-", "*", "**", "/", "&", "%", "_"],
+
+  // we include these common regular expressions
+  symbols: /[=><!~?:&|+\-*\/\^%]+/,
+  numberDecimal: /[+-]?[0-9]+/,
+  numberHex: /[+-]?0x[0-9a-fA-F]+/,
+
+  // The main tokenizer for our languages
+  tokenizer: {
+    root: [
+      // identifiers and keywords
+      [
+        /[a-zA-Z_]\w*/,
+        {
+          cases: {
+            "@keywords": { token: "keyword.$0" },
+            "@default": "identifier",
+          },
+        },
+      ],
+
+      // whitespace
+      { include: "@whitespace" },
+
+      // directives
+      [/^%[a-zA-Z]\w*/, "tag"],
+
+      // delimiters and operators
+      [/[{}()\[\]]/, "@brackets"],
+      [/[<>](?!@symbols)/, "@brackets"],
+      [
+        /@symbols/,
+        {
+          cases: {
+            "@operators": "delimiter",
+            "@default": "",
+          },
+        },
+      ],
+
+      // numbers
+      [/(@numberHex)/, "number.hex"],
+      [/(@numberDecimal)/, "number"],
+
+      // strings
+      [/'[^']*'/, "string"],
+    ],
+
+    whitespace: [
+      [/\s+/, "white"],
+      [/(^#.*$)/, "comment"],
+    ],
+  },
+}

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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export const conf = {
+export const solidityLanguageConfig = {
   comments: {
     lineComment: '//',
     blockComment: ['/*', '*/']
@@ -19,7 +19,7 @@ export const conf = {
   ]
 }
 
-export const language = {
+export const solidityTokensProvider = {
   defaultToken: '',
   tokenPostfix: '.sol',
 

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

@@ -0,0 +1,144 @@
+/* eslint-disable */
+export const zokratesLanguageConfig = {
+  comments: {
+    lineComment: '//',
+    blockComment: ['/*', '*/']
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')'],
+    ['<', '>']
+  ],
+  autoClosingPairs: [
+    { open: '"', close: '"', notIn: ['string', 'comment'] },
+    { open: '{', close: '}', notIn: ['string', 'comment'] },
+    { open: '[', close: ']', notIn: ['string', 'comment'] },
+    { open: '(', close: ')', notIn: ['string', 'comment'] },
+    { open: '<', close: '>', notIn: ['string', 'comment'] }
+  ]
+}
+
+export const zokratesTokensProvider = {
+  defaultToken: "",
+  tokenPostfix: ".zok",
+
+  keywords: [
+    "log",
+    "assert",
+    "as",
+    "bool",
+    "const",
+    "def",
+    "else",
+    "false",
+    "field",
+    "for",
+    "if",
+    "import",
+    "from",
+    "in",
+    "mut",
+    "private",
+    "public",
+    "return",
+    "struct",
+    "true",
+    "type",
+    "u8",
+    "u16",
+    "u32",
+    "u64",
+  ],
+
+  typeKeywords: ["bool", "field", "u8", "u16", "u32", "u64"],
+
+  operators: [
+    "=",
+    ">",
+    "<",
+    "!",
+    "?",
+    ":",
+    "==",
+    "<=",
+    ">=",
+    "!=",
+    "&&",
+    "||",
+    "+",
+    "-",
+    "*",
+    "**",
+    "/",
+    "&",
+    "|",
+    "^",
+    "%",
+    "<<",
+    ">>",
+  ],
+
+  decimalSuffix: /(u16|u32|u64|u8|f)?/,
+
+  // we include these common regular expressions
+  symbols: /[=><!~?:&|+\-*\/\^%]+/,
+  escapes:
+    /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+  // The main tokenizer for our languages
+  tokenizer: {
+    root: [
+      // identifiers and keywords
+      [
+        /[a-zA-Z]\w*/,
+        {
+          cases: {
+            "@typeKeywords": "type.identifier",
+            "@keywords": "keyword",
+            "@default": "identifier",
+          },
+        },
+      ],
+
+      // whitespace
+      { include: "@whitespace" },
+
+      // delimiters and operators
+      [/[{}()\[\]]/, "@brackets"],
+      [/[<>](?!@symbols)/, "@brackets"],
+      [/@symbols/, { cases: { "@operators": "operator", "@default": "" } }],
+
+      // numbers
+      [/0[xX][0-9a-fA-F]+/, "number.hex"],
+      [/\d+(@decimalSuffix)/, "number"],
+
+      // delimiter
+      [/[;,.]/, "delimiter"],
+
+      // strings
+      [/"([^"\\]|\\.)*$/, "string.invalid"], // non-teminated string
+      [/"/, { token: "string.quote", bracket: "@open", next: "@string" }],
+    ],
+
+    comment: [
+      [/[^\/*]+/, "comment"],
+      [/\/\*/, "comment", "@push"], // nested comment
+      ["\\*/", "comment", "@pop"],
+      [/[\/*]/, "comment"],
+    ],
+
+    string: [
+      [/[^\\"]+/, "string"],
+      [/@escapes/, "string.escape"],
+      [/\\./, "string.escape.invalid"],
+      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, "white"],
+      [/\/\*/, "comment", "@comment"],
+      [/\/\/.*$/, "comment"],
+    ],
+  },
+}