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

package/dist/cjs/enhancers/withFieldMetadata.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withFieldMetadata = void 0;
+const react_1 = __importStar(require("react"));
+const FieldMetadata_1 = require("../components/FieldMetadata");
+/**
+ * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ */
+function withFieldMetadata(FieldComponent, isForwardRef = false) {
+    if (isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return (0, react_1.forwardRef)((props, ref) => {
+            var _a;
+            const { editable = true } = props;
+            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+            if (!metadata || !editable) {
+                return react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
+            }
+            return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+                react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    return (props) => {
+        var _a;
+        const { editable = true } = props;
+        const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+        if (!metadata || !editable) {
+            return react_1.default.createElement(FieldComponent, Object.assign({}, props));
+        }
+        return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+            react_1.default.createElement(FieldComponent, Object.assign({}, props))));
+    };
+}
+exports.withFieldMetadata = withFieldMetadata;

package/dist/cjs/enhancers/withPlaceholder.js

@@ -7,6 +7,7 @@ exports.withPlaceholder = void 0;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
 const withComponentFactory_1 = require("./withComponentFactory");
+const withSitecoreContext_1 = require("./withSitecoreContext");
 /**
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
@@ -41,13 +42,13 @@ function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.editMode);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.editMode);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }
@@ -57,7 +58,7 @@ function withPlaceholder(placeholders, options) {
             }
         }
         WithPlaceholder.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-        return (0, withComponentFactory_1.withComponentFactory)(WithPlaceholder);
+        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentFactory_1.withComponentFactory)(WithPlaceholder));
     };
 }
 exports.withPlaceholder = withPlaceholder;

package/dist/cjs/index.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
 Object.defineProperty(exports, "ClientError", { enumerable: true, get: function () { return sitecore_jss_1.ClientError; } });
-var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
-Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
-Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
-Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButton; } });
-Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButtons; } });
+var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return editing_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });
+Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return editing_1.DefaultEditFrameButton; } });
+Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return editing_1.DefaultEditFrameButtons; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
 Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getComponentLibraryStylesheetLinks; } });
@@ -18,6 +19,7 @@ Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get:
 Object.defineProperty(exports, "RestLayoutService", { enumerable: true, get: function () { return layout_1.RestLayoutService; } });
 Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
+Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
 var tracking_1 = require("@sitecore-jss/sitecore-jss/tracking");
 Object.defineProperty(exports, "trackingApi", { enumerable: true, get: function () { return tracking_1.trackingApi; } });
 var i18n_1 = require("@sitecore-jss/sitecore-jss/i18n");
@@ -73,3 +75,12 @@ var EditFrame_1 = require("./components/EditFrame");
 Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function () { return EditFrame_1.EditFrame; } });
 var ComponentBuilder_1 = require("./ComponentBuilder");
 Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });
+var withFieldMetadata_1 = require("./enhancers/withFieldMetadata");
+Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return withFieldMetadata_1.withFieldMetadata; } });
+var withEmptyFieldEditingComponent_1 = require("./enhancers/withEmptyFieldEditingComponent");
+Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent; } });
+var EditingScripts_1 = require("./components/EditingScripts");
+Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return EditingScripts_1.EditingScripts; } });
+var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage; } });

package/dist/esm/components/Date.js

@@ -11,9 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import PropTypes from 'prop-types';
-export const DateField = (_a) => {
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const DateField = withFieldMetadata(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 && isFieldValueEmpty(field))) {
         return null;
     }
     let children;
@@ -35,14 +39,19 @@ export const DateField = (_a) => {
     else {
         return React.createElement(React.Fragment, null, children);
     }
-};
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
 DateField.propTypes = {
     field: PropTypes.shape({
         value: PropTypes.string,
         editable: PropTypes.string,
+        metadata: PropTypes.objectOf(PropTypes.any),
     }).isRequired,
     tag: PropTypes.string,
     editable: PropTypes.bool,
     render: PropTypes.func,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 DateField.displayName = 'Date';

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export const DefaultEmptyFieldEditingComponentText = () => {
+    return React.createElement("span", null, "[No text in field]");
+};
+export const DefaultEmptyFieldEditingComponentImage = () => {
+    const inlineStyles = {
+        minWidth: '48px',
+        minHeight: '48px',
+        maxWidth: '400px',
+        maxHeight: '400px',
+        cursor: 'pointer',
+    };
+    return (React.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 }));
+};

package/dist/esm/components/EditFrame.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
-import { mapButtonToCommand, } from '@sitecore-jss/sitecore-jss/utils';
+import { mapButtonToCommand, } from '@sitecore-jss/sitecore-jss/editing';
 export const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, parameters, }) => {
     var _a;
     const { sitecoreContext } = useSitecoreContext();

package/dist/esm/components/EditingScripts.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { useSitecoreContext } from '../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.
+ */
+export const EditingScripts = () => {
+    const { sitecoreContext: { pageState, editMode, clientData, clientScripts }, } = useSitecoreContext();
+    // Don't render anything if not in editing/preview mode
+    if (pageState === LayoutServicePageState.Normal)
+        return React.createElement(React.Fragment, null);
+    if (editMode === EditMode.Metadata) {
+        return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
+            clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
+            clientData &&
+                Object.keys(clientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(clientData[id]) } })))));
+    }
+    return React.createElement(React.Fragment, null);
+};

