@contentful/experiences-sdk-react 1.15.2-dev-20240912T1641-eb25944.0 → 1.16.0-beta.0

package/dist/ExperienceRoot.js

@@ -3,17 +3,21 @@ import { jsx } from 'react/jsx-runtime';
 import { createExperience, validateExperienceBuilderConfig, VisualEditorMode } from '@contentful/experiences-core';
 import { PreviewDeliveryRoot } from './blocks/preview/PreviewDeliveryRoot.js';
 import { VisualEditorRoot } from './blocks/editor/VisualEditorRoot.js';
-import { useDetectEditorMode } from './hooks/useDetectEditorMode.js';
+import { useDetectCanvasMode } from './hooks/useDetectCanvasMode.js';
+import { StudioCanvasMode } from '@contentful/experiences-core/constants';
 
 const ExperienceRoot = ({ locale, experience, visualEditorMode = VisualEditorMode.LazyLoad, }) => {
-    const isEditorMode = useDetectEditorMode();
+    const mode = useDetectCanvasMode();
     //If experience is passed in as a JSON string, recreate it to an experience object
     const experienceObject = typeof experience === 'string' ? createExperience(experience) : experience;
     validateExperienceBuilderConfig({
         locale,
-        isEditorMode,
+        mode,
     });
-    if (isEditorMode) {
+    if (mode === StudioCanvasMode.EDITOR) {
+        return (jsx(VisualEditorRoot, { experience: experienceObject, visualEditorMode: visualEditorMode, initialLocale: locale }));
+    }
+    if (mode === StudioCanvasMode.READ_ONLY) {
         return (jsx(VisualEditorRoot, { experience: experienceObject, visualEditorMode: visualEditorMode, initialLocale: locale }));
     }
     if (!experienceObject)

package/dist/ExperienceRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExperienceRoot.js","sources":["../../src/ExperienceRoot.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport {\n  VisualEditorMode,\n  createExperience,\n  validateExperienceBuilderConfig,\n} from '@contentful/experiences-core';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\nimport { PreviewDeliveryRoot } from './blocks/preview/PreviewDeliveryRoot';\nimport VisualEditorRoot from './blocks/editor/VisualEditorRoot';\nimport { useDetectEditorMode } from './hooks/useDetectEditorMode';\n\ntype ExperienceRootProps = {\n  experience?: Experience<EntityStore> | string | null;\n  locale: string;\n  visualEditorMode?: VisualEditorMode;\n};\n\nexport const ExperienceRoot = ({\n  locale,\n  experience,\n  visualEditorMode = VisualEditorMode.LazyLoad,\n}: ExperienceRootProps) => {\n  const isEditorMode = useDetectEditorMode();\n  //If experience is passed in as a JSON string, recreate it to an experience object\n  const experienceObject =\n    typeof experience === 'string' ? createExperience(experience) : experience;\n\n  validateExperienceBuilderConfig({\n    locale,\n    isEditorMode,\n  });\n\n  if (isEditorMode) {\n    return (\n      <VisualEditorRoot\n        experience={experienceObject as Experience<EntityStore> | undefined}\n        visualEditorMode={visualEditorMode}\n        initialLocale={locale}\n      />\n    );\n  }\n\n  if (!experienceObject) return null;\n\n  return <PreviewDeliveryRoot locale={locale} experience={experienceObject} />;\n};\n"],"names":[],"mappings":";;;;;;;AAmBa;AAKX;;AAEA;AAGA;;;AAGC;;AAGC;;AASF;AAAuB;;AAGzB;;"}
+{"version":3,"file":"ExperienceRoot.js","sources":["../../src/ExperienceRoot.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport {\n  VisualEditorMode,\n  createExperience,\n  validateExperienceBuilderConfig,\n} from '@contentful/experiences-core';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\nimport { PreviewDeliveryRoot } from './blocks/preview/PreviewDeliveryRoot';\nimport VisualEditorRoot from './blocks/editor/VisualEditorRoot';\nimport { useDetectCanvasMode } from './hooks/useDetectCanvasMode';\nimport { StudioCanvasMode } from '@contentful/experiences-core/constants';\n\ntype ExperienceRootProps = {\n  experience?: Experience<EntityStore> | string | null;\n  locale: string;\n  visualEditorMode?: VisualEditorMode;\n};\n\nexport const ExperienceRoot = ({\n  locale,\n  experience,\n  visualEditorMode = VisualEditorMode.LazyLoad,\n}: ExperienceRootProps) => {\n  const mode = useDetectCanvasMode();\n\n  //If experience is passed in as a JSON string, recreate it to an experience object\n  const experienceObject =\n    typeof experience === 'string' ? createExperience(experience) : experience;\n\n  validateExperienceBuilderConfig({\n    locale,\n    mode,\n  });\n\n  if (mode === StudioCanvasMode.EDITOR) {\n    return (\n      <VisualEditorRoot\n        experience={experienceObject as Experience<EntityStore> | undefined}\n        visualEditorMode={visualEditorMode}\n        initialLocale={locale}\n      />\n    );\n  }\n\n  if (mode === StudioCanvasMode.READ_ONLY) {\n    return (\n      <VisualEditorRoot\n        experience={experienceObject as Experience<EntityStore> | undefined}\n        visualEditorMode={visualEditorMode}\n        initialLocale={locale}\n      />\n    );\n  }\n\n  if (!experienceObject) return null;\n\n  return <PreviewDeliveryRoot locale={locale} experience={experienceObject} />;\n};\n"],"names":[],"mappings":";;;;;;;;AAoBa;AAKX;;AAGA;AAGA;;;AAGC;AAED;AACE;;AASF;AACE;;AASF;AAAuB;;AAGzB;;"}

package/dist/blocks/preview/PreviewDeliveryRoot.js

@@ -3,8 +3,8 @@ import { CompositionBlock } from './CompositionBlock.js';
 import { compatibleVersions } from '../../constants.js';
 import { useBreakpoints } from '../../hooks/useBreakpoints.js';
 import 'react';
-import '@contentful/experiences-core';
 import '@contentful/experiences-core/constants';
+import '@contentful/experiences-core';
 
 const PreviewDeliveryRoot = ({ locale, experience }) => {
     const { entityStore } = experience;

package/dist/hooks/useDetectCanvasMode.js

@@ -0,0 +1,77 @@
+"use client";
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { doesMismatchMessageSchema, tryParseMessage, sendMessage } from '@contentful/experiences-core';
+import { StudioCanvasMode, INCOMING_EVENTS, OUTGOING_EVENTS } from '@contentful/experiences-core/constants';
+import { sdkFeatures } from '../core/sdkFeatures.js';
+
+const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
+    const [mounted, setMounted] = useState(false);
+    const recievedModeMessage = useRef(false);
+    const [mode, setMode] = useState(() => {
+        // if we are client side and running in an iframe, then initialize to read only,
+        // Editor mode can be requested later.
+        if (isClientSide && inIframe()) {
+            return StudioCanvasMode.READ_ONLY;
+        }
+        else {
+            return StudioCanvasMode.NONE;
+        }
+    });
+    const onMessage = useCallback((event) => {
+        if (doesMismatchMessageSchema(event)) {
+            return;
+        }
+        const eventData = tryParseMessage(event);
+        const isRequestingCanvasMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode ||
+            eventData.eventType === INCOMING_EVENTS.RequestReadOnlyMode;
+        if (!isRequestingCanvasMode) {
+            return;
+        }
+        const isEditorMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode;
+        const mode = isEditorMode ? StudioCanvasMode.EDITOR : StudioCanvasMode.READ_ONLY;
+        recievedModeMessage.current = true;
+        setMode(mode);
+        if (typeof window !== 'undefined') {
+            // Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made
+            if (!window.__EB__) {
+                window.__EB__ = {};
+            }
+            window.__EB__.isReadOnlyMode = !isEditorMode;
+            window.__EB__.isEditorMode = isEditorMode;
+        }
+        window.removeEventListener('message', onMessage);
+    }, []);
+    useEffect(() => {
+        const handleHandshakeTimeout = () => {
+            if (!recievedModeMessage.current) {
+                setMode(StudioCanvasMode.NONE);
+            }
+        };
+        // Only run check after component is mounted on the client to avoid hydration ssr issues
+        if (mounted) {
+            // Double check if we are in editor mode by listening to postMessage events
+            if (typeof window !== 'undefined') {
+                window.addEventListener('message', onMessage);
+                sendMessage(OUTGOING_EVENTS.Connected, undefined);
+                sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);
+                setTimeout(handleHandshakeTimeout, 100);
+            }
+        }
+        else {
+            setMounted(true);
+        }
+        return () => window.removeEventListener('message', onMessage);
+    }, [mounted, onMessage]);
+    return mode;
+};
+function inIframe() {
+    try {
+        return window.self !== window.top;
+    }
+    catch (e) {
+        return false;
+    }
+}
+
+export { useDetectCanvasMode };
+//# sourceMappingURL=useDetectCanvasMode.js.map

package/dist/hooks/useDetectCanvasMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectCanvasMode.js","sources":["../../../src/hooks/useDetectCanvasMode.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  doesMismatchMessageSchema,\n  sendMessage,\n  tryParseMessage,\n} from '@contentful/experiences-core';\nimport {\n  INCOMING_EVENTS,\n  OUTGOING_EVENTS,\n  StudioCanvasMode,\n} from '@contentful/experiences-core/constants';\nimport { sdkFeatures } from '../core/sdkFeatures';\n\ntype useDetectCanvasModeArgs = {\n  /** If running from a known client side only situation (ie: useFetchBySlug),\n   * set this to true to kick in editor mode check sooner (which avoids a render cycle) */\n  isClientSide?: boolean;\n};\n\nexport const useDetectCanvasMode = ({ isClientSide = false }: useDetectCanvasModeArgs = {}) => {\n  const [mounted, setMounted] = useState(false);\n  const recievedModeMessage = useRef(false);\n  const [mode, setMode] = useState<StudioCanvasMode>(() => {\n    // if we are client side and running in an iframe, then initialize to read only,\n    // Editor mode can be requested later.\n    if (isClientSide && inIframe()) {\n      return StudioCanvasMode.READ_ONLY;\n    } else {\n      return StudioCanvasMode.NONE;\n    }\n  });\n\n  const onMessage = useCallback((event: MessageEvent) => {\n    if (doesMismatchMessageSchema(event)) {\n      return;\n    }\n    const eventData = tryParseMessage(event);\n    const isRequestingCanvasMode =\n      eventData.eventType === INCOMING_EVENTS.RequestEditorMode ||\n      eventData.eventType === INCOMING_EVENTS.RequestReadOnlyMode;\n\n    if (!isRequestingCanvasMode) {\n      return;\n    }\n\n    const isEditorMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode;\n    const mode = isEditorMode ? StudioCanvasMode.EDITOR : StudioCanvasMode.READ_ONLY;\n\n    recievedModeMessage.current = true;\n    setMode(mode);\n\n    if (typeof window !== 'undefined') {\n      // Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made\n      if (!window.__EB__) {\n        window.__EB__ = {};\n      }\n      window.__EB__.isReadOnlyMode = !isEditorMode;\n      window.__EB__.isEditorMode = isEditorMode;\n    }\n\n    window.removeEventListener('message', onMessage);\n  }, []);\n\n  useEffect(() => {\n    const handleHandshakeTimeout = () => {\n      if (!recievedModeMessage.current) {\n        setMode(StudioCanvasMode.NONE);\n      }\n    };\n\n    // Only run check after component is mounted on the client to avoid hydration ssr issues\n    if (mounted) {\n      // Double check if we are in editor mode by listening to postMessage events\n      if (typeof window !== 'undefined') {\n        window.addEventListener('message', onMessage);\n        sendMessage(OUTGOING_EVENTS.Connected, undefined);\n        sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);\n\n        setTimeout(handleHandshakeTimeout, 100);\n      }\n    } else {\n      setMounted(true);\n    }\n\n    return () => window.removeEventListener('message', onMessage);\n  }, [mounted, onMessage]);\n\n  return mode;\n};\n\nfunction inIframe() {\n  try {\n    return window.self !== window.top;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAoBO;;AAEL;;;;AAIE;;;;;;AAKF;AAEA;AACE;;;AAGA;;AAGE;;;;;AAOF;AAEA;;AAGA;;AAEE;AACE;;AAEF;AACA;;AAGF;;;;AAKE;AACE;;AAEJ;;;;AAKE;AACE;AACA;AACA;AAEA;;;;;;;AAON;AAEA;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}

package/dist/hooks/useFetchByBase.js

@@ -1,15 +1,16 @@
 "use client";
 import { useState, useEffect } from 'react';
+import { StudioCanvasMode } from '@contentful/experiences-core/constants';
 
-const useFetchByBase = (fetchMethod, isEditorMode) => {
+const useFetchByBase = (fetchMethod, mode) => {
     const [experience, setExperience] = useState();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState();
     useEffect(() => {
         (async () => {
-            // if we are in editor mode, we don't want to fetch the experience here
+            // if we are in editor/read only mode, we don't want to fetch the experience here
             // it is passed via postMessage instead
-            if (isEditorMode) {
+            if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
                 return;
             }
             setIsLoading(true);
@@ -25,12 +26,12 @@ const useFetchByBase = (fetchMethod, isEditorMode) => {
                 setIsLoading(false);
             }
         })();
-    }, [fetchMethod, isEditorMode]);
+    }, [fetchMethod, mode]);
     return {
         error,
         experience,
         isLoading,
-        isEditorMode,
+        mode,
     };
 };
 

package/dist/hooks/useFetchByBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchByBase.js","sources":["../../../src/hooks/useFetchByBase.ts"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\n\nexport const useFetchByBase = (\n  fetchMethod: () => Promise<Experience<EntityStore> | undefined>,\n  isEditorMode: boolean,\n) => {\n  const [experience, setExperience] = useState<Experience<EntityStore>>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  useEffect(() => {\n    (async () => {\n      // if we are in editor mode, we don't want to fetch the experience here\n      // it is passed via postMessage instead\n      if (isEditorMode) {\n        return;\n      }\n      setIsLoading(true);\n      setError(undefined);\n      try {\n        const exp = await fetchMethod();\n        setExperience(exp);\n      } catch (error) {\n        setError(error as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    })();\n  }, [fetchMethod, isEditorMode]);\n\n  return {\n    error,\n    experience,\n    isLoading,\n    isEditorMode,\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBM;AACE;;;;;;;;;;AAQN;;;;;;;AAQF;;"}
+{"version":3,"file":"useFetchByBase.js","sources":["../../../src/hooks/useFetchByBase.ts"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\nimport { StudioCanvasMode } from '@contentful/experiences-core/constants';\n\nexport const useFetchByBase = (\n  fetchMethod: () => Promise<Experience<EntityStore> | undefined>,\n  mode: StudioCanvasMode,\n) => {\n  const [experience, setExperience] = useState<Experience<EntityStore>>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  useEffect(() => {\n    (async () => {\n      // if we are in editor/read only mode, we don't want to fetch the experience here\n      // it is passed via postMessage instead\n      if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {\n        return;\n      }\n      setIsLoading(true);\n      setError(undefined);\n      try {\n        const exp = await fetchMethod();\n        setExperience(exp);\n      } catch (error) {\n        setError(error as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    })();\n  }, [fetchMethod, mode]);\n\n  return {\n    error,\n    experience,\n    isLoading,\n    mode,\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBM;;;;;AAKA;AACE;;;;;;;;;;AAQN;;;;;;;AAQF;;"}

package/dist/hooks/useFetchById.js

@@ -1,14 +1,14 @@
 import { useCallback } from 'react';
 import { useFetchByBase } from './useFetchByBase.js';
 import { fetchById } from '@contentful/experiences-core';
-import { useDetectEditorMode } from './useDetectEditorMode.js';
+import { useDetectCanvasMode } from './useDetectCanvasMode.js';
 
 const useFetchById = ({ id, localeCode, client, experienceTypeId, hyperlinkPattern, }) => {
-    const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });
+    const mode = useDetectCanvasMode({ isClientSide: typeof window !== 'undefined' });
     const fetchMethod = useCallback(() => {
         return fetchById({ id, localeCode, client, experienceTypeId });
     }, [id, localeCode, client, experienceTypeId]);
-    const fetchResult = useFetchByBase(fetchMethod, isEditorMode);
+    const fetchResult = useFetchByBase(fetchMethod, mode);
     return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };
 };
 

package/dist/hooks/useFetchById.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchById.js","sources":["../../../src/hooks/useFetchById.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { ContentfulClientApi } from 'contentful';\nimport { useFetchByBase } from './useFetchByBase';\nimport { fetchById } from '@contentful/experiences-core';\nimport { useDetectEditorMode } from './useDetectEditorMode';\n\nexport type UseFetchByIdArgs = {\n  client: ContentfulClientApi<undefined>;\n  id: string;\n  experienceTypeId: string;\n  localeCode: string;\n  hyperlinkPattern?: string;\n};\n\nexport const useFetchById = ({\n  id,\n  localeCode,\n  client,\n  experienceTypeId,\n  hyperlinkPattern,\n}: UseFetchByIdArgs) => {\n  const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });\n\n  const fetchMethod = useCallback(() => {\n    return fetchById({ id, localeCode, client, experienceTypeId });\n  }, [id, localeCode, client, experienceTypeId]);\n\n  const fetchResult = useFetchByBase(fetchMethod, isEditorMode);\n\n  return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };\n};\n"],"names":[],"mappings":";;;;;AAca,MAAA,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,UAAU,EACV,MAAM,EACN,gBAAgB,EAChB,gBAAgB,GACC,KAAI;AACrB,IAAA,MAAM,YAAY,GAAG,mBAAmB,CAAC,EAAE,YAAY,EAAE,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC,CAAC;AAE1F,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,OAAO,SAAS,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;KAChE,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE9D,IAAA,OAAO,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,EAAE,GAAG,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,CAAC;AACzF;;;;"}
+{"version":3,"file":"useFetchById.js","sources":["../../../src/hooks/useFetchById.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { ContentfulClientApi } from 'contentful';\nimport { useFetchByBase } from './useFetchByBase';\nimport { fetchById } from '@contentful/experiences-core';\nimport { useDetectCanvasMode } from './useDetectCanvasMode';\n\nexport type UseFetchByIdArgs = {\n  client: ContentfulClientApi<undefined>;\n  id: string;\n  experienceTypeId: string;\n  localeCode: string;\n  hyperlinkPattern?: string;\n};\n\nexport const useFetchById = ({\n  id,\n  localeCode,\n  client,\n  experienceTypeId,\n  hyperlinkPattern,\n}: UseFetchByIdArgs) => {\n  const mode = useDetectCanvasMode({ isClientSide: typeof window !== 'undefined' });\n\n  const fetchMethod = useCallback(() => {\n    return fetchById({ id, localeCode, client, experienceTypeId });\n  }, [id, localeCode, client, experienceTypeId]);\n\n  const fetchResult = useFetchByBase(fetchMethod, mode);\n\n  return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };\n};\n"],"names":[],"mappings":";;;;;AAca,MAAA,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,UAAU,EACV,MAAM,EACN,gBAAgB,EAChB,gBAAgB,GACC,KAAI;AACrB,IAAA,MAAM,IAAI,GAAG,mBAAmB,CAAC,EAAE,YAAY,EAAE,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC,CAAC;AAElF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,OAAO,SAAS,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;KAChE,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAEtD,IAAA,OAAO,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,EAAE,GAAG,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,CAAC;AACzF;;;;"}

package/dist/hooks/useFetchBySlug.js

@@ -1,14 +1,14 @@
 import { useCallback } from 'react';
 import { useFetchByBase } from './useFetchByBase.js';
 import { fetchBySlug } from '@contentful/experiences-core';
-import { useDetectEditorMode } from './useDetectEditorMode.js';
+import { useDetectCanvasMode } from './useDetectCanvasMode.js';
 
 const useFetchBySlug = ({ slug, localeCode, client, experienceTypeId, hyperlinkPattern, }) => {
-    const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });
+    const mode = useDetectCanvasMode({ isClientSide: typeof window !== 'undefined' });
     const fetchMethod = useCallback(() => {
         return fetchBySlug({ slug, localeCode, client, experienceTypeId });
     }, [slug, localeCode, client, experienceTypeId]);
-    const fetchResult = useFetchByBase(fetchMethod, isEditorMode);
+    const fetchResult = useFetchByBase(fetchMethod, mode);
     return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };
 };
 

