Codemirror 5 to 6 upgrade (#1386)

## Launch Checklist

- Resolves #891

This PR upgrades code mirror from version 5 to version 6.
It should not change any functionality dramatically.
The filter and other expressions have line numbers now as I was not able
to remove those without introducing a lot of code, which I preferred not
to.

Before:

<img width="571" height="933" alt="image"
src="https://github.com/user-attachments/assets/02f047ee-0857-4eb1-9431-2620099ea025"
/>


After:
<img width="571" height="933" alt="image"
src="https://github.com/user-attachments/assets/7cf60155-7cd9-4c06-915e-dec2ae8247fc"
/>



 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -78,6 +78,20 @@ jobs:
           name: maputnik-windows
           path: ./desktop/bin/windows/
 
+  unit-tests:
+    name: "Unit tests"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - run: npm ci
+      - run: npm run test-unit-ci
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          files: ${{ github.workspace }}/coverage/coverage-final.json
+          verbose: true
+
   e2e-tests:
     name: "E2E tests using chrome"
 

CHANGELOG.md

@@ -8,6 +8,8 @@
 - Add ability to control the projection of the map - either globe or mercator
 - Add markdown support for doc related to the style-spec fields
 - Added global state modal to allow editing the global state
+- Added color highlight for problematic properties
+- Upgraded codemirror from version 5 to version 6
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
@@ -17,6 +19,7 @@
 - Fixed an issue with the generation of tranlations
 - Fix missing spec info when clicking next to a property
 - Fix Firefox open file that stopped working due to react upgrade
+- Fix issue with missing bottom error panel
 - _...Add new stuff here..._
 
 ## 3.0.0

cypress/e2e/layer-editor.cy.ts

@@ -0,0 +1,260 @@
+import { MaputnikDriver } from "./maputnik-driver";
+import { v1 as uuid } from "uuid";
+
+describe("layer editor", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+  beforeEach(() => {
+    when.setStyle("both");
+    when.modal.open();
+  });
+
+  function createBackground() {
+    const id = uuid();
+
+    when.selectWithin("add-layer.layer-type", "background");
+    when.setValue("add-layer.layer-id.input", "background:" + id);
+
+    when.click("add-layer");
+
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "background:" + id,
+          type: "background",
+        },
+      ],
+    });
+    return id;
+  }
+
+  it("expand/collapse");
+  it("id", () => {
+    const bgId = createBackground();
+
+    when.click("layer-list-item:background:" + bgId);
+
+    const id = uuid();
+    when.setValue("layer-editor.layer-id.input", "foobar:" + id);
+    when.click("min-zoom");
+
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "foobar:" + id,
+          type: "background",
+        },
+      ],
+    });
+  });
+
+  describe("source", () => {
+    it("should show error when the source is invalid", () => {
+      when.modal.fillLayers({
+        type: "circle",
+        layer: "invalid",
+      });
+      then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
+    });
+  });
+
+  describe("min-zoom", () => {
+    let bgId: string;
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("min-zoom.input-text", "1");
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update min-zoom in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            minzoom: 1,
+          },
+        ],
+      });
+    });
+
+    it("when clicking next layer should update style on local storage", () => {
+      when.type("min-zoom.input-text", "{backspace}");
+      when.click("max-zoom.input-text");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            minzoom: 1,
+          },
+        ],
+      });
+    });
+  });
+
+  describe("max-zoom", () => {
+    let bgId: string;
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("max-zoom.input-text", "1");
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            maxzoom: 1,
+          },
+        ],
+      });
+    });
+  });
+
+  describe("comments", () => {
+    let bgId: string;
+    const comment = "42";
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("layer-comment.input", comment);
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            metadata: {
+              "maputnik:comment": comment,
+            },
+          },
+        ],
+      });
+    });
+
+    describe("when unsetting", () => {
+      beforeEach(() => {
+        when.clear("layer-comment.input");
+        when.click("min-zoom.input-text");
+      });
+
+      it("should update style in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: "background:" + bgId,
+              type: "background",
+            },
+          ],
+        });
+      });
+    });
+  });
+
+  describe("color", () => {
+    let bgId: string;
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.click("spec-field:background-color");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("opacity", () => {
+    let bgId: string;
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.type("spec-field-input:background-opacity", "0.");
+    });
+
+    it("should keep '.' in the input field", () => {
+      then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
+    });
+
+    it("should revert to a valid value when focus out", () => {
+      when.click("layer-list-item:background:" + bgId);
+      then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
+    });
+  });
+
+
+
+  describe("filter", () => {
+    it("expand/collapse");
+    it("compound filter");
+  });
+
+  describe("paint", () => {
+    it("expand/collapse");
+    it("color");
+    it("pattern");
+    it("opacity");
+  });
+
+  describe("json-editor", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "circle",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ],
+      });
+
+      const sourceText = get.elementByText('"source"');
+
+      sourceText.click();
+      sourceText.type("\"");
+
+      then(get.element(".cm-lint-marker-error")).shouldExist();
+    });
+
+
+    it("expand/collapse");
+    it("modify");
+
+    it("parse error", () => {
+      const bgId = createBackground();
+
+      when.click("layer-list-item:background:" + bgId);
+      when.collapseGroupInLayerEditor();
+      when.collapseGroupInLayerEditor(1);
+      then(get.element(".cm-lint-marker-error")).shouldNotExist();
+
+      when.appendTextInJsonEditor(
+        "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+      );
+      then(get.element(".cm-lint-marker-error")).shouldExist();
+    });
+  });
+});

