feat: add color to table name for sql editor

Author: invisal

src/renderer/App.css

@@ -209,3 +209,15 @@ hr {
 .cm-tooltip-autocomplete .cm-completionDetail {
   padding-left: 15px;
 }
+
+.cm-table-name {
+  color: #e84393;
+}
+
+.darl .cm-table-name {
+  color: #fd79a8;
+}
+
+.cm-table-name > span {
+  color: inherit !important;
+}

src/renderer/components/CodeEditor/SQLTableNameHightlight.ts

@@ -0,0 +1,67 @@
+import {
+  EditorView,
+  ViewPlugin,
+  Decoration,
+  DecorationSet,
+  ViewUpdate,
+} from '@codemirror/view';
+import { Range } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+
+const underlineMark = Decoration.mark({ class: 'cm-table-name' });
+
+export default function createSQLTableNameHighlightPlugin(
+  tableNameList: string[]
+) {
+  const tableNameSet = new Set(
+    tableNameList.map((table) => table.toLowerCase())
+  );
+
+  function highlightTableName(view: EditorView) {
+    const decorationList: Range<Decoration>[] = [];
+
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree(view.state).iterate({
+        from,
+        to,
+        enter: (node) => {
+          if (node.name == 'Identifier') {
+            const word = view.state.doc
+              .sliceString(node.from, node.to)
+              .toLowerCase();
+
+            const lastChar = node.node.prevSibling
+              ? view.state.doc
+                  .sliceString(
+                    node.node.prevSibling.from,
+                    node.node.prevSibling.to
+                  )
+                  .toLowerCase()
+              : '';
+
+            if (tableNameSet.has(word) && lastChar !== '.') {
+              decorationList.push(underlineMark.range(node.from, node.to));
+            }
+          }
+        },
+      });
+    }
+
+    return Decoration.set(decorationList);
+  }
+
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = highlightTableName(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = highlightTableName(update.view);
+      }
+    },
+    { decorations: (v) => v.decorations }
+  );
+}

src/renderer/components/CodeEditor/SqlCodeEditor.tsx

@@ -13,7 +13,7 @@ import {
 import { indentUnit } from '@codemirror/language';
 import { defaultKeymap, insertTab } from '@codemirror/commands';
 import { keymap } from '@codemirror/view';
-import { Ref, forwardRef, useCallback } from 'react';
+import { Ref, forwardRef, useCallback, useMemo } from 'react';
 import useCodeEditorTheme from './useCodeEditorTheme';
 import { SyntaxNode } from '@lezer/common';
 import {
@@ -22,8 +22,10 @@ import {
   genericCompletion,
   keywordCompletionSource,
 } from '../../../language/dist/';
+
 import handleCustomSqlAutoComplete from './handleCustomSqlAutoComplete';
 import { DatabaseSchemas } from 'types/SqlSchema';
+import createSQLTableNameHighlightPlugin from './SQLTableNameHightlight';
 
 const SqlCodeEditor = forwardRef(function SqlCodeEditor(
   props: ReactCodeMirrorProps & {
@@ -47,6 +49,15 @@ const SqlCodeEditor = forwardRef(function SqlCodeEditor(
     [schema, currentDatabase]
   );
 
+  const tableNameHighlightPlugin = useMemo(() => {
+    if (schema && currentDatabase && schema[currentDatabase]) {
+      return createSQLTableNameHighlightPlugin(
+        Object.keys(schema[currentDatabase].tables)
+      );
+    }
+    return createSQLTableNameHighlightPlugin([]);
+  }, [schema, currentDatabase]);
+
   return (
     <CodeMirror
       ref={ref}
@@ -89,6 +100,7 @@ const SqlCodeEditor = forwardRef(function SqlCodeEditor(
           ],
         }),
         indentUnit.of('  '),
+        tableNameHighlightPlugin,
       ]}
       {...codeMirrorProps}
     />

src/renderer/components/CodeEditor/useCodeEditorTheme.tsx

@@ -24,10 +24,10 @@ export default function useCodeEditorTheme() {
             'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
         },
         styles: [
-          { tag: [t.meta, t.comment, t.name], color: '#804000' },
+          { tag: [t.meta, t.comment], color: '#804000' },
           { tag: [t.keyword, t.strong], color: '#0000FF' },
           { tag: [t.number], color: '#FF0080' },
-          { tag: [t.string], color: '#FF0080' },
+          { tag: [t.string], color: '#e17055' },
           { tag: [t.variableName], color: '#006600' },
           { tag: [t.escape], color: '#33CC33' },
           { tag: [t.tagName], color: '#1C02FF' },
@@ -56,6 +56,7 @@ export default function useCodeEditorTheme() {
             'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
         },
         styles: [
+          { tag: [t.number], color: '#fbc531' },
           { tag: t.keyword, color: '#3498db' },
           { tag: t.comment, color: '#27ae60' },
           { tag: t.definition(t.typeName), color: '#27ae60' },