UBERF-4326 UBERF-4339 Mentions fixes (#4016)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

packages/text-editor/src/components/MentionPopup.svelte

@@ -1,6 +1,6 @@
 <!--
 // Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 Hardcore Engineering Inc.
+// Copyright © 2021, 2023 Hardcore Engineering Inc.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createFocusManager, FocusHandler, Label, ListView, resizeObserver } from '@hcengineering/ui'
+  import { Label, ListView, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation, { getClient, ObjectSearchCategory } from '@hcengineering/presentation'
 
@@ -70,7 +70,7 @@
       list?.select(selection - 1)
       return true
     }
-    if (key.key === 'Enter') {
+    if (key.key === 'Enter' || key.key === 'Tab') {
       key.preventDefault()
       key.stopPropagation()
       const searchItem = items[selection]
@@ -159,12 +159,8 @@
     items = packSearchResultsForListView(sections)
   }
   $: updateItems(query)
-
-  const manager = createFocusManager()
 </script>
 
-<FocusHandler {manager} />
-
 <form class="antiPopup mentionPoup" on:keydown={onKeyDown} use:resizeObserver={() => dispatch('changeSize')}>
   <div class="ap-scroll" bind:this={scrollContainer}>
     <div class="ap-box">

packages/text-editor/src/components/extension/suggestion.ts

@@ -161,6 +161,8 @@ export interface SuggestionKeyDownProps {
 
 export const SuggestionPluginKey = new PluginKey('suggestion')
 
+const cancelKeys = ['Escape', 'ArrowLeft', 'ArrowRight']
+
 export default function Suggestion<I = any> ({
   pluginKey = SuggestionPluginKey,
   editor,
@@ -394,7 +396,7 @@ export default function Suggestion<I = any> ({
           return false
         }
 
-        if (event.key === 'Escape') {
+        if (cancelKeys.includes(event.key)) {
           const flag = { forceCancelSuggestion: true }
 
           // It's important to dispatch this state twice

packages/theme/styles/_colors.scss

@@ -138,6 +138,7 @@
   --theme-divider-color: rgba(255, 255, 255, .06);
   --theme-bg-divider-color: #282834;
   --theme-mention-bg-color: rgba(55, 122, 230, 0.1);
+  --theme-mention-focused-bg-color: rgba(55, 122, 230, 0.2);
 
   --theme-trans-color: rgba(255, 255, 255, .3);
   --theme-darker-color: rgba(255, 255, 255, .4);
@@ -363,6 +364,7 @@
   --theme-divider-color: rgba(0, 0, 0, .06);
   --theme-bg-divider-color: #E3E3E5;
   --theme-mention-bg-color: rgba(55, 122, 230, 0.1);
+  --theme-mention-focused-bg-color: rgba(55, 122, 230, 0.2);
 
   --theme-trans-color: rgba(0, 0, 0, .3);
   --theme-darker-color: rgba(0, 0, 0, .4);

packages/theme/styles/_text-editor.scss

@@ -231,6 +231,13 @@
   }
 }
 
+.reference {
+  &:hover,
+  &.ProseMirror-selectednode {
+    background-color: var(--theme-mention-focused-bg-color);
+  }
+}
+
 .text-editor-highlighted-node-warning {
   background-color: var(--text-editor-highlighted-node-warning-background-color);
   border-bottom: 0.0625rem solid var(--text-editor-highlighted-node-warning-border-color);