diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
index 9a3ee456..b3e745c9 100644
--- a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
+++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
@@ -42,6 +42,10 @@
color: #ccc;
}
+.select-default-text {
+ background-color: #5a8ab4;
+}
+
.select-options {
display: flex;
flex-direction: column;
diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
index 18ebc7a7..285c349c 100644
--- a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
+++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
@@ -45,6 +45,7 @@ const BEFORE_ANIMATION_START_MS = 700 * DEV_SPEED_COEFFICIENT;
const RESET_TIME_MS = 100;
const STEP_TIME_MS = 1600 * DEV_SPEED_COEFFICIENT;
const PROMP_TIME_MS = 2800 * DEV_SPEED_COEFFICIENT;
+const DEFAULT_VALUE_TIME_MS = 1500 * DEV_SPEED_COEFFICIENT;
const VscodeAnimation = ({ template }) => {
const [animationStep, setAnimationStep] = useState('initial');
@@ -68,6 +69,10 @@ const VscodeAnimation = ({ template }) => {
if (prompts.length > 0) {
for (let i = 0; i < prompts.length; i++) {
+ if (prompts[i].defaultValue) {
+ await setAnimationStep(`default-${i}`);
+ await sleepMs(DEFAULT_VALUE_TIME_MS);
+ }
await setAnimationStep(`prompt-${i}`);
await sleepMs(PROMP_TIME_MS);
@@ -118,6 +123,18 @@ const VscodeAnimation = ({ template }) => {
{animationStep === 'templates' && (
)}
+ {animationStep.startsWith('default') && (
+
+ )}
{animationStep.startsWith('prompt') && (
(
defaultValue={item.variableName}
readOnly
/>
+
);
const Prompts = ({ prompts }) => (
-
-
-
Prompts
-
-
-
- Prompts represent list of questions that will be asked during template execution from
- users as a popup.
-
-
- Answers you can use as variables inside templates or filenames by using % myVariable %
-
-
-
-
-
- {prompts.map((item, index) => (
-
- ))}
-
-
+
+
+
Prompts
+
+
+
+ Prompts represent list of questions that will be asked during template execution from
+ users as a popup.
+
+
+ Answers you can use as variables inside templates or filenames by using % myVariable %
+
+
+
+
+
+ {prompts.map((item, index) => (
+
+ ))}
+
- );
+
+);
export default Prompts;
diff --git a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
index 9fcb9bc6..7e015e0d 100644
--- a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
+++ b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
@@ -39,6 +39,15 @@ const Prompt = React.forwardRef(({ item, trigger, index, errors, remove, readOny
error={errors?.prompts?.[index]?.variableName?.message}
onBlur={() => trigger('prompts')}
/>
+
trigger('prompts')}
+ />
{!readOny && (