cypress/e2e/layers-list.cy.ts

@@ -1,7 +1,6 @@
-import { v1 as uuid } from "uuid";
 import { MaputnikDriver } from "./maputnik-driver";
 
-describe("layers", () => {
+describe("layers list", () => {
   const { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
@@ -132,227 +131,7 @@ describe("layers", () => {
       });
     });
 
-    describe("modify", () => {
+    describe("modify", () => {});
-      function createBackground() {
-        // Setup
-        const id = uuid();
-
-        when.selectWithin("add-layer.layer-type", "background");
-        when.setValue("add-layer.layer-id.input", "background:" + id);
-
-        when.click("add-layer");
-
-        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [
-            {
-              id: "background:" + id,
-              type: "background",
-            },
-          ],
-        });
-        return id;
-      }
-
-      // ====> THESE SHOULD BE FROM THE SPEC
-      describe("layer", () => {
-        it("expand/collapse");
-        it("id", () => {
-          const bgId = createBackground();
-
-          when.click("layer-list-item:background:" + bgId);
-
-          const id = uuid();
-          when.setValue("layer-editor.layer-id.input", "foobar:" + id);
-          when.click("min-zoom");
-
-          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            layers: [
-              {
-                id: "foobar:" + id,
-                type: "background",
-              },
-            ],
-          });
-        });
-
-        describe("min-zoom", () => {
-          let bgId: string;
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("min-zoom.input-text", "1");
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update min-zoom in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  minzoom: 1,
-                },
-              ],
-            });
-          });
-
-          it("when clicking next layer should update style on local storage", () => {
-            when.type("min-zoom.input-text", "{backspace}");
-            when.click("max-zoom.input-text");
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  minzoom: 1,
-                },
-              ],
-            });
-          });
-        });
-
-        describe("max-zoom", () => {
-          let bgId: string;
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("max-zoom.input-text", "1");
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  maxzoom: 1,
-                },
-              ],
-            });
-          });
-        });
-
-        describe("comments", () => {
-          let bgId: string;
-          const comment = "42";
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("layer-comment.input", comment);
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  metadata: {
-                    "maputnik:comment": comment,
-                  },
-                },
-              ],
-            });
-          });
-
-          describe("when unsetting", () => {
-            beforeEach(() => {
-              when.clear("layer-comment.input");
-              when.click("min-zoom.input-text");
-            });
-
-            it("should update style in local storage", () => {
-              then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-                layers: [
-                  {
-                    id: "background:" + bgId,
-                    type: "background",
-                  },
-                ],
-              });
-            });
-          });
-        });
-
-        describe("color", () => {
-          let bgId: string;
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.click("spec-field:background-color");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                },
-              ],
-            });
-          });
-        });
-
-        describe("opacity", () => {
-          let bgId: string;
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.type("spec-field-input:background-opacity", "0.");
-          });
-
-          it("should keep '.' in the input field", () => {
-            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
-          });
-
-          it("should revert to a valid value when focus out", () => {
-            when.click("layer-list-item:background:" + bgId);
-            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
-          });
-        });
-
-      });
-
-      describe("filter", () => {
-        it("expand/collapse");
-        it("compound filter");
-      });
-
-      describe("paint", () => {
-        it("expand/collapse");
-        it("color");
-        it("pattern");
-        it("opacity");
-      });
-      // <=====
-
-      describe("json-editor", () => {
-        it("expand/collapse");
-        it("modify");
-
-        // TODO
-        it.skip("parse error", () => {
-          const bgId = createBackground();
-
-          when.click("layer-list-item:background:" + bgId);
-
-          const errorSelector = ".CodeMirror-lint-marker-error";
-          then(get.elementByTestId(errorSelector)).shouldNotExist();
-
-          when.click(".CodeMirror");
-          when.typeKeys(
-            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
-          );
-          then(get.elementByTestId(errorSelector)).shouldExist();
-        });
-      });
-    });
   });
 
   describe("fill", () => {
@@ -658,7 +437,7 @@ describe("layers", () => {
       });
       when.collapseGroupInLayerEditor();
       when.click("make-elevation-function");
-      then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .CodeMirror-line")).shouldBeVisible();
+      then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")).shouldBeVisible();
     });
   });
 
