@intlayer/editor-react 6.1.6 → 7.0.0-canary.1

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.
Files changed (75) hide show
  1. package/dist/cjs/CommunicatorContext.cjs +43 -65
  2. package/dist/cjs/CommunicatorContext.cjs.map +1 -1
  3. package/dist/cjs/ConfigurationContext.cjs +26 -47
  4. package/dist/cjs/ConfigurationContext.cjs.map +1 -1
  5. package/dist/cjs/DictionariesRecordContext.cjs +48 -74
  6. package/dist/cjs/DictionariesRecordContext.cjs.map +1 -1
  7. package/dist/cjs/EditedContentContext.cjs +164 -225
  8. package/dist/cjs/EditedContentContext.cjs.map +1 -1
  9. package/dist/cjs/EditorEnabledContext.cjs +34 -59
  10. package/dist/cjs/EditorEnabledContext.cjs.map +1 -1
  11. package/dist/cjs/EditorProvider.cjs +65 -66
  12. package/dist/cjs/EditorProvider.cjs.map +1 -1
  13. package/dist/cjs/FocusDictionaryContext.cjs +51 -75
  14. package/dist/cjs/FocusDictionaryContext.cjs.map +1 -1
  15. package/dist/cjs/_virtual/rolldown_runtime.cjs +25 -0
  16. package/dist/cjs/index.cjs +46 -44
  17. package/dist/cjs/useCrossFrameMessageListener.cjs +73 -50
  18. package/dist/cjs/useCrossFrameMessageListener.cjs.map +1 -1
  19. package/dist/cjs/useCrossFrameState.cjs +106 -73
  20. package/dist/cjs/useCrossFrameState.cjs.map +1 -1
  21. package/dist/cjs/useCrossURLPathState.cjs +67 -66
  22. package/dist/cjs/useCrossURLPathState.cjs.map +1 -1
  23. package/dist/cjs/useIframeClickInterceptor.cjs +24 -47
  24. package/dist/cjs/useIframeClickInterceptor.cjs.map +1 -1
  25. package/dist/esm/CommunicatorContext.mjs +34 -32
  26. package/dist/esm/CommunicatorContext.mjs.map +1 -1
  27. package/dist/esm/ConfigurationContext.mjs +19 -23
  28. package/dist/esm/ConfigurationContext.mjs.map +1 -1
  29. package/dist/esm/DictionariesRecordContext.mjs +37 -47
  30. package/dist/esm/DictionariesRecordContext.mjs.map +1 -1
  31. package/dist/esm/EditedContentContext.mjs +150 -201
  32. package/dist/esm/EditedContentContext.mjs.map +1 -1
  33. package/dist/esm/EditorEnabledContext.mjs +22 -32
  34. package/dist/esm/EditorEnabledContext.mjs.map +1 -1
  35. package/dist/esm/EditorProvider.mjs +60 -54
  36. package/dist/esm/EditorProvider.mjs.map +1 -1
  37. package/dist/esm/FocusDictionaryContext.mjs +41 -48
  38. package/dist/esm/FocusDictionaryContext.mjs.map +1 -1
  39. package/dist/esm/index.mjs +15 -13
  40. package/dist/esm/useCrossFrameMessageListener.mjs +69 -25
  41. package/dist/esm/useCrossFrameMessageListener.mjs.map +1 -1
  42. package/dist/esm/useCrossFrameState.mjs +102 -47
  43. package/dist/esm/useCrossFrameState.mjs.map +1 -1
  44. package/dist/esm/useCrossURLPathState.mjs +61 -41
  45. package/dist/esm/useCrossURLPathState.mjs.map +1 -1
  46. package/dist/esm/useIframeClickInterceptor.mjs +19 -21
  47. package/dist/esm/useIframeClickInterceptor.mjs.map +1 -1
  48. package/dist/types/CommunicatorContext.d.ts +12 -8
  49. package/dist/types/CommunicatorContext.d.ts.map +1 -1
  50. package/dist/types/ConfigurationContext.d.ts +12 -7
  51. package/dist/types/ConfigurationContext.d.ts.map +1 -1
  52. package/dist/types/DictionariesRecordContext.d.ts +15 -12
  53. package/dist/types/DictionariesRecordContext.d.ts.map +1 -1
  54. package/dist/types/EditedContentContext.d.ts +33 -30
  55. package/dist/types/EditedContentContext.d.ts.map +1 -1
  56. package/dist/types/EditorEnabledContext.d.ts +14 -9
  57. package/dist/types/EditorEnabledContext.d.ts.map +1 -1
  58. package/dist/types/EditorProvider.d.ts +10 -6
  59. package/dist/types/EditorProvider.d.ts.map +1 -1
  60. package/dist/types/FocusDictionaryContext.d.ts +18 -15
  61. package/dist/types/FocusDictionaryContext.d.ts.map +1 -1
  62. package/dist/types/index.d.ts +13 -13
  63. package/dist/types/useCrossFrameMessageListener.d.ts +7 -2
  64. package/dist/types/useCrossFrameMessageListener.d.ts.map +1 -1
  65. package/dist/types/useCrossFrameState.d.ts +10 -6
  66. package/dist/types/useCrossFrameState.d.ts.map +1 -1
  67. package/dist/types/useCrossURLPathState.d.ts +8 -3
  68. package/dist/types/useCrossURLPathState.d.ts.map +1 -1
  69. package/dist/types/useIframeClickInterceptor.d.ts +5 -2
  70. package/dist/types/useIframeClickInterceptor.d.ts.map +1 -1
  71. package/package.json +34 -40
  72. package/LICENSE +0 -202
  73. package/dist/cjs/index.cjs.map +0 -1
  74. package/dist/esm/index.mjs.map +0 -1
  75. package/dist/types/index.d.ts.map +0 -1
@@ -1,77 +1,110 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var useCrossFrameState_exports = {};
21
- __export(useCrossFrameState_exports, {
22
- useCrossFrameState: () => useCrossFrameState
23
- });
24
- module.exports = __toCommonJS(useCrossFrameState_exports);
25
- var import_react = require("react");
26
- var import_CommunicatorContext = require('./CommunicatorContext.cjs');
27
- var import_useCrossFrameMessageListener = require('./useCrossFrameMessageListener.cjs');
1
+ 'use client';
2
+
3
+
4
+ const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
5
+ const require_CommunicatorContext = require('./CommunicatorContext.cjs');
6
+ const require_useCrossFrameMessageListener = require('./useCrossFrameMessageListener.cjs');
7
+ let react = require("react");
8
+ react = require_rolldown_runtime.__toESM(react);
9
+
10
+ //#region src/useCrossFrameState.tsx
28
11
  const resolveState = (state, prevState) => typeof state === "function" ? state(prevState) : state;
