@sitecore-jss/sitecore-jss-react 22.1.0-canary.9 → 22.2.0-canary.10

package/dist/cjs/components/Date.js

@@ -17,9 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateField = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const DateField = (_a) => {
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
     var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
-    if (!field || (!field.editable && !field.value)) {
+    if (!field || (!field.editable && (0, layout_1.isFieldValueEmpty)(field))) {
         return null;
     }
     let children;
@@ -41,15 +45,19 @@ const DateField = (_a) => {
     else {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-};
-exports.DateField = DateField;
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText }));
 exports.DateField.propTypes = {
     field: prop_types_1.default.shape({
         value: prop_types_1.default.string,
         editable: prop_types_1.default.string,
+        metadata: prop_types_1.default.objectOf(prop_types_1.default.any),
     }).isRequired,
     tag: prop_types_1.default.string,
     editable: prop_types_1.default.bool,
     render: prop_types_1.default.func,
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
 };
 exports.DateField.displayName = 'Date';

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
+const react_1 = __importDefault(require("react"));
+const DefaultEmptyFieldEditingComponentText = () => {
+    return react_1.default.createElement("span", null, "[No text in field]");
+};
+exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
+const DefaultEmptyFieldEditingComponentImage = () => {
+    const inlineStyles = {
+        minWidth: '48px',
+        minHeight: '48px',
+        maxWidth: '400px',
+        maxHeight: '400px',
+        cursor: 'pointer',
+    };
+    return (react_1.default.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+};
+exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/components/EditFrame.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditFrame = void 0;
 const react_1 = __importDefault(require("react"));
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
-const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, parameters, }) => {
     var _a;
     const { sitecoreContext } = (0, withSitecoreContext_1.useSitecoreContext)();
@@ -30,7 +30,7 @@ const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, pa
         chromeData.contextItemUri = frameProps.sc_item;
     }
     chromeData.commands = buttons === null || buttons === void 0 ? void 0 : buttons.map((value) => {
-        return (0, utils_1.mapButtonToCommand)(value, dataSource === null || dataSource === void 0 ? void 0 : dataSource.itemId, parameters);
+        return (0, editing_1.mapButtonToCommand)(value, dataSource === null || dataSource === void 0 ? void 0 : dataSource.itemId, parameters);
     });
     return (react_1.default.createElement("div", Object.assign({ className: "scLooseFrameZone" }, frameProps),
         react_1.default.createElement("span", { className: "scChromeData" }, JSON.stringify(chromeData)),

package/dist/cjs/components/EditingScripts.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditingScripts = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+/**
+ * Renders client scripts and data for editing/preview mode in Pages.
+ * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ */
+const EditingScripts = () => {
+    const { sitecoreContext: { pageState, editMode, clientData, clientScripts }, } = (0, withSitecoreContext_1.useSitecoreContext)();
+    // Don't render anything if not in editing/preview mode
+    if (pageState === layout_1.LayoutServicePageState.Normal)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    if (editMode === layout_1.EditMode.Metadata) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
+            clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
+            clientData &&
+                Object.keys(clientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(clientData[id]) } })))));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.EditingScripts = EditingScripts;

package/dist/cjs/components/ErrorBoundary.js

