From 5e346565179b3c4cfd21cbc6ca14564f0167ba0e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 27 Oct 2022 09:26:52 +0200
Subject: [PATCH] fix codeViewer for non deno scripts

---
 frontend/src/lib/components/ScriptPicker.svelte | 10 ++--------
 frontend/src/lib/utils.ts                       | 14 ++++++++------
 frontend/src/routes/scripts.svelte              | 10 ++++++----
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 42e80d1ff2..1530fa2de4 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -6,13 +6,11 @@
 	import { createEventDispatcher } from 'svelte'
 	import ItemPicker from './ItemPicker.svelte'
 	import Modal from './Modal.svelte'
-	import { Highlight } from 'svelte-highlight'
-	import typescript from 'svelte-highlight/languages/typescript'
-	import python from 'svelte-highlight/languages/python'
 
 	import { getScriptByPath } from '$lib/utils'
 	import RadioButton from './RadioButton.svelte'
 	import { Button } from './common'
+	import HighlightCode from './HighlightCode.svelte'
 
 	export let scriptPath: string | undefined = undefined
 	export let allowFlow = false
@@ -99,10 +97,6 @@
 <Modal bind:this={modalViewer}>
 	<div slot="title">Script {scriptPath}</div>
 	<div slot="content">
-		{#if lang == 'python3'}
-			<Highlight language={python} {code} />
-		{:else if lang == 'deno'}
-			<Highlight language={typescript} {code} />
-		{/if}
+		<HighlightCode {code} language={lang} />
 	</div>
 </Modal>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index fc72f4801b..5bdcf1e1e2 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -56,9 +56,8 @@ export function displayDate(dateString: string | undefined): string {
 	if (date.toString() === 'Invalid Date') {
 		return ''
 	} else {
-		return `${date.getFullYear()}/${
-			date.getMonth() + 1
-		}/${date.getDate()} at ${date.toLocaleTimeString()}`
+		return `${date.getFullYear()}/${date.getMonth() + 1
+			}/${date.getDate()} at ${date.toLocaleTimeString()}`
 	}
 }
 
@@ -470,14 +469,16 @@ export function scriptPathToHref(path: string): string {
 
 export async function getScriptByPath(path: string): Promise<{
 	content: string
-	language: 'deno' | 'python3' | 'go'
+	language: 'deno' | 'python3' | 'go',
+	schema: any
 }> {
 	if (path.startsWith('hub/')) {
 		const { content, language, schema } = await ScriptService.getHubScriptByPath({ path })
 
 		return {
 			content,
-			language
+			language,
+			schema
 		}
 	} else {
 		const script = await ScriptService.getScriptByPath({
@@ -486,7 +487,8 @@ export async function getScriptByPath(path: string): Promise<{
 		})
 		return {
 			content: script.content,
-			language: script.language
+			language: script.language,
+			schema: script.schema
 		}
 	}
 }
diff --git a/frontend/src/routes/scripts.svelte b/frontend/src/routes/scripts.svelte
index 2ab0c238e8..5de1c41fa5 100644
--- a/frontend/src/routes/scripts.svelte
+++ b/frontend/src/routes/scripts.svelte
@@ -37,10 +37,9 @@
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
-	import { Highlight } from 'svelte-highlight'
-	import { typescript } from 'svelte-highlight/languages/typescript'
 	import { Button, Tabs, Tab, Badge, Skeleton } from '$lib/components/common'
 	import CreateActions from '$lib/components/scripts/CreateActions.svelte'
+	import HighlightCode from '$lib/components/HighlightCode.svelte'
 
 	type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'examples' | 'hub'
 	type Section = [string, ScriptW[]]
@@ -70,6 +69,7 @@
 
 	let codeViewer: Modal
 	let codeViewerContent: string = ''
+	let codeViewerLanguage: 'deno' | 'python3' | 'go' = 'deno'
 	let codeViewerPath: string = ''
 
 	$: filteredScripts =
@@ -131,7 +131,9 @@
 	}
 
 	async function viewCode(path: string) {
-		codeViewerContent = (await getScriptByPath(path)).content
+		const { content, language } = await getScriptByPath(path)
+		codeViewerContent = content
+		codeViewerLanguage = language
 		codeViewerPath = path
 		codeViewer.openModal()
 	}
@@ -153,7 +155,7 @@
 <Modal bind:this={codeViewer}>
 	<div slot="title">{codeViewerPath}</div>
 	<div slot="content">
-		<Highlight language={typescript} code={codeViewerContent} />
+		<HighlightCode language={codeViewerLanguage} code={codeViewerContent} />
 	</div>
 </Modal>