@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.19 → 22.1.0-canary.22

package/dist/cjs/editing/constants.js

@@ -4,4 +4,7 @@ exports.EDITING_ALLOWED_ORIGINS = exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL =
 exports.QUERY_PARAM_EDITING_SECRET = 'secret';
 exports.QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
 exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
 exports.EDITING_ALLOWED_ORIGINS = ['https://pages*.cloud', 'https://pages.sitecorecloud.io'];

package/dist/cjs/editing/editing-render-middleware.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractEditingData = exports.EditingRenderMiddleware = void 0;
+exports.EditingRenderMiddleware = exports.MetadataHandler = exports.isEditingMetadataPreviewData = exports.ChromesHandler = void 0;
 const constants_1 = require("next/constants");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
@@ -20,50 +20,50 @@ const utils_1 = require("../utils/utils");
 const render_middleware_1 = require("./render-middleware");
 const utils_2 = require("@sitecore-jss/sitecore-jss/utils");
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
  */
-class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
+class ChromesHandler extends render_middleware_1.RenderMiddlewareBase {
     constructor(config) {
         var _a, _b, _c, _d;
         super();
-        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
-            var _e, _f, _g;
-            const { method, query, body, headers } = req;
+        this.config = config;
+        /**
+         * Default page URL resolution.
+         * @param {Object} args Arguments for resolving the page URL
+         * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+         * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+         * @returns {string} The URL to render
+         */
+        this.defaultResolvePageUrl = ({ serverUrl, itemPath, }) => {
+            return `${serverUrl}${itemPath}`;
+        };
+        /**
+         * Default server URL resolution.
+         * Note we use https protocol on Vercel due to serverless function architecture.
+         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
+         * and within a nodejs container, http protocol should be used.
+         *
+         * For information about the VERCEL environment variable, see
+         * https://vercel.com/docs/environment-variables#system-environment-variables
+         * @param {NextApiRequest} req
+         */
+        this.defaultResolveServerUrl = (req) => {
+            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+        };
+        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editing_data_service_1.editingDataService;
+        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new sitecore_jss_1.AxiosDataFetcher({ debugger: sitecore_jss_1.debug.editing });
+        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
+        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+    render(req, res) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { query } = req;
             const startTimestamp = Date.now();
-            sitecore_jss_1.debug.editing('editing render middleware start: %o', {
-                method,
-                query,
-                headers,
-                body,
-            });
-            if (!(0, utils_2.enforceCors)(req, res, constants_2.EDITING_ALLOWED_ORIGINS)) {
-                sitecore_jss_1.debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
-                return res.status(401).json({
-                    html: `<html><body>Requests from origin ${(_e = req.headers) === null || _e === void 0 ? void 0 : _e.origin} not allowed</body></html>`,
-                });
-            }
-            if (method !== 'POST') {
-                sitecore_jss_1.debug.editing('invalid method - sent %s expected POST', method);
-                res.setHeader('Allow', 'POST');
-                return res.status(405).json({
-                    html: `<html><body>Invalid request method '${method}'</body></html>`,
-                });
-            }
-            // Validate secret
-            const secret = (_f = query[constants_2.QUERY_PARAM_EDITING_SECRET]) !== null && _f !== void 0 ? _f : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
-            if (secret !== (0, utils_1.getJssEditingSecret)()) {
-                sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
-                return res.status(401).json({
-                    html: '<html><body>Missing or invalid secret</body></html>',
-                });
-            }
             try {
                 // Extract data from EE payload
-                const editingData = extractEditingData(req);
+                const editingData = this.extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
                 // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
@@ -79,7 +79,7 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
                 sitecore_jss_1.debug.editing('fetching page route for %s', editingData.path);
-                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                const requestUrl = new URL(this.resolvePageUrl({ serverUrl, itemPath: editingData.path }));
                 for (const key in params) {
                     if ({}.hasOwnProperty.call(params, key)) {
                         requestUrl.searchParams.append(key, params[key]);
@@ -116,7 +116,7 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 html = html.replace(constants_1.STATIC_PROPS_ID, constants_1.SERVER_PROPS_ID);
                 if (editingData.layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component) {
                     // Handle component rendering. Extract component markup only
-                    html = (_g = (0, node_html_parser_1.parse)(html).getElementById(layout_1.EDITING_COMPONENT_ID)) === null || _g === void 0 ? void 0 : _g.innerHTML;
+                    html = (_a = (0, node_html_parser_1.parse)(html).getElementById(layout_1.EDITING_COMPONENT_ID)) === null || _a === void 0 ? void 0 : _a.innerHTML;
                     if (!html)
                         throw new Error(`Failed to render component for ${editingData.path}`);
                 }
@@ -142,31 +142,171 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 });
             }
         });
