From f1d1bb2bc22fe4e523cf0bc94794cdd511726d75 Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 11 Nov 2024 12:23:27 +0100
Subject: [PATCH] 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 <48489896+devnaumov@users.noreply.github.com>
---
 .../core-blocks/src/FormControls/FormContext.ts       |  2 +-
 .../core-blocks/src/FormControls/Textarea.tsx         |  4 ++++
 .../packages/core-blocks/src/FormControls/useForm.ts  | 11 +++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/FormContext.ts b/webapp/packages/core-blocks/src/FormControls/FormContext.ts
index a676cecee9..67b2fa5c05 100644
--- 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
index 929ddd47f5..68e8a71fe2 100644
--- 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
index 50d67bb655..1ea664b631 100644
--- 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();