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/AppLayout.tsx

@@ -7,6 +7,7 @@ type AppLayoutInternalProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
+  codeEditor?: React.ReactElement
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
@@ -21,14 +22,22 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
       <div className="maputnik-layout">
         {this.props.toolbar}
         <div className="maputnik-layout-main">
-          <div className="maputnik-layout-list">
-            {this.props.layerList}
-          </div>
-          <div className="maputnik-layout-drawer">
+          {this.props.codeEditor && <div className="maputnik-layout-code-editor">
             <ScrollContainer>
-              {this.props.layerEditor}
+              {this.props.codeEditor}
             </ScrollContainer>
           </div>
+          }
+          {!this.props.codeEditor && <>
+            <div className="maputnik-layout-list">
+              {this.props.layerList}
+            </div>
+            <div className="maputnik-layout-drawer">
+              <ScrollContainer>
+                {this.props.layerEditor}
+              </ScrollContainer>
+            </div>
+          </>}
           {this.props.map}
         </div>
         {this.props.bottom && <div className="maputnik-layout-bottom">