Improve syntax highliter and UI

package.json

@@ -33,14 +33,18 @@
     "lodash.clonedeep": "^4.5.0",
     "mixpanel-browser": "^2.47.0",
     "moment": "^2.29.4",
+    "monaco-editor-textmate": "^4.0.0",
+    "monaco-textmate": "^3.0.1",
     "mongodb": "^4.14.0",
     "mongoose": "^5.10.1",
     "next": "13.0.7",
+    "onigasm": "^2.2.5",
     "react": "18.2.0",
     "react-dnd": "^16.0.1",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-joyride": "^2.5.4",
+    "react-use": "^17.4.0",
     "recoil": "^0.7.7",
     "recoil-persist": "^4.2.0",
     "sass": "^1.58.3",

src/assets/ton/func/ftmLanguage.json

@@ -0,0 +1,117 @@
+{
+    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+    "name": "FunC",
+    "foldingStartMarker": "\\{\\s*$",
+    "foldingStopMarker": "^\\s*\\}",
+    "patterns": [
+        {
+            "include": "#keywords"
+        },
+        {
+            "include": "#strings"
+        },
+        {
+            "include": "#directives"
+        },
+        {
+            "include": "#numeric"
+        },
+        {
+            "include": "#comments"
+        },
+        {
+            "include": "#storage"
+        },
+        {
+            "include": "#functions"
+        },
+        {
+            "include": "#variables"
+        }
+    ],
+    "repository": {
+        "keywords": {
+            "patterns": [
+                {
+                    "name": "keyword.control.",
+                    "match": "\\b(if|ifnot|else|elseif|elseifnot|while|do|until|repeat|return|impure|method_id|forall|asm|inline|inline_ref)\\b"
+                },
+                {
+                    "name": "keyword.operator",
+                    "match": "(?<=\\s)(<=>|>=|<=|!=|==|\\^>>|\\~>>|>>|<<|\\/%|\\^%|\\~%|\\^\\/|\\~\\/|\\+=|-=|\\*=|\\/=|~\\/=|\\^\\/=|%=|\\^%=|<<=|>>=|~>>=|\\^>>=|&=|\\|=|\\^=|\\^|=|~|\\/|%|-|\\*|\\+|>|<|&|\\||:|\\?)(?=\\s)"
+                },
+                {
+                    "name": "keyword.other",
+                    "match": "\\b(false|true)\\b"
+                }
+            ]
+        },
+        "directives": {
+            "name": "storage.modifier.import",
+            "begin": "#include|#pragma",
+            "end": ";",
+            "patterns": [
+                {
+                    "begin": "\"",
+                    "end": "\"",
+                    "name": "string.quoted.double"
+                },
+                {
+                    "match": "(>=|<=|=|>|<|\\^)?([0-9]+)(.[0-9]+)?(.[0-9]+)?",
+                    "name": "constant.numeric"
+                }
+            ]
+        },
+        "strings": {
+            "name": "string.quoted.double.",
+            "begin": "\"",
+            "end": "\"(H|h|c|u|s|a)?"
+        },
+        "numeric": {
+            "name": "constant.numeric",
+            "match": "(-?([\\d]+|0x[\\da-fA-F]+))\\b"
+        },
+        "comments": {
+            "patterns": [
+                {
+                    "name": "comment.line",
+                    "match": ";;(.*)"
+                },
+                {
+                    "name": "comment.block",
+                    "begin": "{-",
+                    "end": "-}"
+                }
+            ]
+        },
+        "storage": {
+            "patterns": [
+                {
+                    "name": "storage.type",
+                    "match": "\\b(var|int|slice|tuple|cell|builder|cont|_)(?=[\\s\\),\\[\\]])"
+                },
+                {
+                    "name": "storage.modifier",
+                    "match": "\\b(global|const)\\s"
+                }
+            ]
+        },
+        "variables": {
+            "patterns": [
+                {
+                    "match": "(?!\")(`([^`]+)`|((?=_)_|(?={){|(?=})}|(?![_`{}]))([^;,\\[\\]\\(\\)\\s~.]+))",
+                    "name": "variable.name"
+                }
+            ]
+        },
+        "functions": {
+            "patterns": [
+                {
+                    "match": "(?!\")(`([^`]+)`|(\\.|~)?((?=_)_|(?={){|(?=})}|(?![_`{}]))([^;,\\[\\]\\(\\)\\s~.]+))(?=[\\(])",
+                    "name": "entity.name.function"
+                }
+            ]
+        }
+    },
+    "scopeName": "source.func"
+}