@@ -698,48 +477,6 @@ describe("layers", () => {
     });
   });
 
-  describe("layers editor", () => {
-    describe("property fields", () => {
-      it("should show error", () => {
-        when.modal.fillLayers({
-          type: "circle",
-          layer: "invalid",
-        });
-
-        then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
-      });
-    });
-
-    describe("jsonlint should error", ()=>{
-      it("add", () => {
-        const id = when.modal.fillLayers({
-          type: "circle",
-          layer: "example",
-        });
-
-        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [
-            {
-              id: id,
-              type: "circle",
-              source: "example",
-            },
-          ],
-        });
-
-        const sourceText = get.elementByText('"source"');
-
-        sourceText.click();
-        sourceText.type("\"");
-
-        const error = get.element(".CodeMirror-lint-marker-error");
-        error.should("exist");
-      });
-    });
-  });
-
-
-
   describe("drag and drop", () => {
     it("move layer should update local storage", () => {
       when.modal.open();

cypress/e2e/maputnik-driver.ts

@@ -195,6 +195,10 @@ export class MaputnikDriver {
 
     collapseGroupInLayerEditor: (index = 0) => {
       this.helper.get.element(".maputnik-layer-editor-group__button").eq(index).realClick();
+    },
+
+    appendTextInJsonEditor: (text: string) => {
+      this.helper.get.element(".cm-line").first().click().type(text, { parseSpecialCharSequences: false });
     }
   };
 

package.json

@@ -12,6 +12,8 @@
     "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint",
     "test": "cypress run",
+    "test-unit": "vitest",
+    "test-unit-ci": "vitest run --coverage --reporter=json",
     "cy:open": "cypress open",
     "lint-css": "stylelint \"src/styles/*.scss\"",
     "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
@@ -24,18 +26,22 @@
   "license": "MIT",
   "homepage": "https://github.com/maplibre/maputnik#readme",
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.0",
     "@maplibre/maplibre-gl-inspect": "^1.7.1",
-    "@maplibre/maplibre-gl-style-spec": "^23.3.0",
+    "@maplibre/maplibre-gl-style-spec": "^24.1.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.2",
     "detect-browser": "^5.3.0",
     "downshift": "^9.0.10",
@@ -53,7 +59,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^5.7.1",
+    "maplibre-gl": "^5.7.2",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.6.1",
     "ol-mapbox-style": "^13.1.0",
@@ -118,9 +124,9 @@
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "^19.1.9",
     "@types/string-hash": "^1.1.3",
-    "@types/uuid": "^11.0.0",
     "@types/wicg-file-system-access": "^2023.10.6",
     "@vitejs/plugin-react": "^5.0.3",
+    "@vitest/coverage-v8": "^3.2.4",
     "cors": "^2.8.5",
     "cypress": "^15.2.0",
     "cypress-plugin-tab": "^1.0.5",
@@ -141,6 +147,7 @@
     "typescript-eslint": "^8.44.0",
     "uuid": "^13.0.0",
     "vite": "^7.1.5",
-    "vite-plugin-istanbul": "^7.2.0"
+    "vite-plugin-istanbul": "^7.2.0",
+    "vitest": "^3.2.4"
   }
 }

src/components/FilterEditor.tsx

@@ -3,7 +3,8 @@ import { TbMathFunction } from "react-icons/tb";
 import { PiListPlusBold } from "react-icons/pi";
 import {isEqual} from "lodash";
 import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
-import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
+import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
 import {combiningFilterOps} from "../libs/filterops";
 import InputSelect from "./InputSelect";
@@ -96,7 +97,7 @@ type FilterEditorInternalProps = {
   properties?: {[key:string]: any}
   filter?: any[]
   errors?: MappedLayerErrors
-  onChange(value: LegacyFilterSpecification | ExpressionSpecification): unknown
+  onChange(value: LegacyFilterSpecification | ExpressionSpecification): void
 } & WithTranslation;
 
 type FilterEditorState = {
@@ -293,7 +294,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,127 +1,87 @@
 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-editor-factory";
+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
+  lintType: "layer" | "style" | "expression" | "json"
-  onJSONInvalid?(...args: unknown[]): unknown
+  spec?: StylePropertySpecification | undefined
-  mode?: ModeSpec<any>
-  lint?: boolean | object
 };
 type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
 type InputJsonState = {
   isEditing: boolean
-  showMessage: boolean
   prevValue: string
 };
 
 class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJsonState> {
   static defaultProps = {
-    lineNumbers: true,
-    lineWrapping: false,
-    gutters: ["CodeMirror-lint-markers"],
-    getValue: (data: any) => {
-      return stringifyPretty(data, {indent: 2, maxLength: 40});
-    },
     onFocus: () => {},
     onBlur: () => {},
-    onJSONInvalid: () => {},
-    onJSONValid: () => {},
   };
-  _keyEvent: string;
+  _view: EditorView | undefined;
-  _doc: CodeMirror.Editor | undefined;
   _el: HTMLDivElement | null = null;
   _cancelNextChange: boolean = false;
 
   constructor(props: InputJsonInternalProps) {
     super(props);
-    this._keyEvent = "keyboard";
     this.state = {
       isEditing: false,
-      showMessage: false,
+      prevValue: this.getPrettyJson(this.props.value),
-      prevValue: this.props.getValue!(this.props.layer),
     };
   }
 
-  componentDidMount () {
+  getPrettyJson(data: any) {
-    this._doc = CodeMirror(this._el!, {
+    return stringifyPretty(data, {indent: 2, maxLength: 40});
-      value: this.props.getValue!(this.props.layer),
-      mode: this.props.mode || {
-        name: "mgl",
-      },
-      lineWrapping: this.props.lineWrapping,
-      tabSize: 2,
-      theme: "maputnik",
-      viewportMargin: Infinity,
-      lineNumbers: this.props.lineNumbers,
-      lint: this.props.lint || {
-        context: "layer"
-      },
-      matchBrackets: true,
-      gutters: this.props.gutters,
-      scrollbarStyle: "null",
-    });
-
-    this._doc.on("change", this.onChange);
-    this._doc.on("focus", this.onFocus);
-    this._doc.on("blur", this.onBlur);
   }
 
-  onPointerDown = () => {
+  componentDidMount () {
-    this._keyEvent = "pointer";
+    this._view = createEditor({
-  };
+      parent: this._el!,
+      value: this.getPrettyJson(this.props.value),
+      lintType: this.props.lintType || "layer",
+      onChange: (value:string) => this.onChange(value),
+      onFocus: () => this.onFocus(),
+      onBlur: () => this.onBlur(),
+      spec: this.props.spec
+    });
+  }
 
   onFocus = () => {
     if (this.props.onFocus) this.props.onFocus();
     this.setState({
       isEditing: true,
-      showMessage: (this._keyEvent === "keyboard"),
     });
   };
 
   onBlur = () => {
-    this._keyEvent = "keyboard";
     if (this.props.onBlur) this.props.onBlur();
     this.setState({
       isEditing: false,
-      showMessage: false,
     });
   };
 
-  componentWillUnMount () {
-    this._doc!.off("change", this.onChange);
-    this._doc!.off("focus", this.onFocus);
-    this._doc!.off("blur", this.onBlur);
-  }
-
   componentDidUpdate(prevProps: InputJsonProps) {
-    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+    if (!this.state.isEditing && prevProps.value !== this.props.value) {
       this._cancelNextChange = true;
-      this._doc!.setValue(
+      this._view!.dispatch({
-        this.props.getValue!(this.props.layer),
+        changes: {
-      );
+          from: 0,
+          to: this._view!.state.doc.length,
+          insert: this.getPrettyJson(this.props.value)
+        }
+      });
     }
   }
 
@@ -129,11 +89,11 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     if (this._cancelNextChange) {
       this._cancelNextChange = false;
       this.setState({
-        prevValue: this._doc!.getValue(),
+        prevValue: this._view!.state.doc.toString(),
       });
       return;
     }
-    const newCode = this._doc!.getValue();
+    const newCode = this._view!.state.doc.toString();
 
     if (this.state.prevValue !== newCode) {
       let parsedLayer, err;
@@ -144,12 +104,8 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
         console.warn(_err);
       }
 
-      if (err && this.props.onJSONInvalid) {
+      if (!err) {
-        this.props.onJSONInvalid();
-      }
-      else {
         if (this.props.onChange) this.props.onChange(parsedLayer);
-        if (this.props.onJSONValid) this.props.onJSONValid();
       }
     }
 
@@ -159,19 +115,12 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   };
 
   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">
+    return <div className="json-editor" data-wd-key="json-editor" aria-hidden="true" style={{cursor: "text"}}>
-      <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,34 +1,30 @@
 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";
 import { type MappedLayerErrors } from "../libs/definitions";
 
 
 type ExpressionPropertyInternalProps = {
-  onDelete?(...args: unknown[]): unknown
   fieldName: string
   fieldType?: string
-  fieldSpec?: object
+  fieldSpec?: StylePropertySpecification
   value?: any
   errors?: MappedLayerErrors
-  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: () => {},
@@ -42,21 +38,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,58 +65,26 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
         </InputButton>
       </>
     );
-
+    let error = undefined;
-    const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
+    if (this.props.errors) {
-
+      const fieldKey = this.props.fieldType ? this.props.fieldType + "." + this.props.fieldName : this.props.fieldName;
-    const fieldError = errors![fieldKey];
+      error = this.props.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}
+      error={error}
     >
       <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-editor-factory.ts

@@ -0,0 +1,193 @@
+import { basicSetup } from "codemirror";
+import { EditorView } from "@codemirror/view";
+import { EditorState, Compartment } from "@codemirror/state";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+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";
+import { jsonPathToPosition } from "./json-path-to-position";
+
+export type LintType = "layer" | "style" | "expression" | "json";
+
+type LinterError = {
+  key: string | null;
+  message: string;
+};
+
+function getDiagnosticsFromExpressionErrors(errors: LinterError[], ast: ValueNode | PropertyNode) {
+  const diagnostics: Diagnostic[] = [];
+  for (const error of errors) {
+    const {key, message} = error;
+    if (!key) {
+      diagnostics.push({
+        from: 0,
+        to: ast.loc ? ast.loc.end.offset : 0,
+        severity: "error",
+        message: message,
+      });
+    } else {
+      const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
+      const node = jsonPathToPosition(path, ast);
+      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;
+}
+
+function createMaplibreLayerLinter() {
+  return (view: EditorView) => {
+    const text = view.state.doc.toString();
+
+    try {
+      // Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
+      const parsedJson = JSON.parse(text);
+      const ast = jsonToAst(text);
+
+      // Run the maplibre-gl-style-spec validator.
+      const validationErrors = validateStyleMin({
+        "version": 8,
+        "name": "Empty Style",
+        "metadata": {},
+        "sources": {},
+        "sprite": "",
+        "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
+        "layers": [
+          parsedJson
+        ]
+      });
+
+      const linterErrors = validationErrors
+        .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 {
+            key: errMessageParts[0],
+            message: errMessageParts[1],
+          };
+        });
+      return getDiagnosticsFromExpressionErrors(linterErrors, ast);
+    } catch {
+      // The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
+    }
+    return [];
+  };
+}
+
+function createMaplibreStyleLinter() {
+  return (view: EditorView) => {
+    const text = view.state.doc.toString();
+
+    try {
+      // Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
+      const parsedJson = JSON.parse(text);
+      const ast = jsonToAst(text);
+
+      // Run the maplibre-gl-style-spec validator.
+      const validationErrors = validateStyleMin(parsedJson);
+      const linterErrors = validationErrors.map(err => {
+        return {
+          key: err.message.split(":")[0],
+          message: err.message,
+        };
+      });
+      return getDiagnosticsFromExpressionErrors(linterErrors, ast);
+    } catch {
+      // The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
+    }
+    return [];
+  };
+}
+
+function createMaplibreExpressionLinter(spec?: StylePropertySpecification) {
+  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);
+  };
+}
+
+export function createEditor(props: {
+  parent: HTMLElement,
+  value: string,
+  lintType: LintType,
+  onChange: (value: string) => void,
+  onFocus: () => void,
+  onBlur: () => void,
+  spec?: StylePropertySpecification,
+}): EditorView {
+  let specificLinter: (view: EditorView) => Diagnostic[] = () => [];
+  switch (props.lintType) {
+    case "style":
+      specificLinter = createMaplibreStyleLinter();
+      break;
+    case "layer":
+      specificLinter = createMaplibreLayerLinter();
+      break;
+    case "expression":
+      specificLinter = createMaplibreExpressionLinter(props.spec);
+      break;
+    case "json":
+      specificLinter = () => [];
+      break;
+  }
+
+  return new EditorView({
+    doc: props.value,
+    extensions: [
+      basicSetup,
+      json(),
+      oneDark,
+      new Compartment().of(EditorState.tabSize.of(2)),
+      EditorView.theme({
+        "&": {
+          fontSize: "9pt"
+        }
+      }),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const doc = update.state.doc;
+          const value = doc.toString();
+          props.onChange(value);
+        }
+        if (update.focusChanged) {
+          if (update.view.hasFocus) {
+            props.onFocus();
+          } else {
+            props.onBlur();
+          }
+        }
+      }),
+      lintGutter(),
+      linter((view: EditorView) => {
+        const jsonErrors = jsonParseLinter()(view);
+        if (jsonErrors.length > 0) {
+          return jsonErrors;
+        }
+        return specificLinter(view);
+      })
+    ],
+    parent: props.parent,
+  });
+}

