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

CHANGELOG.md

@@ -12,7 +12,10 @@ Our versioning strategy is as follows:
 ## Unreleased
 
 ### 🎉 New Features & Improvements
-* `[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)) 
+*  Editing Integration Support:
+  * `[sitecore-jss-react]` `[sitecore-jss]` 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))
+  * Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
+  * `[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 {