From b5e9a17e73f440d6376dfdfb50237cb78b0cce52 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 26 Oct 2018 20:00:16 +0000
Subject: [PATCH] Remove extra space around emoji images
---
src/react-components/presence-log.js | 24 ++++++++++++++++--------
src/utils/serialize-element.js | 3 +++
2 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js
index e35651265..251513903 100644
--- a/src/react-components/presence-log.js
+++ b/src/react-components/presence-log.js
@@ -32,6 +32,19 @@ function ChatMessage(props) {
emoji[0].props.children.match &&
emoji[0].props.children.match(emojiRegex);
+ // These CSS properties are overridden by the wrapper for rendering the SVG.
+ const stylesToSkip = [
+ "color",
+ "-webkit-text-fill-color",
+ "-webkit-text-stroke-color",
+ "-webkit-text-emphasis-color"
+ ];
+
+ // Remove padding on emoji.
+ if (isEmoji) {
+ stylesToSkip.push("padding", "margin");
+ }
+
let style = isEmoji ? presenceLogPureEmojiStyle : presenceLogSpawnedStyle;
if (props.body.split("\n").length === 1) {
@@ -39,19 +52,14 @@ function ChatMessage(props) {
}
// Scale by 12x
- messageCanvas.width = (el.offsetWidth + 33) * 12.1;
- messageCanvas.height = (el.offsetHeight + 33) * 12.1;
+ messageCanvas.width = (el.offsetWidth + (isEmoji ? 0 : 33)) * 12.1;
+ messageCanvas.height = (el.offsetHeight + (isEmoji ? 0 : 33)) * 12.1;
const xhtml = encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="${messageCanvas.width}" height="${messageCanvas.height}">
<foreignObject width="8.33%" height="8.33%" style="transform: scale(12.0);">
<div xmlns="http://www.w3.org/1999/xhtml" style="${style}">
- ${serializeElement(el, [
- "color",
- "-webkit-text-fill-color",
- "-webkit-text-stroke-color",
- "-webkit-text-emphasis-color"
- ])}
+ ${serializeElement(el, stylesToSkip)}
</div>
</foreignObject>
</svg>
diff --git a/src/utils/serialize-element.js b/src/utils/serialize-element.js
index 116022b92..0f564fc0a 100644
--- a/src/utils/serialize-element.js
+++ b/src/utils/serialize-element.js
@@ -181,6 +181,9 @@ export default function serializeElement(el, stylesToSkip = []) {
e.style[cssPropName] = computedStyle[cssPropName];
}
}
+ for (let ii = 0; ii < stylesToSkip.length; ii++) {
+ e.style.removeProperty(stylesToSkip[ii]);
+ }
}
}
const result = el.outerHTML;
--
GitLab