src/libs/codemirror-mgl.ts

@@ -1,174 +0,0 @@
-import {parse} from "@prantlf/jsonlint";
-import CodeMirror, { type MarkerRange } from "codemirror";
-import jsonToAst from "json-to-ast";
-import {expression, validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
-
-type MarkerRangeWithMessage = MarkerRange & {message: string};
-
-
-CodeMirror.defineMode("mgl", (config, parserConfig) => {
-  // Just using the javascript mode with json enabled. Our logic is in the linter below.
-  return CodeMirror.modes.javascript(
-    {...config, json: true} as any,
-    parserConfig
-  );
-});
-
-
-function tryToParse(text: string) {
-
-  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
-      });
-    }
-  }
-
-  return found;
-}
-
-CodeMirror.registerHelper("lint", "json", (text: string) => {
-  return tryToParse(text);
-});
-
-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;
-  }
-
-  const ast = jsonToAst(text);
-  const input = JSON.parse(text);
-
-  function getArrayPositionalFromAst(node: any, path: string[]) {
-    if (!node) {
-      return undefined;
-    }
-    else if (path.length < 1) {
-      return node;
-    }
-    else if (!node.children) {
-      return undefined;
-    }
-    else {
-      const key = path[0];
-      let newNode;
-      if (key.match(/^[0-9]+$/)) {
-        newNode = node.children[path[0]];
-      }
-      else {
-        newNode = node.children.find((childNode: any) => {
-          return (
-            childNode.key &&
-            childNode.key.type === "Identifier" &&
-            childNode.key.value === key
-          );
-        });
-        if (newNode) {
-          newNode = newNode.value;
-        }
-      }
-      return getArrayPositionalFromAst(newNode, path.slice(1));
-    }
-  }
-
-  let out: ReturnType<typeof expression.createExpression> | null = null;
-  if (context === "layer") {
-    // Just an empty style so we can validate a layer.
-    const errors = validateStyleMin({
-      "version": 8,
-      "name": "Empty Style",
-      "metadata": {},
-      "sources": {},
-      "sprite": "",
-      "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
-      "layers": [
-        input
-      ]
-    });
-
-    if (errors) {
-      out = {
-        result: "error",
-        value: errors
-          .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") {
-    const errors = out.value;
-    errors.forEach(error => {
-      const {key, message} = error;
-
-      if (!key) {
-        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);
-      }
-      else if (key) {
-        const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
-        const parsedError = getArrayPositionalFromAst(ast, path);
-        if (!parsedError) {
-          console.warn("Something went wrong parsing error:", error);
-          return;
-        }
-
-        const {loc} = parsedError;
-        const {start, end} = loc;
-
-        found.push({
-          from: CodeMirror.Pos(start.line - 1, start.column),
-          to: CodeMirror.Pos(end.line - 1, end.column),
-          message: message,
-        });
-      }
-    });
-  }
-
-  return found;
-});

