danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-12-02 09:37:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix some missing emojis (#1128)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-31 15:08:58 +03:00
parent 33aaad6bca
commit ea94e70343
8 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,10 +80,6 @@ function escapeHtml(textParts: TextPart[]): TextPart[] {
}
function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx' | 'html'): TextPart[] {
if (IS_EMOJI_SUPPORTED) {
return textParts;
}
return textParts.reduce((result, part) => {
if (typeof part !== 'string') {
return [...result, part];
@ -101,18 +97,24 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx'
);
if (type === 'jsx') {
emojiResult.push(
<img
className={className}
src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
alt={emoji}
/>,
IS_EMOJI_SUPPORTED
? <span className="font-emoji">{emoji}</span>
: (
<img
className={className}
src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
alt={emoji}
/>
),
);
}
if (type === 'html') {
emojiResult.push(
// For preventing extra spaces in html
// eslint-disable-next-line max-len
`<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
IS_EMOJI_SUPPORTED
? emoji
// For preventing extra spaces in html
// eslint-disable-next-line max-len
: `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
);
}

1
src/components/middle/composer/Composer.scss
View File

@ -257,6 +257,7 @@
padding-bottom: calc(1rem - var(--border-width));
overflow: hidden;
line-height: 1.375rem;
font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif;
&.overflown {
overflow-y: auto;

3
src/components/middle/composer/Composer.tsx
View File

@ -18,7 +18,7 @@ import {
} from '../../../api/types';
import { EDITABLE_INPUT_ID, SCHEDULED_WHEN_ONLINE } from '../../../config';
import { IS_EMOJI_SUPPORTED, IS_VOICE_RECORDING_SUPPORTED, IS_MOBILE_SCREEN } from '../../../util/environment';
import { IS_VOICE_RECORDING_SUPPORTED, IS_MOBILE_SCREEN, IS_EMOJI_SUPPORTED } from '../../../util/environment';
import {
selectChat,
selectIsChatWithBot,
@ -317,7 +317,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
insertHtmlInSelection(newHtml);
messageInput.dispatchEvent(new Event('input', { bubbles: true }));
}
return;
}

4
src/components/middle/composer/EmojiButton.tsx
View File

@ -21,7 +21,9 @@ const EmojiButton: FC<OwnProps> = ({ emoji, focus, onClick }) => {
onClick={handleClick}
title={`:${emoji.names[0]}:`}
>
{IS_EMOJI_SUPPORTED ? emoji.native : <img src={`/img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
{IS_EMOJI_SUPPORTED
? <span className="font-emoji">{emoji.native}</span>
: <img src={`/img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
</div>
);
};

2
src/components/middle/composer/helpers/parseMessageInput.ts
View File

@ -59,6 +59,8 @@ function parseMarkdown(html: string) {
if (!IS_EMOJI_SUPPORTED) {
// Emojis
parsedHtml = parsedHtml.replace(/<img[^>]+alt="([^"]+)"[^>]*>/gm, '$1');
} else {
parsedHtml = parsedHtml.replace(/<span\s+class="font-emoji">([^<]*)<\/span>/g, '$1');
}
// Strip redundant <span> tags
parsedHtml = parsedHtml.replace(/<\/?span([^>]*)?>/g, '');

2
src/components/middle/message/helpers/calculateAuthorWidth.ts
View File

@ -3,7 +3,7 @@ let element: HTMLSpanElement | undefined;
export default function calculateAuthorWidth(text: string) {
if (!element) {
element = document.createElement('span');
element.style.font = '400 12px Roboto, "Helvetica Neue", "Apple Color Emoji", sans-serif';
element.style.font = '400 12px Roboto, "Helvetica Neue", sans-serif';
element.style.whiteSpace = 'nowrap';
element.style.position = 'absolute';
element.style.left = '-999px';

4
src/lib/twemojiRegex.js
View File

File diff suppressed because one or more lines are too long

7
src/styles/index.scss
View File

@ -20,7 +20,7 @@ html, body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Roboto, "Helvetica Neue", "Apple Color Emoji", sans-serif;
font-family: Roboto, "Helvetica Neue", sans-serif;
color: var(--color-text);
overflow: hidden;
@media (max-width: 600px) {
@ -28,6 +28,11 @@ html, body {
}
}
.font-emoji {
font-family: "Apple Color Emoji", sans-serif;
font-style: normal;
}
body.cursor-grabbing, body.cursor-grabbing * {
cursor: grabbing !important;
}