Merge pull request #68 from Cognigy/bug/6292-background-image-url-enc…

…oding change the way background images are handled for messenger messages
Cognigy · Oct 30, 2019 · 47f266c · 47f266c
2 parents f30316f + 0dc1583
commit 47f266c
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 23 deletions.
diff --git a/...ssenger/MessengerPreview/components/MessengerGenericTemplate/MessengerGenericTemplate.tsx b/...ssenger/MessengerPreview/components/MessengerGenericTemplate/MessengerGenericTemplate.tsx
@@ -10,10 +10,9 @@ import { getMessengerSubtitle } from '../MessengerSubtitle';
 import { Carousel } from 'react-responsive-carousel';
 
 import './carousel.css';
-import { element } from 'prop-types';
 import { IWebchatConfig } from '@cognigy/webchat-client/lib/interfaces/webchat-config';
 import { getFlexImage } from '../FlexImage';
-import { config } from '../../../../../webchat/store/config/config-reducer';
+import { getBackgroundImage } from '../../lib/css';
 
 export interface IMessengerGenericTemplateProps extends IWithFBMActionEventHandler {
     payload: IFBMGenericTemplatePayload;
@@ -62,28 +61,17 @@ export const getMessengerGenericTemplate = ({ React, styled }: MessagePluginFact
         }
     });
 
