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>

cypress/e2e/accessibility.cy.ts

@@ -18,10 +18,10 @@ describe("accessibility", () => {
       then(get.skipTargetLayerList()).shouldBeFocused();
     });
 
-    // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
-    it.skip("skip link to layer editor", () => {
+    it("skip link to layer editor", () => {
       const selector = "root:skip:layer-editor";
       then(get.elementByTestId(selector)).shouldExist();
+      then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
       when.tab().tab();
       then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);