fix: save changes made in diff mode (#6477)

* add read only to diff editor

* save changes to editor instead

* only add listener if oncodechange is specified

* pass existing editor as modified model

* remove effect

* cleaning

frontend/src/lib/components/DiffEditor.svelte

@@ -32,6 +32,7 @@
 		defaultModified?: string
 		readOnly?: boolean
 		buttons?: ButtonProp[]
+		modifiedModel?: meditor.ITextModel
 	}
 
 	let {
@@ -44,7 +45,8 @@
 		defaultOriginal = undefined,
 		defaultModified = undefined,
 		readOnly = false,
-		buttons = []
+		buttons = [],
+		modifiedModel
 	}: Props = $props()
 
 	let diffEditor: meditor.IStandaloneDiffEditor | undefined = $state(undefined)
@@ -72,11 +74,8 @@
 			lineNumbersMinChars: 2,
 			scrollbar: { alwaysConsumeMouseWheel: false }
 		})
-		if (
-			defaultOriginal !== undefined &&
-			defaultModified !== undefined &&
-			defaultLang !== undefined
-		) {
+
+		if (defaultLang !== undefined) {
 			setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang)
 		}
 	}
@@ -87,16 +86,12 @@
 		modified?: string,
 		modifiedLang?: string
 	) {
+		const o = meditor.createModel(original ?? '', lang)
+		const m = modifiedModel ?? meditor.createModel(modified ?? '', modifiedLang ?? lang)
 		diffEditor?.setModel({
-			original: meditor.createModel('', lang),
-			modified: meditor.createModel('', modifiedLang ?? lang)
+			original: o,
+			modified: m
 		})
-		if (original) {
-			setOriginal(original)
-		}
-		if (modified) {
-			setModified(modified)
-		}
 	}
 
 	export function setOriginal(code: string) {
@@ -113,6 +108,15 @@
 		defaultModified = code
 	}
 
+	export function setModifiedModel(model: meditor.ITextModel) {
+		const curr = diffEditor?.getModel()
+		if (!curr) return
+		diffEditor?.setModel({
+			original: curr.original,
+			modified: model
+		})
+	}
+
 	export function getModified(): string {
 		return diffEditor?.getModel()?.modified.getValue() ?? ''
 	}

frontend/src/lib/components/ScriptEditor.svelte

@@ -48,6 +48,7 @@
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 	import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte'
 	import { assetEq, type AssetWithAltAccessType } from './assets/lib'
+	import { editor as meditor } from 'monaco-editor'
 
 	interface Props {
 		// Exported
@@ -403,7 +404,7 @@
 	function showDiffMode() {
 		diffMode = true
 		diffEditor?.setOriginal(lastDeployedCode ?? '')
-		diffEditor?.setModified(editor?.getCode() ?? '')
+		diffEditor?.setModifiedModel(editor?.getModel() as meditor.ITextModel)
 		diffEditor?.show()
 		editor?.hide()
 	}
@@ -628,6 +629,7 @@
 					<DiffEditor
 						className="h-full"
 						bind:this={diffEditor}
+						modifiedModel={editor?.getModel() as meditor.ITextModel}
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(lang)}
 						{fixedOverflowWidgets}

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -55,6 +55,7 @@
 	import { getStepHistoryLoaderContext } from '$lib/components/stepHistoryLoader.svelte'
 	import AssetsDropdownButton from '$lib/components/assets/AssetsDropdownButton.svelte'
 	import { useUiIntent } from '$lib/components/copilot/chat/flow/useUiIntent'
+	import { editor as meditor } from 'monaco-editor'
 
 	const {
 		selectedId,
@@ -224,7 +225,7 @@
 	function showDiffMode() {
 		diffMode = true
 		diffEditor?.setOriginal((savedModule?.value as RawScript).content ?? '')
-		diffEditor?.setModified(editor?.getCode() ?? '')
+		diffEditor?.setModifiedModel(editor?.getModel() as meditor.ITextModel)
 		diffEditor?.show()
 		editor?.hide()
 	}
@@ -471,6 +472,7 @@
 											<DiffEditor
 												open={false}
 												bind:this={diffEditor}
+												modifiedModel={editor?.getModel() as meditor.ITextModel}
 												automaticLayout
 												fixedOverflowWidgets
 												defaultLang={scriptLangToEditorLang(flowModule.value.language)}