diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js index e35651265e5aa5c3e1b5fc59d13214bf0ab06ec4..251513903462ad14ddad8b1d6b5e1b16d15c0ab2 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 116022b92ce4f55754cae5e267418e82f17552cf..0f564fc0a3a996fd4c387abc741b03ac5ce94308 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;