@@ -24,11 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 class ErrorBoundary extends react_1.default.Component {
     constructor(props) {
         super(props);
-        this.defaultErrorMessage = 'There was a problem loading this section.'; // eslint-disable-line
+        this.defaultErrorMessage = 'There was a problem loading this section.';
         this.defaultLoadingMessage = 'Loading component...';
         this.state = { error: null };
     }
@@ -36,27 +37,37 @@ class ErrorBoundary extends react_1.default.Component {
         return { error: error };
     }
     componentDidCatch(error, errorInfo) {
+        var _a, _b;
+        if (this.showErrorDetails()) {
+            console.error(`An error occurred in component ${(_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName} (${(_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.uid}): `);
+        }
         console.error({ error, errorInfo });
     }
     isInDevMode() {
         return process.env.NODE_ENV === 'development';
     }
-    render() {
+    showErrorDetails() {
         var _a, _b;
+        return (this.isInDevMode() ||
+            ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === layout_1.LayoutServicePageState.Edit ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === layout_1.LayoutServicePageState.Preview);
+    }
+    render() {
+        var _a;
         if (this.state.error) {
-            if (this.props.customErrorComponent) {
-                return react_1.default.createElement(this.props.customErrorComponent, { error: this.state.error });
+            if (this.props.errorComponent) {
+                return react_1.default.createElement(this.props.errorComponent, { error: this.state.error });
             }
             else {
-                if (this.isInDevMode() || ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing)) {
+                if (this.showErrorDetails()) {
                     return (react_1.default.createElement("div", null,
                         react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
                             "A rendering error occurred in component",
                             ' ',
-                            react_1.default.createElement("em", null, (_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.componentName),
+                            react_1.default.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
                             react_1.default.createElement("br", null),
                             "Error: ",
-                            react_1.default.createElement("em", null, this.state.error.message))));
+                            react_1.default.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
                 }
                 else {
                     return (react_1.default.createElement("div", null,
@@ -64,6 +75,10 @@ class ErrorBoundary extends react_1.default.Component {
                 }
             }
         }
+        // do not apply suspense on already dynamic components
+        if (this.props.isDynamic) {
+            return this.props.children;
+        }
         return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
     }
 }

package/dist/cjs/components/FieldMetadata.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldMetadata = void 0;
+const react_1 = __importDefault(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+const FieldMetadata = (props) => {
+    const data = JSON.stringify(props.metadata);
+    const attributes = {
+        type: 'text/sitecore',
+        chrometype: 'field',
+        className: 'scpm',
+    };
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: 'open' });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: 'close' });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, codeOpenAttributes), data),
+        props.children,
+        react_1.default.createElement("code", Object.assign({}, codeCloseAttributes))));
+};
+exports.FieldMetadata = FieldMetadata;
+exports.FieldMetadata.displayName = 'FieldMetadata';
+exports.FieldMetadata.propTypes = {
+    metadata: prop_types_1.default.object.isRequired,
+    children: prop_types_1.default.node.isRequired,
+};