-        /**
-         * Default page URL resolution.
-         * @param {string} serverUrl
-         * @param {string} itemPath
-         */
-        this.defaultResolvePageUrl = (serverUrl, itemPath) => {
-            return `${serverUrl}${itemPath}`;
-        };
-        /**
-         * Default server URL resolution.
-         * Note we use https protocol on Vercel due to serverless function architecture.
-         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
-         * and within a nodejs container, http protocol should be used.
-         *
-         * For information about the VERCEL environment variable, see
-         * https://vercel.com/docs/environment-variables#system-environment-variables
-         * @param {NextApiRequest} req
-         */
-        this.defaultResolveServerUrl = (req) => {
-            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+    }
+    extractEditingData(req) {
+        // Sitecore editors will send the following body data structure,
+        // though we're only concerned with the "args".
+        // {
+        //   id: 'JSS app name',
+        //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
+        //   functionName: 'renderView',
+        //   moduleName: 'server.bundle'
+        // }
+        // The 'serialized viewbag object' structure:
+        // {
+        //   language: 'language',
+        //   dictionary: 'key-value representation of tokens and their corresponding translations',
+        //   httpContext: 'serialized request data'
+        // }
+        var _a;
+        // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
+        const payload = req.body;
+        if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
+            throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
+        }
+        const layoutData = JSON.parse(payload.args[1]);
+        const viewBag = JSON.parse(payload.args[2]);
+        // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
+        const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
+        return {
+            path,
+            layoutData,
+            language: viewBag.language,
+            dictionary: viewBag.dictionary,
         };
