Fixed an issue where the result grid slowed down when large JSON data was loaded. #6510

Author: pravesh-sharma

web/package.json

@@ -114,7 +114,6 @@
     "insert-if": "^1.1.0",
     "ip-address": "^10.0.1",
     "json-bignumber": "^1.0.1",
-    "jsoneditor": "^10.1.2",
     "leaflet": "^1.9.4",
     "lodash": "4.*",
     "moment": "^2.29.4",
@@ -150,6 +149,7 @@
     "uplot": "^1.6.32",
     "uplot-react": "^1.1.4",
     "valid-filename": "^4.0.0",
+    "vanilla-jsoneditor": "^3.3.1",
     "wkx": "^0.5.0",
     "zustand": "^5.0.3"
   },

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

@@ -11,6 +11,11 @@ export default function cmOverride(theme) {
   const editor = theme.otherVars.editor;
   return {
     '.cm-editor': {
+      // CSS variables for jsoneditor's CodeMirror
+      '--jse-font-family-mono': theme.typography.fontFamilySourceCode,
+      '--jse-panel-background': editor.guttersBg,
+      '--jse-panel-color-readonly': editor.guttersFg,
+      '--jse-panel-border': 'none',
       height: '100%',
       color: editor.fg,
       backgroundColor: editor.bg,