Add various improvements and fixes to studio, should fix #2055

src/UI/Studio/RawEditor.svelte

@@ -8,6 +8,15 @@
 
   export let state: EditLayerState | EditThemeState
 
+  let rawConfig = state.configuration.sync(f => JSON.stringify(f, null, "  "), [], json => {
+    try {
+      return JSON.parse(json)
+    } catch (e) {
+      console.error("Could not parse", json)
+      return undefined
+    }
+  })
+
   let container: HTMLDivElement
   let monaco: typeof Monaco
   let editor: Monaco.editor.IStandaloneCodeEditor
@@ -34,13 +43,19 @@
     return () => window.removeEventListener("keydown", handler)
   })
 
+  let useFallback = false
   onMount(async () => {
     const monacoEditor = await import("monaco-editor")
     loader.config({
       monaco: monacoEditor.default,
     })
 
-    monaco = await loader.init()
+    try {
+      monaco = await loader.init()
+    } catch (e) {
+      console.error("Could not load Monaco Editor, falling back", e)
+      useFallback = true
+    }
 
     // Determine schema based on the state
     let schemaUri: string
@@ -50,7 +65,7 @@
       schemaUri = "https://mapcomplete.org/schemas/layoutconfig.json"
     }
 
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    monaco?.languages?.json?.jsonDefaults?.setDiagnosticsOptions({
       validate: true,
       schemas: [
         {
@@ -64,23 +79,28 @@
       ],
     })
 
-    let modelUri = monaco.Uri.parse("inmemory://inmemory/file.json")
+    let modelUri = monaco?.Uri?.parse("inmemory://inmemory/file.json")
 
     // Create a new model
-    model = monaco.editor.createModel(
-      JSON.stringify(state.configuration.data, null, "  "),
-      "json",
-      modelUri
-    )
+    try {
+      model = monaco?.editor?.createModel(
+        JSON.stringify(state.configuration.data, null, "  "),
+        "json",
+        modelUri,
+      )
+    } catch (e) {
+      console.error("Could not create model in MOnaco Editor", e)
+      useFallback = true
+    }
 
-    editor = monaco.editor.create(container, {
+    editor = monaco?.editor?.create(container, {
       model,
       automaticLayout: true,
     })
 
     // When the editor is changed, update the configuration, but only if the user hasn't typed for 500ms and the JSON is valid
     let timeout: number
-    editor.onDidChangeModelContent(() => {
+    editor?.onDidChangeModelContent(() => {
       clearTimeout(timeout)
       timeout = setTimeout(() => {
         save()
@@ -98,4 +118,8 @@
   })
 </script>
 
-<div bind:this={container} class="h-full w-full" />
+{#if useFallback}
+  <textarea class="w-full" rows="25" bind:value={$rawConfig} />
+{:else}
+  <div bind:this={container} class="h-full w-full" />
+{/if}