LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 03:11:25 +00:00
Code Issues Projects Releases Wiki Activity

Federate emoji sizing (#2063)

Browse source 
* Store signifier for emoji image, render using emoji css.

* cleanup

* fix prettier
This commit is contained in:
Anon 2023-08-25 23:35:59 -05:00 committed by GitHub
parent c8ab91bdd6
commit b4dd0556e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/common/markdown-textarea.tsx
View file

@ -363,7 +363,7 @@ export class MarkdownTextArea extends Component<
if (value === null) { if (value === null) {
const emoji = customEmojisLookup.get(e.id)?.custom_emoji; const emoji = customEmojisLookup.get(e.id)?.custom_emoji;
if (emoji) { if (emoji) {
value = `![${emoji.alt_text}](${emoji.image_url} "${emoji.shortcode}")`; value = `![${emoji.alt_text}](${emoji.image_url} "emoji ${emoji.shortcode}")`;
} }
} }
i.setState({ i.setState({

21
src/shared/markdown.ts
View file

@ -195,11 +195,22 @@ export function setupMarkdown() {
) { ) {
//Provide custom renderer for our emojis to allow us to add a css class and force size dimensions on them. //Provide custom renderer for our emojis to allow us to add a css class and force size dimensions on them.
const item = tokens[idx] as any; const item = tokens[idx] as any;
const title = item.attrs.length >= 3 ? item.attrs[2][1] : ""; let title = item.attrs.length >= 3 ? item.attrs[2][1] : "";
const splitTitle = title.split(/ (.*)/, 2);
const isEmoji = splitTitle[0] === "emoji";
if (isEmoji) {
title = splitTitle[1];
}
const customEmoji = customEmojisLookup.get(title); const customEmoji = customEmojisLookup.get(title);
const isCustomEmoji = customEmoji !== undefined; const isLocalEmoji = customEmoji !== undefined;
if (!isCustomEmoji) { if (!isLocalEmoji) {
return defaultRenderer?.(tokens, idx, options, env, self) ?? ""; const imgElement =
defaultRenderer?.(tokens, idx, options, env, self) ?? "";
if (imgElement) {
return `<span class='${
isEmoji ? "icon icon-emoji" : ""
}'>${imgElement}</span>`;
} else return "";
} }
return `<img class="icon icon-emoji" src="${ return `<img class="icon icon-emoji" src="${
customEmoji!.custom_emoji.image_url customEmoji!.custom_emoji.image_url
@ -318,7 +329,7 @@ export function setupTribute() {
?.custom_emoji; ?.custom_emoji;
if (customEmoji === undefined) return `${item.original.val}`; if (customEmoji === undefined) return `${item.original.val}`;
else else
return `![${customEmoji.alt_text}](${customEmoji.image_url} "${customEmoji.shortcode}")`; return `![${customEmoji.alt_text}](${customEmoji.image_url} "emoji ${customEmoji.shortcode}")`;
}, },
values: Object.entries(emojiShortName) values: Object.entries(emojiShortName)
.map(e => { .map(e => {