Improve code highlighting in query editor. #7748

docs/en_US/release_notes_8_11.rst

@@ -37,5 +37,6 @@ Bug fixes
   | `Issue #7688 <https://github.com/pgadmin-org/pgadmin4/issues/7688>`_ -  Fix an issue where ERD tool should to be able to open saved pgerd file when using keyboard shortcuts.
   | `Issue #7728 <https://github.com/pgadmin-org/pgadmin4/issues/7728>`_ -  Updated the documentation for web server authentication.
   | `Issue #7737 <https://github.com/pgadmin-org/pgadmin4/issues/7737>`_ -  Fixed an issue where the REVOKE statement in the create script was throwing an error if the role contained special characters.
+  | `Issue #7748 <https://github.com/pgadmin-org/pgadmin4/issues/7748>`_ -  Improve code highlighting in query editor.
   | `Issue #7754 <https://github.com/pgadmin-org/pgadmin4/issues/7754>`_ -  Fix an issue where the wheel package is not getting installed on the arm64-based macOS version < 14.
   | `Issue #7775 <https://github.com/pgadmin-org/pgadmin4/issues/7775>`_ -  Fixed an issue where the value in the find box is not updating with selected text in editor if find is already open and re-triggered.

web/pgadmin/static/js/Theme/dark.js

@@ -132,6 +132,7 @@ export default function(basicSettings) {
         comment: '#7fcc5c',
         punctuation: '#d6aaaa',
         operator: '#d6aaaa',
+        name: '#7dc9f1',
         ////
         foldmarker: '#0000FF',
         activeline: '#323e43',

web/pgadmin/static/js/Theme/high_contrast.js

@@ -129,6 +129,7 @@ export default function(basicSettings) {
         comment: '#FFAD65',
         punctuation: '#d6aaaa',
         operator: '#d6aaaa',
+        name: '#7DC9F1',
         ////
         foldmarker: '#FFFFFF',
         activeline: '#063057',

web/pgadmin/static/js/Theme/light.js

@@ -153,6 +153,7 @@ export default function(basicSettings) {
         comment: '#a50',
         punctuation: '#737373',
         operator: '#222',
+        name: '#05a',
         ////
         foldmarker: '#0000FF',
         activeline: '#EDF9FF',

web/pgadmin/static/js/Theme/overrides/codemirror.override.js

@@ -52,11 +52,12 @@ export default function cmOverride(theme) {
             fontWeight: 600
           },
           '& .tok-string': {color: editor.string},
-          '& .tok-variable': {color: editor.variable },
+          '& .tok-variableName': {color: editor.variable },
           '& .tok-comment': {color: editor.comment},
           '& .tok-operator': { color: editor.operator },
           '& .tok-punctuation': {color: editor.punctuation},
           '& .tok-typeName': {color: editor.type},
+          '& .tok-name': {color: editor.name},
         },
 
         '& .cm-selectionLayer': {

web/pgadmin/static/js/components/ReactCodeMirror/extensions/highlighting.js

@@ -2,40 +2,25 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 
-import {tagHighlighter, tags, classHighlighter} from '@lezer/highlight';
+import {tagHighlighter, tags} from '@lezer/highlight';
 
 export const extendedClassHighlighter = tagHighlighter([
-  {tag: tags.link, class: 'tok-link'},
-  {tag: tags.heading, class: 'tok-heading'},
-  {tag: tags.emphasis, class: 'tok-emphasis'},
-  {tag: tags.strong, class: 'tok-strong'},
   {tag: tags.keyword, class: 'tok-keyword'},
-  {tag: tags.atom, class: 'tok-atom'},
-  {tag: tags.bool, class: 'tok-bool'},
-  {tag: tags.url, class: 'tok-url'},
-  {tag: tags.labelName, class: 'tok-labelName'},
-  {tag: tags.inserted, class: 'tok-inserted'},
-  {tag: tags.deleted, class: 'tok-deleted'},
-  {tag: tags.literal, class: 'tok-literal'},
-  {tag: tags.string, class: 'tok-string'},
   {tag: tags.number, class: 'tok-number'},
-  {tag: [tags.regexp, tags.escape, tags.special(tags.string)], class: 'tok-string2'},
+  {tag: tags.string, class: 'tok-string'},
   {tag: tags.variableName, class: 'tok-variableName'},
+  {tag: tags.propertyName, class: 'tok-propertyName'},
   {tag: tags.local(tags.variableName), class: 'tok-variableName tok-local'},
   {tag: tags.definition(tags.variableName), class: 'tok-variableName tok-definition'},
   {tag: tags.special(tags.variableName), class: 'tok-variableName2'},
   {tag: tags.definition(tags.propertyName), class: 'tok-propertyName tok-definition'},
-  {tag: tags.typeName, class: 'tok-typeName'},
-  {tag: tags.namespace, class: 'tok-namespace'},
-  {tag: tags.className, class: 'tok-className'},
-  {tag: tags.macroName, class: 'tok-macroName'},
-  {tag: tags.propertyName, class: 'tok-propertyName'},
   {tag: tags.operator, class: 'tok-operator'},
   {tag: tags.comment, class: 'tok-comment'},
-  {tag: tags.meta, class: 'tok-meta'},
-  {tag: tags.invalid, class: 'tok-invalid'},
   {tag: tags.punctuation, class: 'tok-punctuation'},
-  {tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], class: 'tok-name'},
+  {tag: tags.typeName, class: 'tok-typeName'},
+  {tag: tags.namespace, class: 'tok-namespace'},
+  {tag: tags.name, class: 'tok-name'},
+  {tag: tags.standard(tags.name), class: 'tok-name2'},
 ]);
 
-export default syntaxHighlighting(classHighlighter);
+export default syntaxHighlighting(extendedClassHighlighter);