@sitecore-content-sdk/content 1.5.0-canary.10

package/dist/cjs/editing/component-layout-service.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentLayoutService = void 0;
+const core_1 = require("@sitecore-content-sdk/core");
+const tools_1 = require("@sitecore-content-sdk/core/tools");
+const debug_1 = __importDefault(require("../debug"));
+const models_1 = require("./models");
+/**
+ * REST service that enables Design Library functionality.
+ * Returns layout data for a single rendered component.
+ * @public
+ */
+class ComponentLayoutService {
+    constructor(config) {
+        this.config = config;
+    }
+    fetchComponentData(params, fetchOptions) {
+        // Choose the correct Edge ID per environment
+        const sitecoreContextId = this.config.contextId || this.config.clientContextId;
+        if (!sitecoreContextId) {
+            throw new Error(`ComponentLayoutService misconfigured: contextId is missing.
+         Provide contextId on the server, and clientContextId in the browser if you need to full client-side functionality.`);
+        }
+        const fetcher = new core_1.NativeDataFetcher({ debugger: debug_1.default.layout });
+        debug_1.default.layout('fetching component with uid %s for %s %s %s %s', params.componentUid, params.itemId, params.language, params.siteName, params.dataSourceId);
+        return fetcher
+            .get(this.getFetchUrl(params), Object.assign(Object.assign({}, fetchOptions), { headers: Object.assign(Object.assign({}, fetchOptions === null || fetchOptions === void 0 ? void 0 : fetchOptions.headers), { 'x-sitecore-contextid': sitecoreContextId, sc_editMode: `${params.mode === models_1.DesignLibraryMode.Metadata}` }) }))
+            .then((response) => response.data)
+            .catch((error) => {
+            var _a;
+            if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404) {
+                return error.response.data;
+            }
+            throw error;
+        });
+    }
+    getComponentFetchParams(params) {
+        // strip undefined fields
+        return JSON.parse(JSON.stringify({
+            item: params.itemId,
+            uid: params.componentUid,
+            dataSourceId: params.dataSourceId,
+            renderingItemId: params.renderingId,
+            version: params.version,
+            sc_site: params.siteName,
+            sc_lang: params.language || 'en',
+        }));
+    }
+    /**
+     * Get the fetch URL for the partial layout data endpoint
+     * @param {ComponentLayoutRequestParams} params - The parameters for the request
+     * @returns {string} The fetch URL for the component data
+     */
+    getFetchUrl(params) {
+        var _a;
+        const baseUrl = (0, tools_1.normalizeUrl)((_a = this.config.edgeUrl) !== null && _a !== void 0 ? _a : core_1.constants.SITECORE_EDGE_PLATFORM_URL_DEFAULT);
+        return (0, tools_1.resolveUrl)(`${baseUrl}/layout/component`, this.getComponentFetchParams(params));
+    }
+}
+exports.ComponentLayoutService = ComponentLayoutService;

