Federate emoji sizing (#2063)

* 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

View file

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

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.
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 isCustomEmoji = customEmoji !== undefined;
if (!isCustomEmoji) {
return defaultRenderer?.(tokens, idx, options, env, self) ?? "";
const isLocalEmoji = customEmoji !== undefined;
if (!isLocalEmoji) {
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="${
customEmoji!.custom_emoji.image_url
@ -318,7 +329,7 @@ export function setupTribute() {
?.custom_emoji;
if (customEmoji === undefined) return `${item.original.val}`;
else
return `![${customEmoji.alt_text}](${customEmoji.image_url} "${customEmoji.shortcode}")`;
return `![${customEmoji.alt_text}](${customEmoji.image_url} "emoji ${customEmoji.shortcode}")`;
},
values: Object.entries(emojiShortName)
.map(e => {