Polish wired editor UI and variable handling

src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx

@@ -38,20 +38,37 @@ interface IVariableReferenceEditorData
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 const parseEditorData = (value: string): IVariableReferenceEditorData =>
 {
     if(!value?.trim().startsWith('{')) return {};
@@ -187,7 +204,7 @@ export const WiredExtraVariableReferenceView: FC<{}> = () =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="flex flex-col gap-1">