feat(ui): improve syntax highlighting + harmonise with v2 documentation (#509)

e47ad0b6 · Méril · GitHub · fc81bf13 · e47ad0b6 · e47ad0b6
8 changed file
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -58,7 +58,7 @@
    },
    {
      "login": "mick2004",
-      "name": "Abhishek Pratap Singh",
+      "name": "mick2004",
      "avatar_url": "https://avatars1.githubusercontent.com/u/2042132?v=4",
      "profile": "https://github.com/mick2004",
      "contributions": [

--- a/README.md
+++ b/README.md
@@ -201,7 +201,7 @@ Thanks to these wonderful people
    <td align="center"><a href="https://github.com/tonytamwk"><img src="https://avatars2.githubusercontent.com/u/20872271?v=4" width="100px;" alt=""/><br /><sub><b>tonytamwk</b></sub></a><br /><a href="https://github.com/questdb/questdb/commits?author=tonytamwk" title="Code">💻</a> <a href="#userTesting-tonytamwk" title="User Testing">📓</a></td>
    <td align="center"><a href="http://sirinath.com/"><img src="https://avatars2.githubusercontent.com/u/637415?v=4" width="100px;" alt=""/><br /><sub><b>sirinath</b></sub></a><br /><a href="#ideas-sirinath" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://www.linkedin.com/in/suhorukov"><img src="https://avatars1.githubusercontent.com/u/10332206?v=4" width="100px;" alt=""/><br /><sub><b>igor-suhorukov</b></sub></a><br /><a href="https://github.com/questdb/questdb/commits?author=igor-suhorukov" title="Code">💻</a> <a href="#ideas-igor-suhorukov" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://github.com/mick2004"><img src="https://avatars1.githubusercontent.com/u/2042132?v=4" width="100px;" alt=""/><br /><sub><b>Abhishek Pratap Singh</b></sub></a><br /><a href="https://github.com/questdb/questdb/commits?author=mick2004" title="Code">💻</a> <a href="#platform-mick2004" title="Packaging/porting to new platform">📦</a></td>
+    <td align="center"><a href="https://github.com/mick2004"><img src="https://avatars1.githubusercontent.com/u/2042132?v=4" width="100px;" alt=""/><br /><sub><b>mick2004</b></sub></a><br /><a href="https://github.com/questdb/questdb/commits?author=mick2004" title="Code">💻</a> <a href="#platform-mick2004" title="Packaging/porting to new platform">📦</a></td>
  </tr>
 </table>


--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1233,6 +1233,11 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.2.tgz",
      "integrity": "sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ=="
    },
+    "@questdb/sql-grammar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@questdb/sql-grammar/-/sql-grammar-1.0.4.tgz",
+      "integrity": "sha512-vFULeIrl+ZnnA9WPXHJOR65uQFtCfzfp6R71QwODwIskDbLzH7xfErl2b6aew3TsU9ol6cXIxEBY5QH57e96Uw=="
+    },
    "@styled-icons/boxicons-logos": {
      "version": "10.0.0",
      "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-logos/-/boxicons-logos-10.0.0.tgz",
@@ -7461,9 +7466,9 @@
      }
    },
    "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
    },
    "lodash.defaults": {
      "version": "4.2.0",

--- a/ui/package.json
+++ b/ui/package.json
@@ -23,6 +23,7 @@
    "@babel/runtime-corejs3": "7.10.2",
    "@fortawesome/fontawesome-free": "5.13.0",
    "@popperjs/core": "2.4.2",
+    "@questdb/sql-grammar": "1.0.4",
    "@types/react": "16.9.35",
    "@types/react-dom": "16.9.8",
    "@types/react-redux": "7.1.9",

--- a/ui/src/scenes/Editor/Ace/questdbMode.ts
+++ b/ui/src/scenes/Editor/Ace/questdbMode.ts
 import ace, { Ace } from "ace-builds"
 import "ace-builds/src-noconflict/mode-sql"
 import "ace-builds/src-noconflict/theme-dracula"
+import { constants, dataTypes, functions, keywords } from "@questdb/sql-grammar"

 type Mapper = (name: string) => void

@@ -29,160 +30,12 @@ const { Mode: SqlMode } = ace.require("ace/mode/sql") as { Mode: unknown }
 const oop = ace.require("ace/lib/oop") as { inherits: (a: any, b: any) => void }

 const QuestDBHighlightRules = function (this: HighlightRules) {
-  const keywords = [
-    "add",
-    "alter",
-    "and",
-    "as",
-    "asc",
-    "asof",
-    "by",
-    "cache",
-    "capacity",
-    "case",
-    "column",
-    "columns",
-    "copy",
-    "create",
-    "cross",
-    "database",
-    "default",
-    "delete",
-    "desc",
-    "distinct",
-    "drop",
-    "else",
-    "end",
-    "foreign",
-    "from",
-    "grant",
-    "group",
-    "if",
-    "index",
-    "inner",
-    "insert",
-    "into",
-    "join",
-    "key",
-    "latest",
-    "left",
-    "limit",
-    "nan",
-    "natural",
-    "nocache",
-    "not",
-    "null",
-    "on",
-    "or",
-    "order",
-    "outer",
-    "over",
-    "partition",
-    "primary",
-    "references",
-    "rename",
-    "right",
-    "sample",
-    "select",
-    "show",
-    "splice",
-    "table",
-    "tables",
-    "then",
-    "truncate",
-    "type",
-    "union",
-    "update",
-    "values",
-    "when",
-    "where",
-    "with",
-  ]
-  const builtinConstants = ["false", "true"]
-  const builtinFunctions = [
-    "abs",
-    "all_tables",
-    "avg",
-    "coalesce",
-    "concat",
-    "count",
-    "dateadd",
-    "datediff",
-    "day",
-    "day_of_week",
-    "day_of_week_sunday_first",
-    "days_in_month",
-    "first",
-    "format",
-    "hour",
-    "ifnull",
-    "is_leap_year",
-    "isnull",
-    "ksum",
-    "last",
-    "lcase",
-    "len",
-    "length",
-    "long_sequence",
-    "max",
-    "micros",
-    "mid",
-    "millis",
-    "min",
-    "minute",
-    "month",
-    "now",
-    "nsum",
-    "nvl",
-    "rank",
-    "rnd_bin",
-    "rnd_boolean",
-    "rnd_byte",
-    "rnd_char",
-    "rnd_date",
-    "rnd_double",
-    "rnd_float",
-    "rnd_int",
-    "rnd_long",
-    "rnd_long256",
-    "rnd_short",
-    "rnd_str",
-    "rnd_symbol",
-    "rnd_timestamp",
-    "round",
-    "round_down",
-    "round_half_even",
-    "round_up",
-    "second",
-    "sum",
-    "sysdate",
-    "systimestamp",
-    "tables_columns",
-    "timestamp_sequence",
-    "to_date",
-    "to_str",
-    "to_timestamp",
-    "ucase",
-    "year",
-  ]
-  const dataTypes = [
-    "binary",
-    "date",
-    "double",
-    "float",
-    "int",
-    "long",
-    "long256",
-    "short",
-    "string",
-    "symbol",
-    "timestamp",
-  ]
  const keywordMapper = this.createKeywordMapper(
    {
-      keyword: [keywords, builtinFunctions, builtinConstants, dataTypes]
-        .map((k) => k.join("|"))
-        .join("|"),
+      "support.function": functions.join("|"),
+      keyword: keywords.join("|"),
+      "constant.language": constants.join("|"),
+      "storage.type": dataTypes.join("|"),
    },
    "identifier",
    true,
@@ -201,7 +54,7 @@ const QuestDBHighlightRules = function (this: HighlightRules) {
      },
      {
        token: "string", // " string
-        regex: '".*?"',
+        regex: "'.*?'",
      },
      {
        token: "constant", // ' string
@@ -221,7 +74,7 @@ const QuestDBHighlightRules = function (this: HighlightRules) {
      },
      {
        token: "keyword.operator",
-        regex: "\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|=",
+        regex: "\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|=|!~",
      },
      {
        token: "paren.lparen",

--- a/ui/src/styles/_editor.scss
+++ b/ui/src/styles/_editor.scss
@@ -42,7 +42,7 @@

 #sqlEditor {
  flex: 1;
-  font: 1.4rem "Source Code Pro", monospace !important;
+  font-family: 1.4rem SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  line-height: 1.5em !important;
 }


--- a/ui/src/styles/_grid.scss
+++ b/ui/src/styles/_grid.scss
@@ -26,7 +26,7 @@
  height: 100%;
  width: 100%;
  flex-direction: column;
-  font-family: "Source Code Pro", monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow: hidden;
 }


--- a/ui/src/theme/index.ts
+++ b/ui/src/theme/index.ts
@@ -39,7 +39,8 @@ export const theme: DefaultThemeShape = {

  fontEmoji:
    '"apple color emoji", "segoe ui emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", "noto color emoji"',
-  fontMonospace: '"Source Code Pro", monospace',
+  fontMonospace:
+    'SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace',
  fontSize,
 }