12
+ /**
13
+ * Configuration options for `useCrossFrameState`.
14
+ * @typedef {Object} CrossFrameStateOptions
15
+ * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.
16
+ * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.
17
+ */
18
+ /**
19
+ * useCrossFrameState
20
+ *
21
+ * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).
22
+ * It uses the `postMessage` API to communicate state changes and updates between instances.
23
+ *
24
+ * @template S - The type of the state.
25
+ * @param key - A unique identifier for the state to synchronize.
26
+ * @param initialState - The initial state value or a function to compute it lazily.
27
+ * @param options - Configuration options to control emitting and receiving messages.
28
+ * - `emit` (default: true): Whether to broadcast state changes to other instances.
29
+ * - `receive` (default: true): Whether to listen for state updates from other instances.
30
+ *
31
+ * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.
32
+ */
29
33
  const useCrossFrameState = (key, initialState, options) => {
30
- const { postMessage, senderId } = (0, import_CommunicatorContext.useCommunicator)();
31
- const { emit, receive } = options ?? { emit: true, receive: true };
32
- const handleStateChange = (state2, prevState) => {
33
- const resolvedState = resolveState(state2, prevState);
34
- if (emit && typeof postMessage === "function" && typeof resolvedState !== "undefined") {
35
- postMessage({ type: `${key}/post`, data: resolvedState, senderId });
36
- }
37
- return resolvedState;
38
- };
39
- const postState = () => {
40
- if (typeof postMessage !== "function") return;
41
- postMessage({ type: `${key}/post`, data: state, senderId });
42
- };
43
- const [state, setState] = (0, import_react.useState)(() => handleStateChange(initialState));
44
- const setStateWrapper = (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState));
45
- (0, import_useCrossFrameMessageListener.useCrossFrameMessageListener)(
46
- `${key}/post`,
47
- // Only activate the state listener if the `receive` option is true
48
- receive ? (data) => {
49
- setState(data);
50
- } : void 0
51
- );
52
- const onGetMessage = (_, originSenderId) => {
53
- if (!emit) return;
54
- if (typeof postMessage !== "function") return;
55
- if (originSenderId === senderId) return;
56
- if (typeof state === "undefined") return;
57
- postMessage({ type: `${key}/post`, data: state, senderId });
58
- };
59
- (0, import_useCrossFrameMessageListener.useCrossFrameMessageListener)(
60
- `${key}/get`,
61
- // Only activate the state listener if the `emit` option is true
62
- emit ? onGetMessage : void 0,
63
- state
64
- // Revalidate the listener if the state changes
65
- );
66
- (0, import_react.useEffect)(() => {
67
- if (receive && typeof postMessage === "function" && typeof state === "undefined") {
68
- postMessage({ type: `${key}/get`, senderId });
69
- }
70
- }, []);
71
- return [state, setStateWrapper, postState];
34
+ const { postMessage, senderId } = require_CommunicatorContext.useCommunicator();
35
+ const { emit, receive } = options ?? {
36
+ emit: true,
37
+ receive: true
38
+ };
39
+ const handleStateChange = (state$1, prevState) => {
40
+ const resolvedState = resolveState(state$1, prevState);
41
+ if (emit && typeof postMessage === "function" && typeof resolvedState !== "undefined") postMessage({
42
+ type: `${key}/post`,
43
+ data: resolvedState,
44
+ senderId
45
+ });
46
+ return resolvedState;
47
+ };
48
+ const postState = () => {
49
+ if (typeof postMessage !== "function") return;
50
+ postMessage({
51
+ type: `${key}/post`,
52
+ data: state,
53
+ senderId
54
+ });
55
+ };
56
+ const [state, setState] = (0, react.useState)(() => handleStateChange(initialState));
57
+ /**
58
+ * A wrapper function around the `setState` function to handle messaging efficiently.
59
+ *
60
+ * This approach has several advantages over using an additional `useEffect`:
61
+ * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,
62
+ * it prevents the extra render cycle that would be triggered when using `useEffect`.
63
+ * - **Consistency:** Ensures the message is emitted immediately when the state is updated,
64
+ * avoiding potential delays caused by the asynchronous nature of `useEffect`.
65
+ *
66
+ * This function keeps the same API as `setState` and is memoized using `useCallback`
67
+ * to prevent unnecessary re-renders of dependent components.
68
+ *
69
+ * @template S - The type of the state.
70
+ * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.
71
+ * @returns {void}
72
+ */
73
+ const setStateWrapper = (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState));
74
+ /**
75
+ * Listen for messages with the specified key and update the state accordingly.
76
+ */
77
+ require_useCrossFrameMessageListener.useCrossFrameMessageListener(`${key}/post`, receive ? (data) => {
78
+ setState(data);
79
+ } : void 0);
80
+ const onGetMessage = (_, originSenderId) => {
81
+ if (!emit) return;
82
+ if (typeof postMessage !== "function") return;
83
+ if (originSenderId === senderId) return;
84
+ if (typeof state === "undefined") return;
85
+ postMessage({
86
+ type: `${key}/post`,
87
+ data: state,
88
+ senderId
89
+ });
90
+ };
91
+ /**
92
+ * Listen for messages request to get the state content and send it back.
93
+ */
94
+ require_useCrossFrameMessageListener.useCrossFrameMessageListener(`${key}/get`, emit ? onGetMessage : void 0, state);
95
+ (0, react.useEffect)(() => {
96
+ if (receive && typeof postMessage === "function" && typeof state === "undefined") postMessage({
97
+ type: `${key}/get`,
98
+ senderId
99
+ });
100
+ }, []);
101
+ return [
102
+ state,
103
+ setStateWrapper,
104
+ postState
105
+ ];
72
106
  };