-        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editing_data_service_1.editingDataService;
-        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new sitecore_jss_1.AxiosDataFetcher({ debugger: sitecore_jss_1.debug.editing });
-        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
-        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+}
+exports.ChromesHandler = ChromesHandler;
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+const isEditingMetadataPreviewData = (data) => {
+    return (typeof data === 'object' &&
+        data !== null &&
+        'editMode' in data &&
+        data.editMode === layout_1.EditMode.Metadata);
+};
+exports.isEditingMetadataPreviewData = isEditingMetadataPreviewData;
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+class MetadataHandler {
+    constructor(config) {
+        this.config = config;
+    }
+    render(req, res) {
+        var _a, _b;
+        const { query } = req;
+        const startTimestamp = Date.now();
+        const requiredQueryParams = [
+            'sc_site',
+            'sc_itemid',
+            'sc_lang',
+            'sc_variant',
+            'sc_version',
+            'mode',
+        ];
+        const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
+        // Validate query parameters
+        if (missingQueryParams.length) {
+            sitecore_jss_1.debug.editing('missing required query parameters: %o', missingQueryParams);
+            return res.status(400).json({
+                html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
+            });
+        }
+        res.setPreviewData({
+            site: query.sc_site,
+            itemId: query.sc_itemid,
+            language: query.sc_lang,
+            // sc_variant is an array in the query params, but we only need the first value
+            variantId: query.sc_variant.split(',')[0],
+            version: query.sc_version,
+            editMode: layout_1.EditMode.Metadata,
+            pageState: query.mode,
+        }, 
+        // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
+        {
+            path: query.route,
+            maxAge: 3,
+        });
+        const route = ((_b = (_a = this.config).resolvePageUrl) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            itemPath: query.route,
+        })) || query.route;
+        sitecore_jss_1.debug.editing('editing render middleware end in %dms: redirect %o', Date.now() - startTimestamp, {
+            status: 307,
+            route,
+        });
+        // Restrict the page to be rendered only within the allowed origins
+        res.setHeader('Content-Security-Policy', this.getSCPHeader());
+        res.redirect(route);
+    }
+    /**
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
+     */
+    getSCPHeader() {
+        return `frame-ancestors 'self' ${[(0, utils_2.getAllowedOriginsFromEnv)(), ...constants_2.EDITING_ALLOWED_ORIGINS].join(' ')}`;
+    }
+}
+exports.MetadataHandler = MetadataHandler;
+/**
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
+ */
+class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config) {
+        super();
+        this.config = config;
+        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const { query, body, method, headers } = req;
+            sitecore_jss_1.debug.editing('editing render middleware start: %o', {
+                method,
+                query,
+                headers,
+                body,
+            });
+            if (!(0, utils_2.enforceCors)(req, res, constants_2.EDITING_ALLOWED_ORIGINS)) {
+                sitecore_jss_1.debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({
+                    html: `<html><body>Requests from origin ${(_a = req.headers) === null || _a === void 0 ? void 0 : _a.origin} not allowed</body></html>`,
+                });
+            }
+            // Validate secret
+            const secret = (_b = query[constants_2.QUERY_PARAM_EDITING_SECRET]) !== null && _b !== void 0 ? _b : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
+            if (secret !== (0, utils_1.getJssEditingSecret)()) {
+                sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
+                return res.status(401).json({
+                    html: '<html><body>Missing or invalid secret</body></html>',
+                });
+            }
+            switch (req.method) {
+                case 'GET': {
+                    const handler = new MetadataHandler({ resolvePageUrl: (_c = this.config) === null || _c === void 0 ? void 0 : _c.resolvePageUrl });
+                    yield handler.render(req, res);
+                    break;
+                }
+                case 'POST': {
+                    const handler = new ChromesHandler(this.config);
+                    yield handler.render(req, res);
+                    break;
+                }
+                default:
+                    sitecore_jss_1.debug.editing('invalid method - sent %s expected GET/POST', req.method);
+                    res.setHeader('Allow', 'GET, POST');
+                    return res.status(405).json({
+                        html: `<html><body>Invalid request method '${req.method}'</body></html>`,
+                    });
+            }
+        });
     }
     /**
      * Gets the Next.js API route handler
@@ -177,39 +317,3 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
     }
 }
 exports.EditingRenderMiddleware = EditingRenderMiddleware;
-/**
- * @param {NextApiRequest} req
- */
-function extractEditingData(req) {
-    // Sitecore editors will send the following body data structure,
-    // though we're only concerned with the "args".
-    // {
-    //   id: 'JSS app name',
-    //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
-    //   functionName: 'renderView',
-    //   moduleName: 'server.bundle'
-    // }
-    // The 'serialized viewbag object' structure:
-    // {
-    //   language: 'language',
-    //   dictionary: 'key-value representation of tokens and their corresponding translations',
-    //   httpContext: 'serialized request data'
-    // }
-    var _a;
-    // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
-    const payload = req.body;
-    if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
-        throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
-    }
-    const layoutData = JSON.parse(payload.args[1]);
-    const viewBag = JSON.parse(payload.args[2]);
-    // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
-    const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
-    return {
-        path,
-        layoutData,
-        language: viewBag.language,
-        dictionary: viewBag.dictionary,
-    };
-}
-exports.extractEditingData = extractEditingData;

package/dist/cjs/editing/index.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = void 0;
+exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.isEditingMetadataPreviewData = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = exports.GraphQLEditingService = void 0;
+var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+Object.defineProperty(exports, "GraphQLEditingService", { enumerable: true, get: function () { return editing_1.GraphQLEditingService; } });
 var editing_data_cache_1 = require("./editing-data-cache");
 Object.defineProperty(exports, "EditingDataDiskCache", { enumerable: true, get: function () { return editing_data_cache_1.EditingDataDiskCache; } });
 var editing_data_middleware_1 = require("./editing-data-middleware");
 Object.defineProperty(exports, "EditingDataMiddleware", { enumerable: true, get: function () { return editing_data_middleware_1.EditingDataMiddleware; } });
 var editing_render_middleware_1 = require("./editing-render-middleware");
 Object.defineProperty(exports, "EditingRenderMiddleware", { enumerable: true, get: function () { return editing_render_middleware_1.EditingRenderMiddleware; } });
