#1826 dont select tools on hover (#1877)

* #1826: do not select a hotkey tool if we are hovering over an atom

* #1826: do not select a hotkey tool if we are hovering over an atom / eslint

* #1826: do not select a hotkey tool if we are hovering over an atom / let -> const

* #1826: do not select a hotkey tool if we are hovering over an atom / fix types for hotkeys.js

* #1826: do not select a hotkey tool if we are hovering over an atom / fix import error

Co-authored-by: Konstantin Levin <Konstantin_Levin@epam.com>

packages/ketcher-react/src/script/ui/state/hotkeys.ts

@@ -20,7 +20,9 @@ import {
   KetSerializer,
   MolSerializer,
   formatProperties,
-  ChemicalMimeType
+  ChemicalMimeType,
+  fromAtomsAttrs,
+  ReAtom
 } from 'ketcher-core'
 import { debounce, isEqual } from 'lodash/fp'
 import { load, onAction } from './shared'
@@ -43,14 +45,15 @@ export function initKeydownListener(element) {
 function keyHandle(dispatch, state, hotKeys, event) {
   if (state.modal) return
 
-  const editor = state.editor
+  const { editor } = state
+  const { render } = editor
   const actionState = state.actionState
   const actionTool = actionState.activeTool
 
   const key = keyNorm(event)
   const atomsSelected = editor.selection() && editor.selection().atoms
 
-  let group
+  let group: any = null
 
   if (key && key.length === 1 && atomsSelected && key.match(/\w/)) {
     openDialog(dispatch, 'labelEdit', { letter: key })
@@ -61,7 +64,8 @@ function keyHandle(dispatch, state, hotKeys, event) {
     event.preventDefault()
   } else if ((group = keyNorm.lookup(hotKeys, event)) !== undefined) {
     let index = checkGroupOnTool(group, actionTool) // index currentTool in group || -1
-    index = (index + 1) % group.length
+    const groupLength = group !== null ? group.length : 1
+    index = (index + 1) % groupLength
 
     const actName = group[index]
     if (actionState[actName] && actionState[actName].disabled === true) {
@@ -70,14 +74,38 @@ function keyHandle(dispatch, state, hotKeys, event) {
     }
     if (clipArea.actions.indexOf(actName) === -1) {
       const newAction = actions[actName].action
-      dispatch(onAction(newAction))
+      const hoverItemId = getHoveredAtomId(render.ctab.atoms)
+      const isHoveringOverAtom = hoverItemId !== null
+      if (isHoveringOverAtom) {
+        // check if atom is currently hovered over
+        // in this case we do not want to activate the corresponding tool
+        // and just insert the atom directly
+        const atomProps = { ...newAction.opts }
+        const updatedAtoms = fromAtomsAttrs(
+          render.ctab,
+          hoverItemId,
+          atomProps,
+          true
+        )
+        editor.update(updatedAtoms)
+      } else {
+        dispatch(onAction(newAction))
+      }
+
       event.preventDefault()
     } else if (isIE) {
       clipArea.exec(event)
     }
   }
 }
 
+function getHoveredAtomId(atoms: Map<number, ReAtom>): number | null {
+  for (const [id, atom] of atoms.entries()) {
+    if (atom.hover) return id
+  }
+  return null
+}
+
 function setHotKey(key, actName, hotKeys) {
   if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName)
   else hotKeys[key] = [actName]
@@ -116,7 +144,7 @@ function checkGroupOnTool(group, actionTool) {
 const rxnTextPlain = /\$RXN\n+\s+0\s+0\s+0\n*/
 
 /* ClipArea */
-export function initClipboard(dispatch, _getState) {
+export function initClipboard(dispatch) {
   const formats = Object.keys(formatProperties).map(
     (format) => formatProperties[format].mime
   )