73
- // Annotate the CommonJS export names for ESM import in node:
74
- 0 && (module.exports = {
75
- useCrossFrameState
76
- });
107
+
108
+ //#endregion
109
+ exports.useCrossFrameState = useCrossFrameState;
77
110
  //# sourceMappingURL=useCrossFrameState.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport { type MessageKey } from '@intlayer/editor';\nimport { useEffect, useState, type Dispatch, type SetStateAction } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param key - A unique identifier for the state to synchronize.\n * @param initialState - The initial state value or a function to compute it lazily.\n * @param options - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>, typeof postState] => {\n const { postMessage, senderId } = useCommunicator();\n\n const { emit, receive } = options ?? { emit: true, receive: true };\n\n const handleStateChange = (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState, senderId });\n }\n\n return resolvedState;\n };\n\n const postState = () => {\n if (typeof postMessage !== 'function') return;\n postMessage({ type: `${key}/post`, data: state, senderId });\n };\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState));\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive\n ? (data) => {\n setState(data);\n }\n : undefined\n );\n\n const onGetMessage = (_: unknown, originSenderId?: string) => {\n if (!emit) return;\n if (typeof postMessage !== 'function') return;\n if (originSenderId === senderId) return;\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state, senderId });\n };\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit ? onGetMessage : undefined,\n state // Revalidate the listener if the state changes\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (\n receive &&\n typeof postMessage === 'function' &&\n typeof state === 'undefined'\n ) {\n postMessage({ type: `${key}/get`, senderId });\n }\n }, []);\n\n // Return the useState state and setter\n return [state, setStateWrapper, postState];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAwE;AACxE,iCAAgC;AAChC,0CAA6C;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACuD;AACvD,QAAM,EAAE,aAAa,SAAS,QAAI,4CAAgB;AAElD,QAAM,EAAE,MAAM,QAAQ,IAAI,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAEjE,QAAM,oBAAoB,CAACA,QAA2B,cAAkB;AAEtE,UAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,QACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,aACzB;AACA,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,eAAe,SAAS,CAAC;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,MAAM;AACtB,QAAI,OAAO,gBAAgB,WAAY;AACvC,gBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,OAAO,SAAS,CAAC;AAAA,EAC5D;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,kBAA+C,CAAC,mBACpD,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAKtE;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UACI,CAAC,SAAS;AACR,eAAS,IAAI;AAAA,IACf,IACA;AAAA,EACN;AAEA,QAAM,eAAe,CAAC,GAAY,mBAA4B;AAC5D,QAAI,CAAC,KAAM;AACX,QAAI,OAAO,gBAAgB,WAAY;AACvC,QAAI,mBAAmB,SAAU;AACjC,QAAI,OAAO,UAAU,YAAa;AAElC,gBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,OAAO,SAAS,CAAC;AAAA,EAC5D;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OAAO,eAAe;AAAA,IACtB;AAAA;AAAA,EACF;AAEA,8BAAU,MAAM;AAGd,QACE,WACA,OAAO,gBAAgB,cACvB,OAAO,UAAU,aACjB;AACA,kBAAY,EAAE,MAAM,GAAG,GAAG,QAAQ,SAAS,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,SAAO,CAAC,OAAO,iBAAiB,SAAS;AAC3C;","names":["state"]}
