refac

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -1,11 +1,13 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, createEventDispatcher } from 'svelte';
 
 	const i18n = getContext('i18n');
 
 	import CodeEditor from './CodeEditor.svelte';
 	import { goto } from '$app/navigation';
 
+	const dispatch = createEventDispatcher();
+
 	let loading = false;
 
 	let id = '';
@@ -24,8 +26,12 @@
 
 	const saveHandler = async () => {
 		loading = true;
-		// Call the API to save the toolkit
-		console.log('saveHandler');
+		dispatch('save', {
+			id,
+			name,
+			meta,
+			content
+		});
 	};
 
 	const submitHandler = async () => {
@@ -42,7 +48,12 @@
 
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col max-h-[100dvh] h-full">
+		<form
+			class=" flex flex-col max-h-[100dvh] h-full"
+			on:submit|preventDefault={() => {
+				submitHandler();
+			}}
+		>
 			<div class="mb-2.5">
 				<button
 					class="flex space-x-1"
@@ -97,20 +108,24 @@
 				</div>
 
 				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
-					<CodeEditor bind:value={content} bind:this={codeEditor} {saveHandler} />
+					<CodeEditor
+						bind:value={content}
+						bind:this={codeEditor}
+						on:save={() => {
+							// submit form
+							submitHandler();
+						}}
+					/>
 				</div>
 
 				<div class="pb-3 flex justify-end">
 					<button
 						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
-						on:click={() => {
-							submitHandler();
-						}}
 					>
 						{$i18n.t('Save')}
 					</button>
 				</div>
 			</div>
-		</div>
+		</form>
 	</div>
 </div>