Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

emoji-picker: Make sure that emojis as images are rendered properly

Browse Source
This commit is contained in:
JC Brand 2020-02-06 16:27:44 +01:00
parent 976c3d6006
commit d2b6b41128
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sass/_emoji.scss
View File

@ -87,6 +87,11 @@
&.selected a {
background-color: var(--highlight-color-darker);
}
img {
margin-top: 3px;
height: var(--font-size-huge);
width: var(--font-size-huge);
}
a {
padding: 3px;
font-size: var(--font-size-huge);
@ -127,6 +132,10 @@
a {
padding: 0.25em;
}
img {
height: var(--font-size-huge);
width: var(--font-size-huge);
}
}
}
}

2
src/headless/converse-emoji.js
View File

@ -191,7 +191,7 @@ converse.plugins.add('converse-emoji', {
} else if (unicode_only) {
return shortname;
} else {
return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}"/>`;
return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}">`;
}
});
// Also replace ASCII smileys

8
src/templates/emoji_picker.js
View File

@ -10,7 +10,7 @@ const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
const emoji_category = (o) => {
const category_emoji = xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}});
const category_emoji = unsafeHTML(xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}}));
return html`
<li data-category="${o.category}"
class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
@ -19,7 +19,7 @@ const emoji_category = (o) => {
<a class="pick-category"
@click=${o.onCategoryPicked}
href="#emoji-picker-${o.category}"
data-category="${o.category}">${unsafeHTML(category_emoji)} </a>
data-category="${o.category}">${category_emoji} </a>
</li>
`;
}
@ -34,8 +34,6 @@ const emoji_picker_header = (o) => html`
const emoji_item = (o) => {
let emoji;
if (o._converse.use_system_emojis) {
emoji = o.transform(o.emoji.sn);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whitelist': {'img': []}}));
}
return html`
@ -66,8 +64,6 @@ const skintone_emoji = (o) => {
const shortname = ':'+o.skintone+':';
let emoji;
if (o._converse.use_system_emojis) {
emoji = o.transform(shortname);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whitelist': {'img': []}}));
}
return html`