From ae77a71ed6dc75fa8f822631147deb2e67990615 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 5 Dec 2022 17:35:22 +0100
Subject: [PATCH] fix svelte-markdown in description

---
 frontend/src/lib/components/AppConnect.svelte     |  5 +++--
 frontend/src/lib/components/ResourceEditor.svelte |  2 +-
 frontend/src/lib/utils.ts                         |  3 +++
 frontend/src/routes/resources.svelte              | 14 ++++++++++----
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index a9404874c7..403fe8c4a7 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -48,6 +48,7 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import ApiConnectForm from './ApiConnectForm.svelte'
 	import SearchItems from './SearchItems.svelte'
+	import autosize from 'svelte-autosize'
 
 	export let newPageOAuth = false
 
@@ -383,7 +384,7 @@
 			/>
 			<h2 class="mt-4 mb-2">Description</h2>
 
-			<input type="text" bind:value={description} />
+			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 
 			{#if apiTokenApps[resource_type]}
 				<h2 class="mt-4 mb-2">Instructions</h2>
@@ -403,7 +404,7 @@
 				{/if}
 			{/if}
 
-			<h2 class="mt-4">Value</h2>
+			<h2 class="mt-8">Value</h2>
 			<div class="mt-4">
 				<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
 			</div>
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 5771d75a9c..bf8711e203 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -20,7 +20,7 @@
 	let resourceToEdit: Resource | undefined
 
 	let description: string = ''
-	let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description`
+	let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`
 	let selectedResourceType: string | undefined
 	let resourceSchema: Schema | undefined
 	let args: Record<string, any> = {}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 4d60dd8a1e..505408f42a 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -294,6 +294,9 @@ export function groupBy<T>(
 	})
 }
 
+export function removeMarkdown(text: string): string {
+	return text.replace(/[[\*|\-|#\_]/g, '')
+}
 export function truncate(s: string, n: number, suffix: string = '...'): string {
 	if (!s) {
 		return ''
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index 4d71e34e91..3a9ebd2dc9 100644
--- a/frontend/src/routes/resources.svelte
+++ b/frontend/src/routes/resources.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { canWrite, emptySchema, sendUserToast, truncate } from '$lib/utils'
+	import { canWrite, emptySchema, removeMarkdown, sendUserToast, truncate } from '$lib/utils'
 	import { OauthService, ResourceService, type ListableResource } from '$lib/gen'
 	import type { ResourceType } from '$lib/gen'
 	import PageHeader from '$lib/components/PageHeader.svelte'
@@ -48,6 +48,7 @@
 	import { Building } from 'svelte-lucide'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
+	import autosize from 'svelte-autosize'
 
 	type ResourceW = ListableResource & { canWrite: boolean }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
@@ -243,7 +244,12 @@
 			</label>
 			<label>
 				<div class="mb-1 font-semibold text-gray-700">Description</div>
-				<input type="text" bind:value={newResourceType.description} /></label
+				<textarea
+					type="text"
+					use:autosize
+					autocomplete="off"
+					bind:value={newResourceType.description}
+				/></label
 			>
 			<div>
 				<div class="mb-1 font-semibold text-gray-700">Schema</div>
@@ -349,7 +355,7 @@
 									>
 									<td
 										><span class="text-gray-500 text-xs"
-											><SvelteMarkdown source={truncate(description ?? '', 30)} /></span
+											>{removeMarkdown(truncate(description ?? '', 30))}</span
 										></td
 									>
 									<td class="text-center">
@@ -525,7 +531,7 @@
 									>
 									<td
 										><span class="text-gray-500 text-xs"
-											><SvelteMarkdown source={truncate(description ?? '', 200)} /></span
+											>{removeMarkdown(truncate(description ?? '', 200))}</span
 										></td
 									>
 									<td>