1
+ {"version":3,"file":"useCrossFrameState.cjs","names":["useCommunicator","resolvedState: S","state","setStateWrapper: Dispatch<SetStateAction<S>>"],"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport type { MessageKey } from '@intlayer/editor';\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param key - A unique identifier for the state to synchronize.\n * @param initialState - The initial state value or a function to compute it lazily.\n * @param options - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>, typeof postState] => {\n const { postMessage, senderId } = useCommunicator();\n\n const { emit, receive } = options ?? { emit: true, receive: true };\n\n const handleStateChange = (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState, senderId });\n }\n\n return resolvedState;\n };\n\n const postState = () => {\n if (typeof postMessage !== 'function') return;\n postMessage({ type: `${key}/post`, data: state, senderId });\n };\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState));\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive\n ? (data) => {\n setState(data);\n }\n : undefined\n );\n\n const onGetMessage = (_: unknown, originSenderId?: string) => {\n if (!emit) return;\n if (typeof postMessage !== 'function') return;\n if (originSenderId === senderId) return;\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state, senderId });\n };\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit ? onGetMessage : undefined,\n state // Revalidate the listener if the state changes\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (\n receive &&\n typeof postMessage === 'function' &&\n typeof state === 'undefined'\n ) {\n postMessage({ type: `${key}/get`, senderId });\n }\n }, []);\n\n // Return the useState state and setter\n return [state, setStateWrapper, postState];\n};\n"],"mappings":";;;;;;;;;;AAYA,MAAM,gBAAoB,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,UAAU,GACzC;;;;;;;;;;;;;;;;;;;;;;AAwBP,MAAa,sBACX,KACA,cACA,YACuD;CACvD,MAAM,EAAE,aAAa,aAAaA,6CAAiB;CAEnD,MAAM,EAAE,MAAM,YAAY,WAAW;EAAE,MAAM;EAAM,SAAS;EAAM;CAElE,MAAM,qBAAqB,SAA2B,cAAkB;EAEtE,MAAMC,gBAAmB,aAAaC,SAAO,UAAU;AAGvD,MACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,YAEzB,aAAY;GAAE,MAAM,GAAG,IAAI;GAAQ,MAAM;GAAe;GAAU,CAAC;AAGrE,SAAO;;CAGT,MAAM,kBAAkB;AACtB,MAAI,OAAO,gBAAgB,WAAY;AACvC,cAAY;GAAE,MAAM,GAAG,IAAI;GAAQ,MAAM;GAAO;GAAU,CAAC;;CAG7D,MAAM,CAAC,OAAO,sCAA8B,kBAAkB,aAAa,CAAC;;;;;;;;;;;;;;;;;CAkB5E,MAAMC,mBAAgD,mBACpD,UAAU,cAAc,kBAAkB,gBAAgB,UAAU,CAAC;;;;AAKvE,mEACE,GAAG,IAAI,QAEP,WACK,SAAS;AACR,WAAS,KAAK;KAEhB,OACL;CAED,MAAM,gBAAgB,GAAY,mBAA4B;AAC5D,MAAI,CAAC,KAAM;AACX,MAAI,OAAO,gBAAgB,WAAY;AACvC,MAAI,mBAAmB,SAAU;AACjC,MAAI,OAAO,UAAU,YAAa;AAElC,cAAY;GAAE,MAAM,GAAG,IAAI;GAAQ,MAAM;GAAO;GAAU,CAAC;;;;;AAM7D,mEACE,GAAG,IAAI,OAEP,OAAO,eAAe,QACtB,MACD;AAED,4BAAgB;AAGd,MACE,WACA,OAAO,gBAAgB,cACvB,OAAO,UAAU,YAEjB,aAAY;GAAE,MAAM,GAAG,IAAI;GAAO;GAAU,CAAC;IAE9C,EAAE,CAAC;AAGN,QAAO;EAAC;EAAO;EAAiB;EAAU"}
@@ -1,69 +1,70 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var useCrossURLPathState_exports = {};
21
- __export(useCrossURLPathState_exports, {
22
- useCrossURLPathSetter: () => useCrossURLPathSetter,
23
- useCrossURLPathState: () => useCrossURLPathState
24
- });
25
- module.exports = __toCommonJS(useCrossURLPathState_exports);
26
- var import_editor = require("@intlayer/editor");
27
- var import_react = require("react");
28
- var import_useCrossFrameState = require('./useCrossFrameState.cjs');
29
- const useCrossURLPathState = (initialState, options) => (0, import_useCrossFrameState.useCrossFrameState)(import_editor.MessageKey.INTLAYER_URL_CHANGE, initialState, options);
1
+ 'use client';
2
+
3
+
4
+ const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
5
+ const require_useCrossFrameState = require('./useCrossFrameState.cjs');
6
+ let react = require("react");
7
+ react = require_rolldown_runtime.__toESM(react);
8
+ let __intlayer_editor = require("@intlayer/editor");
9
+ __intlayer_editor = require_rolldown_runtime.__toESM(__intlayer_editor);
10
+
11
+ //#region src/useCrossURLPathState.tsx
12
+ const useCrossURLPathState = (initialState, options) => require_useCrossFrameState.useCrossFrameState(__intlayer_editor.MessageKey.INTLAYER_URL_CHANGE, initialState, options);
30
13
  const useCrossURLPathSetter = (initialState) => {
31
- const states = useCrossURLPathState(initialState, {
32
- emit: true,
33
- receive: false
34
- });
35
- const [_state, setState] = states;
36
- (0, import_react.useEffect)(() => {
37
- const originalPushState = history.pushState;
38
- const originalReplaceState = history.replaceState;
39
- const injectLocationChangeEvent = (method) => function(...args) {
40
- method.apply(this, args);
41
- window.dispatchEvent(new Event("locationchange"));
42
- };
43
- history.pushState = injectLocationChangeEvent(originalPushState);
44
- history.replaceState = injectLocationChangeEvent(originalReplaceState);
45
- const updateURLState = () => {
46
- setState(window.location.pathname);
47
- };
48
- window.addEventListener("locationchange", updateURLState);
49
- window.addEventListener("popstate", updateURLState);
50
- window.addEventListener("hashchange", updateURLState);
51
- window.addEventListener("load", updateURLState);
52
- updateURLState();
53
- return () => {
54
- window.removeEventListener("locationchange", updateURLState);
55
- window.removeEventListener("popstate", updateURLState);
56
- window.removeEventListener("hashchange", updateURLState);
57
- window.removeEventListener("load", updateURLState);
58
- history.pushState = originalPushState;
59
- history.replaceState = originalReplaceState;
60
- };
61
- }, []);
62
- return states;
14
+ const states = useCrossURLPathState(initialState, {
15
+ emit: true,
16
+ receive: false
17
+ });
18
+ const [_state, setState] = states;
19
+ (0, react.useEffect)(() => {
20
+ /**
21
+ * 1) Monkey patch history methods (pushState, replaceState)
22
+ * to dispatch a custom event whenever they are called.
23
+ */
24
+ const originalPushState = history.pushState;
25
+ const originalReplaceState = history.replaceState;
26
+ const injectLocationChangeEvent = (method) => function(...args) {
27
+ method.apply(this, args);
28
+ window.dispatchEvent(new Event("locationchange"));
29
+ };
30
+ history.pushState = injectLocationChangeEvent(originalPushState);
31
+ history.replaceState = injectLocationChangeEvent(originalReplaceState);
32
+ /**
33
+ * 2) The callback to update our state whenever the URL changes.
34
+ */
35
+ const updateURLState = () => {
36
+ setState(window.location.pathname);
37
+ };
38
+ /**
39
+ * 3) Attach event listeners for locationchange, popstate, hashchange.
40
+ * - 'locationchange' is our custom event triggered by push/replaceState overrides.
41
+ * - 'popstate' is fired on back/forward navigation.
42
+ * - 'hashchange' is for URL hash (#) changes.
43
+ * - 'load' is when new page is loaded
44
+ */
45
+ window.addEventListener("locationchange", updateURLState);
46
+ window.addEventListener("popstate", updateURLState);
47
+ window.addEventListener("hashchange", updateURLState);
48
+ window.addEventListener("load", updateURLState);
49
+ updateURLState();
50
+ /**
51
+ * 4) Cleanup when the component unmounts:
52
+ * - Remove event listeners.
53
+ * - Restore original pushState & replaceState to avoid side effects.
54
+ */
55
+ return () => {
56
+ window.removeEventListener("locationchange", updateURLState);
57
+ window.removeEventListener("popstate", updateURLState);
58
+ window.removeEventListener("hashchange", updateURLState);
59
+ window.removeEventListener("load", updateURLState);
60
+ history.pushState = originalPushState;
61
+ history.replaceState = originalReplaceState;
62
+ };
63
+ }, []);
64
+ return states;
63
65
  };
