Add code editor for maputnik (#1426)

## Launch Checklist

This PR adds the ability to look at the entire style and edit it in a
code editor that supports syntax highlight, errors, search and more.

- Resolves #820

CC: @Kanahiro as I know you did something similar, probably has better
performance...

After:
<img width="1920" height="937" alt="image"
src="https://github.com/user-attachments/assets/f925cf92-2623-4390-8f75-14d7f6a79171"
/>


 - [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>
Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/components/App.tsx

@@ -13,6 +13,7 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
 import MapMaplibreGl from "./MapMaplibreGl";
 import MapOpenLayers from "./MapOpenLayers";
+import CodeEditor from "./CodeEditor";
 import LayerList from "./LayerList";
 import LayerEditor from "./LayerEditor";
 import AppToolbar, { type MapState } from "./AppToolbar";
@@ -116,6 +117,7 @@ type AppState = {
     export: boolean
     debug: boolean
     globalState: boolean
+    codeEditor: boolean
   }
   fileHandle: FileSystemFileHandle | null
 };
@@ -155,6 +157,7 @@ export default class App extends React.Component<any, AppState> {
         export: false,
         debug: false,
         globalState: false,
+        codeEditor: false
       },
       maplibreGlDebugOptions: {
         showTileBoundaries: false,
@@ -856,9 +859,15 @@ export default class App extends React.Component<any, AppState> {
       onStyleChanged={this.onStyleChanged}
       onStyleOpen={this.onStyleChanged}
       onSetMapState={this.setMapState}
-      onToggleModal={this.toggleModal.bind(this)}
+      onToggleModal={(modal: keyof AppState["isOpen"]) => this.toggleModal(modal)}
     />;
 
+    const codeEditor = this.state.isOpen.codeEditor ? <CodeEditor
+      value={this.state.mapStyle}
+      onChange={(style) => this.onStyleChanged(style)}
+      onClose={() => this.setModal("codeEditor", false)}
+    /> : undefined;
+
     const layerList = <LayerList
       onMoveLayer={this.onMoveLayer}
       onLayerDestroy={this.onLayerDestroy}
@@ -954,6 +963,7 @@ export default class App extends React.Component<any, AppState> {
       toolbar={toolbar}
       layerList={layerList}
       layerEditor={layerEditor}
+      codeEditor={codeEditor}
       map={this.mapRenderer()}
       bottom={bottomPanel}
       modals={modals}