package/dist/hooks/useFetchBySlug.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchBySlug.js","sources":["../../../src/hooks/useFetchBySlug.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { ContentfulClientApi } from 'contentful';\nimport { useFetchByBase } from './useFetchByBase';\nimport { fetchBySlug } from '@contentful/experiences-core';\nimport { useDetectEditorMode } from './useDetectEditorMode';\n\nexport type UseFetchBySlugArgs = {\n  client: ContentfulClientApi<undefined>;\n  slug: string;\n  experienceTypeId: string;\n  localeCode: string;\n  /** The pattern being used to generate links for hyperlink properties **/\n  hyperlinkPattern?: string;\n};\n\nexport const useFetchBySlug = ({\n  slug,\n  localeCode,\n  client,\n  experienceTypeId,\n  hyperlinkPattern,\n}: UseFetchBySlugArgs) => {\n  const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });\n\n  const fetchMethod = useCallback(() => {\n    return fetchBySlug({ slug, localeCode, client, experienceTypeId });\n  }, [slug, localeCode, client, experienceTypeId]);\n\n  const fetchResult = useFetchByBase(fetchMethod, isEditorMode);\n\n  return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };\n};\n"],"names":[],"mappings":";;;;;AAea,MAAA,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,UAAU,EACV,MAAM,EACN,gBAAgB,EAChB,gBAAgB,GACG,KAAI;AACvB,IAAA,MAAM,YAAY,GAAG,mBAAmB,CAAC,EAAE,YAAY,EAAE,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC,CAAC;AAE1F,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,OAAO,WAAW,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;KACpE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE9D,IAAA,OAAO,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,EAAE,GAAG,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,CAAC;AACzF;;;;"}
+{"version":3,"file":"useFetchBySlug.js","sources":["../../../src/hooks/useFetchBySlug.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { ContentfulClientApi } from 'contentful';\nimport { useFetchByBase } from './useFetchByBase';\nimport { fetchBySlug } from '@contentful/experiences-core';\nimport { useDetectCanvasMode } from './useDetectCanvasMode';\n\nexport type UseFetchBySlugArgs = {\n  client: ContentfulClientApi<undefined>;\n  slug: string;\n  experienceTypeId: string;\n  localeCode: string;\n  /** The pattern being used to generate links for hyperlink properties **/\n  hyperlinkPattern?: string;\n};\n\nexport const useFetchBySlug = ({\n  slug,\n  localeCode,\n  client,\n  experienceTypeId,\n  hyperlinkPattern,\n}: UseFetchBySlugArgs) => {\n  const mode = useDetectCanvasMode({ isClientSide: typeof window !== 'undefined' });\n\n  const fetchMethod = useCallback(() => {\n    return fetchBySlug({ slug, localeCode, client, experienceTypeId });\n  }, [slug, localeCode, client, experienceTypeId]);\n\n  const fetchResult = useFetchByBase(fetchMethod, mode);\n\n  return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };\n};\n"],"names":[],"mappings":";;;;;AAea,MAAA,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,UAAU,EACV,MAAM,EACN,gBAAgB,EAChB,gBAAgB,GACG,KAAI;AACvB,IAAA,MAAM,IAAI,GAAG,mBAAmB,CAAC,EAAE,YAAY,EAAE,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC,CAAC;AAElF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,OAAO,WAAW,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;KACpE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAEtD,IAAA,OAAO,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,EAAE,GAAG,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,CAAC;AACzF;;;;"}

