[templates/nextjs-sxa]: The background image in Container component …

…has been fixed
Sitecore · Dec 9, 2024 · 20a7db6 · 20a7db6
1 parent 9e192b1
commit 20a7db6
Showing 1 changed file with 52 additions and 28 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx
@@ -2,6 +2,7 @@ import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
+  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import React from 'react';
 
@@ -10,44 +11,67 @@ interface ComponentProps {
   params: ComponentParams;
 }
 
-const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
-  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
-  const phKey = `container-${props.params.DynamicPlaceholderId}`;
-  const id = props.params.RenderingIdentifier;
-  const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
-  let backgroundImage = props.params.BackgroundImage as string;
-  let backgroundStyle: { [key: string]: string } = {};
-
-  if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {
-    const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || '';
-
-    backgroundStyle = {
-      backgroundImage: `url('${mediaUrl}')`,
-    };
+const BACKGROUND_REG_EXP = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
+const MEDIA_URL_PATTERN = /mediaurl="([^"]*)"/i;
+const SITECORE_MEDIA_PREFIX = '/sitecore/shell/-/media/';
+
+const getBackgroundStyle = (
+  backgroundImage: string,
+  isEditMode: boolean
+): { [key: string]: string } => {
+  if (!backgroundImage) return {};
+
+  if (isEditMode) {
+    const processedImage = backgroundImage
+      .match(BACKGROUND_REG_EXP)
+      ?.pop()
+      ?.replace(/-/gi, '');
+    return processedImage
+      ? { backgroundImage: `url('${SITECORE_MEDIA_PREFIX}${processedImage}')` }
+      : {};
   }
 
+  const mediaUrl = backgroundImage.match(MEDIA_URL_PATTERN)?.[1] || '';
+  return mediaUrl ? { backgroundImage: `url('${mediaUrl}')` } : {};
+};
+
+const DefaultContainer: React.FC<ComponentProps> = ({ params, rendering }): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
+  const {
+    Styles: containerStyles = '',
+    GridParameters = '',
+    DynamicPlaceholderId,
+    RenderingIdentifier,
+    BackgroundImage,
+  } = params;
+
+  const styles = `${GridParameters} ${containerStyles}`.trimEnd();
+  const placeholderKey = `container-${DynamicPlaceholderId}`;
+  const backgroundStyle = getBackgroundStyle(
+    BackgroundImage as string,
+    sitecoreContext.pageState === 'edit'
+  );
+
   return (
-    <div className={`component container-default ${styles}`} id={id ? id : undefined}>
+    <div className={`component container-default ${styles}`} id={RenderingIdentifier || undefined}>
       <div className="component-content" style={backgroundStyle}>
         <div className="row">
-          <Placeholder name={phKey} rendering={props.rendering} />
+          <Placeholder name={placeholderKey} rendering={rendering} />
         </div>
       </div>
     </div>
   );
 };
 
-export const Default = (props: ComponentProps): JSX.Element => {
-  const splitStyles = props.params?.Styles?.split(' ');
-
-  if (splitStyles && splitStyles.includes('container')) {
-    return (
-      <div className="container-wrapper">
-        <DefaultContainer {...props} />
-      </div>
-    );
-  }
+export const Default: React.FC<ComponentProps> = (props): JSX.Element => {
+  const { Styles = '' } = props.params;
+  const hasContainerStyle = Styles.split(' ').includes('container');
 
-  return <DefaultContainer {...props} />;
+  return hasContainerStyle ? (
+    <div className="container-wrapper">
+      <DefaultContainer {...props} />
+    </div>
+  ) : (
+    <DefaultContainer {...props} />
+  );
 };