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>

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 { Trans, type WithTranslation, withTranslation } from "react-i18next";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import "codemirror/mode/javascript/javascript";
-import "codemirror/addon/lint/lint";
-import "codemirror/addon/edit/matchbrackets";
-import "codemirror/lib/codemirror.css";
-import "codemirror/addon/lint/lint.css";
+import { type EditorView } from "@codemirror/view";
 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
-  onJSONInvalid?(...args: unknown[]): unknown
-  mode?: ModeSpec<any>
-  lint?: boolean | object
+  lintType: "layer" | "style" | "expression" | "json"
+  spec?: StylePropertySpecification | undefined
 };
 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;
-  _doc: CodeMirror.Editor | undefined;
+  _view: EditorView | undefined;
   _el: HTMLDivElement | null = null;
   _cancelNextChange: boolean = false;
 
   constructor(props: InputJsonInternalProps) {
     super(props);
-    this._keyEvent = "keyboard";
     this.state = {
       isEditing: false,
-      showMessage: false,
-      prevValue: this.props.getValue!(this.props.layer),
+      prevValue: this.getPrettyJson(this.props.value),
     };
   }
 
-  componentDidMount () {
-    this._doc = CodeMirror(this._el!, {
-      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);
+  getPrettyJson(data: any) {
+    return stringifyPretty(data, {indent: 2, maxLength: 40});
   }
 
-  onPointerDown = () => {
-    this._keyEvent = "pointer";
-  };
+  componentDidMount () {
+    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.props.getValue!(this.props.layer),
-      );
+      this._view!.dispatch({
+        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) {
-        this.props.onJSONInvalid();
-      }
-      else {
+      if (!err) {
         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">
-      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
-        <Trans t={t}>
-          Press <kbd>ESC</kbd> to lose focus
-        </Trans>
-      </div>
+    return <div className="json-editor" data-wd-key="json-editor" aria-hidden="true" style={{cursor: "text"}}>
       <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}
-          onChange={(layer) => {
+          lintType="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 = {
-  jsonError: boolean
-};
-
-class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps, ExpressionPropertyState> {
+class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps> {
   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 {jsonError} = this.state;
+    const {t, value, canUndo} = this.props;
     const undoDisabled = canUndo ? !canUndo() : true;
 
     const deleteStopBtn = (
@@ -82,58 +65,26 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
         </InputButton>
       </>
     );
-
-    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});
+    let error = undefined;
+    if (this.props.errors) {
+      const fieldKey = this.props.fieldType ? this.props.fieldType + "." + this.props.fieldName : this.props.fieldName;
+      error = this.props.errors[fieldKey];
     }
-
-    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"}}
-        lint={{
-          context: "expression",
-          spec: this.props.fieldSpec,
-        }}
+        lintType="expression"
+        spec={this.props.fieldSpec}
         className="maputnik-expression-editor"
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
-        onJSONInvalid={this.onJSONInvalid}
-        onJSONValid={this.onJSONValid}
-        layer={value}
-        lineNumbers={false}
+        value={value}
         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={{
-            name: "javascript",
-            json: true
-          }}
-          lint={true}
+          lintType="json"
           onChange={data => {
             this.props.onChange({
               ...this.props.source,