[sitecore-jss-react] [Editing Integration] Add support for chrome hyd…

…ration for Placeholders (#1776)

* conditinally emit edit chromes metadata for placeholders, rendering

* refactor PlaceholderWithMetadata component

* update tests

* update changelog

* remove extra lines

* remove editMode mock data

* update unit test, change code tag chrometype

* remove only

* refactor as per new requirements

* Update packages/sitecore-jss/src/layout/models.ts

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Illia Kovalenko <[email protected]>

* refactor unit test

* change naming of props and types

* add test for placeholder

* update PlaceholderMetadata to render a component

* add test for missing component

* fix nextjs placeholder

* remove context

* reset nextjs placeholder

* update changelog

* update test data

* change PlaceholderMetadata implmentation

* Placeholder metadata refactor - wip

* update tests, refactor Placeholder component

* remove redundant data

* update unit test - wip

* move tests to placeholder, refactor placeholder

* refactor tests

* refactor placeholdermetadata component, update tests

* refactor placeholder tests, update jsdoc

* update nextjs types

* remove keys from code

* fix nextjs placeholder props

* change deprecated statement

* update deprecated 2

---------

Co-authored-by: Illia Kovalenko <[email protected]>
Co-authored-by: yavorsk <[email protected]>

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/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 {