@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.9 → 22.2.0-canary.1

package/dist/cjs/index.js

@@ -23,8 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = exports.Text = exports.Image = exports.Context = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.getContentStylesheetLink = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = void 0;
+exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.Context = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getGroomedVariantIds = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
+exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = 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, "AxiosDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.AxiosDataFetcher; } });
@@ -37,10 +37,8 @@ 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, "RenderingType", { enumerable: true, get: function () { return layout_1.RenderingType; } });
-Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_PLACEHOLDER; } });
-Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_ID; } });
 Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
+Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
 var media_1 = require("@sitecore-jss/sitecore-jss/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
 var tracking_1 = require("@sitecore-jss/sitecore-jss/tracking");
@@ -52,6 +50,7 @@ var personalize_1 = require("@sitecore-jss/sitecore-jss/personalize");
 Object.defineProperty(exports, "personalizeLayout", { enumerable: true, get: function () { return personalize_1.personalizeLayout; } });
 Object.defineProperty(exports, "getPersonalizedRewrite", { enumerable: true, get: function () { return personalize_1.getPersonalizedRewrite; } });
 Object.defineProperty(exports, "getPersonalizedRewriteData", { enumerable: true, get: function () { return personalize_1.getPersonalizedRewriteData; } });
+Object.defineProperty(exports, "getGroomedVariantIds", { enumerable: true, get: function () { return personalize_1.getGroomedVariantIds; } });
 Object.defineProperty(exports, "normalizePersonalizedRewrite", { enumerable: true, get: function () { return personalize_1.normalizePersonalizedRewrite; } });
 Object.defineProperty(exports, "CdpHelper", { enumerable: true, get: function () { return personalize_1.CdpHelper; } });
 var component_props_service_1 = require("./services/component-props-service");
@@ -81,8 +80,6 @@ var RichText_1 = require("./components/RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
-var EditingComponentPlaceholder_1 = require("./components/EditingComponentPlaceholder");
-Object.defineProperty(exports, "EditingComponentPlaceholder", { enumerable: true, get: function () { return EditingComponentPlaceholder_1.EditingComponentPlaceholder; } });
 var NextImage_1 = require("./components/NextImage");
 Object.defineProperty(exports, "NextImage", { enumerable: true, get: function () { return NextImage_1.NextImage; } });
 const FEaaSWrapper = __importStar(require("./components/FEaaSWrapper"));
@@ -103,6 +100,8 @@ Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: t
 Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.BYOCComponent; } });
 Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return sitecore_jss_react_1.getComponentLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return sitecore_jss_react_1.File; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentImage; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentText; } });
 Object.defineProperty(exports, "VisitorIdentification", { enumerable: true, get: function () { return sitecore_jss_react_1.VisitorIdentification; } });
 Object.defineProperty(exports, "SitecoreContext", { enumerable: true, get: function () { return sitecore_jss_react_1.SitecoreContext; } });
 Object.defineProperty(exports, "SitecoreContextReactContext", { enumerable: true, get: function () { return sitecore_jss_react_1.SitecoreContextReactContext; } });
@@ -111,3 +110,6 @@ Object.defineProperty(exports, "useSitecoreContext", { enumerable: true, get: fu
 Object.defineProperty(exports, "withEditorChromes", { enumerable: true, get: function () { return sitecore_jss_react_1.withEditorChromes; } });
 Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return sitecore_jss_react_1.withPlaceholder; } });
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return sitecore_jss_react_1.withDatasourceCheck; } });
+Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return sitecore_jss_react_1.withFieldMetadata; } });
+Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.withEmptyFieldEditingComponent; } });
+Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return sitecore_jss_react_1.EditingScripts; } });

package/dist/cjs/middleware/middleware.js