64
- // Annotate the CommonJS export names for ESM import in node:
65
- 0 && (module.exports = {
66
- useCrossURLPathSetter,
67
- useCrossURLPathState
68
- });
66
+
67
+ //#endregion
68
+ exports.useCrossURLPathSetter = useCrossURLPathSetter;
69
+ exports.useCrossURLPathState = useCrossURLPathState;
69
70
  //# sourceMappingURL=useCrossURLPathState.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport {\n useCrossFrameState,\n type CrossFrameStateOptions,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n initialState?: string,\n options?: CrossFrameStateOptions\n) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);\n\nexport const useCrossURLPathSetter = (initialState?: string) => {\n const states = useCrossURLPathState(initialState, {\n emit: true,\n receive: false,\n });\n const [_state, setState] = states;\n\n useEffect(() => {\n /**\n * 1) Monkey patch history methods (pushState, replaceState)\n * to dispatch a custom event whenever they are called.\n */\n const originalPushState = history.pushState;\n const originalReplaceState = history.replaceState;\n\n const injectLocationChangeEvent = (method: (...args: any[]) => void) =>\n function (this: typeof history, ...args: [any, string, string?]) {\n method.apply(this, args);\n window.dispatchEvent(new Event('locationchange'));\n };\n\n history.pushState = injectLocationChangeEvent(originalPushState);\n history.replaceState = injectLocationChangeEvent(originalReplaceState);\n\n /**\n * 2) The callback to update our state whenever the URL changes.\n */\n const updateURLState = () => {\n setState(window.location.pathname);\n };\n\n /**\n * 3) Attach event listeners for locationchange, popstate, hashchange.\n * - 'locationchange' is our custom event triggered by push/replaceState overrides.\n * - 'popstate' is fired on back/forward navigation.\n * - 'hashchange' is for URL hash (#) changes.\n * - 'load' is when new page is loaded\n */\n window.addEventListener('locationchange', updateURLState);\n window.addEventListener('popstate', updateURLState);\n window.addEventListener('hashchange', updateURLState);\n window.addEventListener('load', updateURLState);\n\n // Initialize our state immediately on mount\n updateURLState();\n\n /**\n * 4) Cleanup when the component unmounts:\n * - Remove event listeners.\n * - Restore original pushState & replaceState to avoid side effects.\n */\n return () => {\n window.removeEventListener('locationchange', updateURLState);\n window.removeEventListener('popstate', updateURLState);\n window.removeEventListener('hashchange', updateURLState);\n window.removeEventListener('load', updateURLState);\n history.pushState = originalPushState;\n history.replaceState = originalReplaceState;\n };\n }, []);\n\n return states;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAA2B;AAC3B,mBAA0B;AAC1B,gCAGO;AAEA,MAAM,uBAAuB,CAClC,cACA,gBACG,8CAAmB,yBAAW,qBAAqB,cAAc,OAAO;AAEtE,MAAM,wBAAwB,CAAC,iBAA0B;AAC9D,QAAM,SAAS,qBAAqB,cAAc;AAAA,IAChD,MAAM;AAAA,IACN,SAAS;AAAA,EACX,CAAC;AACD,QAAM,CAAC,QAAQ,QAAQ,IAAI;AAE3B,8BAAU,MAAM;AAKd,UAAM,oBAAoB,QAAQ;AAClC,UAAM,uBAAuB,QAAQ;AAErC,UAAM,4BAA4B,CAAC,WACjC,YAAmC,MAA8B;AAC/D,aAAO,MAAM,MAAM,IAAI;AACvB,aAAO,cAAc,IAAI,MAAM,gBAAgB,CAAC;AAAA,IAClD;AAEF,YAAQ,YAAY,0BAA0B,iBAAiB;AAC/D,YAAQ,eAAe,0BAA0B,oBAAoB;AAKrE,UAAM,iBAAiB,MAAM;AAC3B,eAAS,OAAO,SAAS,QAAQ;AAAA,IACnC;AASA,WAAO,iBAAiB,kBAAkB,cAAc;AACxD,WAAO,iBAAiB,YAAY,cAAc;AAClD,WAAO,iBAAiB,cAAc,cAAc;AACpD,WAAO,iBAAiB,QAAQ,cAAc;AAG9C,mBAAe;AAOf,WAAO,MAAM;AACX,aAAO,oBAAoB,kBAAkB,cAAc;AAC3D,aAAO,oBAAoB,YAAY,cAAc;AACrD,aAAO,oBAAoB,cAAc,cAAc;AACvD,aAAO,oBAAoB,QAAQ,cAAc;AACjD,cAAQ,YAAY;AACpB,cAAQ,eAAe;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}
1
+ {"version":3,"file":"useCrossURLPathState.cjs","names":["useCrossFrameState","MessageKey"],"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport {\n type CrossFrameStateOptions,\n useCrossFrameState,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n initialState?: string,\n options?: CrossFrameStateOptions\n) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);\n\nexport const useCrossURLPathSetter = (initialState?: string) => {\n const states = useCrossURLPathState(initialState, {\n emit: true,\n receive: false,\n });\n const [_state, setState] = states;\n\n useEffect(() => {\n /**\n * 1) Monkey patch history methods (pushState, replaceState)\n * to dispatch a custom event whenever they are called.\n */\n const originalPushState = history.pushState;\n const originalReplaceState = history.replaceState;\n\n const injectLocationChangeEvent = (method: (...args: any[]) => void) =>\n function (this: typeof history, ...args: [any, string, string?]) {\n method.apply(this, args);\n window.dispatchEvent(new Event('locationchange'));\n };\n\n history.pushState = injectLocationChangeEvent(originalPushState);\n history.replaceState = injectLocationChangeEvent(originalReplaceState);\n\n /**\n * 2) The callback to update our state whenever the URL changes.\n */\n const updateURLState = () => {\n setState(window.location.pathname);\n };\n\n /**\n * 3) Attach event listeners for locationchange, popstate, hashchange.\n * - 'locationchange' is our custom event triggered by push/replaceState overrides.\n * - 'popstate' is fired on back/forward navigation.\n * - 'hashchange' is for URL hash (#) changes.\n * - 'load' is when new page is loaded\n */\n window.addEventListener('locationchange', updateURLState);\n window.addEventListener('popstate', updateURLState);\n window.addEventListener('hashchange', updateURLState);\n window.addEventListener('load', updateURLState);\n\n // Initialize our state immediately on mount\n updateURLState();\n\n /**\n * 4) Cleanup when the component unmounts:\n * - Remove event listeners.\n * - Restore original pushState & replaceState to avoid side effects.\n */\n return () => {\n window.removeEventListener('locationchange', updateURLState);\n window.removeEventListener('popstate', updateURLState);\n window.removeEventListener('hashchange', updateURLState);\n window.removeEventListener('load', updateURLState);\n history.pushState = originalPushState;\n history.replaceState = originalReplaceState;\n };\n }, []);\n\n return states;\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAa,wBACX,cACA,YACGA,8CAAmBC,6BAAW,qBAAqB,cAAc,QAAQ;AAE9E,MAAa,yBAAyB,iBAA0B;CAC9D,MAAM,SAAS,qBAAqB,cAAc;EAChD,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,CAAC,QAAQ,YAAY;AAE3B,4BAAgB;;;;;EAKd,MAAM,oBAAoB,QAAQ;EAClC,MAAM,uBAAuB,QAAQ;EAErC,MAAM,6BAA6B,WACjC,SAAgC,GAAG,MAA8B;AAC/D,UAAO,MAAM,MAAM,KAAK;AACxB,UAAO,cAAc,IAAI,MAAM,iBAAiB,CAAC;;AAGrD,UAAQ,YAAY,0BAA0B,kBAAkB;AAChE,UAAQ,eAAe,0BAA0B,qBAAqB;;;;EAKtE,MAAM,uBAAuB;AAC3B,YAAS,OAAO,SAAS,SAAS;;;;;;;;;AAUpC,SAAO,iBAAiB,kBAAkB,eAAe;AACzD,SAAO,iBAAiB,YAAY,eAAe;AACnD,SAAO,iBAAiB,cAAc,eAAe;AACrD,SAAO,iBAAiB,QAAQ,eAAe;AAG/C,kBAAgB;;;;;;AAOhB,eAAa;AACX,UAAO,oBAAoB,kBAAkB,eAAe;AAC5D,UAAO,oBAAoB,YAAY,eAAe;AACtD,UAAO,oBAAoB,cAAc,eAAe;AACxD,UAAO,oBAAoB,QAAQ,eAAe;AAClD,WAAQ,YAAY;AACpB,WAAQ,eAAe;;IAExB,EAAE,CAAC;AAEN,QAAO"}
@@ -1,50 +1,27 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var useIframeClickInterceptor_exports = {};
21
- __export(useIframeClickInterceptor_exports, {
22
- useIframeClickInterceptor: () => useIframeClickInterceptor,
23
- useIframeClickMerger: () => useIframeClickMerger
24
- });
25
- module.exports = __toCommonJS(useIframeClickInterceptor_exports);
26
- var import_editor = require("@intlayer/editor");
27
- var import_react = require("react");
28
- var import_useCrossFrameMessageListener = require('./useCrossFrameMessageListener.cjs');
1
+ 'use client';
2
+
3
+
4
+ const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
5
+ const require_useCrossFrameMessageListener = require('./useCrossFrameMessageListener.cjs');
6
+ let react = require("react");
7
+ react = require_rolldown_runtime.__toESM(react);
8
+ let __intlayer_editor = require("@intlayer/editor");
9
+ __intlayer_editor = require_rolldown_runtime.__toESM(__intlayer_editor);
10
+
11
+ //#region src/useIframeClickInterceptor.tsx
29
12
  const useIframeClickInterceptor = () => {
30
- const postMessage = (0, import_useCrossFrameMessageListener.useCrossFrameMessageListener)(
31
- import_editor.MessageKey.INTLAYER_IFRAME_CLICKED
32
- );
33
- const handlePostMessageEvent = () => {
34
- postMessage();
35
- };
36
- (0, import_react.useEffect)(() => {
37
- window.addEventListener("mousedown", handlePostMessageEvent);
38
- return () => window.removeEventListener("mousedown", handlePostMessageEvent);
39
- }, [postMessage]);
13
+ const postMessage = require_useCrossFrameMessageListener.useCrossFrameMessageListener(__intlayer_editor.MessageKey.INTLAYER_IFRAME_CLICKED);
14
+ const handlePostMessageEvent = () => {
15
+ postMessage();
16
+ };
17
+ (0, react.useEffect)(() => {
18
+ window.addEventListener("mousedown", handlePostMessageEvent);
19
+ return () => window.removeEventListener("mousedown", handlePostMessageEvent);
20
+ }, [postMessage]);
40
21
  };
