CB-5691 AI prompt - add shortcut for Translate action (#3059)

* CB-5691 adds ctrl+enter submit for textarea in form * CB-5691 removes unneeded prop: disableCtrlEnterSubmit --------- Co-authored-by: alex <[email protected]>
dbeaver · Nov 11, 2024 · f1d1bb2 · f1d1bb2
1 parent c9a8727
commit f1d1bb2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/webapp/packages/core-blocks/src/FormControls/FormContext.ts b/webapp/packages/core-blocks/src/FormControls/FormContext.ts
@@ -11,7 +11,7 @@ import type { IExecutor, SyncExecutor } from '@cloudbeaver/core-executor';
 
 export type FormChangeValues = string | number | boolean | FileList | null | undefined;
 export type FormChangeHandler = (value: FormChangeValues, name: string | undefined) => void;
-type KeyHandler = (event: React.KeyboardEvent<HTMLInputElement>) => void;
+type KeyHandler = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 
 export interface IChangeData {
   value: FormChangeValues;

diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -16,6 +16,7 @@ import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps.js';
 import { useTranslate } from '../localization/useTranslate.js';
 import { s } from '../s.js';
 import { UploadArea } from '../UploadArea.js';
+import { useCombinedHandler } from '../useCombinedHandler.js';
 import { useS } from '../useS.js';
 import { Field } from './Field.js';
 import { FieldDescription } from './FieldDescription.js';
@@ -63,6 +64,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   embedded,
   cursorInitiallyAtEnd,
   uploadable,
+  onKeyDown,
   onChange = () => {},
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
@@ -72,6 +74,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   rest = filterLayoutFakeProps(rest);
   const styles = useS(textareaStyle);
   const context = useContext(FormContext);
+  const handleKeyDown = useCombinedHandler(onKeyDown, context?.keyDown);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -110,6 +113,7 @@ export const Textarea: TextareaType = observer(function Textarea({
         value={value ?? ''}
         name={name}
         data-embedded={embedded}
+        onKeyDown={handleKeyDown}
         onChange={event => handleChange(event.target.value)}
       />
       {description && <FieldDescription>{description}</FieldDescription>}

diff --git a/webapp/packages/core-blocks/src/FormControls/useForm.ts b/webapp/packages/core-blocks/src/FormControls/useForm.ts
@@ -78,10 +78,17 @@ export function useForm(options?: IOptions): IFormContext {
           this.onChange.execute({ value, name });
         }
       },
-      keyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+      keyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
+        const isCtrlEnterSubmit =
+          event.key === 'Enter' &&
+          (event.ctrlKey || event.metaKey) &&
+          this.disableEnterSubmit === false &&
+          event.target instanceof HTMLTextAreaElement;
+        const isEnterSubmit = event.key === 'Enter' && this.disableEnterSubmit === false && event.target instanceof HTMLInputElement;
+
         if (this.parent) {
           this.parent.keyDown(event);
-        } else if (event.key === 'Enter' && this.disableEnterSubmit === false) {
+        } else if (isCtrlEnterSubmit || isEnterSubmit) {
           event.preventDefault();
           if (this.ref) {
             this.ref?.requestSubmit();