fix(frontend): fix html component initial data (#3188)

* fix(frontend): fix html component initial data

* fix(frontend): fix html component initial data

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

@@ -59,7 +59,14 @@ import type {
 } from '../../types'
 import type { Size } from '../../svelte-grid/types'
 
-import type { AppInputSpec, EvalV2AppInput, ResultAppInput, StaticAppInput } from '../../inputType'
+import type {
+	AppInputSpec,
+	EvalV2AppInput,
+	InputConnectionEval,
+	ResultAppInput,
+	StaticAppInput,
+	TemplateV2AppInput
+} from '../../inputType'
 
 export type BaseComponent<T extends string> = {
 	type: T
@@ -321,7 +328,7 @@ export type PresetComponentConfig = {
 }
 
 export interface InitialAppComponent extends Partial<Aligned> {
-	componentInput?: StaticAppInput | ResultAppInput | EvalV2AppInput | undefined
+	componentInput?: StaticAppInput | ResultAppInput | EvalV2AppInput | TemplateV2AppInput | undefined
 	configuration: StaticRichConfigurations
 	// Number of subgrids
 	numberOfSubgrids?: number
@@ -907,9 +914,15 @@ export const components = {
 			verticalAlignment: 'top',
 
 			componentInput: {
-				type: 'static',
+				type: 'templatev2',
 				fieldType: 'template',
-				value: 'Hello ${ctx.username}'
+				eval: 'Hello ${ctx.username}',
+				connections: [
+					{
+						id: 'username',
+						componentId: 'ctx'
+					}
+				] as InputConnectionEval[]
 			},
 			configuration: {
 				style: {
@@ -1304,14 +1317,20 @@ export const components = {
 		},
 		initialData: {
 			componentInput: {
-				type: 'static',
+				type: 'templatev2',
 				fieldType: 'template',
-				value: `<img
+				eval: `<img
 src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
 >
 <h1 class="absolute top-4 left-2 text-white">
 Hello \${ctx.username}
-</h1>`
+</h1>`,
+				connections: [
+					{
+						id: 'username',
+						componentId: 'ctx'
+					}
+				] as InputConnectionEval[]
 			},
 			configuration: {}
 		}
@@ -1337,20 +1356,21 @@ Hello \${ctx.username}
 		name: 'Markdown',
 		icon: Heading1,
 		documentationLink: `${documentationBaseUrl}/html`,
-		dims: '1:2-1:2' as AppComponentDimensions,
+		dims: '1:2-4-4' as AppComponentDimensions,
 		customCss: {
 			container: { class: '', style: '' }
 		},
 		initialData: {
 			componentInput: {
-				type: 'static',
+				type: 'templatev2',
 				fieldType: 'template',
-				value: `# This is a header
+				eval: `# This is a header
 ## This is a subheader				
 This is a paragraph.
 				
 * This is a list
-* With two items`
+* With two items`,
+				connections: [] as InputConnectionEval[]
 			},
 			configuration: {
 				size: {

frontend/src/lib/components/apps/inputType.ts

@@ -219,6 +219,7 @@ export type ResultAppInput = Extract<AppInput, { type: 'runnable' }>
 export type EvalAppInput = Extract<AppInput, { type: 'eval' }>
 export type EvalV2AppInput = Extract<AppInput, { type: 'evalv2' }>
 export type StaticAppInputOnDemand = Extract<StaticAppInput, { onDemandOnly: true }>
+export type TemplateV2AppInput = Extract<AppInput, { type: 'templatev2' }>
 
 export type UploadAppInput = Extract<AppInput, { type: 'upload' }>
 

frontend/src/lib/components/apps/types.ts

@@ -20,6 +20,7 @@ import type {
 	RowAppInput,
 	Runnable,
 	StaticAppInput,
+	TemplateV2AppInput,
 	UploadAppInput,
 	UserAppInput
 } from './inputType'
@@ -59,6 +60,7 @@ export type Configuration =
 	| EvalV2AppInput
 	| UploadAppInput
 	| ResultAppInput
+	| TemplateV2AppInput
 
 export type StaticConfiguration = GeneralAppInput & StaticAppInput
 export type RichConfigurationT<T> =