package/dist/index.d.ts

@@ -4,8 +4,9 @@ import { EntityStore, VisualEditorMode } from '@contentful/experiences-core';
 export { VisualEditorMode, createExperience, defineBreakpoints, defineDesignTokens, detachExperienceStyles, fetchById, fetchBySlug } from '@contentful/experiences-core';
 import { Experience, ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
 export { ComponentDefinition } from '@contentful/experiences-core/types';
-import { ContentfulClientApi } from 'contentful';
+import * as _contentful_experiences_core_constants from '@contentful/experiences-core/constants';
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
+import { ContentfulClientApi } from 'contentful';
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;
@@ -28,7 +29,7 @@ declare const useFetchById: ({ id, localeCode, client, experienceTypeId, hyperli
     };
     error: Error | undefined;
     isLoading: boolean;
-    isEditorMode: boolean;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode;
 };
 
 type UseFetchBySlugArgs = {
@@ -46,7 +47,7 @@ declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, hyp
     };
     error: Error | undefined;
     isLoading: boolean;
-    isEditorMode: boolean;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode;
 };
 
 /**

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '1.15.2-dev-20240912T1641-eb25944.0';
+const SDK_VERSION = '1.16.0-beta.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.15.2-dev-20240912T1641-eb25944.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.16.0-beta.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/hooks/{useDetectEditorMode.d.ts → useDetectCanvasMode.d.ts}

@@ -1,7 +1,8 @@
-type UseDetectEditorModeArgs = {
+import { StudioCanvasMode } from '@contentful/experiences-core/constants';
+type useDetectCanvasModeArgs = {
     /** If running from a known client side only situation (ie: useFetchBySlug),
      * set this to true to kick in editor mode check sooner (which avoids a render cycle) */
     isClientSide?: boolean;
 };