package/dist/cjs/components/File.js

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.File = void 0;
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const File = (_a) => {
@@ -23,7 +24,7 @@ const File = (_a) => {
     */
     var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
     const dynamicField = field;
-    if (!field || (!dynamicField.value && !dynamicField.src)) {
+    if (!field || (0, layout_1.isFieldValueEmpty)(dynamicField)) {
         return null;
     }
     // handle link directly on field for forgetful devs

package/dist/cjs/components/HiddenRendering.js

@@ -3,13 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HIDDEN_RENDERING_NAME = exports.HiddenRendering = void 0;
+exports.HiddenRendering = void 0;
 const react_1 = __importDefault(require("react"));
 const styles = {
-    height: '100px',
     backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
     backgroundSize: '3px 3px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '30px',
+    color: '#aaa',
 };
-const HiddenRendering = () => react_1.default.createElement("div", { style: styles });
+const HiddenRendering = () => react_1.default.createElement("div", { style: styles }, "The component is hidden");
 exports.HiddenRendering = HiddenRendering;
-exports.HIDDEN_RENDERING_NAME = 'Hidden Rendering';

package/dist/cjs/components/Image.js

@@ -20,6 +20,10 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 const utils_2 = require("../utils");
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
@@ -66,11 +70,10 @@ const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
     return getEditableWrapper(editableMarkup);
 };
 exports.getEEMarkup = getEEMarkup;
-const Image = (_a) => {
+exports.Image = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
     const dynamicMedia = field;
-    if (!field ||
-        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+    if (!field || (!dynamicMedia.editable && (0, layout_1.isFieldValueEmpty)(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -84,23 +87,17 @@ const Image = (_a) => {
     if (!img) {
         return null;
     }
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+        delete img.metadata;
+    }
     const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
     if (attrs) {
         return react_1.default.createElement("img", Object.assign({}, attrs));
     }
     return null; // we can't handle the truth
-};
-exports.Image = Image;
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage }));
 exports.Image.propTypes = {
-    media: prop_types_1.default.oneOfType([
-        prop_types_1.default.shape({
-            src: prop_types_1.default.string,
-        }),
-        prop_types_1.default.shape({
-            value: prop_types_1.default.object,
-            editable: prop_types_1.default.string,
-        }),
-    ]),
     field: prop_types_1.default.oneOfType([
         prop_types_1.default.shape({
             src: prop_types_1.default.string,
@@ -113,5 +110,9 @@ exports.Image.propTypes = {
     editable: prop_types_1.default.bool,
     mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
     imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
 };
 exports.Image.displayName = 'Image';

package/dist/cjs/components/Link.js

@@ -40,14 +40,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPropTypes = exports.Link = void 0;
 const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-exports.Link = (0, react_1.forwardRef)((_a, ref) => {
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
+// eslint-disable-next-line react/display-name
+(0, react_1.forwardRef)((_a, ref) => {
     var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;
-    if (!field ||
-        (!dynamicField.editableFirstPart &&
-            !dynamicField.value &&
-            !dynamicField.href)) {
+    if (!field || (!dynamicField.editableFirstPart && (0, layout_1.isFieldValueEmpty)(dynamicField))) {
         return null;
     }
     const resultTags = [];
@@ -93,7 +96,7 @@ exports.Link = (0, react_1.forwardRef)((_a, ref) => {
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
     resultTags.push(react_1.default.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
     return react_1.default.createElement(react_1.default.Fragment, null, resultTags);
-});
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
 exports.LinkPropTypes = {
     field: prop_types_1.default.oneOfType([
         prop_types_1.default.shape({
@@ -107,6 +110,10 @@ exports.LinkPropTypes = {
     ]).isRequired,
     editable: prop_types_1.default.bool,
     showLinkTextWithChildrenPresent: prop_types_1.default.bool,
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
 };
 exports.Link.propTypes = exports.LinkPropTypes;
 exports.Link.displayName = 'Link';

package/dist/cjs/components/Placeholder.js

@@ -7,7 +7,8 @@ exports.Placeholder = void 0;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("./PlaceholderCommon");
 const withComponentFactory_1 = require("../enhancers/withComponentFactory");
-const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
  */
@@ -22,8 +23,8 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     }
     componentDidMount() {
         super.componentDidMount();
-        if (this.isEmpty && utils_1.HorizonEditor.isActive()) {
-            utils_1.HorizonEditor.resetChromes();
+        if (this.isEmpty && editing_1.HorizonEditor.isActive()) {
+            editing_1.HorizonEditor.resetChromes();
         }
     }
     /**
@@ -37,6 +38,7 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
         return react_1.default.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
     }
     render() {
+        var _a;
         const childProps = Object.assign({}, this.props);
         delete childProps.componentFactory;
         if (this.state.error) {
@@ -49,9 +51,9 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
-        const components = this.getComponentsForRenderingData(placeholderData);
+        const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode);
         this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
+        const components = this.getComponentsForRenderingData(placeholderData);
         if (this.props.renderEmpty && this.isEmpty) {
             const rendered = this.props.renderEmpty(components);
             return components.length ? this.renderEmptyPlaceholder(rendered) : rendered;
@@ -77,4 +79,5 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-exports.Placeholder = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);
+const PlaceholderWithComponentFactory = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);
+exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentFactory);

package/dist/cjs/components/PlaceholderCommon.js

@@ -18,12 +18,15 @@ exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const MissingComponent_1 = require("./MissingComponent");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
 const FEaaSComponent_1 = require("./FEaaSComponent");
 const FEaaSWrapper_1 = require("./FEaaSWrapper");
 const BYOCComponent_1 = require("./BYOCComponent");
 const BYOCWrapper_1 = require("./BYOCWrapper");
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
 const ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
@@ -34,29 +37,38 @@ class PlaceholderCommon extends react_1.default.Component {
         this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
         this.createRawElement = this.createRawElement.bind(this);
     }
-    static getPlaceholderDataFromRenderingData(rendering, name) {
+    static getPlaceholderDataFromRenderingData(rendering, name, editMode) {
         let result;
-        /** [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
-        from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
+        let phName = name.slice();
+        /**
+         * Process (SXA) dynamic placeholders
+         * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
+         * For Metadata EditMode, we need to keep the raw placeholder name in place.
+         */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
-                const patternPlaceholder = placeholder.indexOf('{*}') !== -1
-                    ? new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`)
+                const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
+                    ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
                     : null;
-                if (patternPlaceholder && patternPlaceholder.test(name)) {
-                    rendering.placeholders[name] = rendering.placeholders[placeholder];
-                    delete rendering.placeholders[placeholder];
+                if (patternPlaceholder && patternPlaceholder.test(phName)) {
+                    if (editMode === layout_1.EditMode.Metadata) {
+                        phName = placeholder;
+                    }
+                    else {
+                        rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                        delete rendering.placeholders[placeholder];
+                    }
                 }
             });
         }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
-            result = rendering.placeholders[name];
+            result = rendering.placeholders[phName];
         }
         else {
             result = null;
         }
         if (!result) {
-            console.warn(`Placeholder '${name}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+            console.warn(`Placeholder '${phName}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
             return [];
         }
         return result;
@@ -78,13 +90,16 @@ class PlaceholderCommon extends react_1.default.Component {
         });
     }
     getComponentsForRenderingData(placeholderData) {
-        const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
-        return placeholderData
+        var _a;
+        const _b = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _b, placeholderProps = __rest(_b, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        const transformedComponents = placeholderData
             .map((rendering, index) => {
+            var _a, _b;
             const key = rendering.uid
                 ? rendering.uid
                 : `component-${index}`;
             const commonProps = { key };
+            let isEmpty = false;
             // if the element is not a 'component rendering', render it 'raw'
             if (!rendering.componentName &&
                 rendering.name) {
@@ -92,11 +107,13 @@ class PlaceholderCommon extends react_1.default.Component {
             }
             const componentRendering = rendering;
             let component;
-            if (componentRendering.componentName === HiddenRendering_1.HIDDEN_RENDERING_NAME) {
+            if (componentRendering.componentName === sitecore_jss_1.constants.HIDDEN_RENDERING_NAME) {
                 component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering_1.HiddenRendering;
+                isEmpty = true;
             }
             else if (!componentRendering.componentName) {
                 component = () => react_1.default.createElement(react_1.default.Fragment, null);
+                isEmpty = true;
             }
             else {
                 component = this.getComponentForRendering(componentRendering);
@@ -119,20 +136,34 @@ class PlaceholderCommon extends react_1.default.Component {
             if (!component) {
                 console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent;
+                isEmpty = true;
             }
             const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
                 fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
             })), ((placeholderParams || componentRendering.params) && {
                 params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
             })), { rendering: componentRendering });
-            return react_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            let rendered = react_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            if (!isEmpty) {
+                // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+                const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+                // that's why we need to expose element's props here
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+            }
+            // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
+            if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === layout_1.EditMode.Metadata) {
+                return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+            }
+            return rendered;
         })
-            .filter((element) => element)
-            .map((element, id) => {
-            // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
-            const type = element.props.type === 'text/sitecore' ? element.props.type : '';
-            return (react_1.default.createElement(ErrorBoundary_1.default, { key: element.type + '-' + id, customErrorComponent: this.props.errorComponent, rendering: element.props.rendering, componentLoadingMessage: this.props.componentLoadingMessage, type: type }, element));
-        });
+            .filter((element) => element); // remove nulls
+        if (((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode) === layout_1.EditMode.Metadata) {
+            return [
+                react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
+            ];
+        }
+        return transformedComponents;
     }
     getComponentForRendering(renderingDefinition) {
         var _a;
@@ -208,4 +239,5 @@ PlaceholderCommon.propTypes = {
         prop_types_1.default.func,
     ]),
     modifyComponentProps: prop_types_1.default.func,
+    sitecoreContext: prop_types_1.default.object,
 };

package/dist/cjs/components/PlaceholderMetadata.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderMetadata = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+/**
+ * default value of uid for root placeholder when uid is not present.
+ */
+const DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
+/**
+ * A React component to generate metadata blocks for a placeholder or rendering.
+ * It utilizes dynamic attributes based on whether the component acts as a placeholder
+ * or as a rendering to properly render the surrounding code blocks.
+ *
+ * @param {object} props The properties passed to the component.
+ * @param {ComponentRendering} props.rendering The rendering data.
+ * @param {string} [props.placeholderName] The name of the placeholder.
+ * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
+ * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
+ */
+const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
+    const getCodeBlockAttributes = (kind, id, placeholderName) => {
+        const chrometype = placeholderName ? 'placeholder' : 'rendering';
+        const attributes = {
+            type: 'text/sitecore',
+            chrometype: chrometype,
+            className: 'scpm',
+            kind: kind,
+        };
+        if (kind === 'open') {
+            if (chrometype === 'placeholder' && placeholderName) {
+                let phId = '';
+                for (const placeholder of Object.keys(rendering.placeholders)) {
+                    if (placeholderName === placeholder) {
+                        phId = id
+                            ? `${placeholderName}_${id}`
+                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
+                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+                            break;
+                        }
+                    }
+                }
+                attributes.id = phId;
+            }
+            else {
+                attributes.id = id;
+            }
+        }
+        return attributes;
+    };
+    const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes('open', uid, placeholderName))),
+        children,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes('close', uid, placeholderName)))));
+    return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
+};
+exports.PlaceholderMetadata = PlaceholderMetadata;