From 4988ff5dda873e4039546eaf2b0f1a8148b2a5f6 Mon Sep 17 00:00:00 2001
From: Victor Ilyushchenko <alt13ri@gmail.com>
Date: Tue, 17 Dec 2024 18:30:42 +0300
Subject: [PATCH] Fix search in slash command menu

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>
---
 packages/ui/src/components/SelectPopup.svelte | 27 ++++++++++++++++---
 .../src/components/InlineCommandsList.svelte  |  3 ++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 1a60130ca1..54dab9293d 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -26,6 +26,8 @@
   import Spinner from './Spinner.svelte'
   import IconCheck from './icons/Check.svelte'
   import IconSearch from './icons/Search.svelte'
+  import { translate } from '@hcengineering/platform'
+  import { themeStore } from '@hcengineering/theme'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -40,7 +42,7 @@
   export let loading: boolean = false
 
   let popupElement: HTMLDivElement | undefined = undefined
-  let search: string = ''
+  export let search: string = ''
 
   const dispatch = createEventDispatcher()
 
@@ -82,14 +84,33 @@
     if (key.code === 'Enter') {
       key.preventDefault()
       key.stopPropagation()
-      sendSelect(value[selection].id)
+      sendSelect(filteredObjects[selection].id)
       return true
     }
     return false
   }
   const manager = createFocusManager()
 
-  $: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
+  let itemLabelsTranslation: Map<string, string> = new Map<string, string>()
+
+  async function translateLabels (values: SelectPopupValueType[]): Promise<void> {
+    const translateValue: (value: SelectPopupValueType) => Promise<[string, string] | null> = async (e) => {
+      if (e.label === undefined) {
+        return null
+      }
+      const text = await translate(e.label, {}, $themeStore.language)
+      return [e.label, text]
+    }
+    const promises = values.map(translateValue)
+    const result: Array<readonly [string, string] | null> = await Promise.all(promises)
+    itemLabelsTranslation = new Map(result.filter((r) => r !== null) as Array<readonly [string, string]>)
+  }
+
+  $: void translateLabels(value)
+
+  $: filteredObjects = value.filter((el) =>
+    (itemLabelsTranslation.get(el.label ?? '') ?? el.text ?? '').toLowerCase().includes(search.toLowerCase())
+  )
 
   $: huge = size === 'medium' || size === 'large'
 
diff --git a/plugins/text-editor-resources/src/components/InlineCommandsList.svelte b/plugins/text-editor-resources/src/components/InlineCommandsList.svelte
index 57ecc2dbb1..5b6a76f6a1 100644
--- a/plugins/text-editor-resources/src/components/InlineCommandsList.svelte
+++ b/plugins/text-editor-resources/src/components/InlineCommandsList.svelte
@@ -28,6 +28,7 @@
   export let clientRect: () => ClientRect
   export let command: (props: any) => void
   export let close: () => void
+  export let query: string = ''
 
   let popup: HTMLDivElement
   let dummyPopup: PopupResult
@@ -113,7 +114,7 @@
     updateStyle()
   }}
 >
-  <SelectPopup bind:this={menuPopup} value={items} onSelect={handleSelected} />
+  <SelectPopup bind:this={menuPopup} search={query} value={items} onSelect={handleSelected} />
 </div>
 
 <style lang="scss">