-export declare const useDetectEditorMode: ({ isClientSide }?: UseDetectEditorModeArgs) => boolean;
+export declare const useDetectCanvasMode: ({ isClientSide }?: useDetectCanvasModeArgs) => StudioCanvasMode;
 export {};

package/dist/src/hooks/useDetectCanvasMode.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/useFetchByBase.d.ts

@@ -1,8 +1,9 @@
 import { EntityStore } from '@contentful/experiences-core';
 import type { Experience } from '@contentful/experiences-core/types';
-export declare const useFetchByBase: (fetchMethod: () => Promise<Experience<EntityStore> | undefined>, isEditorMode: boolean) => {
+import { StudioCanvasMode } from '@contentful/experiences-core/constants';
+export declare const useFetchByBase: (fetchMethod: () => Promise<Experience<EntityStore> | undefined>, mode: StudioCanvasMode) => {
     error: Error | undefined;
     experience: Experience<EntityStore> | undefined;
     isLoading: boolean;
-    isEditorMode: boolean;
+    mode: StudioCanvasMode;
 };

package/dist/src/hooks/useFetchById.d.ts

@@ -13,5 +13,5 @@ export declare const useFetchById: ({ id, localeCode, client, experienceTypeId,
     };
     error: Error | undefined;
     isLoading: boolean;
-    isEditorMode: boolean;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode;
 };

package/dist/src/hooks/useFetchBySlug.d.ts

@@ -14,5 +14,5 @@ export declare const useFetchBySlug: ({ slug, localeCode, client, experienceType
     };
     error: Error | undefined;
     isLoading: boolean;
-    isEditorMode: boolean;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode;
 };

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.15.2-dev-20240912T1641-eb25944.0";
+export declare const SDK_VERSION = "1.16.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.15.2-dev-20240912T1641-eb25944.0",
+  "version": "1.16.0-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "1.15.2-dev-20240912T1641-eb25944.0",
-    "@contentful/experiences-core": "1.15.2-dev-20240912T1641-eb25944.0",
-    "@contentful/experiences-validators": "1.15.2-dev-20240912T1641-eb25944.0",
-    "@contentful/experiences-visual-editor-react": "1.15.2-dev-20240912T1641-eb25944.0",
+    "@contentful/experiences-components-react": "1.16.0-beta.0",
+    "@contentful/experiences-core": "1.16.0-beta.0",
+    "@contentful/experiences-validators": "1.16.0-beta.0",
+    "@contentful/experiences-visual-editor-react": "1.16.0-beta.0",
     "@contentful/rich-text-types": "^16.2.1",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
@@ -102,5 +102,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "d432a22073ea0bde6e86bb2283c10160589b385a"
+  "gitHead": "afd5b44b8b1663e4db1b3aac67a37e66c3e68af5"
 }

