Feat: Add configuration for webhook to the begin node. #10427 (#11875)

### What problem does this PR solve?

Feat: Add configuration for webhook to the begin node. #10427

### Type of change


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

web/src/components/jsonjoy-builder/components/schema-editor/add-field-button.tsx

@@ -20,6 +20,7 @@ import { CirclePlus, HelpCircle, Info } from 'lucide-react';
 import { useId, useState, type FC, type FormEvent } from 'react';
 import { useTranslation } from '../../hooks/use-translation';
 import type { NewField, SchemaType } from '../../types/json-schema';
+import { KeyInputProps } from './interface';
 import SchemaTypeSelector from './schema-type-selector';
 
 interface AddFieldButtonProps {
@@ -27,9 +28,10 @@ interface AddFieldButtonProps {
   variant?: 'primary' | 'secondary';
 }
 
-const AddFieldButton: FC<AddFieldButtonProps> = ({
+const AddFieldButton: FC<AddFieldButtonProps & KeyInputProps> = ({
   onAddField,
   variant = 'primary',
+  pattern,
 }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [fieldName, setFieldName] = useState('');
@@ -120,6 +122,7 @@ const AddFieldButton: FC<AddFieldButtonProps> = ({
                     placeholder={t.fieldNamePlaceholder}
                     className="font-mono text-sm w-full"
                     required
+                    searchValue={pattern}
                   />
                 </div>
 

web/src/components/jsonjoy-builder/components/schema-editor/context.ts

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+import { KeyInputProps } from './interface';
+
+export const KeyInputContext = React.createContext<KeyInputProps>({});
+
+export function useInputPattern() {
+  const x = useContext(KeyInputContext);
+  return x.pattern;
+}

web/src/components/jsonjoy-builder/components/schema-editor/interface.ts

@@ -0,0 +1 @@
+export type KeyInputProps = { pattern?: RegExp | string };

web/src/components/jsonjoy-builder/components/schema-editor/schema-property-editor.tsx

@@ -16,6 +16,7 @@ import {
   withObjectSchema,
 } from '../../types/json-schema';
 import type { ValidationTreeNode } from '../../types/validation';
+import { useInputPattern } from './context';
 import TypeDropdown from './type-dropdown';
 import TypeEditor from './type-editor';
 
@@ -54,6 +55,8 @@ export const SchemaPropertyEditor: React.FC<SchemaPropertyEditorProps> = ({
     'object' as SchemaType,
   );
 
+  const pattern = useInputPattern();
+
   // Update temp values when props change
   useEffect(() => {
     setTempName(name);
@@ -123,6 +126,7 @@ export const SchemaPropertyEditor: React.FC<SchemaPropertyEditorProps> = ({
                   className="h-8 text-sm font-medium min-w-[120px] max-w-full z-10"
                   autoFocus
                   onFocus={(e) => e.target.select()}
+                  searchValue={pattern}
                 />
               ) : (
                 <button

web/src/components/jsonjoy-builder/components/schema-editor/schema-visual-editor.tsx

@@ -8,6 +8,8 @@ import {
 import type { JSONSchema, NewField } from '../../types/json-schema';
 import { asObjectSchema, isBooleanSchema } from '../../types/json-schema';
 import AddFieldButton from './add-field-button';
+import { KeyInputContext } from './context';
+import { KeyInputProps } from './interface';
 import SchemaFieldList from './schema-field-list';
 
 /** @public */
@@ -17,9 +19,10 @@ export interface SchemaVisualEditorProps {
 }
 
 /** @public */
-const SchemaVisualEditor: FC<SchemaVisualEditorProps> = ({
+const SchemaVisualEditor: FC<SchemaVisualEditorProps & KeyInputProps> = ({
   schema,
   onChange,
+  pattern,
 }) => {
   const t = useTranslation();
   // Handle adding a top-level field
@@ -121,7 +124,7 @@ const SchemaVisualEditor: FC<SchemaVisualEditorProps> = ({
   return (
     <div className="p-4 h-full flex flex-col overflow-auto jsonjoy">
       <div className="mb-6 shrink-0">
-        <AddFieldButton onAddField={handleAddField} />
+        <AddFieldButton onAddField={handleAddField} pattern={pattern} />
       </div>
 
       <div className="grow overflow-auto">
@@ -131,12 +134,14 @@ const SchemaVisualEditor: FC<SchemaVisualEditorProps> = ({
             <p className="text-sm">{t.visualEditorNoFieldsHint2}</p>
           </div>
         ) : (
-          <SchemaFieldList
-            schema={schema}
-            onAddField={handleAddField}
-            onEditField={handleEditField}
-            onDeleteField={handleDeleteField}
-          />
+          <KeyInputContext.Provider value={{ pattern }}>
+            <SchemaFieldList
+              schema={schema}
+              onAddField={handleAddField}
+              onEditField={handleEditField}
+              onDeleteField={handleDeleteField}
+            />
+          </KeyInputContext.Provider>
         )}
       </div>
     </div>