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

Get rid of span for emojis (#1192)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-19 18:58:02 +03:00
parent 1f81802c75
commit fa71823e67
5 changed files with 17 additions and 26 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,6 +80,10 @@ 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];
@ -97,24 +101,18 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx'
);
if (type === 'jsx') {
emojiResult.push(
IS_EMOJI_SUPPORTED
? <span className="font-emoji">{emoji}</span>
: (
<img
className={className}
src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
alt={emoji}
/>
),
<img
className={className}
src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
alt={emoji}
/>,
);
}
if (type === 'html') {
emojiResult.push(
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}" />`,
// 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}" />`,
);
}

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

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

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

@ -59,9 +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, '');

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

@ -3,7 +3,8 @@ 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';
// eslint-disable-next-line max-len
element.style.font = '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
element.style.whiteSpace = 'nowrap';
element.style.position = 'absolute';
element.style.left = '-999px';

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", sans-serif;
font-family: "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif;
color: var(--color-text);
overflow: hidden;
@media (max-width: 600px) {
@ -28,11 +28,6 @@ html, body {
}
}
.font-emoji {
font-family: "Apple Color Emoji", sans-serif;
font-style: normal;
}
body.cursor-grabbing, body.cursor-grabbing * {
cursor: grabbing !important;
}