-    const FixedImage = styled.div<{ src: string }>(({ src }) => ({
+    const FixedImage = styled.div({
         paddingTop: '50%',
         backgroundSize: 'cover',
-        backgroundPosition: 'center center',
-        backgroundImage: `url("${encodeURI(src)}")`
-    }));
+        backgroundPosition: 'center center'
+    });
 
     const GenericContent = styled(MessengerContent)({
         flexGrow: 1
     });
 
     const MessengerGenericTemplate = class MessengerGenericTemplate extends React.Component<IMessengerGenericTemplateProps & React.HTMLProps<HTMLDivElement>, IMessengerGenericTemplateState> {
-        getImageStyles = (element: IFBMGenericTemplateElement) => {
-            const backgroundImage = `url("${encodeURI(element.image_url)}")`;
-
-            const styles: React.CSSProperties = {
-                backgroundImage
-            }
-
-            return styles;
-        }
-
         renderElement = (element: IFBMGenericTemplateElement, index?: number) => {
 
             const { onAction, ...divProps } = this.props;
@@ -93,8 +81,8 @@ export const getMessengerGenericTemplate = ({ React, styled }: MessagePluginFact
 
             const image = image_url
                 ? this.props.config.settings.dynamicImageAspectRatio
-                    ? <FlexImage src={image_url} />
-                    : <FixedImage src={image_url} />
+                    ? <FlexImage  style={{ backgroundImage: getBackgroundImage(image_url) }} />
+                    : <FixedImage style={{ backgroundImage: getBackgroundImage(image_url) }} />
                 : null
 
             return (

diff --git a/...engerPreview/components/MessengerListTemplate/components/MessengerListTemplateElement.tsx b/...engerPreview/components/MessengerListTemplate/components/MessengerListTemplateElement.tsx
@@ -6,6 +6,7 @@ import { getMessengerContent } from '../../MessengerContent';
 import { getMessengerSubtitle } from '../../MessengerSubtitle';
 import { getMessengerTitle } from '../../MessengerTitle';
 import { getMessengerListButton } from '../../MessengerListButton';
+import { getBackgroundImage } from '../../../lib/css';
 
 interface IMessengerListTemplateElementProps extends IWithFBMActionEventHandler {
     element: IFBMListTemplateElement;
@@ -41,7 +42,7 @@ export const getMessengerListTemplateElement = ({ React, styled }: MessagePlugin
         const button = buttons && buttons[0];
 
         const imgStyle: React.CSSProperties = {
-            backgroundImage: `url("${encodeURI(image_url)}")`
+            backgroundImage: getBackgroundImage(image_url)
         }
 
         return (

diff --git a/...review/components/MessengerListTemplate/components/MessengerListTemplateHeaderElement.tsx b/...review/components/MessengerListTemplate/components/MessengerListTemplateHeaderElement.tsx
@@ -7,6 +7,7 @@ import { getFlexImage } from '../../FlexImage';
 import { IWebchatConfig } from '@cognigy/webchat-client/lib/interfaces/webchat-config';
 import { getMessengerListButton } from '../../MessengerListButton';
 import { getButtonLabel } from '../../MessengerButton/lib/messengerButtonHelpers';
+import { getBackgroundImage } from '../../../lib/css';
 
 interface IMessengerListTemplateHeaderElementProps extends IWithFBMActionEventHandler {
     element: IFBMListTemplateElement;
@@ -80,7 +81,7 @@ export const getMessengerListTemplateHeaderElement = ({ React, styled }: Message
 
         const image = config.settings.dynamicImageAspectRatio
             ? <FlexImage src={image_url} />
-            : <FixedImage style={{ backgroundImage: image_url ? `url("${encodeURI(image_url)}")` : undefined }} />
+            : <FixedImage style={{ backgroundImage: image_url ? getBackgroundImage(image_url) : undefined }} />
 
         return (
             <Root

diff --git a/...s/messenger/MessengerPreview/components/MessengerMediaTemplate/MessengerMediaTemplate.tsx b/...s/messenger/MessengerPreview/components/MessengerMediaTemplate/MessengerMediaTemplate.tsx
@@ -5,6 +5,7 @@ import { IWithFBMActionEventHandler } from '../../MessengerPreview.interface';
 import { MessagePluginFactoryProps } from '../../../../../common/interfaces/message-plugin';
 import { IWebchatConfig } from '@cognigy/webchat-client/lib/interfaces/webchat-config';
 import { getFlexImage } from '../FlexImage';
+import { getBackgroundImage } from '../../lib/css';
 
 interface IProps extends IWithFBMActionEventHandler {
     payload: IFBMMediaTemplatePayload;
@@ -49,7 +50,7 @@ export const getMessengerMediaTemplate = ({ React, styled }: MessagePluginFactor
         if (media_type === 'image') {
             const image = config.settings.dynamicImageAspectRatio
                     ? <FlexImage src={url} />
-                    : <FixedImage style={{ backgroundImage: `url("${encodeURI(url)}")` }} />
+                    : <FixedImage style={{ backgroundImage: getBackgroundImage(url) }} />
 
             return (
                 <MessengerFrame {...divProps}>

diff --git a/src/plugins/messenger/MessengerPreview/lib/css.ts b/src/plugins/messenger/MessengerPreview/lib/css.ts
@@ -0,0 +1,9 @@
+export const getBackgroundImage = (url: string) => {  
+    const escapedUrl = url
+        // remove line breaks
+        .replace(/\n/g, '')
+        // escape " and \
+        .replace(/\"\\/g, char => `\${char}`);
+
+    return `url("${escapedUrl}")`
+};
diff --git a/src/webchat-ui/components/presentational/Avatar.tsx b/src/webchat-ui/components/presentational/Avatar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { styled } from '../../style';
 import { CSSProperties } from 'react';
+import { getBackgroundImage } from '../../../plugins/messenger/MessengerPreview/lib/css';
 
 interface IAvatarProps {
 	src: string;
@@ -11,7 +12,7 @@ export default styled.div<IAvatarProps>(({ theme, src }) => ({
     height: theme.unitSize * 3,
     width: theme.unitSize * 3,
 	border: `1px solid ${theme.greyWeakColor}`,
-	backgroundImage: `url('${src}')`,
+	backgroundImage: getBackgroundImage(src),
 	backgroundSize: "contain",
 	backgroundPosition: "center center",
 	backgroundRepeat: "no-repeat"

diff --git a/src/webchat-ui/components/presentational/Logo.tsx b/src/webchat-ui/components/presentational/Logo.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { styled } from '../../style';
 import { interactionCss } from '../../utils/css';
+import { getBackgroundImage } from '../../../plugins/messenger/MessengerPreview/lib/css';
 
 interface ILogoProps {
     src: string;
 }
 
 export default styled.div<ILogoProps>(({ src }) => ({
     ...interactionCss,
-    backgroundImage: `url('${src}')`,
+    backgroundImage: getBackgroundImage(src),
     backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center center'