Update handleMapboxStyleChange function in App.svelte and CodeEditor.…

…svelte

example/src/App.svelte

@@ -28,6 +28,19 @@
       mapboxStyleJson.set(`Error: ${(error as Error).message}`);
     }
   }
+  function handleMapboxStyleChange(event: CustomEvent<string>) {
+    mapboxStyleJson.set(event.detail);
+  }
+
+  // Watch for changes in mapboxStyleJson and update maplibreStyle
+  $: {
+    try {
+      const parsedStyle = JSON.parse($mapboxStyleJson);
+      maplibreStyle.set(parsedStyle);
+    } catch (error) {
+      console.error("Failed to parse Mapbox style JSON:", error);
+    }
+  }
 </script>
 
 <div class="flex flex-col md:flex-row h-screen">
@@ -63,7 +76,11 @@
   <!-- CODE EDITOR 2 -->
   <div class="flex-1 flex flex-col">
     <div class="flex-1 p-4 overflow-auto bg-gray-50">
-      <CodeEditor bind:content={$mapboxStyleJson} language="json"></CodeEditor>
+      <CodeEditor
+        bind:content={$mapboxStyleJson}
+        on:change={handleMapboxStyleChange}
+        language="json"
+      ></CodeEditor>
     </div>
     <div class="flex items-center p-4 bg-gray-200">
       <input

example/src/lib/Monaco/CodeEditor.svelte

@@ -3,13 +3,15 @@
   import loader from "@monaco-editor/loader";
   import { onDestroy, onMount } from "svelte";
   import type * as Monaco from "monaco-editor/esm/vs/editor/editor.api";
+  import { createEventDispatcher } from "svelte";
 
   export let content: string = ""; // Default content as empty string
   export let language: string = "javascript"; // Default language
 
   let editor: Monaco.editor.IStandaloneCodeEditor;
   let monaco: typeof Monaco;
   let editorContainer: HTMLElement;
+  const dispatch = createEventDispatcher();
 
   onMount(async () => {
     // Initialize the loader with the configuration if needed
@@ -36,6 +38,14 @@
     editor.getModel()?.dispose(); // Dispose the model explicitly
     editor.dispose(); // Dispose the editor instance
   });
+
+  // Watch for changes in the editor content and emit an event
+  $: if (editor) {
+    editor.onDidChangeModelContent(() => {
+      const updatedContent = editor.getValue();
+      dispatch("change", updatedContent);
+    });
+  }
 </script>
 
 <div bind:this={editorContainer} class="editor-container"></div>