diff --git a/src/renderer/config-blocks/Lookup.svelte b/src/renderer/config-blocks/Lookup.svelte
index c528a93e..5a84a012 100644
--- a/src/renderer/config-blocks/Lookup.svelte
+++ b/src/renderer/config-blocks/Lookup.svelte
@@ -52,12 +52,10 @@
   let scriptSegments = [];
   let lookupTable = {};
 
-  $: {
-    lookupTable = createLookupTable(config.script);
-  }
+  $: handleScriptChange($config.script);
 
-  $: if (lookupTable.source || lookupTable.pairs.length) {
-    sendData();
+  function handleScriptChange(script) {
+    lookupTable = createLookupTable(script);
   }
 
   let suggestions = [];
@@ -78,6 +76,7 @@
       array.push(pair.output);
     });
 
+    console.log(lookupTable);
     array = [lookupTable.source, ...array];
 
     const script = Script.toScript({
@@ -115,15 +114,13 @@
 
   function addNewLine() {
     lookupTable.pairs = [...lookupTable.pairs, ["", ""]];
+    sendData();
   }
 
   function removeLine(i) {
     lookupTable.pairs.splice(i, 1);
     lookupTable.pairs = [...lookupTable.pairs];
   }
-
-  let suggestionElement1 = undefined;
-  let suggestionElement2 = undefined;
 </script>
 
 <config-lookup
@@ -138,7 +135,7 @@
       return new Validator(e).NotEmpty().Result();
     }}
     on:input={(e) => {
-      lookupTable.source = e.detail;
+      sendData();
     }}
     on:validator={(e) => {
       const data = e.detail;
@@ -209,7 +206,8 @@
     {suggestions}
     bind:value={lookupTable.destination}
     on:input={(e) => {
-      lookupTable.destination = e.detail;
+      //lookupTable.destination = e.detail;
+      sendData();
     }}
     validator={(e) => {
       return new Validator(e).NotEmpty().Result();
diff --git a/src/renderer/config-blocks/Macro.svelte b/src/renderer/config-blocks/Macro.svelte
index cec7133d..788077fb 100644
--- a/src/renderer/config-blocks/Macro.svelte
+++ b/src/renderer/config-blocks/Macro.svelte
@@ -89,7 +89,7 @@
   });
 
   $: {
-    scriptToKeyList({ script: config.script });
+    scriptToKeyList({ script: $config.script });
   }
 
   function change_layout() {
@@ -395,9 +395,7 @@
   }
 </script>
 
-<div
-  class="{$$props.class} flex w-full flex-col px-4 py-2 gap-2 pointer-events-auto"
->
+<div class="flex w-full flex-col px-4 py-2 gap-2 pointer-events-auto">
   <div class="flex flex-col">
     <div class="flex flex-row justify-between mb-2">
       <div class="text-gray-500 text-sm truncate">Macro Input Field</div>
diff --git a/src/renderer/config-blocks/SettingsButton.svelte b/src/renderer/config-blocks/SettingsButton.svelte
index e0ffe1ad..9d6ce35f 100644
--- a/src/renderer/config-blocks/SettingsButton.svelte
+++ b/src/renderer/config-blocks/SettingsButton.svelte
@@ -118,7 +118,6 @@
     bind:value={bmo}
     suggestions={suggestions[0]}
     on:input={(e) => {
-      bmo = e.detail;
       sendData();
     }}
     validator={(e) => {
@@ -145,7 +144,6 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        bmi = e.detail;
         sendData();
       }}
       on:validator={(e) => {
@@ -167,7 +165,6 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        bma = e.detail;
         sendData();
       }}
       on:validator={(e) => {
diff --git a/src/renderer/config-blocks/SettingsEncoder.svelte b/src/renderer/config-blocks/SettingsEncoder.svelte
index f6828fb5..5af27330 100644
--- a/src/renderer/config-blocks/SettingsEncoder.svelte
+++ b/src/renderer/config-blocks/SettingsEncoder.svelte
@@ -44,8 +44,10 @@
 
   const whatsInParenthesis = /\(([^)]+)\)/;
 
-  $: {
-    const arr = config.script.split("self:").slice(1);
+  $: handleScriptChange($config.script);
+
+  function handleScriptChange(script) {
+    const arr = script.split("self:").slice(1);
 
     const extractParam = (index) => {
       const param = whatsInParenthesis.exec(arr[index]);
@@ -130,7 +132,7 @@
         return new Validator(e).NotEmpty().Result();
       }}
       on:input={(e) => {
-        emo = e.detail;
+        //emo = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -149,7 +151,7 @@
         return new Validator(e).NotEmpty().Result();
       }}
       on:input={(e) => {
-        ev0 = e.detail;
+        //ev0 = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -174,7 +176,7 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        emi = e.detail;
+        //emi = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -195,7 +197,7 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        ema = e.detail;
+        //ema = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -218,7 +220,7 @@
         : new Validator(e).Result();
     }}
     on:input={(e) => {
-      ese = e.detail;
+      //ese = e.detail;
     }}
     on:validator={(e) => {
       const data = e.detail;
diff --git a/src/renderer/config-blocks/SettingsEndless.svelte b/src/renderer/config-blocks/SettingsEndless.svelte
index 99b00b77..feda3e0d 100644
--- a/src/renderer/config-blocks/SettingsEndless.svelte
+++ b/src/renderer/config-blocks/SettingsEndless.svelte
@@ -44,8 +44,10 @@
 
   const whatsInParenthesis = /\(([^)]+)\)/;
 
-  $: {
-    const arr = config.script.split("self:").slice(1);
+  $: handleScriptChange($config.script);
+
+  function handleScriptChange(script) {
+    const arr = script.split("self:").slice(1);
 
     const extractParam = (index) => {
       const param = whatsInParenthesis.exec(arr[index]);
@@ -126,7 +128,7 @@
       return new Validator(e).NotEmpty().Result();
     }}
     on:input={(e) => {
-      epmo = e.detail;
+      //epmo = e.detail;
     }}
     on:validator={(e) => {
       const data = e.detail;
@@ -145,7 +147,7 @@
       return new Validator(e).NotEmpty().Result();
     }}
     on:input={(e) => {
-      epv0 = e.detail;
+      //epv0 = e.detail;
     }}
     on:validator={(e) => {
       const data = e.detail;
@@ -160,7 +162,7 @@
   <div class="w-full grid grid-flow-col auto-cols-fr gap-2">
     <MeltCombo
       title={"Min"}
-      disabled={minMaxEnabled}
+      disabled={!minMaxEnabled}
       bind:value={epmi}
       validator={(e) => {
         return minMaxEnabled
@@ -168,7 +170,7 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        epmi = e.detail;
+        //epmi = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -189,7 +191,7 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        epma = e.detail;
+        //epma = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -213,7 +215,7 @@
         : new Validator(e).Result();
     }}
     on:input={(e) => {
-      epse = e.detail;
+      //epse = e.detail;
     }}
     on:validator={(e) => {
       const data = e.detail;
diff --git a/src/renderer/config-blocks/SettingsPotmeter.svelte b/src/renderer/config-blocks/SettingsPotmeter.svelte
index 89ee4f89..60be023b 100644
--- a/src/renderer/config-blocks/SettingsPotmeter.svelte
+++ b/src/renderer/config-blocks/SettingsPotmeter.svelte
@@ -42,8 +42,10 @@
 
   const whatsInParenthesis = /\(([^)]+)\)/;
 
-  $: {
-    const arr = config.script.split("self:").slice(1);
+  $: handleScriptChange($config.script);
+
+  function handleScriptChange(script) {
+    const arr = script.split("self:").slice(1);
 
     const extractParam = (index) => {
       const param = whatsInParenthesis.exec(arr[index]);
@@ -118,7 +120,7 @@
       return new Validator(e).NotEmpty().Result();
     }}
     on:input={(e) => {
-      pmo = e.detail;
+      //pmo = e.detail;
     }}
     on:validator={(e) => {
       const data = e.detail;
@@ -142,7 +144,7 @@
           : new Validator(e).Result();
       }}
       on:input={(e) => {
-        pmi = e.detail;
+        //pmi = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
@@ -162,7 +164,7 @@
         return new Validator(e).NotEmpty().Result();
       }}
       on:input={(e) => {
-        pma = e.detail;
+        //pma = e.detail;
       }}
       on:validator={(e) => {
         const data = e.detail;
diff --git a/src/renderer/config-blocks/TimerStop.svelte b/src/renderer/config-blocks/TimerStop.svelte
index 2700dd5f..08cd80dd 100644
--- a/src/renderer/config-blocks/TimerStop.svelte
+++ b/src/renderer/config-blocks/TimerStop.svelte
@@ -43,14 +43,13 @@
 
   const dispatch = createEventDispatcher();
 
-  const whatsInParenthesis = /\(([^)]+)\)/;
+  const whatsInParenthesis = /gtp\(([^"]*)\)/;
   let scriptValue = "";
 
-  $: handleConfigChange(config.script);
-
-  function handleConfigChange(config) {
-    let param1 = whatsInParenthesis.exec(config.script);
+  $: handleScriptChange($config.script);
 
+  function handleScriptChange(script) {
+    let param1 = whatsInParenthesis.exec(script);
     if (param1 !== null) {
       if (param1.length > 0) {
         scriptValue = param1[1];
diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
index 8fcbcde6..cf77328f 100644
--- a/src/renderer/config-blocks/VarGlobal.svelte
+++ b/src/renderer/config-blocks/VarGlobal.svelte
@@ -63,7 +63,7 @@
   // config.script cannot be undefined
   $: {
     // this works differently from normal _utils...
-    scriptSegments = globalsToConfig({ script: config.script });
+    scriptSegments = globalsToConfig({ script: $config.script });
   }
 
   function saveChangesOnInput(e, i, k) {
@@ -242,7 +242,7 @@
           <div class="w-full h-full bg-secondary">
             {#key rerenderList}
               <LineEditor
-                on:output={(e) => {
+                on:input={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
                 action={config}
diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
index d73cb420..bc8fedba 100644
--- a/src/renderer/config-blocks/VarLocals.svelte
+++ b/src/renderer/config-blocks/VarLocals.svelte
@@ -63,7 +63,7 @@
   // config.script cannot be undefined
   $: {
     // this works differently from normal _utils...
-    scriptSegments = localsToConfig({ script: config.script });
+    scriptSegments = localsToConfig({ script: $config.script });
   }
 
   function saveChangesOnInput(e, i, k) {
@@ -245,7 +245,7 @@
           <div class="w-full h-full bg-secondary">
             {#key rerenderList}
               <LineEditor
-                on:output={(e) => {
+                on:input={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
                 action={config}
diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
index c08982cf..2b290b76 100644
--- a/src/renderer/config-blocks/VarSelf.svelte
+++ b/src/renderer/config-blocks/VarSelf.svelte
@@ -63,7 +63,7 @@
   // config.script cannot be undefined
   $: {
     // this works differently from normal _utils...
-    scriptSegments = selfsToConfig({ script: config.script });
+    scriptSegments = selfsToConfig({ script: $config.script });
   }
 
   function saveChangesOnInput(e, i, k) {
@@ -246,7 +246,7 @@
           <div class="w-full h-full bg-secondary">
             {#key rerenderList}
               <LineEditor
-                on:output={(e) => {
+                on:input={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
                 action={config}
diff --git a/src/renderer/config-blocks/components/MeltCombo.svelte b/src/renderer/config-blocks/components/MeltCombo.svelte
index abe1a056..32c6d9ac 100644
--- a/src/renderer/config-blocks/components/MeltCombo.svelte
+++ b/src/renderer/config-blocks/components/MeltCombo.svelte
@@ -72,7 +72,7 @@
     }
 
     value = input;
-
+    inputValue.set(value);
     dispatch("validator", { isError });
     dispatch("input", postProcessor(input));
   }
diff --git a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
index 8c64aabd..fbfdc1c3 100644
--- a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
@@ -1,39 +1,26 @@
 <script>
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { parenthesis } from "../_validators";
 
-  const dispatch = createEventDispatcher();
-
   export let config;
   export let index;
 
   import LineEditor from "../../main/user-interface/LineEditor.svelte";
 
-  import { windowSize } from "../../runtime/window-size";
-
-  let sidebarWidth;
-
-  $: if (windowSize.rightSidebarWidth) {
-    sidebarWidth = windowSize.rightSidebarWidth;
-  }
-
-  let loaded = false;
+  const dispatch = createEventDispatcher();
 
   let scriptSegment = ""; // local script part
 
-  $: if (config.script && !loaded) {
-    scriptSegment = GridScript.humanize(config.script.slice(7, -5));
-    loaded = true;
+  $: {
+    scriptSegment = GridScript.humanize($config.script.slice(7, -5));
+    "asd".slice;
   }
 
-  onDestroy(() => {
-    loaded = false;
-  });
-
   function sendData(e) {
     if (parenthesis(e)) {
       const script = GridScript.shortify(e);
+
       dispatch("update-action", {
         short: "ei",
         script: `elseif ${script} then`,
@@ -42,24 +29,24 @@
   }
 </script>
 
-<else-if-block
-  class="w-full h-full flex text-white py-1 pointer-events-auto"
+<div
+  class="px-2 w-full h-full flex text-white py-1 pointer-events-none"
   style="background-color:{config.information.color}"
 >
-  <div class="flex flex-row items-center w-full gap-3">
-    <span class="text-white min-w-fit">Else if</span>
+  <div class="flex flex-row items-center w-full">
+    <span class="mr-4">Else If</span>
 
     <div
-      class="bg-secondary p-1 my-auto mr-1 rounded flex items-center flex-grow h-full"
+      class="bg-secondary my-auto mr-1 rounded flex items-center flex-grow h-full"
     >
       <LineEditor
         on:input={(e) => {
           sendData(e.detail.script);
         }}
+        on:change={() => dispatch("sync")}
         action={config}
-        {sidebarWidth}
         value={scriptSegment}
       />
     </div>
   </div>
-</else-if-block>
+</div>
diff --git a/src/renderer/config-blocks/headers/ConditionIfFace.svelte b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
index 93785c79..74053343 100644
--- a/src/renderer/config-blocks/headers/ConditionIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { parenthesis } from "../_validators";
 
@@ -12,17 +12,10 @@
 
   let scriptSegment = ""; // local script part
 
-  let loaded = false;
-
-  $: if (config.script && !loaded) {
-    scriptSegment = GridScript.humanize(config.script.slice(3, -5));
-    loaded = true;
+  $: {
+    scriptSegment = GridScript.humanize($config.script.slice(3, -5));
   }
 
-  onDestroy(() => {
-    loaded = false;
-  });
-
   function sendData(e) {
     if (parenthesis(e)) {
       const script = GridScript.shortify(e);
@@ -35,7 +28,7 @@
   }
 </script>
 
-<if-block
+<div
   class="px-2 w-full h-full rounded-tr-xl flex text-white py-1 pointer-events-none"
   style="background-color:{config.information.color}"
 >
@@ -49,10 +42,11 @@
         on:input={(e) => {
           sendData(e.detail.script);
         }}
+        on:change={() => dispatch("sync")}
         action={config}
         value={scriptSegment}
       />
     </div>
     <span class="mx-3">Then</span>
   </div>
-</if-block>
+</div>
diff --git a/src/renderer/config-blocks/headers/ForLoopHeader.svelte b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
index 2291e46b..0200051e 100644
--- a/src/renderer/config-blocks/headers/ForLoopHeader.svelte
+++ b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
@@ -109,9 +109,10 @@
     >
       {#key displayValue}
         <LineEditor
-          on:change={handleDisplayValueChange}
+          on:input={handleDisplayValueChange}
           action={config}
           bind:value={displayValue}
+          on:change={() => dispatch("sync")}
         />
       {/key}
     </div>
diff --git a/src/renderer/config-blocks/headers/FunctionStartFace.svelte b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
index 8114bbce..c65fc808 100644
--- a/src/renderer/config-blocks/headers/FunctionStartFace.svelte
+++ b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
@@ -12,17 +12,10 @@
 
   let scriptSegment = ""; // local script part
 
-  let loaded = false;
-
-  $: if (config.script && !loaded) {
-    scriptSegment = GridScript.humanize(config.script.slice(9));
-    loaded = true;
+  $: {
+    scriptSegment = GridScript.humanize($config.script.slice(9));
   }
 
-  onDestroy(() => {
-    loaded = false;
-  });
-
   function sendData(e) {
     if (parenthesis(e)) {
       const script = GridScript.shortify(e);
@@ -47,6 +40,7 @@
         on:input={(e) => {
           sendData(e.detail.script);
         }}
+        on:change={() => dispatch("sync")}
         action={config}
         value={scriptSegment}
       />
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index a8fc92f3..cb9c95ea 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -79,7 +79,12 @@
       class="bg-primary font-normal my-auto rounded flex items-center flex-grow h-full"
       on:click|stopPropagation
     >
-      <LineEditor action={config} value={name} on:change={handleNameChange} />
+      <LineEditor
+        action={config}
+        value={name}
+        on:input={handleNameChange}
+        on:change={() => dispatch("sync")}
+      />
     </div>
   {:else}
     <span
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index b4eeb0cd..0562092f 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -311,10 +311,12 @@
         delay: 0,
       }}
     >
-      <configs class="w-full h-full flex flex-col px-8 pt-4 pb-2">
-        <ElementSelectionPanel />
-        <EventPanel class="flex flex-col w-full " />
-        <div class="-mb-2">
+      <configs
+        class="w-full h-full grid grid-rows-[auto_1fr_auto] px-8 pt-4 pb-2"
+      >
+        <div>
+          <ElementSelectionPanel />
+          <EventPanel />
           <Toolbar
             on:convert-to-code-block={handleConvertToCodeBlock}
             on:copy={handleCopy}
@@ -337,7 +339,7 @@
           on:drag-target={handleDragTargetChange}
           on:drop={handleDrop}
           on:drag-end={handleDragEnd}
-          class="flex flex-col h-full relative justify-between"
+          class="flex flex-col relative h-auto overflow-y-auto"
         >
           {#if $config_panel_blocks.length === 0 && $runtime.modules.length > 0}
             <div class="mt-2">
@@ -359,7 +361,7 @@
               on:mouseleave={() => {
                 clearInterval(autoScroll);
               }}
-              class="flex flex-col w-full h-auto overflow-y-auto justify-start"
+              class="flex flex-col w-full"
             >
               {#if typeof $config_drag === "undefined"}
                 <AddActionLine
@@ -416,8 +418,9 @@
             </config-list>
           {/if}
         </div>
+
         <div
-          class="w-full flex justify-between mb-3"
+          class="w-full flex flex-row"
           class:invisible={$runtime.modules.length === 0}
         >
           <AddActionButton
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index b3e95cf1..714698c6 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -146,8 +146,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <carousel
-    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!$action.checkSyntax() ||
-    validationError
+    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!$action.checkSyntax()
       ? 'border-error'
       : 'border-transparent'} bri"
     id={configIndexToId(index)}
@@ -198,15 +197,16 @@
           </div>
         {:else}
           <!-- Header of the Action block when untoggled -->
-
-          <svelte:component
-            this={header}
-            config={action}
-            {index}
-            on:toggle={handleToggle}
-            on:update-action={handleUpdateAction}
-            on:sync={handleSendActionToGrid}
-          />
+          <div class="h-10 w-full">
+            <svelte:component
+              this={header}
+              config={action}
+              {index}
+              on:toggle={handleToggle}
+              on:update-action={handleUpdateAction}
+              on:sync={handleSendActionToGrid}
+            />
+          </div>
         {/if}
       </div>
     </div>
diff --git a/src/renderer/main/user-interface/LineEditor.svelte b/src/renderer/main/user-interface/LineEditor.svelte
index 56e0cbc0..b9156428 100644
--- a/src/renderer/main/user-interface/LineEditor.svelte
+++ b/src/renderer/main/user-interface/LineEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { GridEvent } from "./../../runtime/runtime.ts";
   import { GridAction, GridEvent, GridElement } from "./../../runtime/runtime";
   import { appSettings } from "../../runtime/app-helper.store";
   import {
@@ -21,7 +22,8 @@
   let monaco_block;
 
   let editor;
-  let value_buffer = "";
+  let input_buffer = value;
+  let value_buffer = value;
   let newLinesRemoved = false;
 
   function handleDisabledChange(value) {
@@ -48,7 +50,7 @@
     const event = action.parent as GridEvent;
     const element = event.parent as GridElement;
     $monaco_elementtype = element.type;
-    value_buffer = value;
+    input_buffer = value;
 
     editor = monaco_editor.create(monaco_block, {
       value: value,
@@ -95,7 +97,14 @@
         return;
       }
       if (!newLinesRemoved) {
-        dispatch("update-action", { script: value });
+        const parent = action.parent as GridEvent;
+        const diff = value.length - input_buffer.length;
+        if (parent.getAvailableChars() - diff < 0) {
+          editor.setValue(input_buffer);
+        } else {
+          input_buffer = value;
+        }
+        dispatch("input", { script: value });
       }
       newLinesRemoved = false;
     });
@@ -104,9 +113,9 @@
     editor.onDidBlurEditorWidget(() => {
       const new_value = editor.getValue();
       if (value_buffer !== new_value) {
+        value_buffer = new_value;
         dispatch("change", { script: editor.getValue() });
       }
-      value_buffer = new_value;
     });
   });
 
@@ -146,7 +155,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   id="monaco_container"
-  class="{$$props.class} grid grid-cols-1 w-full h-full items-center p-1"
+  class="grid grid-cols-1 w-full h-full items-center p-1"
 >
   <div
     id="line-editor"