PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add tooltips to emoji in messages (#7592)

Browse source
This commit is contained in:
Robin 2022-01-21 05:10:57 -05:00 committed by GitHub
parent 35ebca2966
commit af8b3c2714
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/rooms/_EventTile.scss
View file

@ -391,10 +391,9 @@ $left-gutter: 64px;
position: absolute;
}
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
.mx_EventTile_bigEmoji .mx_EventTile_Emoji {
font-size: 48px !important;
line-height: 57px !important;
line-height: 57px;
}
.mx_EventTile_content .mx_EventTile_edited {

29
src/HtmlUtils.tsx
View file

@ -22,6 +22,7 @@ import sanitizeHtml from 'sanitize-html';
import cheerio from 'cheerio';
import classNames from 'classnames';
import EMOJIBASE_REGEX from 'emojibase-regex';
import { split } from 'lodash';
import katex from 'katex';
import { AllHtmlEntities } from 'html-entities';
import { IContent } from 'matrix-js-sdk/src/models/event';
@ -402,6 +403,11 @@ export interface IOptsReturnString extends IOpts {
returnString: true;
}
const emojiToHtmlSpan = (emoji: string) =>
`<span class='mx_EventTile_Emoji' title='${unicodeToShortcode(emoji)}'>${emoji}</span>`;
const emojiToJsxSpan = (emoji: string, key: number) =>
<span key={key} className='mx_EventTile_Emoji' title={unicodeToShortcode(emoji)}>{ emoji }</span>;
/**
* Wraps emojis in <span> to style them separately from the rest of message. Consecutive emojis (and modifiers) are wrapped
* in the same <span>.
@ -411,34 +417,27 @@ export interface IOptsReturnString extends IOpts {
* and plain text for everything else
*/
function formatEmojis(message: string, isHtmlMessage: boolean): (JSX.Element | string)[] {
const emojiToSpan = isHtmlMessage ? (emoji: string) => `<span class='mx_EventTile_Emoji'>${emoji}</span>` :
(emoji: string, key: number) => <span key={key} className='mx_EventTile_Emoji'>{ emoji }</span>;
const emojiToSpan = isHtmlMessage ? emojiToHtmlSpan : emojiToJsxSpan;
const result: (JSX.Element | string)[] = [];
let text = '';
let emojis = '';
let key = 0;
for (const char of message) {
if (mightContainEmoji(char) || ZWJ_REGEX.test(char) || char === '\ufe0f') {
// We use lodash's grapheme splitter to avoid breaking apart compound emojis
for (const char of split(message, '')) {
if (mightContainEmoji(char)) {
if (text) {
result.push(text);
text = '';
}
emojis += char;
} else {
if (emojis) {
result.push(emojiToSpan(emojis, key));
result.push(emojiToSpan(char, key));
key++;
emojis = '';
}
} else {
text += char;
}
}
if (text) {
result.push(text);
}
if (emojis) {
result.push(emojiToSpan(emojis, key));
}
return result;
}
@ -574,7 +573,7 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
});
let emojiBodyElements: JSX.Element[];
if (!isDisplayedWithHtml && bodyHasEmoji && !emojiBody) {
if (!isDisplayedWithHtml && bodyHasEmoji) {
emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];
}