From 4bf6dc0db63b8cd0a34445d3e0f8d435f3a7cc98 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 13 Apr 2025 13:12:30 +0530
Subject: [PATCH] chore: Unify code update logic

---
 src/lib/components/DesktopEditor.svelte | 21 +++++++--------------
 src/lib/components/Editor.svelte        | 15 +++++++++++----
 src/lib/components/MobileEditor.svelte  | 11 +++++------
 src/lib/types.d.ts                      |  4 ++++
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte
index 42f6d7ee..c7827040 100644
--- a/src/lib/components/DesktopEditor.svelte
+++ b/src/lib/components/DesktopEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { EditorMode } from '$/types';
-  import { stateStore, updateCode, updateConfig } from '$/util/state';
+  import type { EditorProps } from '$/types';
+  import { stateStore } from '$/util/state';
   import { initEditor } from '$lib/util/monacoExtra';
   import { errorDebug } from '$lib/util/util';
   import { mode } from 'mode-watcher';
@@ -9,25 +9,18 @@
   import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import { onMount } from 'svelte';
 
+  const { onUpdate }: EditorProps = $props();
+
   let divElement: HTMLDivElement | undefined = $state();
   let editor: monaco.editor.IStandaloneCodeEditor | undefined;
-  let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+  let editorOptions = {
     minimap: {
       enabled: false
     },
-    theme: 'mermaid',
     overviewRulerLanes: 0
-  };
+  } satisfies monaco.editor.IStandaloneEditorConstructionOptions;
   let currentText = '';
 
-  const handleUpdate = (text: string, mode: EditorMode) => {
-    if (mode === 'code') {
-      updateCode(text);
-    } else {
-      updateConfig(text);
-    }
-  };
-
   onMount(() => {
     self.MonacoEnvironment = {
       getWorker(_, label) {
@@ -51,7 +44,7 @@
         return;
       }
       currentText = newText;
-      handleUpdate(currentText, $stateStore.editorMode);
+      onUpdate(currentText);
     });
 
     const unsubscribeState = stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 94c80bed..24fe6cfd 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -6,17 +6,24 @@
   import { Button } from '$/components/ui/button';
   import { TID } from '$/constants';
   import { env } from '$/util/env';
-  import { stateStore, urlsStore } from '$lib/util/state';
+  import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state';
   import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';
 
-  export let isMobile: boolean;
+  let { isMobile }: { isMobile: boolean } = $props();
+  const onUpdate = (text: string) => {
+    if ($stateStore.editorMode === 'code') {
+      updateCode(text);
+    } else {
+      updateConfig(text);
+    }
+  };
 </script>
 
 <div class="flex h-full flex-col">
   {#if isMobile}
-    <MobileEditor />
+    <MobileEditor {onUpdate} />
   {:else}
-    <DesktopEditor />
+    <DesktopEditor {onUpdate} />
   {/if}
   {#if $stateStore.error instanceof Error}
     <div class="flex flex-col text-sm" data-testid={TID.errorContainer}>
diff --git a/src/lib/components/MobileEditor.svelte b/src/lib/components/MobileEditor.svelte
index 155d7f86..655f341d 100644
--- a/src/lib/components/MobileEditor.svelte
+++ b/src/lib/components/MobileEditor.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { stateStore, updateCode, updateConfig } from '$/util/state';
+  import type { EditorProps } from '$/types';
+  import { stateStore } from '$/util/state';
   import { json, jsonLanguage } from '@codemirror/lang-json';
   import { markdown } from '@codemirror/lang-markdown';
   import { yamlFrontmatter } from '@codemirror/lang-yaml';
@@ -16,6 +17,8 @@
   let editorContainer: HTMLDivElement;
   let currentText = $state('');
 
+  const { onUpdate }: EditorProps = $props();
+
   onMount(() => {
     const themeCompartment = new Compartment();
     const languageCompartment = new Compartment();
@@ -34,11 +37,7 @@
                 return;
               }
               currentText = newText;
-              if ($stateStore.editorMode === 'code') {
-                updateCode(currentText);
-              } else {
-                updateConfig(currentText);
-              }
+              onUpdate(newText);
             }
           }),
           EditorView.theme({
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index 8e49b1cc..e6c5b16a 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -101,3 +101,7 @@ export interface ErrorHash {
 }
 
 export type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+export interface EditorProps {
+  onUpdate: (text: string) => void;
+}