Initial commit to upgrade code mirror

package-lock.json

@@ -9,6 +9,8 @@
       "version": "3.0.0",
       "license": "MIT",
       "dependencies": {
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/theme-one-dark": "^6.1.3",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -16,11 +18,10 @@
         "@maplibre/maplibre-gl-geocoder": "^1.9.0",
         "@maplibre/maplibre-gl-inspect": "^1.7.1",
         "@maplibre/maplibre-gl-style-spec": "^23.3.0",
-        "@prantlf/jsonlint": "^16.0.0",
         "array-move": "^4.0.0",
         "buffer": "^6.0.3",
         "classnames": "^2.5.1",
-        "codemirror": "^5.65.20",
+        "codemirror": "^6.0.2",
         "color": "^5.0.0",
         "detect-browser": "^5.3.0",
         "downshift": "^9.0.10",
@@ -195,6 +196,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
       "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.27.1",
@@ -365,6 +367,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
       "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -499,6 +502,109 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.7.tgz",
+      "integrity": "sha512-8EzdeIoWPJDsMBwz3zdzwXnUpCzMiCyz5/A3FIPpriaclFCGDkAzK13sMcnsu5rowqiyeQN2Vs2TsOcoDPZirQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+      "integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.11.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
+      "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+      "integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
+      "integrity": "sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.38.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.2.tgz",
+      "integrity": "sha512-bTWAJxL6EOFLPzTx+O5P5xAO3gTqpatQ2b/ARQ8itfU/v2LlpS3pH2fkL0A3E/Fx8Y2St2KES7ZEV0sHTsSW/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@csstools/css-parser-algorithms": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
@@ -1784,6 +1890,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@lit-labs/ssr-dom-shim": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
@@ -1951,10 +2092,17 @@
         "supercluster": "^8.0.1"
       }
     },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1967,6 +2115,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1975,6 +2124,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -2320,75 +2470,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@prantlf/jsonlint": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/@prantlf/jsonlint/-/jsonlint-16.0.0.tgz",
-      "integrity": "sha512-L0jFtcsBRJZOr4T6sbePb1R6XYF6Nofj6kmEAxqTKCHEr50uvyxBFnB1UKaehWaMhHnvtyqWfTR5Go25RywXIQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-draft-04": "1.0.0",
-        "cosmiconfig": "9.0.0",
-        "diff": "5.2.0",
-        "fast-glob": "3.3.2"
-      },
-      "bin": {
-        "jsonlint": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=16.9"
-      }
-    },
-    "node_modules/@prantlf/jsonlint/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@prantlf/jsonlint/node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/@prantlf/jsonlint/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@prantlf/jsonlint/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -3621,20 +3702,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ajv-draft-04": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
-      "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "ajv": "^8.5.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/ally.js": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/ally.js/-/ally.js-1.4.1.tgz",
@@ -3757,7 +3824,8 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
     },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
@@ -4116,6 +4184,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -4364,6 +4433,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4581,10 +4651,19 @@
       }
     },
     "node_modules/codemirror": {
-      "version": "5.65.20",
+      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.20.tgz",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
-      "integrity": "sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
     },
     "node_modules/color": {
       "version": "5.0.0",
@@ -4758,6 +4837,7 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -4779,6 +4859,12 @@
         }
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5214,15 +5300,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/diff": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
-      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -5451,6 +5528,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5465,6 +5543,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -5472,7 +5551,8 @@
     "node_modules/error-ex/node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
     },
     "node_modules/es-abstract": {
       "version": "1.23.9",
@@ -6214,7 +6294,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
@@ -6268,6 +6349,7 @@
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
       "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6293,6 +6375,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6376,6 +6459,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -7522,6 +7606,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -7725,6 +7810,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7777,6 +7863,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -7826,6 +7913,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8560,6 +8648,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -8597,7 +8686,8 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -8782,7 +8872,8 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
     },
     "node_modules/listr2": {
       "version": "3.14.0",
@@ -9201,6 +9292,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -9209,6 +9301,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -9973,6 +10066,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -9990,6 +10084,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -10144,12 +10239,14 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -10561,6 +10658,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11033,6 +11131,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11065,6 +11164,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11106,6 +11206,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -11227,6 +11328,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11956,6 +12058,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+      "license": "MIT"
+    },
     "node_modules/stylelint": {
       "version": "16.24.0",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.24.0.tgz",
@@ -12538,6 +12646,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -13252,6 +13361,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/walk-sync": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",

package.json

@@ -24,6 +24,8 @@
   "license": "MIT",
   "homepage": "https://github.com/maplibre/maputnik#readme",
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -31,11 +33,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.9.0",
     "@maplibre/maplibre-gl-inspect": "^1.7.1",
     "@maplibre/maplibre-gl-style-spec": "^23.3.0",
-    "@prantlf/jsonlint": "^16.0.0",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
-    "codemirror": "^5.65.20",
+    "codemirror": "^6.0.2",
     "color": "^5.0.0",
     "detect-browser": "^5.3.0",
     "downshift": "^9.0.10",

src/components/Block.tsx

@@ -11,7 +11,6 @@ type BlockProps = PropsWithChildren & {
   onChange?(...args: unknown[]): unknown
   fieldSpec?: object
   wideMode?: boolean
-  error?: {message: string}
 };
 
 type BlockState = {

src/components/FilterEditor.tsx

@@ -293,7 +293,6 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
               this.props.onChange(defaultFilter);
             }}
             fieldName="filter"
