@contentful/experiences-sdk-react 3.0.0-alpha-20250804T0859-6413b63.0 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -54,9 +54,12 @@ const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
|
|
|
54
54
|
window.addEventListener('message', onMessage);
|
|
55
55
|
sendMessage(OUTGOING_EVENTS.Connected, undefined);
|
|
56
56
|
sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);
|
|
57
|
+
// If in iframe, we wait long to avoid setting preview mode accidentally in editor mode
|
|
58
|
+
// when switching from v2 to v3
|
|
59
|
+
const handshakeDelay = inIframe() ? 2000 : 100;
|
|
57
60
|
// FIXME: This causes a race condition by setting the mode sometimes to NONE when
|
|
58
61
|
// reloading the canvas due to a save event.
|
|
59
|
-
const handshakeTimeout = setTimeout(handleHandshakeTimeout,
|
|
62
|
+
const handshakeTimeout = setTimeout(handleHandshakeTimeout, handshakeDelay);
|
|
60
63
|
return () => {
|
|
61
64
|
window.removeEventListener('message', onMessage);
|
|
62
65
|
clearTimeout(handshakeTimeout);
|
|
@@ -1 +1 @@
|
|
|
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 receivedModeMessage = 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 receivedModeMessage.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 (!receivedModeMessage.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 // FIXME: This causes a race condition by setting the mode sometimes to NONE when\n // reloading the canvas due to a save event.\n const handshakeTimeout = setTimeout(handleHandshakeTimeout,
|
|
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 receivedModeMessage = 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 receivedModeMessage.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 (!receivedModeMessage.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 // If in iframe, we wait long to avoid setting preview mode accidentally in editor mode\n // when switching from v2 to v3\n const handshakeDelay = inIframe() ? 2000 : 100;\n\n // FIXME: This causes a race condition by setting the mode sometimes to NONE when\n // reloading the canvas due to a save event.\n const handshakeTimeout = setTimeout(handleHandshakeTimeout, handshakeDelay);\n\n return () => {\n window.removeEventListener('message', onMessage);\n clearTimeout(handshakeTimeout);\n };\n }\n } else {\n setMounted(true);\n }\n }, [mode, 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;;;AAIA;;;;AAMA;AACE;;AAEF;;;;;;;AAON;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
|
|
|
9
9
|
export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
|
|
10
10
|
import { ContentfulClientApi } from 'contentful';
|
|
11
11
|
|
|
12
|
-
declare const SDK_VERSION = "3.0.0-
|
|
12
|
+
declare const SDK_VERSION = "3.0.0-beta.0";
|
|
13
13
|
|
|
14
14
|
type ExperienceRootProps = {
|
|
15
15
|
experience?: Experience<EntityStore> | string | null;
|
package/dist/sdkVersion.js
CHANGED
package/dist/sdkVersion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.0.0-
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.0.0-beta.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "3.0.0-
|
|
1
|
+
export declare const SDK_VERSION = "3.0.0-beta.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"typings": "./dist/src/index.d.ts",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"depcruise": "depcruise src"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@contentful/experiences-components-react": "3.0.0-
|
|
45
|
-
"@contentful/experiences-core": "3.0.0-
|
|
46
|
-
"@contentful/experiences-validators": "3.0.0-
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "3.0.0-
|
|
44
|
+
"@contentful/experiences-components-react": "3.0.0-beta.0",
|
|
45
|
+
"@contentful/experiences-core": "3.0.0-beta.0",
|
|
46
|
+
"@contentful/experiences-validators": "3.0.0-beta.0",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "3.0.0-beta.0",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"classnames": "^2.3.2",
|
|
50
50
|
"csstype": "^3.1.2",
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"dist",
|
|
100
100
|
"package.json"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "6467fc1dabb3e8c33971ef4f987a65177ffb7db7"
|
|
103
103
|
}
|