@@ -18,6 +18,18 @@ class MiddlewareBase {
         var _a, _b;
         return !!(((_a = req.cookies.get('__prerender_bypass')) === null || _a === void 0 ? void 0 : _a.value) || ((_b = req.cookies.get('__next_preview_data')) === null || _b === void 0 ? void 0 : _b.value));
     }
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    isPrefetch(req) {
+        return (
+        // eslint-disable-next-line prettier/prettier
+        req.headers.get('purpose') === 'prefetch' || // Pages Router
+            req.headers.get('Next-Router-Prefetch') === '1' // App Router
+        );
+    }
     excludeRoute(pathname) {
         var _a, _b;
         return (pathname.startsWith('/api/') || // Ignore Next.js API calls

package/dist/cjs/middleware/personalize-middleware.js

@@ -61,6 +61,15 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 sitecore_jss_1.debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            if (this.isPrefetch(req)) {
+                sitecore_jss_1.debug.personalize('skipped (prefetch)');
+                // Personalized, but this is a prefetch request.
+                // In this case, don't execute a personalize request; otherwise, the metrics for component A/B experiments would be inaccurate.
+                // Disable preflight caching to force revalidation on client-side navigation (personalization WILL be influenced).
+                // Note the reason we don't move this any earlier in the middleware is that we would then be sacrificing performance for non-personalized pages.
+                response.headers.set('x-middleware-cache', 'no-cache');
+                return response;
+            }
             yield this.initPersonalizeServer({
                 hostname,
                 siteName: site.name,
@@ -68,32 +77,36 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 response,
             });
             const params = this.getExperienceParams(req);
-            sitecore_jss_1.debug.personalize('executing experience for %s %o', personalizeInfo.contentId, params);
-            let variantId;
-            // Execute targeted experience in Personalize SDK
-            // eslint-disable-next-line no-useless-catch
-            try {
-                const personalization = yield this.personalize({ personalizeInfo, params, language, timeout }, req);
-                variantId = personalization.variantId;
-            }
-            catch (error) {
-                throw error;
-            }
-            if (!variantId) {
-                sitecore_jss_1.debug.personalize('skipped (no variant identified)');
-                return response;
-            }
-            if (!personalizeInfo.variantIds.includes(variantId)) {
-                sitecore_jss_1.debug.personalize('skipped (invalid variant)');
+            const executions = this.getPersonalizeExecutions(personalizeInfo, language);
+            const identifiedVariantIds = [];
+            yield Promise.all(executions.map((execution) => this.personalize({
+                friendlyId: execution.friendlyId,
+                variantIds: execution.variantIds,
+                params,
+                language,
+                timeout,
+            }, req).then((personalization) => {
+                const variantId = personalization.variantId;
+                if (variantId) {
+                    if (!execution.variantIds.includes(variantId)) {
+                        sitecore_jss_1.debug.personalize('invalid variant %s', variantId);
+                    }
+                    else {
+                        identifiedVariantIds.push(variantId);
+                    }
+                }
+            })));
+            if (identifiedVariantIds.length === 0) {
+                sitecore_jss_1.debug.personalize('skipped (no variant(s) identified)');
                 return response;
             }
             // Path can be rewritten by previously executed middleware
             const basePath = (res === null || res === void 0 ? void 0 : res.headers.get('x-sc-rewrite')) || pathname;
             // Rewrite to persononalized path
-            const rewritePath = (0, personalize_1.getPersonalizedRewrite)(basePath, { variantId });
+            const rewritePath = (0, personalize_1.getPersonalizedRewrite)(basePath, identifiedVariantIds);
             response = this.rewrite(rewritePath, req, response);
-            // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
-            // See https://github.com/vercel/next.js/issues/32727
+            // Disable preflight caching to force revalidation on client-side navigation (personalization MAY be influenced).
+            // See https://github.com/vercel/next.js/pull/32767
             response.headers.set('x-middleware-cache', 'no-cache');
             sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
@@ -132,17 +145,18 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             });
         });
     }
-    personalize({ params, personalizeInfo, language, timeout, }, request) {
+    personalize({ params, friendlyId, language, timeout, variantIds, }, request) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const personalizationData = {
+            sitecore_jss_1.debug.personalize('executing experience for %s %o', friendlyId, params);
+            return (yield (0, server_2.personalize)(request, {
                 channel: this.config.cdpConfig.channel || 'WEB',
                 currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USD',
-                friendlyId: personalizeInfo.contentId,
+                friendlyId,
                 params,
                 language,
-            };
-            return (yield (0, server_2.personalize)(request, personalizationData, { timeout }));
+                pageVariantIds: variantIds,
+            }, { timeout }));
         });
     }
     getExperienceParams(req) {
@@ -164,5 +178,51 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
         // ignore files
         return pathname.includes('.') || super.excludeRoute(pathname);
     }
