ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Emoji Picker: Fix inserting system emoji (#1666)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-25 03:24:49 +01:00
parent a231adc664
commit 44237833e2
3 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/helpers/renderText.tsx
View File

@ -5,6 +5,7 @@ import { RE_LINK_TEMPLATE, RE_MENTION_TEMPLATE } from '../../../config';
import { IS_EMOJI_SUPPORTED } from '../../../util/environment';
import { fixNonStandardEmoji, nativeToUnified } from '../../../util/emoji';
import buildClassName from '../../../util/buildClassName';
import { compact } from '../../../util/iteratees';
import MentionLink from '../../middle/message/MentionLink';
import SafeLink from '../SafeLink';
@ -26,7 +27,7 @@ export default function renderText(
return [part];
}
return filters.reduce((text, filter) => {
return compact(filters.reduce((text, filter) => {
switch (filter) {
case 'escape_html':
return escapeHtml(text);
@ -63,7 +64,7 @@ export default function renderText(
}
return text;
}, [part] as TextPart[]);
}, [part] as TextPart[]));
}
function escapeHtml(textParts: TextPart[]): TextPart[] {

5
src/components/middle/composer/hooks/useEmojiTooltip.ts
View File

@ -14,6 +14,7 @@ import {
} from '../../../../util/iteratees';
import memoized from '../../../../util/memoized';
import useFlag from '../../../../hooks/useFlag';
import renderText from '../../../common/helpers/renderText';
interface Library {
keywords: string[];
@ -115,10 +116,10 @@ export default function useEmojiTooltip(
const currentHtml = htmlRef.current;
const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined);
if (atIndex !== -1) {
onUpdateHtml(`${currentHtml.substr(0, atIndex)}${textEmoji}`);
onUpdateHtml(`${currentHtml.substr(0, atIndex)}${renderText(textEmoji, ['emoji_html'])}`);
const messageInput = document.getElementById(inputId)!;
requestAnimationFrame(() => {
focusEditableElement(messageInput, true);
focusEditableElement(messageInput, true, true);
});
}

6
src/util/focusEditableElement.ts
View File

@ -1,6 +1,6 @@
import { IS_TOUCH_ENV } from './environment';
export default function focusEditableElement(element: HTMLElement, force?: boolean) {
export default function focusEditableElement(element: HTMLElement, force?: boolean, forcePlaceCaretAtEnd?: boolean) {
if (!force && element === document.activeElement) {
return;
}
@ -9,12 +9,12 @@ export default function focusEditableElement(element: HTMLElement, force?: boole
const range = document.createRange();
const lastChild = element.lastChild || element;
if (!IS_TOUCH_ENV && (!lastChild || !lastChild.nodeValue)) {
if (!IS_TOUCH_ENV && !forcePlaceCaretAtEnd && (!lastChild || !lastChild.nodeValue)) {
element.focus();
return;
}
range.selectNodeContents(lastChild);
range.selectNodeContents(forcePlaceCaretAtEnd ? element : lastChild);
// `false` means collapse to the end rather than the start
range.collapse(false);
selection.removeAllRanges();