+Object.defineProperty(exports, "isEditingMetadataPreviewData", { enumerable: true, get: function () { return editing_render_middleware_1.isEditingMetadataPreviewData; } });
 var editing_data_service_1 = require("./editing-data-service");
 Object.defineProperty(exports, "BasicEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.BasicEditingDataService; } });
 Object.defineProperty(exports, "ServerlessEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.ServerlessEditingDataService; } });

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/editing/constants.js

@@ -1,4 +1,7 @@
 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';
+/**
+ * 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-render-middleware.js

@@ -9,58 +9,58 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
-import { EDITING_COMPONENT_ID, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
+import { EDITING_COMPONENT_ID, EditMode, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
 import { parse } from 'node-html-parser';
 import { editingDataService } from './editing-data-service';
 import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 import { RenderMiddlewareBase } from './render-middleware';
-import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
+import { enforceCors, getAllowedOriginsFromEnv } from '@sitecore-jss/sitecore-jss/utils';
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
  */
-export class EditingRenderMiddleware extends RenderMiddlewareBase {
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
+export class ChromesHandler extends RenderMiddlewareBase {
     constructor(config) {
         var _a, _b, _c, _d;
         super();
-        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
-            var _e, _f, _g;
-            const { method, query, body, headers } = req;
+        this.config = config;
+        /**
+         * Default page URL resolution.
+         * @param {Object} args Arguments for resolving the page URL
+         * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+         * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+         * @returns {string} The URL to render
+         */
+        this.defaultResolvePageUrl = ({ serverUrl, itemPath, }) => {
+            return `${serverUrl}${itemPath}`;
+        };
+        /**
+         * Default server URL resolution.
+         * Note we use https protocol on Vercel due to serverless function architecture.
+         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
+         * and within a nodejs container, http protocol should be used.
+         *
+         * For information about the VERCEL environment variable, see
+         * https://vercel.com/docs/environment-variables#system-environment-variables
+         * @param {NextApiRequest} req
+         */
+        this.defaultResolveServerUrl = (req) => {
+            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+        };
+        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editingDataService;
+        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new AxiosDataFetcher({ debugger: debug.editing });
+        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
+        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+    render(req, res) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { query } = req;
             const startTimestamp = Date.now();
-            debug.editing('editing render middleware start: %o', {
-                method,
-                query,
-                headers,
-                body,
-            });
-            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({
-                    html: `<html><body>Requests from origin ${(_e = req.headers) === null || _e === void 0 ? void 0 : _e.origin} not allowed</body></html>`,
-                });
-            }
-            if (method !== 'POST') {
-                debug.editing('invalid method - sent %s expected POST', method);
-                res.setHeader('Allow', 'POST');
-                return res.status(405).json({
-                    html: `<html><body>Invalid request method '${method}'</body></html>`,
-                });
-            }
-            // Validate secret
-            const secret = (_f = query[QUERY_PARAM_EDITING_SECRET]) !== null && _f !== void 0 ? _f : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
-            if (secret !== getJssEditingSecret()) {
-                debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
-                return res.status(401).json({
-                    html: '<html><body>Missing or invalid secret</body></html>',
-                });
-            }
             try {
                 // Extract data from EE payload
-                const editingData = extractEditingData(req);
+                const editingData = this.extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
                 // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
@@ -76,7 +76,7 @@ export class EditingRenderMiddleware extends RenderMiddlewareBase {
                 // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
                 debug.editing('fetching page route for %s', editingData.path);
-                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                const requestUrl = new URL(this.resolvePageUrl({ serverUrl, itemPath: editingData.path }));
                 for (const key in params) {
                     if ({}.hasOwnProperty.call(params, key)) {
                         requestUrl.searchParams.append(key, params[key]);
@@ -113,7 +113,7 @@ export class EditingRenderMiddleware extends RenderMiddlewareBase {
                 html = html.replace(STATIC_PROPS_ID, SERVER_PROPS_ID);
                 if (editingData.layoutData.sitecore.context.renderingType === RenderingType.Component) {
                     // Handle component rendering. Extract component markup only
-                    html = (_g = parse(html).getElementById(EDITING_COMPONENT_ID)) === null || _g === void 0 ? void 0 : _g.innerHTML;
+                    html = (_a = parse(html).getElementById(EDITING_COMPONENT_ID)) === null || _a === void 0 ? void 0 : _a.innerHTML;
                     if (!html)
                         throw new Error(`Failed to render component for ${editingData.path}`);
                 }
@@ -139,72 +139,174 @@ export class EditingRenderMiddleware extends RenderMiddlewareBase {
                 });
             }
         });
-        /**
-         * Default page URL resolution.
-         * @param {string} serverUrl
-         * @param {string} itemPath
-         */
-        this.defaultResolvePageUrl = (serverUrl, itemPath) => {
-            return `${serverUrl}${itemPath}`;
-        };
-        /**
-         * Default server URL resolution.
-         * Note we use https protocol on Vercel due to serverless function architecture.
-         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
-         * and within a nodejs container, http protocol should be used.
-         *
-         * For information about the VERCEL environment variable, see
-         * https://vercel.com/docs/environment-variables#system-environment-variables
-         * @param {NextApiRequest} req
-         */
-        this.defaultResolveServerUrl = (req) => {
-            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+    }
+    extractEditingData(req) {
+        // Sitecore editors will send the following body data structure,
+        // though we're only concerned with the "args".
+        // {
+        //   id: 'JSS app name',
+        //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
+        //   functionName: 'renderView',
+        //   moduleName: 'server.bundle'
+        // }
+        // The 'serialized viewbag object' structure:
+        // {
+        //   language: 'language',
+        //   dictionary: 'key-value representation of tokens and their corresponding translations',
+        //   httpContext: 'serialized request data'
+        // }
+        var _a;
+        // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
+        const payload = req.body;
+        if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
+            throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
+        }
+        const layoutData = JSON.parse(payload.args[1]);
+        const viewBag = JSON.parse(payload.args[2]);
+        // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
+        const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
+        return {
+            path,
+            layoutData,
+            language: viewBag.language,
+            dictionary: viewBag.dictionary,
         };
-        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editingDataService;
-        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new AxiosDataFetcher({ debugger: debug.editing });
-        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
-        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+}
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+export const isEditingMetadataPreviewData = (data) => {
+    return (typeof data === 'object' &&
+        data !== null &&
+        'editMode' in data &&
+        data.editMode === EditMode.Metadata);
+};
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+export class MetadataHandler {
+    constructor(config) {
+        this.config = config;
+    }
+    render(req, res) {
+        var _a, _b;
+        const { query } = req;
+        const startTimestamp = Date.now();
+        const requiredQueryParams = [
+            'sc_site',
+            'sc_itemid',
+            'sc_lang',
+            'sc_variant',
+            'sc_version',
+            'mode',
+        ];
+        const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
+        // Validate query parameters
+        if (missingQueryParams.length) {
+            debug.editing('missing required query parameters: %o', missingQueryParams);
+            return res.status(400).json({
+                html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
+            });
+        }
+        res.setPreviewData({
+            site: query.sc_site,
+            itemId: query.sc_itemid,
+            language: query.sc_lang,
+            // sc_variant is an array in the query params, but we only need the first value
+            variantId: query.sc_variant.split(',')[0],
+            version: query.sc_version,
+            editMode: EditMode.Metadata,
+            pageState: query.mode,
+        }, 
+        // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
+        {
+            path: query.route,
+            maxAge: 3,
+        });
+        const route = ((_b = (_a = this.config).resolvePageUrl) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            itemPath: query.route,
+        })) || query.route;
+        debug.editing('editing render middleware end in %dms: redirect %o', Date.now() - startTimestamp, {
+            status: 307,
+            route,
+        });
+        // Restrict the page to be rendered only within the allowed origins
+        res.setHeader('Content-Security-Policy', this.getSCPHeader());
+        res.redirect(route);
     }
     /**
-     * Gets the Next.js API route handler
-     * @returns route handler
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
      */
-    getHandler() {
-        return this.handler;
+    getSCPHeader() {
+        return `frame-ancestors 'self' ${[getAllowedOriginsFromEnv(), ...EDITING_ALLOWED_ORIGINS].join(' ')}`;
     }
 }
 /**
- * @param {NextApiRequest} req
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
  */
-export function extractEditingData(req) {
-    // Sitecore editors will send the following body data structure,
-    // though we're only concerned with the "args".
-    // {
-    //   id: 'JSS app name',
-    //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
-    //   functionName: 'renderView',
-    //   moduleName: 'server.bundle'
-    // }
-    // The 'serialized viewbag object' structure:
-    // {
-    //   language: 'language',
-    //   dictionary: 'key-value representation of tokens and their corresponding translations',
-    //   httpContext: 'serialized request data'
-    // }
-    var _a;
-    // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
-    const payload = req.body;
-    if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
-        throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
+export class EditingRenderMiddleware extends RenderMiddlewareBase {
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config) {
+        super();
+        this.config = config;
+        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const { query, body, method, headers } = req;
+            debug.editing('editing render middleware start: %o', {
+                method,
+                query,
+                headers,
+                body,
+            });
+            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({
+                    html: `<html><body>Requests from origin ${(_a = req.headers) === null || _a === void 0 ? void 0 : _a.origin} not allowed</body></html>`,
+                });
+            }
+            // Validate secret
+            const secret = (_b = query[QUERY_PARAM_EDITING_SECRET]) !== null && _b !== void 0 ? _b : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
+            if (secret !== getJssEditingSecret()) {
+                debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
+                return res.status(401).json({
+                    html: '<html><body>Missing or invalid secret</body></html>',
+                });
+            }
+            switch (req.method) {
+                case 'GET': {
+                    const handler = new MetadataHandler({ resolvePageUrl: (_c = this.config) === null || _c === void 0 ? void 0 : _c.resolvePageUrl });
+                    yield handler.render(req, res);
+                    break;
+                }
+                case 'POST': {
+                    const handler = new ChromesHandler(this.config);
+                    yield handler.render(req, res);
+                    break;
+                }
+                default:
+                    debug.editing('invalid method - sent %s expected GET/POST', req.method);
+                    res.setHeader('Allow', 'GET, POST');
+                    return res.status(405).json({
+                        html: `<html><body>Invalid request method '${req.method}'</body></html>`,
+                    });
+            }
+        });
+    }
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler() {
+        return this.handler;
     }
-    const layoutData = JSON.parse(payload.args[1]);
-    const viewBag = JSON.parse(payload.args[2]);
-    // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
-    const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
-    return {
-        path,
-        layoutData,
-        language: viewBag.language,
-        dictionary: viewBag.dictionary,
-    };
 }