+    /**
+     * Aggregates personalize executions based on the provided route personalize information and language
+     * @param {PersonalizeInfo} personalizeInfo the route personalize information
+     * @param {string} language the language
+     * @returns An array of personalize executions
+     */
+    getPersonalizeExecutions(personalizeInfo, language) {
+        if (personalizeInfo.variantIds.length === 0) {
+            return [];
+        }
+        const results = [];
+        return personalizeInfo.variantIds.reduce((results, variantId) => {
+            if (variantId.includes('_')) {
+                // Component-level personalization in format "<ComponentID>_<VariantID>"
+                const componentId = variantId.split('_')[0];
+                const friendlyId = personalize_1.CdpHelper.getComponentFriendlyId(personalizeInfo.pageId, componentId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    // The default/control variant (format "<ComponentID>_default") is also a valid value returned by the execution
+                    const defaultVariant = `${componentId}${personalize_1.DEFAULT_VARIANT}`;
+                    results.push({
+                        friendlyId,
+                        variantIds: [defaultVariant, variantId],
+                    });
+                }
+            }
+            else {
+                // Embedded (page-level) personalization in format "<VariantID>"
+                const friendlyId = personalize_1.CdpHelper.getPageFriendlyId(personalizeInfo.pageId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    results.push({
+                        friendlyId,
+                        variantIds: [variantId],
+                    });
+                }
+            }
+            return results;
+        }, results);
+    }
 }
 exports.PersonalizeMiddleware = PersonalizeMiddleware;

package/dist/cjs/services/base-graphql-sitemap-service.js

@@ -148,13 +148,14 @@ class BaseGraphQLSitemapService {
             const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
             const aggregatedPaths = [];
             sitePaths.forEach((item) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 if (!item)
                     return;
                 aggregatedPaths.push(formatPath(item.path));
-                // check for type safety's sake - personalize may be empty depending on query type
-                if ((_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds.length) {
-                    aggregatedPaths.push(...(((_d = (_c = item.route) === null || _c === void 0 ? void 0 : _c.personalization) === null || _d === void 0 ? void 0 : _d.variantIds.map((varId) => formatPath((0, personalize_1.getPersonalizedRewrite)(item.path, { variantId: varId })))) || {}));
+                const variantIds = (_c = (_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds) === null || _c === void 0 ? void 0 : _c.filter((variantId) => !variantId.includes('_') // exclude component A/B test variants
+                );
+                if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
+                    aggregatedPaths.push(...variantIds.map((varId) => formatPath((0, personalize_1.getPersonalizedRewrite)(item.path, [varId]))));
                 }
             });
             return aggregatedPaths;

package/dist/cjs/utils/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.tryParseEnvValue = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
+exports.resetEditorChromes = exports.isEditorActive = exports.resolveUrl = exports.tryParseEnvValue = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getPublicUrl", { enumerable: true, get: function () { return utils_1.getPublicUrl; } });
 Object.defineProperty(exports, "handleEditorFastRefresh", { enumerable: true, get: function () { return utils_1.handleEditorFastRefresh; } });
 var utils_2 = require("@sitecore-jss/sitecore-jss/utils");
 Object.defineProperty(exports, "tryParseEnvValue", { enumerable: true, get: function () { return utils_2.tryParseEnvValue; } });
-Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_2.isEditorActive; } });
-Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_2.resetEditorChromes; } });
 Object.defineProperty(exports, "resolveUrl", { enumerable: true, get: function () { return utils_2.resolveUrl; } });
+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; } });

