From 242dd48cbd7e599c8c4f22f8f8c4d9451b4deca7 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Wed, 14 Aug 2024 16:47:17 +0530 Subject: [PATCH] Improve code highlighting in query editor. #7748 --- docs/en_US/release_notes_8_11.rst | 1 + web/pgadmin/static/js/Theme/dark.js | 1 + web/pgadmin/static/js/Theme/high_contrast.js | 1 + web/pgadmin/static/js/Theme/light.js | 1 + .../js/Theme/overrides/codemirror.override.js | 3 +- .../extensions/highlighting.js | 31 +++++-------------- 6 files changed, 14 insertions(+), 24 deletions(-) diff --git a/docs/en_US/release_notes_8_11.rst b/docs/en_US/release_notes_8_11.rst index a44341f62..99b596cd4 100644 --- a/docs/en_US/release_notes_8_11.rst +++ b/docs/en_US/release_notes_8_11.rst @@ -37,5 +37,6 @@ Bug fixes | `Issue #7688 `_ - Fix an issue where ERD tool should to be able to open saved pgerd file when using keyboard shortcuts. | `Issue #7728 `_ - Updated the documentation for web server authentication. | `Issue #7737 `_ - Fixed an issue where the REVOKE statement in the create script was throwing an error if the role contained special characters. + | `Issue #7748 `_ - Improve code highlighting in query editor. | `Issue #7754 `_ - Fix an issue where the wheel package is not getting installed on the arm64-based macOS version < 14. | `Issue #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. diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js index 485c9c4b5..a9627e4b3 100644 --- a/web/pgadmin/static/js/Theme/dark.js +++ b/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', diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js index f829cc2b6..1b85419fc 100644 --- a/web/pgadmin/static/js/Theme/high_contrast.js +++ b/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', diff --git a/web/pgadmin/static/js/Theme/light.js b/web/pgadmin/static/js/Theme/light.js index 3c8ec307c..5e7bf6a12 100644 --- a/web/pgadmin/static/js/Theme/light.js +++ b/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', diff --git a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js b/web/pgadmin/static/js/Theme/overrides/codemirror.override.js index acd6e9fb5..ca553d2c6 100644 --- a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js +++ b/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': { diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/extensions/highlighting.js b/web/pgadmin/static/js/components/ReactCodeMirror/extensions/highlighting.js index 14a74dca9..9b45dbc51 100644 --- a/web/pgadmin/static/js/components/ReactCodeMirror/extensions/highlighting.js +++ b/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);