41
- const useIframeClickMerger = () => (0, import_useCrossFrameMessageListener.useCrossFrameMessageListener)(
42
- import_editor.MessageKey.INTLAYER_IFRAME_CLICKED,
43
- import_editor.mergeIframeClick
44
- );
45
- // Annotate the CommonJS export names for ESM import in node:
46
- 0 && (module.exports = {
47
- useIframeClickInterceptor,
48
- useIframeClickMerger
49
- });
22
+ const useIframeClickMerger = () => require_useCrossFrameMessageListener.useCrossFrameMessageListener(__intlayer_editor.MessageKey.INTLAYER_IFRAME_CLICKED, __intlayer_editor.mergeIframeClick);
23
+
24
+ //#endregion
25
+ exports.useIframeClickInterceptor = useIframeClickInterceptor;
26
+ exports.useIframeClickMerger = useIframeClickMerger;
50
27
  //# sourceMappingURL=useIframeClickInterceptor.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/useIframeClickInterceptor.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey, mergeIframeClick } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport const useIframeClickInterceptor = () => {\n const postMessage = useCrossFrameMessageListener<undefined>(\n MessageKey.INTLAYER_IFRAME_CLICKED\n );\n const handlePostMessageEvent: EventListener = () => {\n postMessage();\n };\n\n useEffect(() => {\n window.addEventListener('mousedown', handlePostMessageEvent);\n\n return () =>\n window.removeEventListener('mousedown', handlePostMessageEvent);\n }, [postMessage]);\n};\n\nexport const useIframeClickMerger = () =>\n useCrossFrameMessageListener<MessageEvent>(\n MessageKey.INTLAYER_IFRAME_CLICKED,\n mergeIframeClick\n );\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAA6C;AAC7C,mBAA0B;AAC1B,0CAA6C;AAEtC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,kBAAc;AAAA,IAClB,yBAAW;AAAA,EACb;AACA,QAAM,yBAAwC,MAAM;AAClD,gBAAY;AAAA,EACd;AAEA,8BAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,sBAAsB;AAE3D,WAAO,MACL,OAAO,oBAAoB,aAAa,sBAAsB;AAAA,EAClE,GAAG,CAAC,WAAW,CAAC;AAClB;AAEO,MAAM,uBAAuB,UAClC;AAAA,EACE,yBAAW;AAAA,EACX;AACF;","names":[]}
1
+ {"version":3,"file":"useIframeClickInterceptor.cjs","names":["useCrossFrameMessageListener","MessageKey","handlePostMessageEvent: EventListener","mergeIframeClick"],"sources":["../../src/useIframeClickInterceptor.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey, mergeIframeClick } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport const useIframeClickInterceptor = () => {\n const postMessage = useCrossFrameMessageListener<undefined>(\n MessageKey.INTLAYER_IFRAME_CLICKED\n );\n const handlePostMessageEvent: EventListener = () => {\n postMessage();\n };\n\n useEffect(() => {\n window.addEventListener('mousedown', handlePostMessageEvent);\n\n return () =>\n window.removeEventListener('mousedown', handlePostMessageEvent);\n }, [postMessage]);\n};\n\nexport const useIframeClickMerger = () =>\n useCrossFrameMessageListener<MessageEvent>(\n MessageKey.INTLAYER_IFRAME_CLICKED,\n mergeIframeClick\n );\n"],"mappings":";;;;;;;;;;;AAMA,MAAa,kCAAkC;CAC7C,MAAM,cAAcA,kEAClBC,6BAAW,wBACZ;CACD,MAAMC,+BAA8C;AAClD,eAAa;;AAGf,4BAAgB;AACd,SAAO,iBAAiB,aAAa,uBAAuB;AAE5D,eACE,OAAO,oBAAoB,aAAa,uBAAuB;IAChE,CAAC,YAAY,CAAC;;AAGnB,MAAa,6BACXF,kEACEC,6BAAW,yBACXE,mCACD"}
@@ -1,38 +1,40 @@
1
- "use client";
2
- import { jsx } from "react/jsx-runtime";
1
+ 'use client';
2
+
3
+
3
4
  import configuration from "@intlayer/config/built";