src/libs/json-path-to-position.test.ts

@@ -0,0 +1,67 @@
+import jsonToAst from "json-to-ast";
+import { describe, it, expect } from "vitest";
+import { jsonPathToPosition } from "./json-path-to-position";
+
+describe("json-path-to-position", () => {
+  it("should get position of a simple key", () => {
+    const json = {
+      "key1": "value1",
+      "key2": "value2"
+    };
+    const text = JSON.stringify(json);
+    const ast = jsonToAst(text);
+    const node = jsonPathToPosition(["key1"], ast);
+    expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value1"');
+  });
+
+  it("should get position of second key", () => {
+    const json = {
+      "key1": "value1",
+      "key2": "value2"
+    };
+    const text = JSON.stringify(json);
+    const ast = jsonToAst(text);
+    const node = jsonPathToPosition(["key2"], ast);
+    expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value2"');
+  });
+
+  it("should get position key in array", () => {
+    const json = {
+      "layers": [
+        {
+          "id": "layer1"
+        }, {
+          "id": "layer2"
+        }
+      ]
+    };
+    const text = JSON.stringify(json);
+    const ast = jsonToAst(text);
+    const node = jsonPathToPosition(["layers", "1", "id"], ast);
+    expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"layer2"');
+  });
+
+  it("should return undefined when key does not exist", () => {
+    const json = {
+      "layers": [
+        {
+          "id": "layer1"
+        }, {
+          "id": "layer2"
+        }
+      ]
+    };
+    const text = JSON.stringify(json);
+    const ast = jsonToAst(text);
+    const node = jsonPathToPosition(["layers", "2", "id"], ast);
+    expect(node).toBe(undefined);
+  });
+
+  it("should return undefined for value type", () => {
+    const json = 1;
+    const text = JSON.stringify(json);
+    const ast = jsonToAst(text);
+    const node = jsonPathToPosition(["id"], ast);
+    expect(node).toBe(undefined);
+  });
+});