package/dist/hooks/useDetectEditorMode.js

@@ -1,63 +0,0 @@
-"use client";
-import { useState, useRef, useEffect } from 'react';
-import { sendMessage, doesMismatchMessageSchema, tryParseMessage } from '@contentful/experiences-core';
-import { OUTGOING_EVENTS, INCOMING_EVENTS } from '@contentful/experiences-core/constants';
-import { sdkFeatures } from '../core/sdkFeatures.js';
-
-const useDetectEditorMode = ({ isClientSide = false } = {}) => {
-    const [mounted, setMounted] = useState(false);
-    const [isEditorMode, setIsEditorMode] = useState(isClientSide ? inIframe() : false);
-    const receivedMessage = useRef(false);
-    useEffect(() => {
-        const onMessage = (event) => {
-            if (doesMismatchMessageSchema(event)) {
-                return;
-            }
-            const eventData = tryParseMessage(event);
-            if (eventData.eventType === INCOMING_EVENTS.RequestEditorMode) {
-                setIsEditorMode(true);
-                receivedMessage.current = true;
-                if (typeof window !== 'undefined') {
-                    //Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made
-                    if (!window.__EB__) {
-                        window.__EB__ = {};
-                    }
-                    window.__EB__.isEditorMode = true;
-                    window.removeEventListener('message', onMessage);
-                }
-            }
-        };
-        //Only run check after component is mounted on the client to avoid hydration ssr issues
-        if (mounted) {
-            setIsEditorMode(inIframe());
-            //Double check if we are in editor mode by listening to postMessage events
-            if (typeof window !== 'undefined' && !window.__EB__?.isEditorMode) {
-                window.addEventListener('message', onMessage);
-                sendMessage(OUTGOING_EVENTS.Connected, undefined);
-                sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);
-                setTimeout(() => {
-                    if (!receivedMessage.current) {
-                        // if message is not received back in time, set editorMode back to false
-                        setIsEditorMode(false);
-                    }
-                }, 100);
-            }
-        }
-        else {
-            setMounted(true);
-        }
-        return () => window.removeEventListener('message', onMessage);
-    }, [mounted]);
-    return isEditorMode;
-};
-function inIframe() {
-    try {
-        return window.self !== window.top;
-    }
-    catch (e) {
-        return false;
-    }
-}
-
-export { useDetectEditorMode };
-//# sourceMappingURL=useDetectEditorMode.js.map

