From 7ae84fce5014d97bf17803e2ccefafee009b28bb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 22 Nov 2023 11:25:36 +0100
Subject: [PATCH] fix: add image base64 source kinds

---
 .../apps/components/display/AppImage.svelte        |  8 +++++++-
 .../components/apps/editor/component/components.ts | 14 +++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppImage.svelte b/frontend/src/lib/components/apps/components/display/AppImage.svelte
index 1b326a5a2c..c61e355074 100644
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -58,7 +58,13 @@
 	<Loader loading={resolvedConfig.source == undefined}>
 		<img
 			on:pointerdown|preventDefault
-			src={resolvedConfig.source}
+			src={resolvedConfig.sourceKind == 'png encoded as base64'
+				? 'data:image/png;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'jpeg encoded as base64'
+				? 'data:image/jpeg;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'svg encoded as base64'
+				? 'data:image/svg+xml;base64,' + resolvedConfig.source
+				: resolvedConfig.source}
 			alt={resolvedConfig.altText}
 			style={css?.image?.style ?? ''}
 			class={twMerge(
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 28e98b9e28..916de88082 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -313,7 +313,13 @@ export const selectOptions = {
 		'scatter'
 	] as ChartType[],
 	animationTimingFunctionOptions: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
-	prose: ['sm', 'Default', 'lg', 'xl', '2xl']
+	prose: ['sm', 'Default', 'lg', 'xl', '2xl'],
+	imageSourceKind: [
+		'url',
+		'png encoded as base64',
+		'jpeg encoded as base64',
+		'svg encoded as base64'
+	]
 }
 const labels = {
 	none: 'Do nothing',
@@ -2305,6 +2311,12 @@ This is a paragraph.
 						convertTo: 'base64'
 					}
 				},
+				sourceKind: {
+					fieldType: 'select',
+					type: 'static',
+					selectOptions: selectOptions.imageSourceKind,
+					value: 'url' as (typeof selectOptions.imageSourceKind)[number]
+				},
 				imageFit: {
 					fieldType: 'select',
 					type: 'static',