package/dist/esm/editing/index.js

@@ -1,6 +1,7 @@
+export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
 export { EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware } from './editing-data-middleware';
-export { EditingRenderMiddleware, } from './editing-render-middleware';
+export { EditingRenderMiddleware, isEditingMetadataPreviewData, } from './editing-render-middleware';
 export { BasicEditingDataService, ServerlessEditingDataService, editingDataService, } from './editing-data-service';
 export { VercelEditingDataCache } from './vercel-editing-data-cache';
 export { FEAASRenderMiddleware } from './feaas-render-middleware';

package/dist/esm/utils/index.js

@@ -1,2 +1,3 @@
 export { getPublicUrl, handleEditorFastRefresh } from './utils';
-export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';

package/dist/esm/utils/utils.js

@@ -1,4 +1,4 @@
-import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
+import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
 /**
  * Get the publicUrl.
  * This is used primarily to enable compatibility with Sitecore editors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.1.0-canary.19",
+  "version": "22.1.0-canary.22",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,9 +72,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.19",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.19",
-    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.19",
+    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.22",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.22",
+    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.22",
     "@vercel/kv": "^0.2.1",
     "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
@@ -83,7 +83,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "2da1f09fc76a46fbd3e092dd12dcc793cced4224",
+  "gitHead": "c2f87c54444970255294606e5412c73095d64396",
   "files": [
     "dist",
     "types",

package/types/ComponentBuilder.d.ts

@@ -1,18 +1,16 @@
-/// <reference types="@types/react" />
-import { ComponentFactory } from '@sitecore-jss/sitecore-jss-react';
+import { ComponentFactory, JssComponentType } from '@sitecore-jss/sitecore-jss-react';
 import { Module, ModuleFactory } from './sharedTypes/module-factory';
-import { ComponentType } from 'react';
 /**
  * Represents a component that can be imported dynamically
  */
 export type LazyModule = {
     module: () => Promise<Module>;
-    element: (isEditing?: boolean) => ComponentType;
+    element: (isEditing?: boolean) => JssComponentType;
 };
 /**
  * Component is a module or a lazy module
  */