package/dist/cjs/utils/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getJssEditingSecret = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
-const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 /**
  * Get the publicUrl.
  * This is used primarily to enable compatibility with Sitecore editors.
@@ -32,7 +32,7 @@ exports.getPublicUrl = getPublicUrl;
  * @default forceReload false
  */
 const handleEditorFastRefresh = (forceReload = false) => {
-    if (process.env.NODE_ENV !== 'development' || !(0, utils_1.isEditorActive)()) {
+    if (process.env.NODE_ENV !== 'development' || !(0, editing_1.isEditorActive)()) {
         // Only run if development mode and editor is active
         return;
     }
@@ -50,7 +50,7 @@ const handleEditorFastRefresh = (forceReload = false) => {
             return window.location.reload();
         setTimeout(() => {
             console.log('[Sitecore Editor HMR Listener] Sitecore editor does not support Fast Refresh, reloading chromes...');
-            (0, utils_1.resetEditorChromes)();
+            (0, editing_1.resetEditorChromes)();
         }, 500);
     };
 };

package/dist/esm/components/Link.js

@@ -16,14 +16,18 @@ import { Link as ReactLink, LinkPropTypes, } from '@sitecore-jss/sitecore-jss-re
 export const Link = forwardRef((props, ref) => {
     const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
     if (!field ||
-        (!field.editable && !field.value && !field.href)) {
+        (!field.editable &&
+            !field.value &&
+            !field.href &&
+            !field.metadata)) {
         return null;
     }
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring, anchor } = value;
-    const isEditing = editable && field.editable;
+    // fallback to {} if value is undefined; could happen if field is LinkFieldValue, href is empty in metadata mode
+    const { href, querystring, anchor } = value || {};
+    const isEditing = editable && (field.editable || field.metadata);
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
         // determine if a link is a route or not.

package/dist/esm/components/NextImage.js

@@ -12,9 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { getEEMarkup, } from '@sitecore-jss/sitecore-jss-react';
+import { getEEMarkup, withFieldMetadata, } from '@sitecore-jss/sitecore-jss-react';
 import Image from 'next/image';
-export const NextImage = (_a) => {
+import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
+import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     // next handles src and we use a custom loader,
     // throw error if these are present
@@ -22,8 +25,7 @@ export const NextImage = (_a) => {
         throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
     }
     const dynamicMedia = field;
-    if (!field ||
-        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+    if (!field || (!dynamicMedia.editable && isFieldValueEmpty(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -53,7 +55,7 @@ export const NextImage = (_a) => {
         return React.createElement(Image, Object.assign({ alt: "" }, imageProps));
     }
     return null; // we can't handle the truth
-};
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
 NextImage.propTypes = {
     field: PropTypes.oneOfType([
         PropTypes.shape({
@@ -67,5 +69,9 @@ NextImage.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,
+    ]),
 };
 NextImage.displayName = 'NextImage';

package/dist/esm/components/RichText.js

@@ -17,7 +17,7 @@ const prefetched = {};
 export const RichText = (props) => {
     const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
     const hasText = props.field && props.field.value;
-    const isEditing = editable && props.field && props.field.editable;
+    const isEditing = editable && props.field && (props.field.editable || props.field.metadata);
     const router = useRouter();
     const richTextRef = useRef(null);
     useEffect(() => {
@@ -49,7 +49,7 @@ export const RichText = (props) => {
             link.addEventListener('click', routeHandler, false);
         });
     };
-    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef }, rest));
+    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 RichText.propTypes = Object.assign({ internalLinksSelector: PropTypes.string }, RichTextPropTypes);
 RichText.displayName = 'NextRichText';

package/dist/esm/editing/constants.js

@@ -1,3 +1,12 @@
 export const QUERY_PARAM_EDITING_SECRET = 'secret';
-export const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
-export const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_PROTECTION_BYPASS = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = 'x-vercel-set-bypass-cookie';
+/**
+ * Headers that should be passed along to (Editing Chromes handler) SSR request.
+ * Note these are in lowercase format to match expected `IncomingHttpHeaders`.
+ */
+export const EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
+export const EDITING_ALLOWED_ORIGINS = ['https://pages*.cloud', 'https://pages.sitecorecloud.io'];

package/dist/esm/editing/editing-config-middleware.js

@@ -7,9 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 import { debug } from '@sitecore-jss/sitecore-jss';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
 /**
  * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')
  * provides configuration information to determine feature compatibility on Pages side.
@@ -22,6 +24,10 @@ export class EditingConfigMiddleware {
         this.config = config;
         this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
             const secret = _req.query[QUERY_PARAM_EDITING_SECRET];
+            if (!enforceCors(_req, res, EDITING_ALLOWED_ORIGINS)) {
+                debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
             if (secret !== getJssEditingSecret()) {
                 debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
                 return res.status(401).json({ message: 'Missing or invalid editing secret' });
@@ -29,9 +35,11 @@ export class EditingConfigMiddleware {
             const components = Array.isArray(this.config.components)
                 ? this.config.components
                 : Array.from(this.config.components.keys());
+            const editMode = this.config.pagesEditMode || EditMode.Metadata;
             return res.status(200).json({
                 components,
                 packages: this.config.metadata.packages,
+                editMode,
             });
         });
     }

package/dist/esm/editing/editing-data-middleware.js

@@ -9,8 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { editingDataDiskCache } from './editing-data-cache';
 import { isEditingData } from './editing-data';
-import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
+import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
+import { debug } from '@sitecore-jss/sitecore-jss';
 /**
  * Middleware / handler for use in the editing data Next.js API dynamic route (e.g. '/api/editing/data/[key]')
  * which is required for Sitecore editing support.
@@ -25,6 +27,10 @@ export class EditingDataMiddleware {
             const { method, query, body } = req;
             const secret = query[QUERY_PARAM_EDITING_SECRET];
             const key = query[this.queryParamKey];
+            if (!enforceCors(req, res, EDITING_ALLOWED_ORIGINS)) {
+                debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
             // Validate secret
             if (secret !== getJssEditingSecret()) {
                 res.status(401).end('Missing or invalid secret');