diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c7127b4173..4ca3ed9a53 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
"@aws-crypto/sha256-js": "^4.0.0",
"@codingame/monaco-vscode-configuration-service-override": "~11.1.2",
"@codingame/monaco-vscode-standalone-css-language-features": "~11.1.2",
+ "@codingame/monaco-vscode-standalone-html-language-features": "^11.1.2",
"@codingame/monaco-vscode-standalone-json-language-features": "~11.1.2",
"@codingame/monaco-vscode-standalone-languages": "~11.1.2",
"@codingame/monaco-vscode-standalone-typescript-language-features": "~11.1.2",
@@ -567,6 +568,15 @@
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@11.1.2"
}
},
+ "node_modules/@codingame/monaco-vscode-standalone-html-language-features": {
+ "version": "11.1.2",
+ "resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-standalone-html-language-features/-/monaco-vscode-standalone-html-language-features-11.1.2.tgz",
+ "integrity": "sha512-PHRiZRH9ENI7hBJ7b+VSk78TCfQNqGVaS/fbr3jHcS98ohHdlfTRry/Kl1CT7aRIZj7yV9iNWX57hN+lzPp2vg==",
+ "license": "MIT",
+ "dependencies": {
+ "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@11.1.2"
+ }
+ },
"node_modules/@codingame/monaco-vscode-standalone-json-language-features": {
"version": "11.1.2",
"license": "MIT",
diff --git a/frontend/package.json b/frontend/package.json
index d2cb878ce5..f8ceffa287 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -85,6 +85,7 @@
"@aws-crypto/sha256-js": "^4.0.0",
"@codingame/monaco-vscode-configuration-service-override": "~11.1.2",
"@codingame/monaco-vscode-standalone-css-language-features": "~11.1.2",
+ "@codingame/monaco-vscode-standalone-html-language-features": "^11.1.2",
"@codingame/monaco-vscode-standalone-json-language-features": "~11.1.2",
"@codingame/monaco-vscode-standalone-languages": "~11.1.2",
"@codingame/monaco-vscode-standalone-typescript-language-features": "~11.1.2",
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index cc3f120092..a7f390170c 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -1,12 +1,12 @@
-
+
+
+
+
+
+{#each Object.keys(components['codeinputcomponent'].initialData.configuration) as key (key)}
+
+{/each}
+
+{#if render}
+
+{/if}
+
+
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
index 71e3b3cf43..acbe2d5b83 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
@@ -44,6 +44,7 @@
import AppTable from '../../components/display/table/AppTable.svelte'
import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
import AppText from '../../components/display/AppText.svelte'
+ import AppCodeInputComponent from '../../components/inputs/AppCodeInputComponent.svelte'
import AppButton from '../../components/buttons/AppButton.svelte'
import AppForm from '../../components/buttons/AppForm.svelte'
import AppFormButton from '../../components/buttons/AppFormButton.svelte'
@@ -295,6 +296,8 @@
componentInput={component.componentInput}
{render}
/>
+{:else if component.type === 'codeinputcomponent'}
+
{:else if component.type === 'buttoncomponent'}
export type TextInputComponent = BaseComponent<'textinputcomponent'>
export type QuillComponent = BaseComponent<'quillcomponent'>
+export type CodeInputComponent = BaseComponent<'codeinputcomponent'>
export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>
export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>
export type EmailInputComponent = BaseComponent<'emailinputcomponent'>
@@ -304,6 +306,7 @@ export type TypedComponent =
| JobIdFlowStatusComponent
| TextInputComponent
| QuillComponent
+ | CodeInputComponent
| TextareaInputComponent
| PasswordInputComponent
| EmailInputComponent
@@ -1204,6 +1207,65 @@ export const components = {
}
}
},
+ codeinputcomponent: {
+ name: 'Code Input',
+ icon: Code,
+ dims: '2:1-4:4' as AppComponentDimensions,
+ documentationLink: `${documentationBaseUrl}/code`,
+ customCss: {
+ text: { class: '', style: '' },
+ container: { class: '', style: '' }
+ },
+ initialData: {
+ componentInput: undefined,
+ configuration: {
+ placeholder: {
+ type: 'static',
+ value: 'Type...',
+ fieldType: 'text'
+ },
+ defaultValue: {
+ type: 'static',
+ value: undefined,
+ fieldType: 'text'
+ },
+ lang: {
+ type: 'static',
+ fieldType: 'select',
+ value: 'javascript',
+ selectOptions: [
+ 'javascript',
+ 'typescript',
+ 'python',
+ 'sql',
+ 'json',
+ 'html',
+ 'css',
+ 'markdown',
+ 'yaml'
+ ]
+ },
+ disableSuggestions: {
+ type: 'static',
+ fieldType: 'boolean',
+ value: false,
+ tooltip: 'Disable code completion suggestions'
+ },
+ disableLinting: {
+ type: 'static',
+ fieldType: 'boolean',
+ value: false,
+ tooltip: 'Disable code validation/linting (keeps only syntax highlighting)'
+ },
+ hideLineNumbers: {
+ type: 'static',
+ fieldType: 'boolean',
+ value: false,
+ tooltip: 'Hide line numbers in the editor'
+ }
+ }
+ }
+ },
buttoncomponent: {
name: 'Button',
icon: Inspect,
diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts
index 999db0b63a..370e2703b2 100644
--- a/frontend/src/lib/components/apps/editor/component/sets.ts
+++ b/frontend/src/lib/components/apps/editor/component/sets.ts
@@ -37,6 +37,7 @@ const inputs: ComponentSet = {
components: [
'schemaformcomponent',
'textinputcomponent',
+ 'codeinputcomponent',
'textareainputcomponent',
'quillcomponent',
'passwordinputcomponent',
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts b/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
index c8a6e06dbd..0df79e01f4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
@@ -121,6 +121,7 @@ export function getComponentControl(type: keyof typeof components): Array