src/libs/json-path-to-position.ts

@@ -0,0 +1,25 @@
+import { type PropertyNode, type ValueNode } from "json-to-ast";
+
+export function jsonPathToPosition(path: string[], node: ValueNode | PropertyNode | undefined,) {
+  if (!node) {
+    return undefined;
+  }
+  if (path.length < 1) {
+    return node;
+  }
+  if (!("children" in node)) {
+    return undefined;
+  }
+  const key = path[0];
+  if (key.match(/^[0-9]+$/)) {
+    return jsonPathToPosition(path.slice(1), node.children[+path[0]]);
+  }
+  const newNode = node.children.find((childNode) => {
+    return (
+      "key" in childNode &&
+      childNode.key.type === "Identifier" &&
+      childNode.key.value === key
+    );
+  }) as PropertyNode | undefined;
+  return jsonPathToPosition(path.slice(1), newNode?.value);
+}

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

src/styles/_codemirror.scss

@@ -1,100 +0,0 @@
-@use "vars";
-
-.CodeMirror-lint-tooltip {
-  z-index: 2000 !important;
-}
-
-.codemirror-container {
-  max-width: 100%;
-  position: relative;
-  overflow: auto;
-}
-
-.cm-s-maputnik.CodeMirror {
-  height: 100%;
-  font-size: 12px;
-  background: transparent;
-}
-
-.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  color: #8e8e8e;
-  border: none;
-}
-
-.cm-s-maputnik .CodeMirror-gutters {
-  background: #212328;
-}
-
-.cm-s-maputnik .CodeMirror-cursor {
-    border-left: solid thin #f0f0f0 !important;
-}
-
-.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::selection,
-.cm-s-maputnik .CodeMirror-line > span::selection,
-.cm-s-maputnik .CodeMirror-line > span > span::selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
-  color: #8f9d6a;
-}
-.cm-s-maputnik span.cm-number { color: #91675f; }
-.cm-s-maputnik span.cm-property { color: #b8a077; }
-
-.cm-s-maputnik .CodeMirror-activeline-background {
-  background: rgba(255,255,255,0.1);
-}
-
-.cm-s-maputnik .CodeMirror-matchingbracket {
-  background: hsla(223, 12%, 35%, 1);
-  color: vars.$color-white !important;
-}
-
-.cm-s-maputnik .CodeMirror-nonmatchingbracket {
-  background-color: #bb0000;
-  color: white !important;
-}
-
-@keyframes JSONEditor__animation-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.JSONEditor__message {
-  position: absolute;
-  right: 0;
-  font-size: 0.85em;
-  z-index: 99999;
-  padding: 0.3em 0.5em;
-  background: hsla(0, 0%, 0%, 0.3);
-  color: vars.$color-lowgray;
-  border-bottom-left-radius: 2px;
-  transition: opacity 320ms ease;
-  opacity: 0;
-  pointer-events: none;
-
-  &--on {
-    opacity: 1;
-    animation: 320ms ease 0s JSONEditor__animation-fade;
-    animation-delay: 2000ms;
-    animation-fill-mode: forwards;
-  }
-
-  kbd {
-    font-family: monospace;
-  }
-}

src/styles/index.scss

@@ -15,7 +15,6 @@
 @use 'zoomproperty';
 @use 'popup';
 @use 'map';
-@use 'codemirror';
 @use 'react-collapse';
 
 .maputnik-layout {