4
- import {
5
- createContext,
6
- useContext,
7
- useMemo,
8
- useRef
9
- } from "react";
10
- import { v4 as uuid } from "uuid";
11
- const { editor } = configuration;
5
+ import { createContext, useContext, useMemo, useRef } from "react";
6
+ import { v4 } from "uuid";
7
+ import { jsx } from "react/jsx-runtime";
8
+
9
+ //#region src/CommunicatorContext.tsx
10
+ const { editor } = configuration ?? {};
12
11
  const CommunicatorContext = createContext({
13
- postMessage: () => null,
14
- allowedOrigins: [
15
- editor?.applicationURL,
16
- editor?.editorURL,
17
- editor?.cmsURL
18
- ],
19
- senderId: ""
12
+ postMessage: () => null,
13
+ allowedOrigins: [
14
+ editor?.applicationURL,
15
+ editor?.editorURL,
16
+ editor?.cmsURL
17
+ ],
18
+ senderId: ""
20
19
  });
21
- const CommunicatorProvider = ({
22
- children,
23
- allowedOrigins,
24
- postMessage
25
- }) => {
26
- const senderIdRef = useRef(uuid());
27
- const value = useMemo(
28
- () => ({ postMessage, allowedOrigins, senderId: senderIdRef.current }),
29
- [postMessage, allowedOrigins, senderIdRef.current]
30
- );
31
- return /* @__PURE__ */ jsx(CommunicatorContext.Provider, { value, children });
20
+ const CommunicatorProvider = ({ children, allowedOrigins, postMessage }) => {
21
+ const senderIdRef = useRef(v4());
22
+ const value = useMemo(() => ({
23
+ postMessage,
24
+ allowedOrigins,
25
+ senderId: senderIdRef.current
26
+ }), [
27
+ postMessage,
28
+ allowedOrigins,
29
+ senderIdRef.current
30
+ ]);
31
+ return /* @__PURE__ */ jsx(CommunicatorContext.Provider, {
32
+ value,
33
+ children
34
+ });
32
35
  };
33
36
  const useCommunicator = () => useContext(CommunicatorContext);
34
- export {
35
- CommunicatorProvider,
36
- useCommunicator
37
- };
37
+
38
+ //#endregion
39
+ export { CommunicatorProvider, useCommunicator };
38
40
  //# sourceMappingURL=CommunicatorContext.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/CommunicatorContext.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\n\nimport {\n createContext,\n useContext,\n useMemo,\n useRef,\n type FC,\n type PropsWithChildren,\n} from 'react';\nimport { v4 as uuid } from 'uuid'; // if you prefer a UUID library\n\nexport type UseCrossPlatformStateProps = {\n postMessage: typeof window.postMessage;\n allowedOrigins?: string[];\n senderId: string;\n};\n\nconst { editor } = configuration;\n\nconst CommunicatorContext = createContext<UseCrossPlatformStateProps>({\n postMessage: () => null,\n allowedOrigins: [\n editor?.applicationURL,\n editor?.editorURL,\n editor?.cmsURL,\n ] as string[],\n senderId: '',\n});\n\nexport type CommunicatorProviderProps = PropsWithChildren<\n Omit<UseCrossPlatformStateProps, 'senderId'>\n>;\n\nexport const CommunicatorProvider: FC<CommunicatorProviderProps> = ({\n children,\n allowedOrigins,\n postMessage,\n}) => {\n // Create a stable, unique ID for the lifetime of this app/iframe instance.\n const senderIdRef = useRef(uuid());\n\n const value = useMemo(\n () => ({ postMessage, allowedOrigins, senderId: senderIdRef.current }),\n [postMessage, allowedOrigins, senderIdRef.current]\n );\n\n return (\n <CommunicatorContext.Provider value={value}>\n {children}\n </CommunicatorContext.Provider>\n );\n};\n\nexport const useCommunicator = () => useContext(CommunicatorContext);\n"],"mappings":";AAkDI;AAhDJ,OAAO,mBAAmB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,MAAM,YAAY;AAQ3B,MAAM,EAAE,OAAO,IAAI;AAEnB,MAAM,sBAAsB,cAA0C;AAAA,EACpE,aAAa,MAAM;AAAA,EACnB,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AACZ,CAAC;AAMM,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,cAAc,OAAO,KAAK,CAAC;AAEjC,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,aAAa,gBAAgB,UAAU,YAAY,QAAQ;AAAA,IACpE,CAAC,aAAa,gBAAgB,YAAY,OAAO;AAAA,EACnD;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAC3B,UACH;AAEJ;AAEO,MAAM,kBAAkB,MAAM,WAAW,mBAAmB;","names":[]}
1
+ {"version":3,"file":"CommunicatorContext.mjs","names":["CommunicatorProvider: FC<CommunicatorProviderProps>","uuid"],"sources":["../../src/CommunicatorContext.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n useMemo,\n useRef,\n} from 'react';\nimport { v4 as uuid } from 'uuid'; // if you prefer a UUID library\n\nexport type UseCrossPlatformStateProps = {\n postMessage: typeof window.postMessage;\n allowedOrigins?: string[];\n senderId: string;\n};\n\nconst { editor } = configuration ?? {};\n\nconst CommunicatorContext = createContext<UseCrossPlatformStateProps>({\n postMessage: () => null,\n allowedOrigins: [\n editor?.applicationURL,\n editor?.editorURL,\n editor?.cmsURL,\n ] as string[],\n senderId: '',\n});\n\nexport type CommunicatorProviderProps = PropsWithChildren<\n Omit<UseCrossPlatformStateProps, 'senderId'>\n>;\n\nexport const CommunicatorProvider: FC<CommunicatorProviderProps> = ({\n children,\n allowedOrigins,\n postMessage,\n}) => {\n // Create a stable, unique ID for the lifetime of this app/iframe instance.\n const senderIdRef = useRef(uuid());\n\n const value = useMemo(\n () => ({ postMessage, allowedOrigins, senderId: senderIdRef.current }),\n [postMessage, allowedOrigins, senderIdRef.current]\n );\n\n return (\n <CommunicatorContext.Provider value={value}>\n {children}\n </CommunicatorContext.Provider>\n );\n};\n\nexport const useCommunicator = () => useContext(CommunicatorContext);\n"],"mappings":";;;;;;;;;AAmBA,MAAM,EAAE,WAAW,iBAAiB,EAAE;AAEtC,MAAM,sBAAsB,cAA0C;CACpE,mBAAmB;CACnB,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACT;CACD,UAAU;CACX,CAAC;AAMF,MAAaA,wBAAuD,EAClE,UACA,gBACA,kBACI;CAEJ,MAAM,cAAc,OAAOC,IAAM,CAAC;CAElC,MAAM,QAAQ,eACL;EAAE;EAAa;EAAgB,UAAU,YAAY;EAAS,GACrE;EAAC;EAAa;EAAgB,YAAY;EAAQ,CACnD;AAED,QACE,oBAAC,oBAAoB;EAAgB;EAClC;GAC4B;;AAInC,MAAa,wBAAwB,WAAW,oBAAoB"}
@@ -1,27 +1,23 @@
1
- "use client";
1
+ 'use client';
2
+
3
+
4
+ import { useCrossFrameState } from "./useCrossFrameState.mjs";
5
+ import { createContext, useContext } from "react";
2
6
  import { jsx } from "react/jsx-runtime";
3
7
  import { MessageKey } from "@intlayer/editor";
4
- import {
5
- createContext,
6
- useContext
7
- } from "react";
8
- import { useCrossFrameState } from "./useCrossFrameState.mjs";
9
- const ConfigurationStatesContext = createContext(
10
- void 0
11
- );
12
- const useConfigurationState = () => useCrossFrameState(
13
- MessageKey.INTLAYER_CONFIGURATION,
14
- void 0,
15
- {
16
- receive: false,
17
- emit: true
18
- }
19
- );
20
- const ConfigurationProvider = ({ children, configuration }) => /* @__PURE__ */ jsx(ConfigurationStatesContext.Provider, { value: configuration, children });
8
+
9
+ //#region src/ConfigurationContext.tsx
10
+ const ConfigurationStatesContext = createContext(void 0);
11
+ const useConfigurationState = () => useCrossFrameState(MessageKey.INTLAYER_CONFIGURATION, void 0, {
12
+ receive: false,
13
+ emit: true
14
+ });
15
+ const ConfigurationProvider = ({ children, configuration }) => /* @__PURE__ */ jsx(ConfigurationStatesContext.Provider, {
16
+ value: configuration,
17
+ children
18
+ });
21
19
  const useConfiguration = () => useContext(ConfigurationStatesContext);
22
- export {
23
- ConfigurationProvider,
24
- useConfiguration,
25
- useConfigurationState
26
- };
20
+
21
+ //#endregion
22
+ export { ConfigurationProvider, useConfiguration, useConfigurationState };
27
23
  //# sourceMappingURL=ConfigurationContext.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ConfigurationContext.tsx"],"sourcesContent":["'use client';\n\nimport { type IntlayerConfig } from '@intlayer/config/client';\nimport { MessageKey } from '@intlayer/editor';\nimport {\n type FC,\n type PropsWithChildren,\n createContext,\n useContext,\n} from 'react';\nimport { useCrossFrameState } from './useCrossFrameState';\n\nconst ConfigurationStatesContext = createContext<IntlayerConfig | undefined>(\n undefined\n);\n\nexport const useConfigurationState = () =>\n useCrossFrameState<IntlayerConfig>(\n MessageKey.INTLAYER_CONFIGURATION,\n undefined,\n {\n receive: false,\n emit: true,\n }\n );\n\nexport type ConfigurationProviderProps = {\n configuration?: IntlayerConfig;\n};\n\nexport const ConfigurationProvider: FC<\n PropsWithChildren<ConfigurationProviderProps>\n> = ({ children, configuration }) => (\n <ConfigurationStatesContext.Provider value={configuration}>\n {children}\n </ConfigurationStatesContext.Provider>\n);\n\nexport const useConfiguration = () => useContext(ConfigurationStatesContext);\n"],"mappings":";AAiCE;AA9BF,SAAS,kBAAkB;AAC3B;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAEnC,MAAM,6BAA6B;AAAA,EACjC;AACF;AAEO,MAAM,wBAAwB,MACnC;AAAA,EACE,WAAW;AAAA,EACX;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF;AAMK,MAAM,wBAET,CAAC,EAAE,UAAU,cAAc,MAC7B,oBAAC,2BAA2B,UAA3B,EAAoC,OAAO,eACzC,UACH;AAGK,MAAM,mBAAmB,MAAM,WAAW,0BAA0B;","names":[]}
1
+ {"version":3,"file":"ConfigurationContext.mjs","names":["ConfigurationProvider: FC<\n PropsWithChildren<ConfigurationProviderProps>\n>"],"sources":["../../src/ConfigurationContext.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport type { IntlayerConfig } from '@intlayer/types';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\nimport { useCrossFrameState } from './useCrossFrameState';\n\nconst ConfigurationStatesContext = createContext<IntlayerConfig | undefined>(\n undefined\n);\n\nexport const useConfigurationState = () =>\n useCrossFrameState<IntlayerConfig>(\n MessageKey.INTLAYER_CONFIGURATION,\n undefined,\n {\n receive: false,\n emit: true,\n }\n );\n\nexport type ConfigurationProviderProps = {\n configuration?: IntlayerConfig;\n};\n\nexport const ConfigurationProvider: FC<\n PropsWithChildren<ConfigurationProviderProps>\n> = ({ children, configuration }) => (\n <ConfigurationStatesContext.Provider value={configuration}>\n {children}\n </ConfigurationStatesContext.Provider>\n);\n\nexport const useConfiguration = () => useContext(ConfigurationStatesContext);\n"],"mappings":";;;;;;;;;AAYA,MAAM,6BAA6B,cACjC,OACD;AAED,MAAa,8BACX,mBACE,WAAW,wBACX,QACA;CACE,SAAS;CACT,MAAM;CACP,CACF;AAMH,MAAaA,yBAER,EAAE,UAAU,oBACf,oBAAC,2BAA2B;CAAS,OAAO;CACzC;EACmC;AAGxC,MAAa,yBAAyB,WAAW,2BAA2B"}