UBER-635-card-hotkeys (#4330)

Signed-off-by: Sergey Voytsehovich <syargreg@gmail.com>

packages/presentation/src/components/Card.svelte

@@ -22,7 +22,8 @@
     Scroller,
     deviceOptionsStore as deviceInfo,
     resizeObserver,
-    IconBack
+    IconBack,
+    getFocusManager
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -50,8 +51,46 @@
 
   const dispatch = createEventDispatcher()
 
+  const focusManager = getFocusManager()
+
   let okProcessing = false
   $: headerDivide = hideContent && numberOfBlocks > 1
+
+  function handleKeyDown (event: KeyboardEvent) {
+    const target = event.target as HTMLInputElement
+
+    if (target) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleOkClick()
+      } else if (event.key === 'Enter') {
+        // ignore customized editable divs to not interrupt multiline behavior
+        if (!target.isContentEditable) {
+          event.preventDefault()
+          focusManager?.next(1)
+        }
+      }
+    }
+  }
+
+  function handleOkClick () {
+    if (canSave) {
+      if (okProcessing) {
+        return
+      }
+      okProcessing = true
+      const r = okAction()
+      if (r instanceof Promise) {
+        r.then(() => {
+          okProcessing = false
+          dispatch('close')
+        })
+      } else {
+        okProcessing = false
+        dispatch('close')
+      }
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -59,7 +98,7 @@
   id={label}
   class="antiCard {$deviceInfo.isMobile ? 'mobile' : 'dialog'} {width}"
   class:full={fullSize}
-  on:keydown
+  on:keydown={handleKeyDown}
   on:submit|preventDefault={() => {}}
   use:resizeObserver={() => {
     dispatch('changeContent')
@@ -159,22 +198,7 @@
           label={okLabel}
           kind={'primary'}
           size={'large'}
-          on:click={() => {
+          on:click={handleOkClick}
-            if (okProcessing) {
-              return
-            }
-            okProcessing = true
-            const r = okAction()
-            if (r instanceof Promise) {
-              r.then(() => {
-                okProcessing = false
-                dispatch('close')
-              })
-            } else {
-              okProcessing = false
-              dispatch('close')
-            }
-          }}
         />
       </div>
       <div class="buttons-group small-gap text-sm">

packages/ui/src/components/EditBox.svelte

@@ -132,7 +132,7 @@
     focusManager?.setFocus(idx)
   }
   $: if (input) {
-    input.addEventListener('focus', updateFocus, { once: true })
+    input.addEventListener('focus', updateFocus)
   }
 
   export function focus (): void {