-type Component = Module | LazyModule | ComponentType;
+type Component = Module | LazyModule | JssComponentType;
 /**
  * Configuration for ComponentBuilder
  */

package/types/editing/constants.d.ts

@@ -1,4 +1,7 @@
 export declare const QUERY_PARAM_EDITING_SECRET = "secret";
 export declare const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = "x-sitecore-protection-bypass";
 export declare const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = "x-vercel-protection-bypass";
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
 export declare const EDITING_ALLOWED_ORIGINS: string[];

package/types/editing/editing-data-service.d.ts

@@ -4,6 +4,7 @@ import { EditingDataCache } from './editing-data-cache';
 import { PreviewData } from 'next';
 /**
  * Data for Next.js Preview (Editing) mode
+ * Used in Chromes Edit Mode only
  */
 export interface EditingPreviewData {
     key: string;

package/types/editing/editing-render-middleware.d.ts

@@ -1,16 +1,23 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss';
-import { EditingData } from './editing-data';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { EditingDataService } from './editing-data-service';
 import { RenderMiddlewareBase } from './render-middleware';
-export interface EditingRenderMiddlewareConfig {
+/**
+ * Configuration for the Editing Render Middleware.
+ */
+export type EditingRenderMiddlewareConfig = {
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `AxiosDataFetcher` instance to use for API requests.
      * @default new AxiosDataFetcher()
      * @see AxiosDataFetcher
      */
     dataFetcher?: AxiosDataFetcher;
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `EditingDataService` instance to use.
      * This would typically only be necessary if you've got a custom `EditingDataService` instance (e.g. using a custom API route).
      * By default, this is `editingDataService` (the `EditingDataService` default instance).
@@ -20,16 +27,25 @@ export interface EditingRenderMiddlewareConfig {
      */
     editingDataService?: EditingDataService;
     /**
+     * -- Edit Mode Chromes / Metadata --
+     *
      * Function used to determine route/page URL to render.
      * This may be necessary for certain custom Next.js routing configurations.
-     * @param {string} serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'. Available in Chromes Edit Mode only.
      * @param {string} itemPath The Sitecore relative item path e.g. '/styleguide'
      * @returns {string} The URL to render
-     * @default `${serverUrl}${itemPath}`
+     * @default `${serverUrl}${itemPath}` In Edit Mode Chromes
+     * @default `${itemPath}` In XMCloud Pages for Edit Mode Metadata
      * @see resolveServerUrl
      */
-    resolvePageUrl?: (serverUrl: string, itemPath: string) => string;
+    resolvePageUrl?: (args: {
+        serverUrl?: string;
+        itemPath: string;
+    }) => string;
     /**
+     * -- Edit Mode Chromes --
+     *
      * Function used to determine the root server URL. This is used for the route/page and subsequent data API requests.
      * By default, the host header is used, with https protocol on Vercel (due to serverless function architecture) and http protocol elsewhere.
      * @param {NextApiRequest} req The current request.
@@ -37,30 +53,29 @@ export interface EditingRenderMiddlewareConfig {
      * @see resolvePageUrl
      */
     resolveServerUrl?: (req: NextApiRequest) => string;
-}
+};
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Configuration for the Editing Chromes Handler.
  */
-export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+export type EditingRenderMiddlewareChromesConfig = EditingRenderMiddlewareConfig;
+/**
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
+ */
+export declare class ChromesHandler extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
     private editingDataService;
     private dataFetcher;
     private resolvePageUrl;
     private resolveServerUrl;
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
-    constructor(config?: EditingRenderMiddlewareConfig);
-    /**
-     * Gets the Next.js API route handler
-     * @returns route handler
-     */
-    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
-    private handler;
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    render(req: NextApiRequest, res: NextApiResponse): Promise<void>;
     /**
      * Default page URL resolution.
-     * @param {string} serverUrl
-     * @param {string} itemPath
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+     * @returns {string} The URL to render
      */
     private defaultResolvePageUrl;
     /**
@@ -74,8 +89,81 @@ export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
      * @param {NextApiRequest} req
      */
     private defaultResolveServerUrl;
+    private extractEditingData;
+}
+/**
+ * Configuration for the Editing Metadata Handler.
+ */
+export type EditingRenderMiddlewareMetadataConfig = Pick<EditingRenderMiddlewareConfig, 'resolvePageUrl'>;
+/**
+ * Query parameters appended to the page route URL
+ * Appended when XMCloud Pages preview (editing) Metadata Edit Mode is used
+ */
+export type MetadataQueryParams = {
+    secret: string;
+    sc_lang: string;
+    sc_itemid: string;
+    sc_version: string;
+    sc_site: string;
+    route: string;
+    sc_variant: string;
+    mode: Exclude<LayoutServicePageState, 'normal'>;
+};
+/**
+ * Next.js API request with Metadata query parameters.
+ */
+type MetadataNextApiRequest = NextApiRequest & {
+    query: MetadataQueryParams;
+};
+/**
+ * Data for Next.js Preview (Editing) Metadata Edit Mode.
+ */
+export type EditingMetadataPreviewData = {
+    site: string;
+    itemId: string;
+    language: string;
+    variantId: string;
+    version: string;
+    editMode: EditMode.Metadata;
+    pageState: Exclude<LayoutServicePageState, 'Normal'>;
+};
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+export declare const isEditingMetadataPreviewData: (data: unknown) => data is EditingMetadataPreviewData;
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+export declare class MetadataHandler {
+    config: EditingRenderMiddlewareMetadataConfig;
+    constructor(config: EditingRenderMiddlewareMetadataConfig);
+    render(req: MetadataNextApiRequest, res: NextApiResponse): void;
+    /**
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
+     */
+    getSCPHeader(): string;
 }
 /**
- * @param {NextApiRequest} req
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
  */
-export declare function extractEditingData(req: NextApiRequest): EditingData;
+export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
+    private handler;
+}
+export {};

package/types/editing/index.d.ts

@@ -1,7 +1,8 @@
+export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
 export { EditingData } from './editing-data';
 export { EditingDataCache, EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware, EditingDataMiddlewareConfig } from './editing-data-middleware';
-export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, } from './editing-render-middleware';
+export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, EditingMetadataPreviewData, isEditingMetadataPreviewData, } from './editing-render-middleware';
 export { EditingPreviewData, EditingDataService, BasicEditingDataService, BasicEditingDataServiceConfig, ServerlessEditingDataService, ServerlessEditingDataServiceConfig, editingDataService, } from './editing-data-service';
 export { VercelEditingDataCache } from './vercel-editing-data-cache';
 export { FEAASRenderMiddleware, FEAASRenderMiddlewareConfig } from './feaas-render-middleware';

package/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { getPublicUrl, handleEditorFastRefresh } from './utils';
-export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';