package/dist/hooks/useDetectEditorMode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDetectEditorMode.js","sources":["../../../src/hooks/useDetectEditorMode.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  doesMismatchMessageSchema,\n  sendMessage,\n  tryParseMessage,\n} from '@contentful/experiences-core';\nimport { INCOMING_EVENTS, OUTGOING_EVENTS } from '@contentful/experiences-core/constants';\nimport { sdkFeatures } from '../core/sdkFeatures';\n\ntype UseDetectEditorModeArgs = {\n  /** If running from a known client side only situation (ie: useFetchBySlug),\n   * set this to true to kick in editor mode check sooner (which avoids a render cycle) */\n  isClientSide?: boolean;\n};\n\nexport const useDetectEditorMode = ({ isClientSide = false }: UseDetectEditorModeArgs = {}) => {\n  const [mounted, setMounted] = useState(false);\n  const [isEditorMode, setIsEditorMode] = useState(isClientSide ? inIframe() : false);\n  const receivedMessage = useRef(false);\n\n  useEffect(() => {\n    const onMessage = (event: MessageEvent) => {\n      if (doesMismatchMessageSchema(event)) {\n        return;\n      }\n      const eventData = tryParseMessage(event);\n\n      if (eventData.eventType === INCOMING_EVENTS.RequestEditorMode) {\n        setIsEditorMode(true);\n        receivedMessage.current = true;\n        if (typeof window !== 'undefined') {\n          //Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made\n          if (!window.__EB__) {\n            window.__EB__ = {};\n          }\n          window.__EB__.isEditorMode = true;\n          window.removeEventListener('message', onMessage);\n        }\n      }\n    };\n\n    //Only run check after component is mounted on the client to avoid hydration ssr issues\n    if (mounted) {\n      setIsEditorMode(inIframe());\n      //Double check if we are in editor mode by listening to postMessage events\n      if (typeof window !== 'undefined' && !window.__EB__?.isEditorMode) {\n        window.addEventListener('message', onMessage);\n        sendMessage(OUTGOING_EVENTS.Connected, undefined);\n        sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);\n\n        setTimeout(() => {\n          if (!receivedMessage.current) {\n            // if message is not received back in time, set editorMode back to false\n            setIsEditorMode(false);\n          }\n        }, 100);\n      }\n    } else {\n      setMounted(true);\n    }\n\n    return () => window.removeEventListener('message', onMessage);\n  }, [mounted]);\n\n  return isEditorMode;\n};\n\nfunction inIframe() {\n  try {\n    return window.self !== window.top;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAgBO;;AAEL;AACA;;AAGE;AACE;;;AAGA;;;AAIE;AACA;;AAEE;AACE;;AAEF;AACA;;;AAGN;;;AAIE;;AAEA;AACE;AACA;AACA;;AAGE;;;;;;;;;;;AAWR;AAEA;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}