[sitecore-jss-react] [Editing Integration] Add support for chrome hydration for Placeholders

CHANGELOG.md

@@ -12,6 +12,8 @@ Our versioning strategy is as follows:
 ## Unreleased
 
 ### 🎉 New Features & Improvements
+* `[sitecore-jss-react]` `[sitecore-jss]` Editing Integration Support:
+  * Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata. ([#1776](https://github.com/Sitecore/jss/pull/1776))
 * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) 
 
 ### 🛠 Breaking Changes

packages/sitecore-jss-nextjs/src/components/Placeholder.tsx

@@ -11,7 +11,7 @@ export const Placeholder = (props: PlaceholderComponentProps) => {
   return (
     <ReactPlaceholder
       {...props}
-      modifyComponentProps={(initialProps) => {
+      modifyComponentProps={(initialProps: { rendering: { uid: string | number } }) => {
         if (!initialProps.rendering.uid) return initialProps;
 
         const data = componentPropsContext[initialProps.rendering.uid] as {

packages/sitecore-jss-nextjs/src/index.ts

@@ -38,6 +38,7 @@ export {
   EDITING_COMPONENT_PLACEHOLDER,
   EDITING_COMPONENT_ID,
   getContentStylesheetLink,
+  EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export {

packages/sitecore-jss-react/src/components/Placeholder.test.tsx

@@ -2,7 +2,11 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
+import {
+  ComponentRendering,
+  LayoutServiceData,
+  RouteData,
+} from '@sitecore-jss/sitecore-jss/layout';
 import { expect } from 'chai';
 import { mount, shallow } from 'enzyme';
 import PropTypes from 'prop-types';
@@ -12,6 +16,7 @@ import { convertedData as eeData, emptyPlaceholderData } from '../test-data/ee-d
 import {
   byocWrapperData,
   feaasWrapperData,
+  layoutDataWithMetadata,
   convertedDevData as nonEeDevData,
   convertedLayoutServiceData as nonEeLsData,
   sxaRenderingColumnSplitterVariant,
@@ -31,6 +36,7 @@ import { Placeholder } from './Placeholder';
 import { ComponentProps } from './PlaceholderCommon';
 import { SitecoreContext } from './SitecoreContext';
 import { ComponentFactory } from './sharedTypes';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
 
 const componentFactory: ComponentFactory = (componentName: string) => {
   const components = new Map<string, React.FC>();
@@ -101,7 +107,9 @@ describe('<Placeholder />', () => {
         const phKey = 'page-content';
 
         const renderedComponent = mount(
-          <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+          <SitecoreContext componentFactory={componentFactory}>
+            <Placeholder name={phKey} rendering={component} />
+          </SitecoreContext>
         );
 
         expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
@@ -300,7 +308,9 @@ describe('<Placeholder />', () => {
       const phKey = 'main';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -318,7 +328,9 @@ describe('<Placeholder />', () => {
       const phKey = 'container-1';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -334,7 +346,9 @@ describe('<Placeholder />', () => {
       const phKey = 'richText';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(0);
@@ -346,7 +360,9 @@ describe('<Placeholder />', () => {
       const phKey = 'dynamic-1-{*}';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -362,7 +378,9 @@ describe('<Placeholder />', () => {
       const phKey = 'main-second';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -377,7 +395,9 @@ describe('<Placeholder />', () => {
       const phKey = 'column-1-{*}';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -410,7 +430,9 @@ describe('<Placeholder />', () => {
       ));
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.byoc-component').length).to.equal(2);
@@ -443,7 +465,9 @@ describe('<Placeholder />', () => {
       ));
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.feaas-component').length).to.equal(2);
@@ -459,7 +483,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={component} />
+      </SitecoreContext>
     );
 
     const eeChrome = renderedComponent.find({ chrometype: 'placeholder', kind: 'open', id: phKey });
@@ -473,11 +499,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder
-        name={phKey}
-        rendering={emptyPlaceholderData.sitecore.route}
-        componentFactory={componentFactory}
-      />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={emptyPlaceholderData.sitecore.route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.sc-jss-empty-placeholder').length).to.equal(1);
   });
@@ -495,7 +519,9 @@ describe('<Placeholder />', () => {
     const phKey = 'unknown';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.html()).to.be.empty;
   });
@@ -529,7 +555,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
   });
@@ -540,7 +568,9 @@ describe('<Placeholder />', () => {
 
       const Home: React.FC<{ rendering?: RouteData }> = ({ rendering }) => (
         <div className="home-mock">
-          <Placeholder name="main" rendering={rendering} />
+          <SitecoreContext componentFactory={componentFactory}>
+            <Placeholder name="main" rendering={rendering} />
+          </SitecoreContext>
         </div>
       );
 
@@ -565,12 +595,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder
-        name={phKey}
-        rendering={route}
-        componentFactory={componentFactory}
-        errorComponent={CustomError}
-      />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} errorComponent={CustomError} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.custom-error').length).to.equal(1);
   });
@@ -595,12 +622,13 @@ it('should render MissingComponent for unknown rendering', () => {
   );
 
   const renderedComponent = mount(
-    <Placeholder
-      name={phKey}
-      rendering={route}
-      componentFactory={componentFactory}
-      missingComponentComponent={CustomMissingComponent}
-    />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder
+        name={phKey}
+        rendering={route}
+        missingComponentComponent={CustomMissingComponent}
+      />
+    </SitecoreContext>
   );
   expect(renderedComponent.find('.missing-component').length).to.equal(1);
 });
@@ -633,7 +661,9 @@ it('should render nothing for rendering without a name', () => {
 
   const renderedComponent = mount(
     <div className="empty-test">
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     </div>
   );
   expect(renderedComponent.children().length).to.equal(1);
@@ -652,7 +682,9 @@ it('should render HiddenRendering when rendering is hidden', () => {
   const phKey = 'main';
 
   const renderedComponent = mount(
-    <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder name={phKey} rendering={route} />
+    </SitecoreContext>
   );
   expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
 });
@@ -677,18 +709,46 @@ it('should render custom HiddenRendering when rendering is hidden', () => {
   );
 
   const renderedComponent = mount(
-    <Placeholder
-      name={phKey}
-      rendering={route}
-      componentFactory={componentFactory}
-      hiddenRenderingComponent={CustomHiddenRendering}
-    />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder
+        name={phKey}
+        rendering={route}
+        hiddenRenderingComponent={CustomHiddenRendering}
+      />
+    </SitecoreContext>
   );
   expect(renderedComponent.find('.hidden-rendering').length).to.equal(1);
   expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
   expect(renderedComponent.find('p').props().children).to.equal('Hidden Rendering');
 });
 
+const testDataWithoutEE = [
+  { label: 'Dev data', data: nonEeDevData },
+  { label: 'LayoutService data - EE off', data: nonEeLsData },
+];
+
+testDataWithoutEE.forEach((dataSet) => {
+  describe(`with ${dataSet.label}`, () => {
+    it('renders <PlaceholderMetadata> when editMode is Metadata', () => {
+      const component = ((dataSet.data.sitecore.route.placeholders.main as unknown) as (
+        | ComponentRendering
+        | RouteData
+      )[]).find((c) => (c as ComponentRendering).componentName);
+      const phKey = 'page-content';
+
+      const mockLayoutData: LayoutServiceData = layoutDataWithMetadata;
+
+      const renderedComponent = mount(
+        <SitecoreContext componentFactory={componentFactory} layoutData={mockLayoutData}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
+      );
+
+      expect(renderedComponent.find(PlaceholderMetadata).length).to.equal(1);
+    });
+  });
+});
+
 after(() => {
   (global as any).window.close();
 });

packages/sitecore-jss-react/src/components/Placeholder.tsx

@@ -3,6 +3,7 @@ import { PlaceholderCommon, PlaceholderProps } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 
 export interface PlaceholderComponentProps extends PlaceholderProps {
   /**
@@ -120,4 +121,8 @@ class PlaceholderComponent extends PlaceholderCommon<PlaceholderComponentProps>
   }
 }
 
-export const Placeholder = withComponentFactory(PlaceholderComponent);
+const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
+
+export const Placeholder = withSitecoreContext()<PlaceholderComponentProps>(
+  PlaceholderWithComponentFactory
+);