package/dist/cjs/editing/design-library.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postToDesignLibrary = exports.updateComponent = exports.updateComponentHandler = exports.validateEvent = exports.validateOrigin = exports.addComponentUpdateHandler = exports.DesignLibraryStatus = exports.COMPONENT_PREVIEW_CACHE_KEY_PREFIX = exports.COMPONENT_UPDATE_CACHE_KEY_PREFIX = void 0;
+exports.getDesignLibraryStatusEvent = getDesignLibraryStatusEvent;
+exports.getDesignLibraryScriptLink = getDesignLibraryScriptLink;
+exports.isDesignLibraryMode = isDesignLibraryMode;
+const core_1 = require("@sitecore-content-sdk/core");
+const tools_1 = require("@sitecore-content-sdk/core/tools");
+const models_1 = require("./models");
+/**
+ * Event to be sent when report status to design library
+ */
+const DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
+/**
+ * Prefix for component update cache keys
+ * @internal
+ */
+exports.COMPONENT_UPDATE_CACHE_KEY_PREFIX = 'component-update-';
+/**
+ * Prefix for component preview cache keys
+ * @internal
+ */
+exports.COMPONENT_PREVIEW_CACHE_KEY_PREFIX = 'component-preview-';
+/**
+ * Enumeration of statuses for the design library.
+ * @internal
+ */
+var DesignLibraryStatus;
+(function (DesignLibraryStatus) {
+    DesignLibraryStatus["READY"] = "ready";
+    DesignLibraryStatus["RENDERED"] = "rendered";
+})(DesignLibraryStatus || (exports.DesignLibraryStatus = DesignLibraryStatus = {}));
+/**
+ * Adds the browser-side event handler for 'component:update' message used in Design Library
+ * The event should update a component on page by uid, with fields and params from event args
+ * @param {ComponentRendering} rootComponent root component displayed for Design Library page
+ * @param {Function} successCallback  callback to be called after successful component update
+ * @internal
+ */
+const addComponentUpdateHandler = (rootComponent, successCallback) => {
+    if (!window)
+        return;
+    const handler = (e) => (0, exports.updateComponentHandler)(e, rootComponent, successCallback);
+    window.addEventListener('message', handler);
+    // the power to remove handler outside of this function, if needed
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+exports.addComponentUpdateHandler = addComponentUpdateHandler;
+const validateOrigin = (event) => {
+    // TODO: use `EDITING_ALLOWED_ORIGINS.concat(getAllowedOriginsFromEnv())` later
+    // nextjs's JSS_ALLOWED_ORIGINS is not available on the client, need to use NEXT_PUBLIC_ variable, but it's a breaking change for Deploy
+    const allowedOrigins = ['*'];
+    return allowedOrigins.some((origin) => origin === event.origin ||
+        new RegExp('^' + origin.replace('.', '\\.').replace(/\*/g, '.*') + '$').test(event.origin));
+};
+exports.validateOrigin = validateOrigin;
+/**
+ * Validates that a MessageEvent has the expected event name and required data.
+ * Logs debug information when validation fails due to invalid origin.
+ * @param {MessageEvent} e - The message event to validate.
+ * @param {string} eventName - The expected event name to match against e.data.name.
+ * @returns {boolean} True if the event has a valid origin, data object, and matching event name; otherwise false.
+ */
+const validateEvent = (e, eventName) => {
+    if (!e.origin || !e.data || e.data.name !== eventName) {
+        // avoid extra noise in logs
+        if (!(0, exports.validateOrigin)(e)) {
+            console.debug('Component Library: event skipped - invalid origin: message %s from origin %s', e.data.name, e.origin);
+        }
+        return false;
+    }
+    return true;
+};
+exports.validateEvent = validateEvent;
+const updateComponentHandler = (e, rootComponent, successCallback) => {
+    var _a;
+    const eventArgs = e.data;
+    if (!e.origin || !eventArgs || eventArgs.name !== 'component:update') {
+        // avoid extra noise in logs
+        if (!(0, exports.validateOrigin)(e)) {
+            console.debug('Component Library: event skipped: message %s from origin %s', eventArgs.name, e.origin);
+        }
+        return;
+    }
+    if (!((_a = eventArgs.details) === null || _a === void 0 ? void 0 : _a.uid)) {
+        console.debug('Received component:update event without uid, aborting event handler...');
+        return;
+    }
+    const findComponent = (root) => {
+        var _a, _b;
+        if (((_a = root.uid) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = eventArgs.details) === null || _b === void 0 ? void 0 : _b.uid.toLowerCase()))
+            return root;
+        if (root.placeholders) {
+            for (const plhName of Object.keys(root.placeholders)) {
+                for (const rendering of root.placeholders[plhName]) {
+                    const result = findComponent(rendering);
+                    if (result)
+                        return result;
+                }
+            }
+        }
+        return null;
+    };
+    const componentToUpdate = findComponent(rootComponent);
+    if (componentToUpdate) {
+        console.debug('Found component with uid %s to update. Update fields: %o. Update params: %o.', eventArgs.details.uid, eventArgs.details.fields, eventArgs.details.params);
+        (0, exports.updateComponent)(componentToUpdate, eventArgs.details.fields, eventArgs.details.params);
+        if (successCallback)
+            successCallback(rootComponent);
+    }
+    else {
+        console.debug('Rendering with uid %s not found', eventArgs.details.uid);
+    }
+    // strictly for testing
+    return rootComponent;
+};
+exports.updateComponentHandler = updateComponentHandler;
+/**
+ * Updates a component's fields and params with the provided values.
+ * @param {ComponentRendering<ComponentFields>} component - The component to update.
+ * @param {ComponentFields | undefined} fields - The fields to merge into the component.
+ * @param {ComponentParams | undefined} params - The params to merge into the component.
+ * @internal
+ */
+const updateComponent = (component, fields, params) => {
+    if (fields) {
+        component.fields = Object.assign(Object.assign({}, component.fields), fields);
+    }
+    if (params) {
+        component.params = Object.assign(Object.assign({}, component.params), params);
+    }
+};
+exports.updateComponent = updateComponent;
+/**
+ * Generates a DesignLibraryStatusEvent with the given status and uid.
+ * @param {DesignLibraryStatus} status - The status of rendering.
+ * @param {string} uid - The unique identifier for the event.
+ * @param {boolean} [isRenderingServerComponent] - Indicates if the component being rendered is a server component.
+ * @returns An object representing the DesignLibraryStatusEvent.
+ * @internal
+ */
+function getDesignLibraryStatusEvent(status, uid, isRenderingServerComponent = false) {
+    return {
+        name: DESIGN_LIBRARY_STATUS_EVENT_NAME,
+        message: {
+            status,
+            uid,
+            isRenderingServerComponent,
+        },
+    };
+}
+/**
+ * Generates the URL for the design library script link.
+ * Caller should pass the resolved Edge URL from config.
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL (resolved at config level). Defaults to platform URL.
+ * @returns The full URL to the design library script.
+ * @internal
+ */
+function getDesignLibraryScriptLink(sitecoreEdgeUrl = core_1.constants.SITECORE_EDGE_PLATFORM_URL_DEFAULT) {
+    return `${(0, tools_1.normalizeUrl)(sitecoreEdgeUrl)}/v1/files/designlibrary/lib/rh-lib-script.js`;
+}
+/**
+ * Checks if the given mode is a Design Library mode.
+ * @param {unknown} mode - The mode to check.
+ * @returns {boolean} True if the mode is a Design Library mode, false otherwise.
+ * @internal
+ */
+function isDesignLibraryMode(mode) {
+    return mode === models_1.DesignLibraryMode.Normal || mode === models_1.DesignLibraryMode.Metadata;
+}
+/**
+ * Sends an event to the Design Library
+ * @param {DesignLibraryEvent} evt - The event object to send.
+ * @internal
+ */
+const postToDesignLibrary = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
+};
+exports.postToDesignLibrary = postToDesignLibrary;

