diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index dd62e6a050..407b542716 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/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 = { type: T @@ -321,7 +328,7 @@ export type PresetComponentConfig = { } export interface InitialAppComponent extends Partial { - 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: `

Hello \${ctx.username} -

` +`, + 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: { diff --git a/frontend/src/lib/components/apps/inputType.ts b/frontend/src/lib/components/apps/inputType.ts index 0d72d2d2bd..081ea8ceef 100644 --- a/frontend/src/lib/components/apps/inputType.ts +++ b/frontend/src/lib/components/apps/inputType.ts @@ -219,6 +219,7 @@ export type ResultAppInput = Extract export type EvalAppInput = Extract export type EvalV2AppInput = Extract export type StaticAppInputOnDemand = Extract +export type TemplateV2AppInput = Extract export type UploadAppInput = Extract diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 9601fd2adc..220c45c9c7 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/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 =