From 958cf1aea2b9de89fa08799a150b2b9e86782aea Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@gmail.com>
Date: Mon, 20 Nov 2023 15:10:13 +0700
Subject: [PATCH] UBERF-4326 UBERF-4339 Mentions fixes (#4016)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>
---
 .../text-editor/src/components/MentionPopup.svelte     | 10 +++-------
 .../text-editor/src/components/extension/suggestion.ts |  4 +++-
 packages/theme/styles/_colors.scss                     |  2 ++
 packages/theme/styles/_text-editor.scss                |  7 +++++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/text-editor/src/components/MentionPopup.svelte b/packages/text-editor/src/components/MentionPopup.svelte
index eab1cc3810..910fcd5ecc 100644
--- a/packages/text-editor/src/components/MentionPopup.svelte
+++ b/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">
diff --git a/packages/text-editor/src/components/extension/suggestion.ts b/packages/text-editor/src/components/extension/suggestion.ts
index dd7d78c5b0..da550484ea 100644
--- a/packages/text-editor/src/components/extension/suggestion.ts
+++ b/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
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 5ad27116fd..86cbb69f9d 100644
--- a/packages/theme/styles/_colors.scss
+++ b/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);
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index d414572a97..b126db3897 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/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);