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

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

@ -14,6 +14,7 @@ import {
} from '../../../../util/iteratees'; } from '../../../../util/iteratees';
import memoized from '../../../../util/memoized'; import memoized from '../../../../util/memoized';
import useFlag from '../../../../hooks/useFlag'; import useFlag from '../../../../hooks/useFlag';
import renderText from '../../../common/helpers/renderText';
interface Library { interface Library {
keywords: string[]; keywords: string[];
@ -115,10 +116,10 @@ export default function useEmojiTooltip(
const currentHtml = htmlRef.current; const currentHtml = htmlRef.current;
const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined); const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined);
if (atIndex !== -1) { if (atIndex !== -1) {
onUpdateHtml(`${currentHtml.substr(0, atIndex)}${textEmoji}`); onUpdateHtml(`${currentHtml.substr(0, atIndex)}${renderText(textEmoji, ['emoji_html'])}`);
const messageInput = document.getElementById(inputId)!; const messageInput = document.getElementById(inputId)!;
requestAnimationFrame(() => { 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'; 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) { if (!force && element === document.activeElement) {
return; return;
} }
@ -9,12 +9,12 @@ export default function focusEditableElement(element: HTMLElement, force?: boole
const range = document.createRange(); const range = document.createRange();
const lastChild = element.lastChild || element; const lastChild = element.lastChild || element;
if (!IS_TOUCH_ENV && (!lastChild || !lastChild.nodeValue)) { if (!IS_TOUCH_ENV && !forcePlaceCaretAtEnd && (!lastChild || !lastChild.nodeValue)) {
element.focus(); element.focus();
return; return;
} }
range.selectNodeContents(lastChild); range.selectNodeContents(forcePlaceCaretAtEnd ? element : lastChild);
// `false` means collapse to the end rather than the start // `false` means collapse to the end rather than the start
range.collapse(false); range.collapse(false);
selection.removeAllRanges(); selection.removeAllRanges();