-            fieldSpec={fieldSpec}
             value={filter}
             errors={errors}
             onChange={this.props.onChange}

src/components/InputJson.tsx

@@ -1,39 +1,32 @@
 import React from "react";
 import classnames from "classnames";
-import CodeMirror, { type ModeSpec } from "codemirror";
+import { type WithTranslation, withTranslation } from "react-i18next";
-import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import "codemirror/mode/javascript/javascript";
+import { type EditorView } from "@codemirror/view";
-import "codemirror/addon/lint/lint";
-import "codemirror/addon/edit/matchbrackets";
-import "codemirror/lib/codemirror.css";
-import "codemirror/addon/lint/lint.css";
 import stringifyPretty from "json-stringify-pretty-compact";
-import "../libs/codemirror-mgl";
-import type { LayerSpecification } from "maplibre-gl";
 
+import {createEditor} from "../libs/codemirror-mgl";
+import type { StylePropertySpecification } from "maplibre-gl";
 
 export type InputJsonProps = {
-  layer: LayerSpecification
+  value: object
   maxHeight?: number
-  onChange?(...args: unknown[]): unknown
   lineNumbers?: boolean
   lineWrapping?: boolean
-  getValue?(data: any): string
   gutters?: string[]
   className?: string
+  onChange(object: object): void
   onFocus?(...args: unknown[]): unknown
   onBlur?(...args: unknown[]): unknown
-  onJSONValid?(...args: unknown[]): unknown
+  onJSONValid?(): void
-  onJSONInvalid?(...args: unknown[]): unknown
+  onJSONInvalid?(_err: Error): void
-  mode?: ModeSpec<any>
+  lintType: "layer" | "style" | "expression" | "json"
-  lint?: boolean | object
+  spec?: StylePropertySpecification | undefined
 };
 type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
 type InputJsonState = {
   isEditing: boolean
-  showMessage: boolean
   prevValue: string
 };
 
@@ -42,16 +35,13 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     lineNumbers: true,
     lineWrapping: false,
     gutters: ["CodeMirror-lint-markers"],
-    getValue: (data: any) => {
-      return stringifyPretty(data, {indent: 2, maxLength: 40});
-    },
     onFocus: () => {},
     onBlur: () => {},
     onJSONInvalid: () => {},
     onJSONValid: () => {},
   };
   _keyEvent: string;
-  _doc: CodeMirror.Editor | undefined;
+  _doc: EditorView | undefined;
   _el: HTMLDivElement | null = null;
   _cancelNextChange: boolean = false;
 
@@ -60,13 +50,23 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     this._keyEvent = "keyboard";
     this.state = {
       isEditing: false,
-      showMessage: false,
+      prevValue: this.getPrettyJson(this.props.value),
-      prevValue: this.props.getValue!(this.props.layer),
     };
   }
 
