Mikk number input placeholder

wegas-app/src/main/node/wegas-react/src/Components/Inputs/Number/NumberInput.tsx

@@ -7,10 +7,12 @@ const numberInputStyle = css({
   textAlign: 'center',
 });
 
-export type NumberInputProps = InputProps<number>;
+interface NumberInputProps extends InputProps<number> {
+  placeholder?: string,
+}
 
 export function NumberInput(props: NumberInputProps) {
-  const { value } = props;
+  const { value, placeholder } = props;
   const valueRef = React.useRef(String(value));
   const [inputValue, setInputValue] = React.useState<string>('');
 
@@ -37,6 +39,7 @@ export function NumberInput(props: NumberInputProps) {
         }
       }}
       inputType='number'
+      placeholder={placeholder}
       onBlur={onBlur}
     />
   );

wegas-app/src/main/node/wegas-react/src/Components/Inputs/Number/NumberSlider.tsx

@@ -68,21 +68,23 @@ export interface NumberSliderProps
    * handleStyle - the style of the slider handle
    */
   handleStyle?: CSSInterpolation;
+  placeholder?: string,
 }
 
 const desinterpolate = (style?: CSSInterpolation) =>
   style
     ? Object.keys(style).reduce(
-        (o, k: keyof CSSInterpolation) => ({
-          ...o,
-          [k]: style[k],
-        }),
-        {},
-      )
+      (o, k: keyof CSSInterpolation) => ({
+        ...o,
+        [k]: style[k],
+      }),
+      {},
+    )
     : undefined;
 
 export function NumberSlider({
   value,
+  placeholder,
   onChange,
   max,
   min,
@@ -156,6 +158,7 @@ export function NumberSlider({
               }}
               disabled={disabled}
               readOnly={readOnly}
+              placeholder={placeholder}
             />
           );
           break;
@@ -168,16 +171,7 @@ export function NumberSlider({
       display = displayValues(internalValue, value);
     }
     return <div className={valueDisplayStyle}>{display}</div>;
-  }, [
-    disabled,
-    displayValues,
-    internalValue,
-    max,
-    min,
-    onNumberChange,
-    readOnly,
-    value,
-  ]);
+  }, [disabled, displayValues, internalValue, max, min, onNumberChange, placeholder, readOnly, value]);
 
   const computedSteps = Math.abs(max - min) / (steps ?? 100);
 
@@ -192,13 +186,13 @@ export function NumberSlider({
           active: leftPartStyle
             ? desinterpolate(leftPartStyle)
             : desinterpolate({
-                backgroundColor: themeVar.colors.PrimaryColor,
-              }),
+              backgroundColor: themeVar.colors.PrimaryColor,
+            }),
           thumb: handleStyle
             ? desinterpolate(handleStyle)
             : isActionAllowed({ readOnly, disabled })
-            ? desinterpolate({ cursor: 'pointer' })
-            : {},
+              ? desinterpolate({ cursor: 'pointer' })
+              : {},
           disabled: { opacity: 0.5 },
         }}
         axis="x"

wegas-app/src/main/node/wegas-react/src/Components/PageComponents/Inputs/Number.component.tsx

@@ -31,6 +31,10 @@ interface PlayerNumberInputProps extends WegasComponentProps {
    * script - the script that returns the variable to display and modify
    */
   script?: IScript;
+  /**
+  * placeholder - the grey text inside the box when nothing is written
+  */
+  placeholder?: IScript;
   onVariableChange?: OnVariableChange;
 }
 
@@ -40,6 +44,7 @@ function PlayerNumberInput({
   className,
   style,
   id,
+  placeholder,
   onVariableChange,
   options,
   pageId,
@@ -49,6 +54,7 @@ function PlayerNumberInput({
   const { readOnly, disabled, locked } = options;
 
   const number = useScript<SNumberDescriptor | number>(script, context);
+  const placeholderText = useScript<string>(placeholder, context);
 
   const value = useStore(() =>
     typeof number === 'object' ? number.getValue(Player.self()) : number,
@@ -94,6 +100,7 @@ function PlayerNumberInput({
       readOnly={readOnly}
       disabled={disabled || locked}
       onChange={debounceOnChange}
+      placeholder={placeholderText}
     />
   );
 }
@@ -112,7 +119,10 @@ registerComponent(
         required: true,
         returnType: ['SNumberDescriptor', 'number'],
       }),
-      label: schemaProps.scriptString({ label: 'Label' }),
+      placeholder: schemaProps.scriptString({
+        label: 'Placeholder',
+        richText: false,
+      }),
       onVariableChange: onVariableChangeSchema('On change action'),
       ...validatorSchema,
       ...classStyleIdSchema,

wegas-app/src/main/node/wegas-react/src/Components/PageComponents/Inputs/NumberSlider.component.tsx

@@ -43,6 +43,10 @@ interface PlayerNumberSliderProps extends WegasComponentProps {
    * Can be a boolean or a formatting function that takes the value and return a string
    */
   displayValues?: DisplayMode;
+  /**
+  * placeholder - the grey text inside the box when nothing is written
+  */
+  placeholder?: IScript;
   onVariableChange?: OnVariableChange;
 }
 
@@ -58,6 +62,7 @@ function PlayerNumberSlider({
   className,
   style,
   id,
+  placeholder,
   onVariableChange,
   options,
   ...restProps
@@ -69,6 +74,8 @@ function PlayerNumberSlider({
     script,
     context,
   );
+  const placeholderText = useScript<string>(placeholder, context);
+
 
   const value = useStore(() =>
     entityIs(number, 'NumberDescriptor')
@@ -133,6 +140,7 @@ function PlayerNumberSlider({
       }
       disabled={options.disabled || options.locked}
       readOnly={options.readOnly}
+      placeholder={placeholderText}
     />
   );
 }
@@ -159,6 +167,10 @@ registerComponent(
         label: 'Display value',
         values: displayModes,
       }),
+      placeholder: schemaProps.scriptString({
+        label: 'Placeholder',
+        richText: false,
+      }),
       onVariableChange: onVariableChangeSchema('On number change action'),
       ...classStyleIdSchema,
     },

wegas-app/src/main/node/wegas-react/src/Components/PageComponents/Inputs/String.component.tsx

@@ -31,7 +31,7 @@ import {
 
 interface PlayerStringInput
   extends WegasComponentProps,
-    ValidatorComponentProps {
+  ValidatorComponentProps {
   onVariableChange?: OnVariableChange;
   /**
    * script - the script that returns the variable to display and modify
@@ -150,7 +150,7 @@ registerComponent(
       }),
       placeholder: schemaProps.scriptString({
         label: 'Placeholder',
-        richText: true,
+        richText: false,
       }),
       onVariableChange: onVariableChangeSchema('On text change action'),
       rows: {