feat(frontend): add support for GFM and fix max-width issue

frontend/package.json

@@ -123,7 +123,7 @@
 		"quill": "^1.3.7",
 		"svelte-carousel": "^1.0.25",
 		"svelte-chartjs": "^3.1.5",
-		"svelte-exmarkdown": "^3.0.3",
+		"svelte-exmarkdown": "^3.0.5",
 		"svelte-infinite-loading": "^1.3.8",
 		"svelte-portal": "^2.2.1",
 		"svelte-tiny-virtual-list": "^2.0.5",

frontend/src/lib/components/apps/components/display/AppMarkdown.svelte

@@ -10,7 +10,7 @@
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-
+	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
@@ -67,7 +67,7 @@
 		e?.preventDefault()
 	}}
 	class={classNames(
-		'h-full w-full overflow-y-auto prose',
+		'h-full w-full overflow-y-auto prose max-w-full',
 		resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
 		css?.container?.class,
 		' dark:prose-invert',
@@ -86,7 +86,10 @@
 	>
 		{#if result}
 			{#key result}
-				<Markdown md={result} />
+				<Markdown
+					md={result}
+					plugins={resolvedConfig?.GithubFlavoredMarkdownEnabled ? [gfmPlugin()] : []}
+				/>
 			{/key}
 		{/if}
 	</RunnableWrapper>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1600,6 +1600,12 @@ This is a paragraph.
 					value: 'Default',
 
 					tooltip: 'See Tailwind documentation: https://tailwindcss.com/docs/typography-plugin'
+				},
+				GithubFlavoredMarkdownEnabled: {
+					fieldType: 'boolean',
+					type: 'static',
+					value: false,
+					tooltip: 'Enable Github flavored markdown. Lean more at https://github.github.com/gfm/'
 				}
 			}
 		}