From 812d72ee93cc3ced9802c7c8cc956d3da8d6f1ec Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Thu, 23 May 2024 16:42:55 -0400
Subject: [PATCH 1/7] add flag to disbale metadata for editmode

---
 .../src/pages/api/editing/config.ts           |  1 +
 .../editing/editing-config-middleware.test.ts | 75 +++++++------------
 .../src/editing/editing-config-middleware.ts  | 18 +++--
 3 files changed, 39 insertions(+), 55 deletions(-)

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
index 3643a51d19..625ee471d1 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
+++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
@@ -10,6 +10,7 @@ import metadata from 'temp/metadata.json';
 const handler = new EditingConfigMiddleware({
   components,
   metadata,
+  enableEditingMetadata: true,
 }).getHandler();
 
 export default handler;
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
index 1372b5c3ac..f1464dfa6a 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
@@ -9,16 +9,10 @@ type Query = {
   [key: string]: string;
 };
 
-const allowedOrigin = 'https://allowed.com';
-
-const mockRequest = (method: string, query?: Query, headers?: { [key: string]: string }) => {
+const mockRequest = (method: string, query?: Query) => {
   return {
     method,
     query: query ?? {},
-    headers: {
-      origin: allowedOrigin,
-      ...headers,
-    },
   } as NextApiRequest;
 };
 
@@ -30,12 +24,6 @@ const mockResponse = () => {
   res.json = spy(() => {
     return res;
   });
-  res.setHeader = spy(() => {
-    return res;
-  });
-  res.getHeader = spy(() => {
-    return undefined;
-  });
   return res;
 };
 
@@ -45,10 +33,18 @@ componentsMap.set('TestComponentOne', {});
 componentsMap.set('TestComponentTwo', {});
 const metadata = { packages: { testPackageOne: '0.1.1' } };
 
-const expectedResult = {
+const expectedResultWithChromes = {
+  components: ['TestComponentOne', 'TestComponentTwo'],
+  packages: { testPackageOne: '0.1.1' },
+  editMode: 'chromes',
+};
+
+const expectedResultWithMetadata = {
   components: ['TestComponentOne', 'TestComponentTwo'],
   packages: { testPackageOne: '0.1.1' },
+  editMode: 'metadata',
 };
+
 const expectedResultForbidden = { message: 'Missing or invalid editing secret' };
 
 describe('EditingConfigMiddleware', () => {
@@ -56,12 +52,10 @@ describe('EditingConfigMiddleware', () => {
 
   beforeEach(() => {
     process.env.JSS_EDITING_SECRET = secret;
-    process.env.JSS_ALLOWED_ORIGINS = allowedOrigin;
   });
 
   after(() => {
     delete process.env.JSS_EDITING_SECRET;
-    delete process.env.JSS_ALLOWED_ORIGINS;
   });
 
   it('should respond with 401 for missing secret', async () => {
@@ -80,20 +74,6 @@ describe('EditingConfigMiddleware', () => {
     expect(res.json).to.have.been.calledWith(expectedResultForbidden);
   });
 
-  it('should stop request and return 401 when CORS match is not met', async () => {
-    const req = mockRequest('GET', {}, { origin: 'https://notallowed.com' });
-    const res = mockResponse();
-    const middleware = new EditingConfigMiddleware({ components: componentsArray, metadata });
-    const handler = middleware.getHandler();
-
-    await handler(req, res);
-
-    expect(res.status).to.have.been.calledOnce;
-    expect(res.status).to.have.been.calledWith(401);
-    expect(res.json).to.have.been.calledOnce;
-    expect(res.json).to.have.been.calledWith({ message: 'Invalid origin' });
-  });
-
   it('should respond with 401 for invalid secret', async () => {
     const key = 'wrongkey';
     const query = { key } as Query;
@@ -111,14 +91,17 @@ describe('EditingConfigMiddleware', () => {
     expect(res.json).to.have.been.calledWith(expectedResultForbidden);
   });
 
-  it('should respond with 200 and return config data with components array as argument', async () => {
+  const testEditingConfig = async (
+    components: string[] | Map<string, unknown>,
+    enableEditingMetadata: boolean,
+    expectedResult
+  ) => {
     const key = 'wrongkey';
     const query = { key } as Query;
     query[QUERY_PARAM_EDITING_SECRET] = secret;
     const req = mockRequest('GET', query);
     const res = mockResponse();
-
-    const middleware = new EditingConfigMiddleware({ components: componentsArray, metadata });
+    const middleware = new EditingConfigMiddleware({ components, metadata, enableEditingMetadata });
     const handler = middleware.getHandler();
 
     await handler(req, res);
@@ -127,23 +110,21 @@ describe('EditingConfigMiddleware', () => {
     expect(res.status).to.have.been.calledWith(200);
     expect(res.json).to.have.been.calledOnce;
     expect(res.json).to.have.been.calledWith(expectedResult);
-  });
+  };
 
-  it('should respond with 200 and return config data with components map as argument', async () => {
-    const key = 'wrongkey';
-    const query = { key } as Query;
-    query[QUERY_PARAM_EDITING_SECRET] = secret;
-    const req = mockRequest('GET', query);
-    const res = mockResponse();
+  it('should respond with 200 and return config data with components array as argument and editMode as chromes', async () => {
+    await testEditingConfig(componentsArray, false, expectedResultWithChromes);
+  });
 
-    const middleware = new EditingConfigMiddleware({ components: componentsMap, metadata });
-    const handler = middleware.getHandler();
+  it('should respond with 200 and return config data with components map as argument and editMode as chromes', async () => {
+    await testEditingConfig(componentsMap, false, expectedResultWithChromes);
+  });
 
-    await handler(req, res);
+  it('should respond with 200 and return config data with components array as argument and editMode as metadata', async () => {
+    await testEditingConfig(componentsArray, true, expectedResultWithMetadata);
+  });
 
-    expect(res.status).to.have.been.calledOnce;
-    expect(res.status).to.have.been.calledWith(200);
-    expect(res.json).to.have.been.calledOnce;
-    expect(res.json).to.have.been.calledWith(expectedResult);
+  it('should respond with 200 and return config data with components map as argument and editMode as metadata', async () => {
+    await testEditingConfig(componentsMap, true, expectedResultWithMetadata);
   });
 });
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
index 2cefa06506..7c37b49672 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
@@ -1,9 +1,9 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
+import { 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 { Metadata } from '@sitecore-jss/sitecore-jss-dev-tools';
-import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
 
 export type EditingConfigMiddlewareConfig = {
   /**
@@ -14,6 +14,11 @@ export type EditingConfigMiddlewareConfig = {
    * Application metadata
    */
   metadata: Metadata;
+  /**
+   * Flag to enable/disable the new editing experience for Pages.
+   * Enabled by default
+   */
+  enableEditingMetadata?: boolean;
 };
 
 /**
@@ -36,12 +41,6 @@ export class EditingConfigMiddleware {
 
   private handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
     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"',
@@ -56,9 +55,12 @@ export class EditingConfigMiddleware {
       ? this.config.components
       : Array.from(this.config.components.keys());
 
+    const editMode = this.config.enableEditingMetadata ? EditMode.Metadata : EditMode.Chromes;
+
     return res.status(200).json({
       components,
       packages: this.config.metadata.packages,
+      editMode,
     });
   };
 }

From 7bf4214af25a6c07747d52f3f9231a79f273efa1 Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Thu, 23 May 2024 17:22:59 -0400
Subject: [PATCH 2/7] update changelog

---
 CHANGELOG.md                                         |  3 ++-
 .../src/editing/editing-config-middleware.test.ts    | 12 ++++++------
 .../src/editing/editing-config-middleware.ts         |  7 +++++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7b1e19828..81dc08520e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,12 +23,13 @@ Our versioning strategy is as follows:
 
 ### 🛠 Breaking Change
 
-*  Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))
+*  Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800)) ([#1803](https://github.com/Sitecore/jss/pull/1803))
   * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata.
   * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
   * `ComponentConsumerProps` is removed. You might need to reuse _WithSitecoreContextProps_ type.
   * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs.
   * `[sitecore-jss-react]` Introduced `EditingScripts` component to render clientScripts / clientData in editing.
+  * `[sitecore-jss-nextjs]` `[template/nextjs-xmlcoud]` Add editMode to /editing/config endpoint response with configurable integration option.
 
 ## 22.0.0
 
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
index f1464dfa6a..417cb5d37d 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
@@ -93,8 +93,8 @@ describe('EditingConfigMiddleware', () => {
 
   const testEditingConfig = async (
     components: string[] | Map<string, unknown>,
-    enableEditingMetadata: boolean,
-    expectedResult
+    expectedResult,
+    enableEditingMetadata?: boolean
   ) => {
     const key = 'wrongkey';
     const query = { key } as Query;
@@ -113,18 +113,18 @@ describe('EditingConfigMiddleware', () => {
   };
 
   it('should respond with 200 and return config data with components array as argument and editMode as chromes', async () => {
-    await testEditingConfig(componentsArray, false, expectedResultWithChromes);
+    await testEditingConfig(componentsArray, expectedResultWithChromes, false);
   });
 
   it('should respond with 200 and return config data with components map as argument and editMode as chromes', async () => {
-    await testEditingConfig(componentsMap, false, expectedResultWithChromes);
+    await testEditingConfig(componentsMap, expectedResultWithChromes, false);
   });
 
   it('should respond with 200 and return config data with components array as argument and editMode as metadata', async () => {
-    await testEditingConfig(componentsArray, true, expectedResultWithMetadata);
+    await testEditingConfig(componentsArray, expectedResultWithMetadata);
   });
 
   it('should respond with 200 and return config data with components map as argument and editMode as metadata', async () => {
-    await testEditingConfig(componentsMap, true, expectedResultWithMetadata);
+    await testEditingConfig(componentsMap, expectedResultWithMetadata);
   });
 });
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
index 7c37b49672..e089ccbaa0 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
@@ -26,10 +26,13 @@ export type EditingConfigMiddlewareConfig = {
  * provides configuration information to determine feature compatibility on Pages side.
  */
 export class EditingConfigMiddleware {
+  private enableEditingMetadata: boolean;
   /**
    * @param {EditingConfigMiddlewareConfig} [config] Editing configuration middleware config
    */
-  constructor(protected config: EditingConfigMiddlewareConfig) {}
+  constructor(protected config: EditingConfigMiddlewareConfig) {
+    this.enableEditingMetadata = config.enableEditingMetadata ?? true;
+  }
 
   /**
    * Gets the Next.js API route handler
@@ -55,7 +58,7 @@ export class EditingConfigMiddleware {
       ? this.config.components
       : Array.from(this.config.components.keys());
 
-    const editMode = this.config.enableEditingMetadata ? EditMode.Metadata : EditMode.Chromes;
+    const editMode = this.enableEditingMetadata ? EditMode.Metadata : EditMode.Chromes;
 
     return res.status(200).json({
       components,

From 86420d613deb997a74ee007083df92ef93b83220 Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Thu, 23 May 2024 17:39:50 -0400
Subject: [PATCH 3/7] refactor unit tests

---
 .../editing/editing-config-middleware.test.ts | 30 ++++++++++++++++++-
 .../src/editing/editing-config-middleware.ts  |  9 +++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
index 417cb5d37d..9a23f72d9d 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
@@ -9,10 +9,16 @@ type Query = {
   [key: string]: string;
 };
 
-const mockRequest = (method: string, query?: Query) => {
+const allowedOrigin = 'https://allowed.com';
+
+const mockRequest = (method: string, query?: Query, headers?: { [key: string]: string }) => {
   return {
     method,
     query: query ?? {},
+    headers: {
+      origin: allowedOrigin,
+      ...headers,
+    },
   } as NextApiRequest;
 };
 
@@ -24,6 +30,12 @@ const mockResponse = () => {
   res.json = spy(() => {
     return res;
   });
+  res.setHeader = spy(() => {
+    return res;
+  });
+  res.getHeader = spy(() => {
+    return undefined;
+  });
   return res;
 };
 
@@ -52,10 +64,12 @@ describe('EditingConfigMiddleware', () => {
 
   beforeEach(() => {
     process.env.JSS_EDITING_SECRET = secret;
+    process.env.JSS_ALLOWED_ORIGINS = allowedOrigin;
   });
 
   after(() => {
     delete process.env.JSS_EDITING_SECRET;
+    delete process.env.JSS_ALLOWED_ORIGINS;
   });
 
   it('should respond with 401 for missing secret', async () => {
@@ -74,6 +88,20 @@ describe('EditingConfigMiddleware', () => {
     expect(res.json).to.have.been.calledWith(expectedResultForbidden);
   });
 
+  it('should stop request and return 401 when CORS match is not met', async () => {
+    const req = mockRequest('GET', {}, { origin: 'https://notallowed.com' });
+    const res = mockResponse();
+    const middleware = new EditingConfigMiddleware({ components: componentsArray, metadata });
+    const handler = middleware.getHandler();
+
+    await handler(req, res);
+
+    expect(res.status).to.have.been.calledOnce;
+    expect(res.status).to.have.been.calledWith(401);
+    expect(res.json).to.have.been.calledOnce;
+    expect(res.json).to.have.been.calledWith({ message: 'Invalid origin' });
+  });
+
   it('should respond with 401 for invalid secret', async () => {
     const key = 'wrongkey';
     const query = { key } as Query;
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
index e089ccbaa0..a29fff069b 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
@@ -1,9 +1,10 @@
 import { NextApiRequest, NextApiResponse } from '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 { Metadata } from '@sitecore-jss/sitecore-jss-dev-tools';
+import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
 
 export type EditingConfigMiddlewareConfig = {
   /**
@@ -44,6 +45,12 @@ export class EditingConfigMiddleware {
 
   private handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
     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"',

From e41fcc98b36e8481d1917723e9dcd879aaf8e93a Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Thu, 23 May 2024 17:53:57 -0400
Subject: [PATCH 4/7] update yarn.lock

---
 yarn.lock | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index bc79ccb878..ca99953aa9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5529,7 +5529,7 @@ __metadata:
     "@angular/platform-browser": ~16.2.10
     "@angular/platform-browser-dynamic": ~16.2.10
     "@angular/router": ~16.2.10
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jasmine": ^3.4.1
     "@types/node": ^18.19.0
     codelyzer: ^6.0.1
@@ -5559,7 +5559,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-cli@workspace:packages/sitecore-jss-cli"
   dependencies:
-    "@sitecore-jss/sitecore-jss-dev-tools": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-dev-tools": 22.1.0-canary.16
     "@types/chai": ^4.2.4
     "@types/cross-spawn": ^6.0.2
     "@types/mocha": ^10.0.1
@@ -5591,14 +5591,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-dev-tools@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools":
+"@sitecore-jss/sitecore-jss-dev-tools@22.1.0-canary.16, @sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools"
   dependencies:
     "@babel/core": ^7.24.4
     "@babel/parser": ^7.24.0
     "@babel/register": ^7.23.7
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chokidar": ^2.1.3
     "@types/del": ^4.0.0
@@ -5650,11 +5650,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-forms@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms":
+"@sitecore-jss/sitecore-jss-forms@22.1.0-canary.16, @sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms"
   dependencies:
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-string": ^1.4.2
     "@types/lodash.unescape": ^4.0.7
@@ -5678,9 +5678,9 @@ __metadata:
   resolution: "@sitecore-jss/sitecore-jss-nextjs@workspace:packages/sitecore-jss-nextjs"
   dependencies:
     "@sitecore-cloudsdk/personalize": ^0.3.0
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
-    "@sitecore-jss/sitecore-jss-dev-tools": ^22.1.0-canary.16
-    "@sitecore-jss/sitecore-jss-react": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-dev-tools": 22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-react": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-as-promised": ^7.1.5
     "@types/chai-string": ^1.4.2
@@ -5754,7 +5754,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-react-forms@workspace:packages/sitecore-jss-react-forms"
   dependencies:
-    "@sitecore-jss/sitecore-jss-forms": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-forms": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/enzyme": ^3.10.12
     "@types/mocha": ^10.0.1
@@ -5794,7 +5794,7 @@ __metadata:
     "@babel/plugin-proposal-export-default-from": ^7.5.2
     "@babel/preset-env": ^7.6.2
     "@babel/preset-typescript": ^7.6.0
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jest": ^24.0.18
     "@types/prop-types": ^15.7.3
     "@types/react": ^16.9.5
@@ -5824,12 +5824,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-react@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react":
+"@sitecore-jss/sitecore-jss-react@22.1.0-canary.16, @sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react"
   dependencies:
     "@sitecore-feaas/clientside": ^0.5.6
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-string": ^1.4.2
     "@types/enzyme": ^3.10.12
@@ -5901,7 +5901,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-vue@workspace:packages/sitecore-jss-vue"
   dependencies:
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jest": ^29.2.6
     "@types/node": ^18.11.18
     "@vue/compiler-dom": ^3.2.45
@@ -5924,7 +5924,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss@^22.1.0-canary.16, @sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss":
+"@sitecore-jss/sitecore-jss@22.1.0-canary.16, @sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss"
   dependencies:

From 519c5ace869a4e33f3f3c69f9538c5df90be9168 Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Mon, 27 May 2024 14:52:18 -0400
Subject: [PATCH 5/7] rename new config option, update uprade guide

---
 docs/upgrades/unreleased.md                        | 11 ++++++++++-
 .../nextjs-xmcloud/src/pages/api/editing/config.ts |  1 -
 .../src/editing/editing-config-middleware.test.ts  |  9 +++++----
 .../src/editing/editing-config-middleware.ts       | 14 ++++++--------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
index 7fb590ef62..522b4c40ec 100644
--- a/docs/upgrades/unreleased.md
+++ b/docs/upgrades/unreleased.md
@@ -51,10 +51,19 @@
     ```
     import { EditingScripts } from '@sitecore-jss/sitecore-jss-nextjs';
     ...
-    const Scripts = (): JSX.Element | null => {
+    const Scripts = (): JSX.Element | null => (
         <>
         <EditingScripts />
         ...
         </>
     );
     ```
+
+* We have introduced a new configuration option, `pagesEditMode`, in the `\src\pages\api\editing\config.ts` file to support the new metadata architecture for pages. This option allows you to specify the editing mode used by Pages. It is set to `metadata` by default. However, if you don't prefer use `metadata` and continue using the existing architecture, you can explicitly set the `pagesEditMode` to `chromes`.
+
+    ```
+        const handler = new EditingConfigMiddleware({
+        ...
+        pagesEditMode: EditMode.Chromes,
+        }).getHandler();
+    ```
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
index 625ee471d1..3643a51d19 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
+++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts
@@ -10,7 +10,6 @@ import metadata from 'temp/metadata.json';
 const handler = new EditingConfigMiddleware({
   components,
   metadata,
-  enableEditingMetadata: true,
 }).getHandler();
 
 export default handler;
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
index 9a23f72d9d..acd8a8446c 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
 import { expect } from 'chai';
 import { EditingConfigMiddleware } from './editing-config-middleware';
 import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
 
 type Query = {
   [key: string]: string;
@@ -122,14 +123,14 @@ describe('EditingConfigMiddleware', () => {
   const testEditingConfig = async (
     components: string[] | Map<string, unknown>,
     expectedResult,
-    enableEditingMetadata?: boolean
+    pagesEditMode?: EditMode
   ) => {
     const key = 'wrongkey';
     const query = { key } as Query;
     query[QUERY_PARAM_EDITING_SECRET] = secret;
     const req = mockRequest('GET', query);
     const res = mockResponse();
-    const middleware = new EditingConfigMiddleware({ components, metadata, enableEditingMetadata });
+    const middleware = new EditingConfigMiddleware({ components, metadata, pagesEditMode });
     const handler = middleware.getHandler();
 
     await handler(req, res);
@@ -141,11 +142,11 @@ describe('EditingConfigMiddleware', () => {
   };
 
   it('should respond with 200 and return config data with components array as argument and editMode as chromes', async () => {
-    await testEditingConfig(componentsArray, expectedResultWithChromes, false);
+    await testEditingConfig(componentsArray, expectedResultWithChromes, EditMode.Chromes);
   });
 
   it('should respond with 200 and return config data with components map as argument and editMode as chromes', async () => {
-    await testEditingConfig(componentsMap, expectedResultWithChromes, false);
+    await testEditingConfig(componentsMap, expectedResultWithChromes, EditMode.Chromes);
   });
 
   it('should respond with 200 and return config data with components array as argument and editMode as metadata', async () => {
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
index a29fff069b..7be123f5e9 100644
--- a/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
+++ b/packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts
@@ -16,10 +16,11 @@ export type EditingConfigMiddlewareConfig = {
    */
   metadata: Metadata;
   /**
-   * Flag to enable/disable the new editing experience for Pages.
-   * Enabled by default
+   * Determines which editing mode should be used by Pages.
+   * Can be either 'chromes' or 'metadata'.
+   * By default its 'metadata'
    */
-  enableEditingMetadata?: boolean;
+  pagesEditMode?: EditMode;
 };
 
 /**
@@ -27,13 +28,10 @@ export type EditingConfigMiddlewareConfig = {
  * provides configuration information to determine feature compatibility on Pages side.
  */
 export class EditingConfigMiddleware {
-  private enableEditingMetadata: boolean;
   /**
    * @param {EditingConfigMiddlewareConfig} [config] Editing configuration middleware config
    */
-  constructor(protected config: EditingConfigMiddlewareConfig) {
-    this.enableEditingMetadata = config.enableEditingMetadata ?? true;
-  }
+  constructor(protected config: EditingConfigMiddlewareConfig) {}
 
   /**
    * Gets the Next.js API route handler
@@ -65,7 +63,7 @@ export class EditingConfigMiddleware {
       ? this.config.components
       : Array.from(this.config.components.keys());
 
-    const editMode = this.enableEditingMetadata ? EditMode.Metadata : EditMode.Chromes;
+    const editMode = this.config.pagesEditMode || EditMode.Metadata;
 
     return res.status(200).json({
       components,

From 79f6ac0a44394102a6fb819fdb62108dd861e15f Mon Sep 17 00:00:00 2001
From: Addy Pathania <aditya.pathania@sitecore.com>
Date: Tue, 28 May 2024 09:46:58 -0400
Subject: [PATCH 6/7] update upgrade guide

---
 docs/upgrades/unreleased.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
index 522b4c40ec..e316821a47 100644
--- a/docs/upgrades/unreleased.md
+++ b/docs/upgrades/unreleased.md
@@ -62,6 +62,8 @@
 * We have introduced a new configuration option, `pagesEditMode`, in the `\src\pages\api\editing\config.ts` file to support the new metadata architecture for pages. This option allows you to specify the editing mode used by Pages. It is set to `metadata` by default. However, if you don't prefer use `metadata` and continue using the existing architecture, you can explicitly set the `pagesEditMode` to `chromes`.
 
     ```
+        import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
+
         const handler = new EditingConfigMiddleware({
         ...
         pagesEditMode: EditMode.Chromes,

From 0fbdf7524e569e00939a5a18beefb3b794d69a2c Mon Sep 17 00:00:00 2001
From: Addy Pathania <89087450+sc-addypathania@users.noreply.github.com>
Date: Tue, 28 May 2024 09:47:22 -0400
Subject: [PATCH 7/7] Update docs/upgrades/unreleased.md

Co-authored-by: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com>
---
 docs/upgrades/unreleased.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
index e316821a47..6a58073502 100644
--- a/docs/upgrades/unreleased.md
+++ b/docs/upgrades/unreleased.md
@@ -59,7 +59,7 @@
     );
     ```
 
-* We have introduced a new configuration option, `pagesEditMode`, in the `\src\pages\api\editing\config.ts` file to support the new metadata architecture for pages. This option allows you to specify the editing mode used by Pages. It is set to `metadata` by default. However, if you don't prefer use `metadata` and continue using the existing architecture, you can explicitly set the `pagesEditMode` to `chromes`.
+* We have introduced a new configuration option, `pagesEditMode`, in the `\src\pages\api\editing\config.ts` file to support the new editing metadata architecture for Pages (XMCloud). This option allows you to specify the editing mode used by Pages. It is set to `metadata` by default. However, if you are not ready to use a new integration and continue using the existing architecture, you can explicitly set the `pagesEditMode` to `chromes`.
 
     ```
         import { EditMode } from '@sitecore-jss/sitecore-jss/layout';