+  getPrettyJson(data: any) {
+    return stringifyPretty(data, {indent: 2, maxLength: 40});
+  }
+
   componentDidMount () {
-    this._doc = CodeMirror(this._el!, {
+    this._doc = createEditor(
+      this._el!,
+      this.getPrettyJson(this.props.value),
+      this.props.lintType || "layer",
+      (value:string) => this.props.onChange(value ? JSON.parse(value) : {}),
+      this.props.spec
+    );
+    /*CodeMirror(this._el!, {
       value: this.props.getValue!(this.props.layer),
       mode: this.props.mode || {
         name: "mgl",
@@ -83,10 +83,13 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       gutters: this.props.gutters,
       scrollbarStyle: "null",
     });
+    
 
     this._doc.on("change", this.onChange);
     this._doc.on("focus", this.onFocus);
     this._doc.on("blur", this.onBlur);
+    */
+    this._doc.dispatch();
   }
 
   onPointerDown = () => {
@@ -111,21 +114,22 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   };
 
   componentWillUnMount () {
-    this._doc!.off("change", this.onChange);
+    //this._doc!.off("change", this.onChange);
-    this._doc!.off("focus", this.onFocus);
+    //this._doc!.off("focus", this.onFocus);
-    this._doc!.off("blur", this.onBlur);
+    //this._doc!.off("blur", this.onBlur);
   }
 
-  componentDidUpdate(prevProps: InputJsonProps) {
+  componentDidUpdate(_prevProps: InputJsonProps) {
-    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+    //if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
-      this._cancelNextChange = true;
+    //  this._cancelNextChange = true;
-      this._doc!.setValue(
+    //  this._doc!.setValue(
-        this.props.getValue!(this.props.layer),
+    //    this.props.getValue!(this.props.layer),
-      );
+    //  );
-    }
+    //}
   }
 
   onChange = (_e: unknown) => {
+    /*
     if (this._cancelNextChange) {
       this._cancelNextChange = false;
       this.setState({
@@ -156,22 +160,16 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     this.setState({
       prevValue: newCode,
     });
+    */
   };
 
   render() {
-    const t = this.props.t;
-    const {showMessage} = this.state;
     const style = {} as {maxHeight?: number};
     if (this.props.maxHeight) {
       style.maxHeight = this.props.maxHeight;
     }
 
     return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
-      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
-        <Trans t={t}>
-          Press <kbd>ESC</kbd> to lose focus
-        </Trans>
-      </div>
       <div
         className={classnames("codemirror-container", this.props.className)}
         ref={(el) => {this._el = el;}}

src/components/LayerEditor.tsx

@@ -119,7 +119,7 @@ type LayerEditorInternalProps = {
   sources: {[key: string]: SourceSpecification & {layers: string[]}}
   vectorLayers: {[key: string]: any}
   spec: any
-  onLayerChanged(...args: unknown[]): unknown
+  onLayerChanged(index: number, layer: LayerSpecification): void
   onLayerIdChange(...args: unknown[]): unknown
   onMoveLayer: OnMoveLayerCallback
   onLayerDestroy(...args: unknown[]): unknown
@@ -280,8 +280,9 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
         />;
       case "jsoneditor":
         return <FieldJson
-          layer={this.props.layer}
+          lintType="layer"
-          onChange={(layer) => {
+          value={this.props.layer}
+          onChange={(layer: LayerSpecification) => {
             this.props.onLayerChanged(
               this.props.layerIndex,
               layer

src/components/_ExpressionProperty.tsx

@@ -1,33 +1,28 @@
 import React from "react";
 import {MdDelete, MdUndo} from "react-icons/md";
-import stringifyPretty from "json-stringify-pretty-compact";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 import Block from "./Block";
 import InputButton from "./InputButton";
 import labelFromFieldName from "../libs/label-from-field-name";
 import FieldJson from "./FieldJson";
+import type { StylePropertySpecification } from "maplibre-gl";
 
 
 type ExpressionPropertyInternalProps = {
-  onDelete?(...args: unknown[]): unknown
   fieldName: string
-  fieldType?: string
+  fieldSpec?: StylePropertySpecification
-  fieldSpec?: object
   value?: any
   errors?: {[key: string]: {message: string}}
-  onChange?(...args: unknown[]): unknown
+  onDelete?(...args: unknown[]): unknown
+  onChange(value: object): void
   onUndo?(...args: unknown[]): unknown
   canUndo?(...args: unknown[]): unknown
   onFocus?(...args: unknown[]): unknown
   onBlur?(...args: unknown[]): unknown
 } & WithTranslation;
 
-type ExpressionPropertyState = {
+class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps> {
-  jsonError: boolean
-};
-
-class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps, ExpressionPropertyState> {
   static defaultProps = {
     errors: {},
     onFocus: () => {},
@@ -41,21 +36,8 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
     };
   }
 
-  onJSONInvalid = (_err: Error) => {
-    this.setState({
-      jsonError: true,
-    });
-  };
-
-  onJSONValid = () => {
-    this.setState({
-      jsonError: false,
-    });
-  };
-
   render() {
-    const {t, errors, fieldName, fieldType, value, canUndo} = this.props;
+    const {t, value, canUndo} = this.props;
-    const {jsonError} = this.state;
     const undoDisabled = canUndo ? !canUndo() : true;
 
     const deleteStopBtn = (
@@ -82,57 +64,22 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
       </>
     );
 
-    const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
-
-    const fieldError = errors![fieldKey];
-    const errorKeyStart = `${fieldKey}[`;
-    const foundErrors = [];
-
-    function getValue(data: any) {
-      return stringifyPretty(data, {indent: 2, maxLength: 38});
-    }
-
-    if (jsonError) {
-      foundErrors.push({message: "Invalid JSON"});
-    }
-    else {
-      Object.entries(errors!)
-        .filter(([key, _error]) => {
-          return key.startsWith(errorKeyStart);
-        })
-        .forEach(([_key, error]) => {
-          return foundErrors.push(error);
-        });
-
-      if (fieldError) {
-        foundErrors.push(fieldError);
-      }
-    }
-
     return <Block
-      // this feels like an incorrect type...? `foundErrors` is an array of objects, not a single object
-      error={foundErrors as any}
       fieldSpec={this.props.fieldSpec}
       label={t(labelFromFieldName(this.props.fieldName))}
       action={deleteStopBtn}
       wideMode={true}
     >
       <FieldJson
-        mode={{name: "mgl"}}
+        lintType="expression"
-        lint={{
+        spec={this.props.fieldSpec}
-          context: "expression",
-          spec: this.props.fieldSpec,
-        }}
         className="maputnik-expression-editor"
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
-        onJSONInvalid={this.onJSONInvalid}
+        value={value}
-        onJSONValid={this.onJSONValid}
-        layer={value}
         lineNumbers={false}
         maxHeight={200}
         lineWrapping={true}
-        getValue={getValue}
         onChange={this.props.onChange}
       />
     </Block>;

src/components/modals/ModalSourcesTypeEditor.tsx

@@ -259,13 +259,9 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
     return <div>
       <Block label={t("GeoJSON")} fieldSpec={latest.source_geojson.data}>
         <FieldJson
-          layer={this.props.source.data}
+          value={this.props.source.data}
           maxHeight={200}
-          mode={{
+          lintType="json"
-            name: "javascript",
-            json: true
-          }}
-          lint={true}
           onChange={data => {
             this.props.onChange({
               ...this.props.source,

src/libs/codemirror-mgl.ts

@@ -1,174 +1,202 @@
-import {parse} from "@prantlf/jsonlint";
+import { basicSetup } from "codemirror";
-import CodeMirror, { type MarkerRange } from "codemirror";
+import { EditorView } from "@codemirror/view";
-import jsonToAst from "json-to-ast";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
-import {expression, validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
+import { linter, lintGutter, type Diagnostic } from "@codemirror/lint";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { expression, type StylePropertySpecification, validateStyleMin } from "@maplibre/maplibre-gl-style-spec";
+import jsonToAst, { type ValueNode, type PropertyNode } from "json-to-ast";
 
-type MarkerRangeWithMessage = MarkerRange & {message: string};
+export type LintType = "layer" | "style" | "expression" | "json";
 
+type LinterError = {
+  key: string | null;
+  message: string;
+};
 
-CodeMirror.defineMode("mgl", (config, parserConfig) => {
+function getDiagnosticsFromExpressionErrors(errors: LinterError[], ast: ValueNode | PropertyNode) {
-  // Just using the javascript mode with json enabled. Our logic is in the linter below.
+  const diagnostics: Diagnostic[] = [];
-  return CodeMirror.modes.javascript(
+  for (const error of errors) {
-    {...config, json: true} as any,
+    const {key, message} = error;
-    parserConfig
+    if (!key) {
-  );
+      diagnostics.push({
-});
+        from: 0,
-
+        to: ast.loc ? ast.loc.end.offset : 0,
-
+        severity: "error",
-function tryToParse(text: string) {
+        message: message,
-
-  const found: MarkerRangeWithMessage[] = [];
-  try {
-    parse(text);
-  }
-  catch(err: any) {
-
-    const errorMatch = err.toString().match(/line (\d+), column (\d+)/);
-    if (errorMatch) {
-      const loc = {
-        first_line: parseInt(errorMatch[1], 10),
-        first_column: parseInt(errorMatch[2], 10),
-        last_line: parseInt(errorMatch[1], 10),
-        last_column: parseInt(errorMatch[2], 10)
-      };
-
-      // const loc = hash.loc;
-      found.push({
-        from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
-        to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
-        message: err
       });
+    } else {
+      const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
+      const node = getArrayPositionalFromAst(ast, path);
+      if (!node) {
+        console.warn("Something went wrong parsing error:", error);
+        continue;
+      }
+      if (node.loc) {
+        diagnostics.push({
+          from: node.loc.start.offset,
+          to: node.loc.end.offset,
+          severity: "error",
+          message: message,
+        });
+      }
     }
   }
-
+  return diagnostics;
-  return found;
 }
 
-CodeMirror.registerHelper("lint", "json", (text: string) => {
+function getArrayPositionalFromAst(node: ValueNode | PropertyNode | undefined, path: string[]) {
-  return tryToParse(text);
+  if (!node) {
-});
+    return undefined;
-
-CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) => {
-
-  const found: MarkerRangeWithMessage[] = tryToParse(text);
-
-  const {context} = opts;
-
-  if (found.length > 0) {
-    // JSON invalid so don't go any further
-    return found;
   }
+  if (path.length < 1) {
+    return node;
+  }
+  if (!("children" in node)) {
+    return undefined;
+  }
+  const key = path[0];
+  if (key.match(/^[0-9]+$/)) {
+    return getArrayPositionalFromAst(node.children[+path[0]], path.slice(1));
+  }
+  const newNode = node.children.find((childNode) => {
+    return (
+      "key" in childNode &&
+      childNode.key.type === "Identifier" &&
+      childNode.key.value === key
+    );
+  }) as PropertyNode | undefined;
+  return getArrayPositionalFromAst(newNode?.value, path.slice(1));
+}
 
-  const ast = jsonToAst(text);
+function createMaplibreLayerLinter() {
-  const input = JSON.parse(text);
+  return (view: EditorView) => {
+    const text = view.state.doc.toString();
 
-  function getArrayPositionalFromAst(node: any, path: string[]) {
+    try {
-    if (!node) {
+      // Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
-      return undefined;
+      const parsedJson = JSON.parse(text);
-    }
+      const ast = jsonToAst(text);
-    else if (path.length < 1) {
+
-      return node;
+      // Run the maplibre-gl-style-spec validator.
-    }
+      const validationErrors = validateStyleMin({
-    else if (!node.children) {
+        "version": 8,
-      return undefined;
+        "name": "Empty Style",
-    }
+        "metadata": {},
-    else {
+        "sources": {},
-      const key = path[0];
+        "sprite": "",
-      let newNode;
+        "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
-      if (key.match(/^[0-9]+$/)) {
+        "layers": [
-        newNode = node.children[path[0]];
+          parsedJson
-      }
+        ]
-      else {
+      });
-        newNode = node.children.find((childNode: any) => {
+
-          return (
+      const linterErrors = validationErrors
-            childNode.key &&
+        .filter(err => {
-            childNode.key.type === "Identifier" &&
+          // Remove missing 'layer source' errors, because we don't include them
-            childNode.key.value === key
+          return !err.message.match(/^layers\[0\]: source ".*" not found$/);
-          );
+        })
+        .map(err => {
+          // Remove the 'layers[0].' as we're validating the layer only here
+          const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
+          return {
+            key: errMessageParts[0],
+            message: errMessageParts[1],
+          };
         });
-        if (newNode) {
+      return getDiagnosticsFromExpressionErrors(linterErrors, ast);
-          newNode = newNode.value;
+    } catch {
-        }
+      // The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
-      }
-      return getArrayPositionalFromAst(newNode, path.slice(1));
     }
-  }
+    return [];
+  };
+}
 
-  let out: ReturnType<typeof expression.createExpression> | null = null;
+function createMaplibreStyleLinter() {
-  if (context === "layer") {
+  return (view: EditorView) => {
-    // Just an empty style so we can validate a layer.
+    const text = view.state.doc.toString();
-    const errors = validateStyleMin({
-      "version": 8,
-      "name": "Empty Style",
-      "metadata": {},
-      "sources": {},
-      "sprite": "",
-      "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
-      "layers": [
-        input
-      ]
-    });
 
-    if (errors) {
+    try {
-      out = {
+      // Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
-        result: "error",
+      const parsedJson = JSON.parse(text);
-        value: errors
+      const ast = jsonToAst(text);
-          .filter(err => {
-            // Remove missing 'layer source' errors, because we don't include them
-            return !err.message.match(/^layers\[0\]: source ".*" not found$/);
-          })
-          .map(err => {
-            // Remove the 'layers[0].' as we're validating the layer only here
-            const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
-            return {
-              name: "",
-              key: errMessageParts[0],
-              message: errMessageParts[1],
-            };
-          })
-      };
-    }
-  }
-  else if (context === "expression") {
-    out = expression.createExpression(input, opts.spec);
-  }
-  else {
-    throw new Error(`Invalid context ${context}`);
-  }
 
-  if (out?.result === "error") {
+      // Run the maplibre-gl-style-spec validator.
-    const errors = out.value;
+      const validationErrors = validateStyleMin(parsedJson);
-    errors.forEach(error => {
+      const linterErrors = validationErrors.map(err => {
-      const {key, message} = error;
+        return {
-
+          key: err.message.split(":")[0],
-      if (!key) {
+          message: err.message,
-        const lastLineHandle = doc.getLineHandle(doc.lastLine());
-        const err = {
-          from: CodeMirror.Pos(doc.firstLine(), 0),
-          to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
-          message: message,
         };
-        found.push(err);
+      });
-      }
+      return getDiagnosticsFromExpressionErrors(linterErrors, ast);
-      else if (key) {
+    } catch {
-        const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
+      // The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
-        const parsedError = getArrayPositionalFromAst(ast, path);
+    }
-        if (!parsedError) {
+    return [];
-          console.warn("Something went wrong parsing error:", error);
+  };
-          return;
+}
-        }
 
-        const {loc} = parsedError;
+function createMaplibreExpressionLinter(spec: StylePropertySpecification) {
-        const {start, end} = loc;
+  return (view: EditorView) => {
+    const text = view.state.doc.toString();
+    const parsedJson = JSON.parse(text);
+    const ast = jsonToAst(text);
+    const out = expression.createExpression(parsedJson, spec);
+    if (out?.result !== "error") {
+      return [];
+    }
+    const errors = out.value;
+    return getDiagnosticsFromExpressionErrors(errors, ast);
+  };
+}
 
-        found.push({
+export function createEditor(
-          from: CodeMirror.Pos(start.line - 1, start.column),
+  parent: HTMLElement,
-          to: CodeMirror.Pos(end.line - 1, end.column),
+  value: string,
-          message: message,
+  lintType: LintType,
-        });
+  onChange: (value: string) => void,
+  spec?: StylePropertySpecification,
+): EditorView {
+  let specificLinter: (view: EditorView) => Diagnostic[] = () => [];
+  switch (lintType) {
+    case "style":
+      specificLinter = createMaplibreStyleLinter();
+      break;
+    case "layer":
+      specificLinter = createMaplibreLayerLinter();
+      break;
+    case "expression":
+      if (!spec) {
+        throw new Error("spec is required for expression mode");
       }
-    });
+      specificLinter = createMaplibreExpressionLinter(spec);
+      break;
+    case "json":
+      specificLinter = () => [];
+      break;
   }
-
+  return new EditorView({
-  return found;
+    doc: value,
-});
+    extensions: [
+      basicSetup, 
+      json(), 
+      oneDark, 
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const doc = update.state.doc;
+          const value = doc.toString();
+          onChange(value);
+        }
+      }),
+      lintGutter(),
+      linter((view: EditorView) => {
+        const jsonErrors = jsonParseLinter()(view);
+        if (jsonErrors.length > 0) { 
+          return jsonErrors;
+        }
+        return specificLinter(view);
+      })
+    ],
+    parent,
+  });
+}

src/libs/layer.ts

@@ -1,7 +1,8 @@
 import {latest} from "@maplibre/maplibre-gl-style-spec";
 import { type LayerSpecification } from "maplibre-gl";
 
-export function changeType(layer: LayerSpecification, newType: string) {
+
+export function changeType(layer: LayerSpecification, newType: string): LayerSpecification {
   const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint };
   Object.keys(changedPaintProps).forEach(propertyName => {
     if(!(propertyName in latest["paint_" + newType])) {
@@ -20,8 +21,8 @@ export function changeType(layer: LayerSpecification, newType: string) {
     ...layer,
     paint: changedPaintProps,
     layout: changedLayoutProps,
-    type: newType,
+    type: newType
-  };
+  } as LayerSpecification;
 }
 
 /** A {@property} in either the paint our layout {@group} has changed