package/dist/cjs/editing/editing-service.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditingService = exports.query = void 0;
+const debug_1 = __importDefault(require("../debug"));
+const models_1 = require("./models");
+/**
+ * GraphQL query for fetching editing data.
+ */
+exports.query = `
+  query EditingQuery($itemId: String!, $language: String!, $version: String) {
+    item(path: $itemId, language: $language, version: $version) {
+      rendered
+    }
+  }
+`;
+/**
+ * Service for fetching editing data from Sitecore using the Sitecore's GraphQL API.
+ * Expected to be used in XMCloud Pages preview (editing) Metadata Edit Mode.
+ * @public
+ */
+class EditingService {
+    /**
+     * Fetch layout data using the Sitecore GraphQL endpoint.
+     * @param {EditingServiceConfig} serviceConfig configuration
+     */
+    constructor(serviceConfig) {
+        this.serviceConfig = serviceConfig;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * Fetches editing data. Provides the layout data and dictionary phrases
+     * @param {object} variables - The parameters for fetching editing data.
+     * @param {string} variables.itemId - The item id (path) to fetch layout data for.
+     * @param {string} variables.language - The language to fetch layout data for.
+     * @param {string} variables.mode - The editing mode to fetch layout data for.
+     * @param {string} [variables.version] - The version of the item (optional).
+     * @param {LayoutKind} [variables.layoutKind] - The final or shared layout variant.
+     * @param {FetchOptions} [fetchOptions] Options to override graphQL client details like retries and fetch implementation
+     * @returns {Promise} The layout data and dictionary phrases.
+     */
+    async fetchEditingData({ itemId, language, version, layoutKind = models_1.LayoutKind.Final, mode }, fetchOptions) {
+        var _a;
+        debug_1.default.editing('fetching editing data for %s %s %s %s', itemId, language, version, layoutKind);
+        if (!language) {
+            throw new RangeError('The language must be a non-empty string');
+        }
+        const editModeHeader = mode === 'edit' ? 'true' : 'false';
+        const editingData = await this.graphQLClient.request(exports.query, {
+            itemId,
+            version,
+            language,
+        }, Object.assign(Object.assign({}, fetchOptions), { headers: {
+                sc_layoutKind: layoutKind,
+                sc_editMode: editModeHeader,
+            } }));
+        const layoutData = ((_a = editingData === null || editingData === void 0 ? void 0 : editingData.item) === null || _a === void 0 ? void 0 : _a.rendered) || {
+            sitecore: {
+                context: { pageEditing: true, language },
+                route: null,
+            },
+        };
+        return {
+            layoutData,
+        };
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.serviceConfig.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.serviceConfig.clientFactory({
+            debugger: debug_1.default.editing,
+        });
+    }
+}
+exports.EditingService = EditingService;

package/dist/cjs/editing/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateComponent = exports.COMPONENT_PREVIEW_CACHE_KEY_PREFIX = exports.COMPONENT_UPDATE_CACHE_KEY_PREFIX = exports.postToDesignLibrary = exports.isDesignLibraryMode = exports.getDesignLibraryScriptLink = exports.getDesignLibraryStatusEvent = exports.DesignLibraryStatus = exports.addComponentUpdateHandler = exports.DesignLibraryMode = exports.MetadataKind = exports.LayoutKind = exports.DesignLibraryVariantGeneration = exports.ComponentLayoutService = exports.PREVIEW_KEY = exports.PAGES_EDITING_MARKER = exports.INVALID_SECRET_HTML_MESSAGE = exports.QUERY_PARAM_EDITING_SECRET = exports.EDITING_ALLOWED_ORIGINS = exports.getContentSdkPagesClientData = exports.resetEditorChromes = exports.isEditorActive = exports.PagesEditor = exports.DEFAULT_PLACEHOLDER_UID = exports.EditingService = void 0;
+var editing_service_1 = require("./editing-service");
+Object.defineProperty(exports, "EditingService", { enumerable: true, get: function () { return editing_service_1.EditingService; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_UID", { enumerable: true, get: function () { return utils_1.DEFAULT_PLACEHOLDER_UID; } });
+Object.defineProperty(exports, "PagesEditor", { enumerable: true, get: function () { return utils_1.PagesEditor; } });
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
+Object.defineProperty(exports, "getContentSdkPagesClientData", { enumerable: true, get: function () { return utils_1.getContentSdkPagesClientData; } });
+Object.defineProperty(exports, "EDITING_ALLOWED_ORIGINS", { enumerable: true, get: function () { return utils_1.EDITING_ALLOWED_ORIGINS; } });
+Object.defineProperty(exports, "QUERY_PARAM_EDITING_SECRET", { enumerable: true, get: function () { return utils_1.QUERY_PARAM_EDITING_SECRET; } });
+Object.defineProperty(exports, "INVALID_SECRET_HTML_MESSAGE", { enumerable: true, get: function () { return utils_1.INVALID_SECRET_HTML_MESSAGE; } });
+Object.defineProperty(exports, "PAGES_EDITING_MARKER", { enumerable: true, get: function () { return utils_1.PAGES_EDITING_MARKER; } });
+Object.defineProperty(exports, "PREVIEW_KEY", { enumerable: true, get: function () { return utils_1.PREVIEW_KEY; } });
+var component_layout_service_1 = require("./component-layout-service");
+Object.defineProperty(exports, "ComponentLayoutService", { enumerable: true, get: function () { return component_layout_service_1.ComponentLayoutService; } });
+var models_1 = require("./models");
+Object.defineProperty(exports, "DesignLibraryVariantGeneration", { enumerable: true, get: function () { return models_1.DesignLibraryVariantGeneration; } });
+var models_2 = require("./models");
+Object.defineProperty(exports, "LayoutKind", { enumerable: true, get: function () { return models_2.LayoutKind; } });
+Object.defineProperty(exports, "MetadataKind", { enumerable: true, get: function () { return models_2.MetadataKind; } });
+Object.defineProperty(exports, "DesignLibraryMode", { enumerable: true, get: function () { return models_2.DesignLibraryMode; } });
+var design_library_1 = require("./design-library");
+Object.defineProperty(exports, "addComponentUpdateHandler", { enumerable: true, get: function () { return design_library_1.addComponentUpdateHandler; } });
+Object.defineProperty(exports, "DesignLibraryStatus", { enumerable: true, get: function () { return design_library_1.DesignLibraryStatus; } });
+Object.defineProperty(exports, "getDesignLibraryStatusEvent", { enumerable: true, get: function () { return design_library_1.getDesignLibraryStatusEvent; } });
+Object.defineProperty(exports, "getDesignLibraryScriptLink", { enumerable: true, get: function () { return design_library_1.getDesignLibraryScriptLink; } });
+Object.defineProperty(exports, "isDesignLibraryMode", { enumerable: true, get: function () { return design_library_1.isDesignLibraryMode; } });
+Object.defineProperty(exports, "postToDesignLibrary", { enumerable: true, get: function () { return design_library_1.postToDesignLibrary; } });
+Object.defineProperty(exports, "COMPONENT_UPDATE_CACHE_KEY_PREFIX", { enumerable: true, get: function () { return design_library_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX; } });
+Object.defineProperty(exports, "COMPONENT_PREVIEW_CACHE_KEY_PREFIX", { enumerable: true, get: function () { return design_library_1.COMPONENT_PREVIEW_CACHE_KEY_PREFIX; } });
+Object.defineProperty(exports, "updateComponent", { enumerable: true, get: function () { return design_library_1.updateComponent; } });

package/dist/cjs/editing/models.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryVariantGeneration = exports.DesignLibraryMode = exports.MetadataKind = exports.LayoutKind = void 0;
+/**
+ * Represents the Editing Layout variant.
+ * - shared - shared layout
+ * - final - final layout
+ * @public
+ */
+var LayoutKind;
+(function (LayoutKind) {
+    LayoutKind["Final"] = "final";
+    LayoutKind["Shared"] = "shared";
+})(LayoutKind || (exports.LayoutKind = LayoutKind = {}));
+/**
+ * Represents the kind of metadata element.
+ * - open - starting chrome element
+ * - close - closing chrome element
+ * @internal
+ */
+var MetadataKind;
+(function (MetadataKind) {
+    MetadataKind["Open"] = "open";
+    MetadataKind["Close"] = "close";
+})(MetadataKind || (exports.MetadataKind = MetadataKind = {}));
+/**
+ * Represents the mode of the Design Library
+ * @public
+ */
+var DesignLibraryMode;
+(function (DesignLibraryMode) {
+    /** Normal mode */
+    DesignLibraryMode["Normal"] = "library";
+    /** Metadata mode */
+    DesignLibraryMode["Metadata"] = "library-metadata";
+})(DesignLibraryMode || (exports.DesignLibraryMode = DesignLibraryMode = {}));
+/**
+ * Variant generation mode for Design Library
+ * @public
+ */
+var DesignLibraryVariantGeneration;
+(function (DesignLibraryVariantGeneration) {
+    DesignLibraryVariantGeneration["Variant"] = "variant";
+})(DesignLibraryVariantGeneration || (exports.DesignLibraryVariantGeneration = DesignLibraryVariantGeneration = {}));

package/dist/cjs/editing/utils.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContentSdkPagesClientData = exports.resetEditorChromes = exports.isEditorActive = exports.PagesEditor = exports.ChromeRediscoveryGlobalFunctionName = exports.EDITING_ALLOWED_ORIGINS = exports.PAGES_EDITING_MARKER = exports.PREVIEW_KEY = exports.INVALID_SECRET_HTML_MESSAGE = exports.QUERY_PARAM_EDITING_SECRET = exports.DEFAULT_PLACEHOLDER_UID = void 0;
+const tools_1 = require("@sitecore-content-sdk/core/tools");
+/**
+ * Default value of uid for root placeholder when uid is not present.
+ * @internal
+ */
+exports.DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
+/**
+ * Query parameter for editing secret
+ * @internal
+ */
+exports.QUERY_PARAM_EDITING_SECRET = 'secret';
+/**
+ * HTML returned for invalid or missing secret
+ * @internal
+ */
+exports.INVALID_SECRET_HTML_MESSAGE = '<html><body>Missing or invalid secret</body></html>';
+/**
+ * Key to identify whether the app is running in Sitecore Preview mode
+ * @internal
+ */
+exports.PREVIEW_KEY = 'sc_preview';
+/**
+ * ID to be used as a marker for a script rendered in XMC Pages
+ * Should identify app is in XM Cloud Pages editing mode
+ * @internal
+ */
+exports.PAGES_EDITING_MARKER = 'jss-hrz-editing';
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ * @internal
+ */
+exports.EDITING_ALLOWED_ORIGINS = [
+    'https://pages.sitecorecloud.io',
+    'https://xmapps.sitecorecloud.io',
+    'https://designlibrary.sitecorecloud.io',
+];
+/**
+ * Copy of chrome rediscovery contract from Horizon (chrome-rediscovery.contract.ts)
+ */
+exports.ChromeRediscoveryGlobalFunctionName = {
+    name: 'Sitecore.Horizon.ResetChromes',
+};
+/**
+ * Static utility class for Sitecore Pages Editor
+ * @public
+ */
+class PagesEditor {
+    /**
+     * Determines whether the current execution context is within a Pages Editor.
+     * Pages Editor environment can be identified only in the browser
+     * @returns true if executing within a Pages Editor
+     */
+    static isActive() {
+        if ((0, tools_1.isServer)()) {
+            return false;
+        }
+        // Check for Chromes mode
+        const chromesCheck = window.location.search.indexOf('sc_headless_mode=edit') > -1;
+        // Content SDK will render a content-sdk-exclusive script element in Metadata mode to indicate edit mode in Pages
+        return chromesCheck || !!window.document.getElementById(exports.PAGES_EDITING_MARKER);
+    }
+    static resetChromes() {
+        if ((0, tools_1.isServer)()) {
+            return;
+        }
+        // Reset chromes in Pages
+        window[exports.ChromeRediscoveryGlobalFunctionName.name] &&
+            window[exports.ChromeRediscoveryGlobalFunctionName.name]();
+    }
+}
+exports.PagesEditor = PagesEditor;
+/**
+ * Determines whether the current execution context is within a Sitecore editor.
+ * Sitecore Editor environment can be identified only in the browser
+ * @returns true if executing within a Sitecore editor
+ * @public
+ */
+const isEditorActive = () => {
+    return PagesEditor.isActive();
+};
+exports.isEditorActive = isEditorActive;
+/**
+ * Resets Sitecore editor "chromes"
+ * @public
+ */
+const resetEditorChromes = () => {
+    if (PagesEditor.isActive()) {
+        PagesEditor.resetChromes();
+    }
+};
+exports.resetEditorChromes = resetEditorChromes;
+/**
+ * Gets extra Content SDK clientData scripts to render in XMC Pages in addition to clientData from Pages itself
+ * @returns {Record} collection of clientData
+ * @internal
+ */
+const getContentSdkPagesClientData = () => {
+    const clientData = {};
+    clientData[exports.PAGES_EDITING_MARKER] = {};
+    return clientData;
+};
+exports.getContentSdkPagesClientData = getContentSdkPagesClientData;

package/dist/cjs/form/form.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToFormSubmitEvent = exports.executeScriptElements = exports.loadForm = void 0;
+const browser_1 = require("@sitecore-cloudsdk/events/browser");
+const client_1 = require("../client");
+const debug_1 = __importDefault(require("../debug"));
+/**
+ * Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
+ * @param {string} contextId - The unique identifier of the current context
+ * @param {string} formId - The unique identifier of the form
+ * @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
+ * @internal
+ */
+const loadForm = async (contextId, formId, edgeUrl) => {
+    if (!contextId) {
+        debug_1.default.form('Form was not able to render since context id was not provided');
+        return '';
+    }
+    const url = (0, client_1.getEdgeProxyFormsUrl)(contextId, formId, edgeUrl);
+    try {
+        debug_1.default.form(`Fetching form data from ${url}`);
+        const rsp = await fetch(url, {
+            method: 'GET',
+            cache: 'no-cache',
+        });
+        if (rsp.status !== 200) {
+            throw new Error('Failed to fetch form data');
+        }
+        const content = await rsp.text();
+        debug_1.default.form(`Form data fetch response: ${content}`);
+        return content;
+    }
+    catch (error) {
+        debug_1.default.form(`Form '${formId}' was not able to render`, error);
+        throw error;
+    }
+};
+exports.loadForm = loadForm;
+/**
+ * When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
+ * This method ensures that any <script> elements within the loaded HTML are executed.
+ * It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
+ * @param {HTMLElement} rootElement - The root element to execute script elements within
+ * @internal
+ */
+const executeScriptElements = (rootElement) => {
+    const scriptElements = rootElement.querySelectorAll('script');
+    if (!scriptElements) {
+        return;
+    }
+    Array.from(scriptElements).forEach((scriptElement) => {
+        var _a;
+        const clonedElement = document.createElement('script');
+        Array.from(scriptElement.attributes).forEach((attribute) => {
+            clonedElement.setAttribute(attribute.name, attribute.value);
+        });
+        clonedElement.text = scriptElement.text;
+        (_a = scriptElement === null || scriptElement === void 0 ? void 0 : scriptElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(clonedElement, scriptElement);
+    });
+};
+exports.executeScriptElements = executeScriptElements;
+/**
+ * Subscribes to the Form event
+ * This listener captures interactions such as form views or submissions
+ * @param {HTMLElement} formElement - The form element to subscribe to events on
+ * @param {string} [componentId] - The unique identifier of the component
+ * @internal
+ */
+const subscribeToFormSubmitEvent = (formElement, componentId) => {
+    formElement.addEventListener('form:engage', ((e) => {
+        const { formId, name } = e.detail;
+        if (formId && name) {
+            debug_1.default.form('Sending form event', formId, name);
+            (0, browser_1.form)(formId, name, (componentId === null || componentId === void 0 ? void 0 : componentId.replace(/-/g, '')) || '');
+        }
+    }));
+};
+exports.subscribeToFormSubmitEvent = subscribeToFormSubmitEvent;

package/dist/cjs/form/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToFormSubmitEvent = exports.loadForm = exports.executeScriptElements = void 0;
+var form_1 = require("./form");
+Object.defineProperty(exports, "executeScriptElements", { enumerable: true, get: function () { return form_1.executeScriptElements; } });
+Object.defineProperty(exports, "loadForm", { enumerable: true, get: function () { return form_1.loadForm; } });
+Object.defineProperty(exports, "subscribeToFormSubmitEvent", { enumerable: true, get: function () { return form_1.subscribeToFormSubmitEvent; } });