Feat: The key for the begin operator can only contain alphanumeric characters and underscores. #10427 (#11377)

### What problem does this PR solve?

Feat: The key for the begin operator can only contain alphanumeric
characters and underscores. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/icon-font.tsx

@@ -1,15 +1,16 @@
 import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
 import { getExtension } from '@/utils/document-util';
+import { CSSProperties } from 'react';
 
 type IconFontType = {
   name: string;
-
   className?: string;
+  style?: CSSProperties;
 };
 
-export const IconFont = ({ name, className }: IconFontType) => (
-  <svg className={cn('size-4', className)}>
+export const IconFont = ({ name, className, style }: IconFontType) => (
+  <svg className={cn('size-4', className)} style={style}>
     <use xlinkHref={`#icon-${name}`} />
   </svg>
 );

web/src/components/key-input.tsx

@@ -8,7 +8,10 @@ type KeyInputProps = {
 } & Omit<InputProps, 'onChange'>;
 
 export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
-  function KeyInput({ value, onChange, searchValue = /[^a-zA-Z0-9_]/g }, ref) {
+  function KeyInput(
+    { value, onChange, searchValue = /[^a-zA-Z0-9_]/g, ...props },
+    ref,
+  ) {
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
         const value = e.target.value ?? '';
@@ -18,6 +21,6 @@ export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
       [onChange, searchValue],
     );
 
-    return <Input value={value} onChange={handleChange} ref={ref} />;
+    return <Input {...props} value={value} onChange={handleChange} ref={ref} />;
   },
 );