package/dist/esm/components/ErrorBoundary.js

@@ -1,9 +1,10 @@
 import React, { Suspense } from 'react';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 class ErrorBoundary extends React.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 };
     }
@@ -11,27 +12,37 @@ class ErrorBoundary extends React.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) === LayoutServicePageState.Edit ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
+    }
+    render() {
+        var _a;
         if (this.state.error) {
-            if (this.props.customErrorComponent) {
-                return React.createElement(this.props.customErrorComponent, { error: this.state.error });
+            if (this.props.errorComponent) {
+                return React.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.createElement("div", null,
                         React.createElement("div", { className: "sc-jss-placeholder-error" },
                             "A rendering error occurred in component",
                             ' ',
-                            React.createElement("em", null, (_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.componentName),
+                            React.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
                             React.createElement("br", null),
                             "Error: ",
-                            React.createElement("em", null, this.state.error.message))));
+                            React.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
                 }
                 else {
                     return (React.createElement("div", null,
@@ -39,6 +50,10 @@ class ErrorBoundary extends React.Component {
                 }
             }
         }
+        // do not apply suspense on already dynamic components
+        if (this.props.isDynamic) {
+            return this.props.children;
+        }
         return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
     }
 }

package/dist/esm/components/FieldMetadata.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+export 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.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, codeOpenAttributes), data),
+        props.children,
+        React.createElement("code", Object.assign({}, codeCloseAttributes))));
+};
+FieldMetadata.displayName = 'FieldMetadata';
+FieldMetadata.propTypes = {
+    metadata: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
+};

package/dist/esm/components/File.js

@@ -9,6 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
 import PropTypes from 'prop-types';
 import React from 'react';
 export const File = (_a) => {
@@ -17,7 +18,7 @@ export const File = (_a) => {
     */
     var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
     const dynamicField = field;
-    if (!field || (!dynamicField.value && !dynamicField.src)) {
+    if (!field || isFieldValueEmpty(dynamicField)) {
         return null;
     }
     // handle link directly on field for forgetful devs

package/dist/esm/components/HiddenRendering.js

@@ -1,8 +1,11 @@
 import React from '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',
 };
-export const HiddenRendering = () => React.createElement("div", { style: styles });
-export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
+export const HiddenRendering = () => React.createElement("div", { style: styles }, "The component is hidden");

package/dist/esm/components/Image.js

@@ -14,6 +14,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { addClassName, convertAttributesToReactProps } from '../utils';
 import { getAttributesString } from '../utils';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@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
@@ -59,11 +63,10 @@ export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps)
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };
-export const Image = (_a) => {
+export const Image = withFieldMetadata(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 && isFieldValueEmpty(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -77,22 +80,17 @@ export 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.createElement("img", Object.assign({}, attrs));
     }
     return null; // we can't handle the truth
-};
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
 Image.propTypes = {
-    media: PropTypes.oneOfType([
-        PropTypes.shape({
-            src: PropTypes.string,
-        }),
-        PropTypes.shape({
-            value: PropTypes.object,
-            editable: PropTypes.string,
-        }),
-    ]),
     field: PropTypes.oneOfType([
         PropTypes.shape({
             src: PropTypes.string,
@@ -105,5 +103,9 @@ Image.propTypes = {
     editable: PropTypes.bool,
     mediaUrlPrefix: PropTypes.instanceOf(RegExp),
     imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -11,14 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-export const Link = forwardRef((_a, ref) => {
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const Link = withFieldMetadata(withEmptyFieldEditingComponent(
+// eslint-disable-next-line react/display-name
+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 && isFieldValueEmpty(dynamicField))) {
         return null;
     }
     const resultTags = [];
@@ -64,7 +67,7 @@ export const Link = forwardRef((_a, ref) => {
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
     resultTags.push(React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
     return React.createElement(React.Fragment, null, resultTags);
-});
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
 export const LinkPropTypes = {
     field: PropTypes.oneOfType([
         PropTypes.shape({
@@ -78,6 +81,10 @@ export const LinkPropTypes = {
     ]).isRequired,
     editable: PropTypes.bool,
     showLinkTextWithChildrenPresent: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 Link.propTypes = LinkPropTypes;
 Link.displayName = 'Link';

package/dist/esm/components/Placeholder.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
-import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
+import { HorizonEditor } from '@sitecore-jss/sitecore-jss/editing';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
  */
@@ -31,6 +32,7 @@ class PlaceholderComponent extends PlaceholderCommon {
         return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
     }
     render() {
+        var _a;
         const childProps = Object.assign({}, this.props);
         delete childProps.componentFactory;
         if (this.state.error) {
@@ -43,9 +45,9 @@ class PlaceholderComponent extends PlaceholderCommon {
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
-        const components = this.getComponentsForRenderingData(placeholderData);
+        const placeholderData = 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;
@@ -71,4 +73,5 @@ class PlaceholderComponent extends PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon.propTypes;
-export const Placeholder = withComponentFactory(PlaceholderComponent);
+const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
+export const Placeholder = withSitecoreContext()(PlaceholderWithComponentFactory);