diff --git a/src/components/middle/composer/hooks/useCustomEmojiTooltip.ts b/src/components/middle/composer/hooks/useCustomEmojiTooltip.ts index 3c4636061..5de2e933c 100644 --- a/src/components/middle/composer/hooks/useCustomEmojiTooltip.ts +++ b/src/components/middle/composer/hooks/useCustomEmojiTooltip.ts @@ -36,7 +36,7 @@ export default function useCustomEmojiTooltip( } }, [updateCacheBuster]); - useOnSelectionChange(document.querySelector(inputSelector), handleSelectionChange); + useOnSelectionChange(inputSelector, handleSelectionChange); useEffect(() => { if (!html) { diff --git a/src/components/middle/composer/hooks/useInlineBotTooltip.ts b/src/components/middle/composer/hooks/useInlineBotTooltip.ts index ddc79a324..dc7406cc9 100644 --- a/src/components/middle/composer/hooks/useInlineBotTooltip.ts +++ b/src/components/middle/composer/hooks/useInlineBotTooltip.ts @@ -86,6 +86,10 @@ export default function useInlineBotTooltip( } function parseBotQuery(html: string) { + if (!html.startsWith('@')) { + return MEMO_NO_RESULT; + } + const text = getPlainText(html); const result = text.match(INLINE_BOT_QUERY_REGEXP); if (!result) { diff --git a/src/components/middle/composer/hooks/useMentionTooltip.ts b/src/components/middle/composer/hooks/useMentionTooltip.ts index ecd78aec4..4996b0615 100644 --- a/src/components/middle/composer/hooks/useMentionTooltip.ts +++ b/src/components/middle/composer/hooks/useMentionTooltip.ts @@ -75,7 +75,7 @@ export default function useMentionTooltip( } }, [updateCacheBuster]); - useOnSelectionChange(document.querySelector(inputSelector), handleSelectionChange); + useOnSelectionChange(inputSelector, handleSelectionChange); useEffect(() => { setHtmlBeforeSelection(getHtmlBeforeSelection(document.querySelector(inputSelector)!)); diff --git a/src/hooks/useOnSelectionChange.ts b/src/hooks/useOnSelectionChange.ts index 6030360c7..0ede87432 100644 --- a/src/hooks/useOnSelectionChange.ts +++ b/src/hooks/useOnSelectionChange.ts @@ -1,23 +1,28 @@ import { useEffect } from '../lib/teact/teact'; -export default function useOnSelectionChange(container: HTMLElement | null, callback: (range: Range) => void) { +export default function useOnSelectionChange( + inputSelector: string, callback: (range: Range) => void, +) { useEffect(() => { - if (!container) return undefined; - - const onSelectionChange = () => { + function onSelectionChange() { const selection = window.getSelection(); if (!selection) return; + const inputEl = document.querySelector(inputSelector); + if (!inputEl) { + return; + } + for (let i = 0; i < selection.rangeCount; i++) { const range = selection.getRangeAt(i); const ancestor = range.commonAncestorContainer; - if (container.contains(ancestor)) { + if (inputEl.contains(ancestor)) { callback(range); } } - }; + } document.addEventListener('selectionchange', onSelectionChange); return () => document.removeEventListener('selectionchange', onSelectionChange); - }, [callback, container]); + }, [callback, inputSelector]); }