@intlayer/editor-react 5.1.6 → 5.1.7

package/dist/esm/EditorEnabledContext.mjs

@@ -7,10 +7,16 @@ import {
 import {
   useCrossFrameState
 } from "./useCrossFrameState.mjs";
-const EditorEnabledContext = createContext(
-  void 0
-);
+import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
+const EditorEnabledContext = createContext({
+  enabled: false
+});
 const useEditorEnabledState = (options) => useCrossFrameState("INTLAYER_EDITOR_ENABLED", false, options);
+const usePostEditorEnabledState = (onEventTriggered) => useCrossFrameMessageListener(
+  "INTLAYER_EDITOR_ENABLED/post",
+  onEventTriggered
+);
+const useGetEditorEnabledState = (onEventTriggered) => useCrossFrameMessageListener("INTLAYER_EDITOR_ENABLED/get", onEventTriggered);
 const EditorEnabledProvider = ({ children }) => {
   const [isEnabled] = useEditorEnabledState({
     emit: false,
@@ -18,16 +24,12 @@ const EditorEnabledProvider = ({ children }) => {
   });
   return /* @__PURE__ */ jsx(EditorEnabledContext.Provider, { value: { enabled: isEnabled }, children });
 };
-const useEditorEnabled = () => {
-  const context = useContext(EditorEnabledContext);
-  if (!context) {
-    throw new Error("useEditorEnabled must be used within a EnabledProvider");
-  }
-  return context;
-};
+const useEditorEnabled = () => useContext(EditorEnabledContext);
 export {
   EditorEnabledProvider,
   useEditorEnabled,
-  useEditorEnabledState
+  useEditorEnabledState,
+  useGetEditorEnabledState,
+  usePostEditorEnabledState
 };
 //# sourceMappingURL=EditorEnabledContext.mjs.map

package/dist/esm/EditorEnabledContext.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EditorEnabledContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport {\n  type CrossFrameStateOptions,\n  useCrossFrameState,\n} from './useCrossFrameState';\n\nexport type EditorEnabledStateProps = {\n  enabled: boolean;\n};\n\nconst EditorEnabledContext = createContext<EditorEnabledStateProps | undefined>(\n  undefined\n);\n\nexport const useEditorEnabledState = (options?: CrossFrameStateOptions) =>\n  useCrossFrameState('INTLAYER_EDITOR_ENABLED', false, options);\n\nexport const EditorEnabledProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [isEnabled] = useEditorEnabledState({\n    emit: false,\n    receive: true,\n  });\n\n  return (\n    <EditorEnabledContext.Provider value={{ enabled: isEnabled }}>\n      {children}\n    </EditorEnabledContext.Provider>\n  );\n};\n\nexport const useEditorEnabled = () => {\n  const context = useContext(EditorEnabledContext);\n\n  if (!context) {\n    throw new Error('useEditorEnabled must be used within a EnabledProvider');\n  }\n  return context;\n};\n"],"mappings":";AA+BI;AA7BJ;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EAEE;AAAA,OACK;AAMP,MAAM,uBAAuB;AAAA,EAC3B;AACF;AAEO,MAAM,wBAAwB,CAAC,YACpC,mBAAmB,2BAA2B,OAAO,OAAO;AAEvD,MAAM,wBAA+C,CAAC,EAAE,SAAS,MAAM;AAC5E,QAAM,CAAC,SAAS,IAAI,sBAAsB;AAAA,IACxC,MAAM;AAAA,IACN,SAAS;AAAA,EACX,CAAC;AAED,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,SAAS,UAAU,GACxD,UACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,UAAU,WAAW,oBAAoB;AAE/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/EditorEnabledContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport {\n  type CrossFrameStateOptions,\n  useCrossFrameState,\n} from './useCrossFrameState';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type EditorEnabledStateProps = {\n  enabled: boolean;\n};\n\nconst EditorEnabledContext = createContext<EditorEnabledStateProps>({\n  enabled: false,\n});\n\nexport const useEditorEnabledState = (options?: CrossFrameStateOptions) =>\n  useCrossFrameState('INTLAYER_EDITOR_ENABLED', false, options);\n\nexport const usePostEditorEnabledState = <S,>(\n  onEventTriggered?: (data: S) => void\n) =>\n  useCrossFrameMessageListener(\n    'INTLAYER_EDITOR_ENABLED/post',\n    onEventTriggered\n  );\n\nexport const useGetEditorEnabledState = <S,>(\n  onEventTriggered?: (data: S) => void\n) =>\n  useCrossFrameMessageListener('INTLAYER_EDITOR_ENABLED/get', onEventTriggered);\n\nexport const EditorEnabledProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [isEnabled] = useEditorEnabledState({\n    emit: false,\n    receive: true,\n  });\n\n  return (\n    <EditorEnabledContext.Provider value={{ enabled: isEnabled }}>\n      {children}\n    </EditorEnabledContext.Provider>\n  );\n};\n\nexport const useEditorEnabled = () => useContext(EditorEnabledContext);\n"],"mappings":";AA6CI;AA3CJ;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EAEE;AAAA,OACK;AACP,SAAS,oCAAoC;AAM7C,MAAM,uBAAuB,cAAuC;AAAA,EAClE,SAAS;AACX,CAAC;AAEM,MAAM,wBAAwB,CAAC,YACpC,mBAAmB,2BAA2B,OAAO,OAAO;AAEvD,MAAM,4BAA4B,CACvC,qBAEA;AAAA,EACE;AAAA,EACA;AACF;AAEK,MAAM,2BAA2B,CACtC,qBAEA,6BAA6B,+BAA+B,gBAAgB;AAEvE,MAAM,wBAA+C,CAAC,EAAE,SAAS,MAAM;AAC5E,QAAM,CAAC,SAAS,IAAI,sBAAsB;AAAA,IACxC,MAAM;AAAA,IACN,SAAS;AAAA,EACX,CAAC;AAED,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,SAAS,UAAU,GACxD,UACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM,WAAW,oBAAoB;","names":[]}

package/dist/esm/EditorProvider.mjs

@@ -1,5 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import {
+  useEffect,
+  useState
+} from "react";
 import { ChangedContentProvider } from "./ChangedContentContext.mjs";
 import {
   CommunicatorProvider
@@ -8,21 +12,50 @@ import {
   ConfigurationProvider
 } from "./ConfigurationContext.mjs";
 import { DictionariesRecordProvider } from "./DictionariesRecordContext.mjs";
-import { EditedContentProvider } from "./EditedContentContext.mjs";
+import {
+  EditedContentProvider,
+  useGetEditedContentState
+} from "./EditedContentContext.mjs";
 import {
   EditorEnabledProvider,
-  useEditorEnabled
+  useEditorEnabled,
+  useGetEditorEnabledState
 } from "./EditorEnabledContext.mjs";
 import { FocusDictionaryProvider } from "./FocusDictionaryContext.mjs";
-const EditorProviderEnabled = ({ mode, children, ...props }) => {
+const EditorProvidersWrapper = ({ children }) => {
+  const getEditedContentState = useGetEditedContentState();
+  useEffect(() => {
+    getEditedContentState();
+  }, []);
+  return /* @__PURE__ */ jsx(DictionariesRecordProvider, { children: /* @__PURE__ */ jsx(EditedContentProvider, { children: /* @__PURE__ */ jsx(FocusDictionaryProvider, { children }) }) });
+};
+const EditorEnabledCheckRenderer = ({
+  children,
+  fallback
+}) => {
+  const getEditorEnabled = useGetEditorEnabledState();
   const { enabled } = useEditorEnabled();
-  return enabled || mode === "editor" ? /* @__PURE__ */ jsx(CommunicatorProvider, { ...props, children: /* @__PURE__ */ jsx(DictionariesRecordProvider, { children: /* @__PURE__ */ jsx(EditedContentProvider, { children: /* @__PURE__ */ jsx(FocusDictionaryProvider, { children }) }) }) }) : children;
+  useEffect(() => {
+    if (enabled) return;
+    getEditorEnabled();
+  }, [enabled]);
+  return enabled ? children : fallback;
+};
+const IframeCheckRenderer = ({
+  children,
+  fallback
+}) => {
+  const [isInIframe, setIsInIframe] = useState(false);
+  useEffect(() => {
+    setIsInIframe(window.self !== window.top);
+  }, []);
+  return isInIframe ? children : fallback;
 };
 const EditorProvider = ({
   children,
   configuration,
   ...props
-}) => /* @__PURE__ */ jsx(ChangedContentProvider, { children: /* @__PURE__ */ jsx(EditorEnabledProvider, { children: /* @__PURE__ */ jsx(ConfigurationProvider, { configuration, children: /* @__PURE__ */ jsx(EditorProviderEnabled, { ...props, children }) }) }) });
+}) => /* @__PURE__ */ jsx(ChangedContentProvider, { children: /* @__PURE__ */ jsx(EditorEnabledProvider, { children: /* @__PURE__ */ jsx(ConfigurationProvider, { configuration, children: props.mode === "editor" ? /* @__PURE__ */ jsx(CommunicatorProvider, { ...props, children: /* @__PURE__ */ jsx(EditorProvidersWrapper, { children }) }) : /* @__PURE__ */ jsx(IframeCheckRenderer, { fallback: children, children: /* @__PURE__ */ jsx(CommunicatorProvider, { ...props, children: /* @__PURE__ */ jsx(EditorEnabledCheckRenderer, { fallback: children, children: /* @__PURE__ */ jsx(EditorProvidersWrapper, { children }) }) }) }) }) }) });
 export {
   EditorProvider
 };

package/dist/esm/EditorProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type PropsWithChildren } from 'react';\nimport { ChangedContentProvider } from './ChangedContentContext';\nimport {\n  type CommunicatorProviderProps,\n  CommunicatorProvider,\n} from './CommunicatorContext';\nimport {\n  type ConfigurationProviderProps,\n  ConfigurationProvider,\n} from './ConfigurationContext';\nimport { DictionariesRecordProvider } from './DictionariesRecordContext';\nimport { EditedContentProvider } from './EditedContentContext';\nimport {\n  EditorEnabledProvider,\n  useEditorEnabled,\n} from './EditorEnabledContext';\nimport { FocusDictionaryProvider } from './FocusDictionaryContext';\n\ntype EditorProviderEnabledProps = CommunicatorProviderProps & {\n  mode: 'editor' | 'client';\n};\n\nconst EditorProviderEnabled: FC<\n  PropsWithChildren<EditorProviderEnabledProps>\n> = ({ mode, children, ...props }) => {\n  const { enabled } = useEditorEnabled();\n\n  return enabled || mode === 'editor' ? (\n    <CommunicatorProvider {...props}>\n      <DictionariesRecordProvider>\n        <EditedContentProvider>\n          <FocusDictionaryProvider>{children}</FocusDictionaryProvider>\n        </EditedContentProvider>\n      </DictionariesRecordProvider>\n    </CommunicatorProvider>\n  ) : (\n    children\n  );\n};\n\nexport type EditorProviderProps = EditorProviderEnabledProps &\n  ConfigurationProviderProps;\n\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n  children,\n  configuration,\n  ...props\n}) => (\n  <ChangedContentProvider>\n    <EditorEnabledProvider>\n      <ConfigurationProvider configuration={configuration}>\n        <EditorProviderEnabled {...props}>{children}</EditorProviderEnabled>\n      </ConfigurationProvider>\n    </EditorEnabledProvider>\n  </ChangedContentProvider>\n);\n"],"mappings":";AAiCU;AA9BV,SAAS,8BAA8B;AACvC;AAAA,EAEE;AAAA,OACK;AACP;AAAA,EAEE;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAMxC,MAAM,wBAEF,CAAC,EAAE,MAAM,UAAU,GAAG,MAAM,MAAM;AACpC,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,SAAO,WAAW,SAAS,WACzB,oBAAC,wBAAsB,GAAG,OACxB,8BAAC,8BACC,8BAAC,yBACC,8BAAC,2BAAyB,UAAS,GACrC,GACF,GACF,IAEA;AAEJ;AAKO,MAAM,iBAA6D,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,0BACC,8BAAC,yBACC,8BAAC,yBAAsB,eACrB,8BAAC,yBAAuB,GAAG,OAAQ,UAAS,GAC9C,GACF,GACF;","names":[]}
+{"version":3,"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ReactNode,\n  useEffect,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { ChangedContentProvider } from './ChangedContentContext';\nimport {\n  type CommunicatorProviderProps,\n  CommunicatorProvider,\n} from './CommunicatorContext';\nimport {\n  type ConfigurationProviderProps,\n  ConfigurationProvider,\n} from './ConfigurationContext';\nimport { DictionariesRecordProvider } from './DictionariesRecordContext';\nimport {\n  EditedContentProvider,\n  useGetEditedContentState,\n} from './EditedContentContext';\nimport {\n  EditorEnabledProvider,\n  useEditorEnabled,\n  useGetEditorEnabledState,\n} from './EditorEnabledContext';\nimport { FocusDictionaryProvider } from './FocusDictionaryContext';\n\n/**\n * This component add all the providers needed by the editor.\n * It is used to wrap the application, or the editor to work together.\n */\nconst EditorProvidersWrapper: FC<PropsWithChildren> = ({ children }) => {\n  const getEditedContentState = useGetEditedContentState();\n\n  useEffect(() => {\n    getEditedContentState();\n  }, []);\n\n  return (\n    <DictionariesRecordProvider>\n      <EditedContentProvider>\n        <FocusDictionaryProvider>{children}</FocusDictionaryProvider>\n      </EditedContentProvider>\n    </DictionariesRecordProvider>\n  );\n};\n\ntype FallbackProps = {\n  fallback: ReactNode;\n};\n\n/**\n * This component check if the editor is enabled to render the editor providers.\n */\nconst EditorEnabledCheckRenderer: FC<PropsWithChildren<FallbackProps>> = ({\n  children,\n  fallback,\n}) => {\n  const getEditorEnabled = useGetEditorEnabledState();\n\n  const { enabled } = useEditorEnabled();\n\n  useEffect(() => {\n    if (enabled) return;\n\n    // Check if the editor is wrapping the application\n    getEditorEnabled();\n  }, [enabled]);\n\n  return enabled ? children : fallback;\n};\n\n/**\n * This component is used to check if the editor is wrapping the application.\n * It avoid to send window.postMessage to the application if the editor is not wrapping the application.\n */\nconst IframeCheckRenderer: FC<PropsWithChildren<FallbackProps>> = ({\n  children,\n  fallback,\n}) => {\n  const [isInIframe, setIsInIframe] = useState(false);\n\n  useEffect(() => {\n    setIsInIframe(window.self !== window.top);\n  }, []);\n\n  return isInIframe ? children : fallback;\n};\n\nexport type EditorProviderProps = CommunicatorProviderProps &\n  ConfigurationProviderProps & {\n    mode: 'editor' | 'client';\n  };\n\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n  children,\n  configuration,\n  ...props\n}) => (\n  <ChangedContentProvider>\n    <EditorEnabledProvider>\n      <ConfigurationProvider configuration={configuration}>\n        {props.mode === 'editor' ? (\n          <CommunicatorProvider {...props}>\n            <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n          </CommunicatorProvider>\n        ) : (\n          <IframeCheckRenderer fallback={children}>\n            <CommunicatorProvider {...props}>\n              <EditorEnabledCheckRenderer fallback={children}>\n                <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n              </EditorEnabledCheckRenderer>\n            </CommunicatorProvider>\n          </IframeCheckRenderer>\n        )}\n      </ConfigurationProvider>\n    </EditorEnabledProvider>\n  </ChangedContentProvider>\n);\n"],"mappings":";AA4CQ;AA1CR;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,8BAA8B;AACvC;AAAA,EAEE;AAAA,OACK;AACP;AAAA,EAEE;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAMxC,MAAM,yBAAgD,CAAC,EAAE,SAAS,MAAM;AACtE,QAAM,wBAAwB,yBAAyB;AAEvD,YAAU,MAAM;AACd,0BAAsB;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,8BACC,8BAAC,yBACC,8BAAC,2BAAyB,UAAS,GACrC,GACF;AAEJ;AASA,MAAM,6BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB,yBAAyB;AAElD,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,YAAU,MAAM;AACd,QAAI,QAAS;AAGb,qBAAiB;AAAA,EACnB,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,UAAU,WAAW;AAC9B;AAMA,MAAM,sBAA4D,CAAC;AAAA,EACjE;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,YAAU,MAAM;AACd,kBAAc,OAAO,SAAS,OAAO,GAAG;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,SAAO,aAAa,WAAW;AACjC;AAOO,MAAM,iBAA6D,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,0BACC,8BAAC,yBACC,8BAAC,yBAAsB,eACpB,gBAAM,SAAS,WACd,oBAAC,wBAAsB,GAAG,OACxB,8BAAC,0BAAwB,UAAS,GACpC,IAEA,oBAAC,uBAAoB,UAAU,UAC7B,8BAAC,wBAAsB,GAAG,OACxB,8BAAC,8BAA2B,UAAU,UACpC,8BAAC,0BAAwB,UAAS,GACpC,GACF,GACF,GAEJ,GACF,GACF;","names":[]}

package/dist/esm/useCrossFrameMessageListener.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { useCommunicator } from "./CommunicatorContext.mjs";
 const compareUrls = (url1, url2) => {
   try {
@@ -19,7 +19,7 @@ const compareUrls = (url1, url2) => {
     return false;
   }
 };
-const useCrossFrameMessageListener = (key, onEventTriggered) => {
+const useCrossFrameMessageListener = (key, onEventTriggered, revalidator) => {
   const { allowedOrigins, postMessage, senderId } = useCommunicator();
   useEffect(() => {
     if (onEventTriggered) {
@@ -34,14 +34,11 @@ const useCrossFrameMessageListener = (key, onEventTriggered) => {
       window.addEventListener("message", handleMessage);
       return () => window.removeEventListener("message", handleMessage);
     }
-  }, [allowedOrigins, postMessage, senderId]);
-  const postMessageWrapper = useCallback(
-    (data) => {
-      postMessage({ type: key, data, senderId });
-    },
-    [postMessage, key, senderId]
-  );
-  return useMemo(() => postMessageWrapper, [postMessageWrapper]);
+  }, [allowedOrigins, postMessage, senderId, revalidator]);
+  const postMessageWrapper = (data) => {
+    postMessage({ type: key, data, senderId });
+  };
+  return postMessageWrapper;
 };
 export {
   useCrossFrameMessageListener

package/dist/esm/useCrossFrameMessageListener.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\n\n/**\n * Compare two URLs for equality.\n * This function is used to determine if a message originates from the same origin.\n *\n * ```js\n * // Example usage\n * console.log(compareUrls(\"http://localhost:5173/\", \"http://localhost:5173\")); // true\n * console.log(compareUrls(\"http://localhost:5173\", \"http://localhost:5173?myParam=true\")); // true\n * console.log(compareUrls(\"http://localhost:5173/subpath\", \"http://localhost:5173\")); // true\n * console.log(compareUrls(\"http://localhost:5172\", \"http://localhost:5173\")); // false\n * ```\n *\n * @param url1 - The first URL to compare.\n * @param url2 - The second URL to compare.\n * @returns Whether the two URLs are equal.\n */\nconst compareUrls = (url1: string, url2: string): boolean => {\n  try {\n    const parsedUrl1 = new URL(url1);\n    const parsedUrl2 = new URL(url2);\n\n    // Compare protocol, hostname, and port\n    if (\n      parsedUrl1.protocol !== parsedUrl2.protocol ||\n      parsedUrl1.hostname !== parsedUrl2.hostname ||\n      parsedUrl1.port !== parsedUrl2.port\n    ) {\n      return false;\n    }\n\n    // One URL should not have a subpath while the other does\n    const path1 = parsedUrl1.pathname.replace(/\\/$/, ''); // Remove trailing slash\n    const path2 = parsedUrl2.pathname.replace(/\\/$/, '');\n\n    if (path1 !== '' && path2 !== '' && path1 !== path2) {\n      return false;\n    }\n\n    return true;\n  } catch (error) {\n    console.error('Invalid URL(s)', error);\n    return false;\n  }\n};\n\n/**\n * useCrossFrameMessageListener\n *\n * This React hook listens for messages sent via the `postMessage` API and triggers a callback\n * whenever a message of the specified type (`key`) is received. It is useful for synchronizing\n * state or events across different windows, iframes, or contexts.\n *\n * @template S - The type of the data payload in the message.\n * @param {`${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`} key - A unique identifier for the message type to listen for.\n * @param {(data: S) => void} [onEventTriggered] - A callback function triggered when a message\n * with the specified key is received. The callback receives the message data as its argument.\n *\n * @returns {{ postMessage: (data: S) => void }} An object containing a `postMessage` function\n * that allows broadcasting messages with the specified key and data.\n */\nexport const useCrossFrameMessageListener = <S,>(\n  key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`,\n  onEventTriggered?: (data: S) => void\n) => {\n  const { allowedOrigins, postMessage, senderId } = useCommunicator();\n\n  useEffect(() => {\n    if (onEventTriggered) {\n      /**\n       * Message handler to process incoming messages.\n       *\n       * - **Message Filtering:** Ensures only messages with the specified `key` are processed.\n       * - **Origin Validation:** Checks that the origin of the message is within the allowed origins.\n       *\n       * @param {MessageEvent<{ type: string; data: S }>} event - The incoming message event object.\n       */\n      const handleMessage = (\n        event: MessageEvent<{ type: string; data: S; senderId: string }>\n      ) => {\n        const { type, data, senderId: msgSenderId } = event.data;\n\n        // Ignore messages that do not match the current key\n        if (type !== key) return;\n\n        // Ignore messages from myself\n        if (msgSenderId === senderId) return;\n\n        // Check if the message origin is allowed\n        if (\n          typeof allowedOrigins === 'undefined' ||\n          allowedOrigins?.some((url) => compareUrls(url, event.origin)) ||\n          allowedOrigins?.includes('*')\n        ) {\n          // Update the local state with the received data\n          onEventTriggered(data);\n        }\n      };\n\n      window.addEventListener('message', handleMessage);\n\n      // Clean up the event listener on unmount\n      return () => window.removeEventListener('message', handleMessage);\n    }\n  }, [allowedOrigins, postMessage, senderId]);\n\n  /**\n   * A wrapper function around the `postMessage` function to broadcast messages efficiently.\n   *\n   * - **Encapsulation:** Ensures the `postMessage` function is scoped to the provided key.\n   * - **Ease of Use:** Simplifies broadcasting messages with consistent type and format.\n   *\n   * @param {S} data - The data payload to include in the message.\n   * @returns {void}\n   */\n  const postMessageWrapper: (data: S) => void = useCallback(\n    (data) => {\n      postMessage({ type: key, data, senderId });\n    },\n    [postMessage, key, senderId]\n  );\n\n  return useMemo(() => postMessageWrapper, [postMessageWrapper]);\n};\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,eAAe;AAChD,SAAS,uBAAuB;AAmBhC,MAAM,cAAc,CAAC,MAAc,SAA0B;AAC3D,MAAI;AACF,UAAM,aAAa,IAAI,IAAI,IAAI;AAC/B,UAAM,aAAa,IAAI,IAAI,IAAI;AAG/B,QACE,WAAW,aAAa,WAAW,YACnC,WAAW,aAAa,WAAW,YACnC,WAAW,SAAS,WAAW,MAC/B;AACA,aAAO;AAAA,IACT;AAGA,UAAM,QAAQ,WAAW,SAAS,QAAQ,OAAO,EAAE;AACnD,UAAM,QAAQ,WAAW,SAAS,QAAQ,OAAO,EAAE;AAEnD,QAAI,UAAU,MAAM,UAAU,MAAM,UAAU,OAAO;AACnD,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,kBAAkB,KAAK;AACrC,WAAO;AAAA,EACT;AACF;AAiBO,MAAM,+BAA+B,CAC1C,KACA,qBACG;AACH,QAAM,EAAE,gBAAgB,aAAa,SAAS,IAAI,gBAAgB;AAElE,YAAU,MAAM;AACd,QAAI,kBAAkB;AASpB,YAAM,gBAAgB,CACpB,UACG;AACH,cAAM,EAAE,MAAM,MAAM,UAAU,YAAY,IAAI,MAAM;AAGpD,YAAI,SAAS,IAAK;AAGlB,YAAI,gBAAgB,SAAU;AAG9B,YACE,OAAO,mBAAmB,eAC1B,gBAAgB,KAAK,CAAC,QAAQ,YAAY,KAAK,MAAM,MAAM,CAAC,KAC5D,gBAAgB,SAAS,GAAG,GAC5B;AAEA,2BAAiB,IAAI;AAAA,QACvB;AAAA,MACF;AAEA,aAAO,iBAAiB,WAAW,aAAa;AAGhD,aAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,gBAAgB,aAAa,QAAQ,CAAC;AAW1C,QAAM,qBAAwC;AAAA,IAC5C,CAAC,SAAS;AACR,kBAAY,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;AAAA,IAC3C;AAAA,IACA,CAAC,aAAa,KAAK,QAAQ;AAAA,EAC7B;AAEA,SAAO,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAC/D;","names":[]}
+{"version":3,"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\n\n/**\n * Compare two URLs for equality.\n * This function is used to determine if a message originates from the same origin.\n *\n * ```js\n * // Example usage\n * console.log(compareUrls(\"http://localhost:5173/\", \"http://localhost:5173\")); // true\n * console.log(compareUrls(\"http://localhost:5173\", \"http://localhost:5173?myParam=true\")); // true\n * console.log(compareUrls(\"http://localhost:5173/subpath\", \"http://localhost:5173\")); // true\n * console.log(compareUrls(\"http://localhost:5172\", \"http://localhost:5173\")); // false\n * ```\n *\n * @param url1 - The first URL to compare.\n * @param url2 - The second URL to compare.\n * @returns Whether the two URLs are equal.\n */\nconst compareUrls = (url1: string, url2: string): boolean => {\n  try {\n    const parsedUrl1 = new URL(url1);\n    const parsedUrl2 = new URL(url2);\n\n    // Compare protocol, hostname, and port\n    if (\n      parsedUrl1.protocol !== parsedUrl2.protocol ||\n      parsedUrl1.hostname !== parsedUrl2.hostname ||\n      parsedUrl1.port !== parsedUrl2.port\n    ) {\n      return false;\n    }\n\n    // One URL should not have a subpath while the other does\n    const path1 = parsedUrl1.pathname.replace(/\\/$/, ''); // Remove trailing slash\n    const path2 = parsedUrl2.pathname.replace(/\\/$/, '');\n\n    if (path1 !== '' && path2 !== '' && path1 !== path2) {\n      return false;\n    }\n\n    return true;\n  } catch (error) {\n    console.error('Invalid URL(s)', error);\n    return false;\n  }\n};\n\n/**\n * useCrossFrameMessageListener\n *\n * This React hook listens for messages sent via the `postMessage` API and triggers a callback\n * whenever a message of the specified type (`key`) is received. It is useful for synchronizing\n * state or events across different windows, iframes, or contexts.\n *\n * @template S - The type of the data payload in the message.\n * @param key - A unique identifier for the message type to listen for.\n * @param [onEventTriggered] - A callback function triggered when a message\n * @param [revalidator] - A function that re-suscribes the listener. Could be usefull if onEventTriggered depend of some state\n * with the specified key is received. The callback receives the message data as its argument.\n *\n * @returns {{ postMessage: (data: S) => void }} An object containing a `postMessage` function\n * that allows broadcasting messages with the specified key and data.\n */\nexport const useCrossFrameMessageListener = <S,>(\n  key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`,\n  onEventTriggered?: (data: S) => void,\n  revalidator?: any\n) => {\n  const { allowedOrigins, postMessage, senderId } = useCommunicator();\n\n  useEffect(() => {\n    if (onEventTriggered) {\n      /**\n       * Message handler to process incoming messages.\n       *\n       * - **Message Filtering:** Ensures only messages with the specified `key` are processed.\n       * - **Origin Validation:** Checks that the origin of the message is within the allowed origins.\n       *\n       * @param {MessageEvent<{ type: string; data: S }>} event - The incoming message event object.\n       */\n      const handleMessage = (\n        event: MessageEvent<{ type: string; data: S; senderId: string }>\n      ) => {\n        const { type, data, senderId: msgSenderId } = event.data;\n\n        // Ignore messages that do not match the current key\n        if (type !== key) return;\n\n        // Ignore messages from myself\n        if (msgSenderId === senderId) return;\n\n        // Check if the message origin is allowed\n        if (\n          typeof allowedOrigins === 'undefined' ||\n          allowedOrigins?.some((url) => compareUrls(url, event.origin)) ||\n          allowedOrigins?.includes('*')\n        ) {\n          // Update the local state with the received data\n          onEventTriggered(data);\n        }\n      };\n\n      window.addEventListener('message', handleMessage);\n\n      // Clean up the event listener on unmount\n      return () => window.removeEventListener('message', handleMessage);\n    }\n  }, [allowedOrigins, postMessage, senderId, revalidator]);\n\n  /**\n   * A wrapper function around the `postMessage` function to broadcast messages efficiently.\n   *\n   * - **Encapsulation:** Ensures the `postMessage` function is scoped to the provided key.\n   * - **Ease of Use:** Simplifies broadcasting messages with consistent type and format.\n   *\n   * @param {S} data - The data payload to include in the message.\n   * @returns {void}\n   */\n  const postMessageWrapper: (data?: S) => void = (data) => {\n    postMessage({ type: key, data, senderId });\n  };\n\n  return postMessageWrapper;\n};\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAmBhC,MAAM,cAAc,CAAC,MAAc,SAA0B;AAC3D,MAAI;AACF,UAAM,aAAa,IAAI,IAAI,IAAI;AAC/B,UAAM,aAAa,IAAI,IAAI,IAAI;AAG/B,QACE,WAAW,aAAa,WAAW,YACnC,WAAW,aAAa,WAAW,YACnC,WAAW,SAAS,WAAW,MAC/B;AACA,aAAO;AAAA,IACT;AAGA,UAAM,QAAQ,WAAW,SAAS,QAAQ,OAAO,EAAE;AACnD,UAAM,QAAQ,WAAW,SAAS,QAAQ,OAAO,EAAE;AAEnD,QAAI,UAAU,MAAM,UAAU,MAAM,UAAU,OAAO;AACnD,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,kBAAkB,KAAK;AACrC,WAAO;AAAA,EACT;AACF;AAkBO,MAAM,+BAA+B,CAC1C,KACA,kBACA,gBACG;AACH,QAAM,EAAE,gBAAgB,aAAa,SAAS,IAAI,gBAAgB;AAElE,YAAU,MAAM;AACd,QAAI,kBAAkB;AASpB,YAAM,gBAAgB,CACpB,UACG;AACH,cAAM,EAAE,MAAM,MAAM,UAAU,YAAY,IAAI,MAAM;AAGpD,YAAI,SAAS,IAAK;AAGlB,YAAI,gBAAgB,SAAU;AAG9B,YACE,OAAO,mBAAmB,eAC1B,gBAAgB,KAAK,CAAC,QAAQ,YAAY,KAAK,MAAM,MAAM,CAAC,KAC5D,gBAAgB,SAAS,GAAG,GAC5B;AAEA,2BAAiB,IAAI;AAAA,QACvB;AAAA,MACF;AAEA,aAAO,iBAAiB,WAAW,aAAa;AAGhD,aAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,gBAAgB,aAAa,UAAU,WAAW,CAAC;AAWvD,QAAM,qBAAyC,CAAC,SAAS;AACvD,gBAAY,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;AAAA,EAC3C;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/useCrossFrameState.mjs

@@ -1,59 +1,51 @@
 "use client";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
+import { useEffect, useState } from "react";
 import { useCommunicator } from "./CommunicatorContext.mjs";
 import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
 const resolveState = (state, prevState) => typeof state === "function" ? state(prevState) : state;
 const useCrossFrameState = (key, initialState, options) => {
   const { postMessage, senderId } = useCommunicator();
-  const { emit, receive } = useMemo(
-    () => options ?? { emit: true, receive: true },
-    [options]
-  );
-  const handleStateChange = useCallback(
-    (state2, prevState) => {
-      const resolvedState = resolveState(state2, prevState);
-      if (emit && typeof postMessage === "function" && typeof resolvedState !== "undefined" && JSON.stringify(resolvedState) !== JSON.stringify(prevState)) {
-        postMessage({ type: `${key}/post`, data: resolvedState, senderId });
-      }
-      return resolvedState;
-    },
-    [key, postMessage, senderId]
-  );
+  const { emit, receive } = options ?? { emit: true, receive: true };
+  const handleStateChange = (state2, prevState) => {
+    const resolvedState = resolveState(state2, prevState);
+    if (emit && typeof postMessage === "function" && typeof resolvedState !== "undefined") {
+      postMessage({ type: `${key}/post`, data: resolvedState, senderId });
+    }
+    return resolvedState;
+  };
+  const postState = () => {
+    if (typeof postMessage !== "function") return;
+    postMessage({ type: `${key}/post`, data: state, senderId });
+  };
   const [state, setState] = useState(() => handleStateChange(initialState));
-  const setStateWrapper = useCallback(
-    (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState)),
-    [handleStateChange]
-  );
+  const setStateWrapper = (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState));
   useCrossFrameMessageListener(
     `${key}/post`,
     // Only activate the state listener if the `receive` option is true
-    receive ? setState : void 0
-  );
-  const onGetMessage = useCallback(
-    (_, originSenderId) => {
-      if (!emit || typeof postMessage !== "function") return;
-      if (originSenderId === senderId) return;
-      if (typeof state === "undefined") return;
-      postMessage({ type: `${key}/post`, data: state, senderId });
-    },
-    [emit, key, postMessage, senderId, state]
+    receive ? (data) => {
+      setState(data);
+    } : void 0
   );
+  const onGetMessage = (_, originSenderId) => {
+    if (!emit) return;
+    if (typeof postMessage !== "function") return;
+    if (originSenderId === senderId) return;
+    if (typeof state === "undefined") return;
+    postMessage({ type: `${key}/post`, data: state, senderId });
+  };
   useCrossFrameMessageListener(
     `${key}/get`,
     // Only activate the state listener if the `emit` option is true
-    emit ? onGetMessage : void 0
+    emit ? onGetMessage : void 0,
+    state
+    // Revalidate the listener if the state changes
   );
   useEffect(() => {
-    if (receive && typeof postMessage === "function") {
+    if (receive && typeof postMessage === "function" && typeof state === "undefined") {
       postMessage({ type: `${key}/get`, senderId });
     }
   }, []);
-  return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);
+  return [state, setStateWrapper, postState];
 };
 export {
   useCrossFrameState

package/dist/esm/useCrossFrameState.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\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 {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [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>>] => {\n  const { postMessage, senderId } = useCommunicator();\n\n  const { emit, receive } = useMemo(\n    () => options ?? { emit: true, receive: true },\n    [options]\n  );\n\n  const handleStateChange = useCallback(\n    (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        JSON.stringify(resolvedState) !== JSON.stringify(prevState)\n      ) {\n        postMessage({ type: `${key}/post`, data: resolvedState, senderId });\n      }\n\n      return resolvedState;\n    },\n    [key, postMessage, 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>> = useCallback(\n    (valueOrUpdater) =>\n      setState((prevState) => handleStateChange(valueOrUpdater, prevState)),\n    [handleStateChange]\n  );\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 ? setState : undefined\n  );\n\n  const onGetMessage = useCallback(\n    (_: unknown, originSenderId?: string) => {\n      if (!emit || 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    [emit, key, postMessage, senderId, state]\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  );\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 (receive && typeof postMessage === 'function') {\n      postMessage({ type: `${key}/get`, senderId });\n    }\n  }, []);\n\n  // Return the useState state and setter\n  return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);\n};\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oCAAoC;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACqC;AACrC,QAAM,EAAE,aAAa,SAAS,IAAI,gBAAgB;AAElD,QAAM,EAAE,MAAM,QAAQ,IAAI;AAAA,IACxB,MAAM,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAAA,IAC7C,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAACA,QAA2B,cAAkB;AAE5C,YAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,UACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,eACzB,KAAK,UAAU,aAAa,MAAM,KAAK,UAAU,SAAS,GAC1D;AACA,oBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,eAAe,SAAS,CAAC;AAAA,MACpE;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,KAAK,aAAa,QAAQ;AAAA,EAC7B;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,kBAA+C;AAAA,IACnD,CAAC,mBACC,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAAA,IACtE,CAAC,iBAAiB;AAAA,EACpB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UAAU,WAAW;AAAA,EACvB;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,GAAY,mBAA4B;AACvC,UAAI,CAAC,QAAQ,OAAO,gBAAgB,WAAY;AAChD,UAAI,mBAAmB,SAAU;AACjC,UAAI,OAAO,UAAU,YAAa;AAElC,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5D;AAAA,IACA,CAAC,MAAM,KAAK,aAAa,UAAU,KAAK;AAAA,EAC1C;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OAAO,eAAe;AAAA,EACxB;AAEA,YAAU,MAAM;AAGd,QAAI,WAAW,OAAO,gBAAgB,YAAY;AAChD,kBAAY,EAAE,MAAM,GAAG,GAAG,QAAQ,SAAS,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,SAAO,QAAQ,MAAM,CAAC,OAAO,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC;AACzE;","names":["state"]}
+{"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type Dispatch, type SetStateAction } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\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 {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [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":";AAEA,SAAS,WAAW,gBAAoD;AACxE,SAAS,uBAAuB;AAEhC,SAAS,oCAAoC;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,IAAI,gBAAgB;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,IAAI,SAAY,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,YAAU,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"]}

package/dist/esm/useCrossURLPathState.mjs

@@ -3,12 +3,12 @@ import { useEffect } from "react";
 import {
   useCrossFrameState
 } from "./useCrossFrameState.mjs";
-const useCrossURLPathState = (initialState, options) => {
-  const states = useCrossFrameState(
-    "INTLAYER_URL_CHANGE",
-    initialState,
-    options
-  );
+const useCrossURLPathState = (initialState, options) => useCrossFrameState("INTLAYER_URL_CHANGE", initialState, options);
+const useCrossURLPathSetter = (initialState) => {
+  const states = useCrossURLPathState(initialState, {
+    emit: true,
+    receive: false
+  });
   const [_state, setState] = states;
   useEffect(() => {
     const originalPushState = history.pushState;
@@ -35,10 +35,11 @@ const useCrossURLPathState = (initialState, options) => {
       history.pushState = originalPushState;
       history.replaceState = originalReplaceState;
     };
-  }, [setState]);
+  }, []);
   return states;
 };
 export {
+  useCrossURLPathSetter,
   useCrossURLPathState
 };
 //# sourceMappingURL=useCrossURLPathState.mjs.map

package/dist/esm/useCrossURLPathState.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport {\n  useCrossFrameState,\n  type CrossFrameStateOptions,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n  initialState?: string,\n  options?: CrossFrameStateOptions\n) => {\n  const states = useCrossFrameState<string>(\n    'INTLAYER_URL_CHANGE',\n    initialState,\n    options\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  }, [setState]);\n\n  return states;\n};\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,uBAAuB,CAClC,cACA,YACG;AACH,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,QAAQ,IAAI;AAE3B,YAAU,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,QAAQ,CAAC;AAEb,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\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('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":";AAEA,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,uBAAuB,CAClC,cACA,YACG,mBAAmB,uBAAuB,cAAc,OAAO;AAE7D,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,YAAU,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":[]}

package/dist/types/ConfigurationContext.d.ts

@@ -1,6 +1,6 @@
 import { type IntlayerConfig } from '@intlayer/config/client';
 import { type FC, type PropsWithChildren } from 'react';
-export declare const useConfigurationState: () => [IntlayerConfig, import("react").Dispatch<import("react").SetStateAction<IntlayerConfig>>];
+export declare const useConfigurationState: () => [IntlayerConfig, import("react").Dispatch<import("react").SetStateAction<IntlayerConfig>>, () => void];
 export type ConfigurationProviderProps = {
     configuration?: IntlayerConfig;
 };

package/dist/types/ConfigurationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationContext.d.ts","sourceRoot":"","sources":["../../src/ConfigurationContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAOf,eAAO,MAAM,qBAAqB,kGAI9B,CAAC;AAEL,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,0BAA0B,CAAC,CAK9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,sBAA+C,CAAC"}
+{"version":3,"file":"ConfigurationContext.d.ts","sourceRoot":"","sources":["../../src/ConfigurationContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAOf,eAAO,MAAM,qBAAqB,8GAI9B,CAAC;AAEL,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,0BAA0B,CAAC,CAK9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,sBAA+C,CAAC"}

package/dist/types/EditedContentContext.d.ts

@@ -1,6 +1,7 @@
 import { type Dictionary, type ContentNode, type KeyPath } from '@intlayer/core';
 import { type Dispatch, type SetStateAction, type FC, type PropsWithChildren } from 'react';
-import { type DictionaryContent } from './DictionariesRecordContext';
+export declare const usePostEditedContentState: <S>(onEventTriggered?: (data: S) => void) => (data?: S) => void;
+export declare const useGetEditedContentState: <S>(onEventTriggered?: (data: S) => void) => (data?: S) => void;
 type EditedContentActionsContextType = {
     setEditedContentState: (editedContent: Record<Dictionary['key'], Dictionary>) => void;
     setEditedDictionary: Dispatch<SetStateAction<Dictionary>>;
@@ -13,7 +14,6 @@ type EditedContentActionsContextType = {
     clearEditedContent: () => void;
     getEditedContentValue: (dictionaryKey: Dictionary['key'], keyPath: KeyPath[]) => ContentNode | undefined;
 };
-export declare const useEditedContentState: () => [DictionaryContent, Dispatch<SetStateAction<DictionaryContent>>];
 export declare const EditedContentProvider: FC<PropsWithChildren>;
 export declare const useEditedContentActions: () => EditedContentActionsContextType;
 export declare const useEditedContent: () => {

package/dist/types/EditedContentContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditedContentContext.d.ts","sourceRoot":"","sources":["../../src/EditedContentContext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EditedContentContext.d.ts","sourceRoot":"","sources":["../../src/EditedContentContext.tsx"],"names":[],"mappings":"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"}

package/dist/types/EditorEnabledContext.d.ts

@@ -3,7 +3,9 @@ import { type CrossFrameStateOptions } from './useCrossFrameState';
 export type EditorEnabledStateProps = {
     enabled: boolean;
 };
-export declare const useEditorEnabledState: (options?: CrossFrameStateOptions) => [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
+export declare const useEditorEnabledState: (options?: CrossFrameStateOptions) => [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>, () => void];
+export declare const usePostEditorEnabledState: <S>(onEventTriggered?: (data: S) => void) => (data?: S) => void;
+export declare const useGetEditorEnabledState: <S>(onEventTriggered?: (data: S) => void) => (data?: S) => void;
 export declare const EditorEnabledProvider: FC<PropsWithChildren>;
 export declare const useEditorEnabled: () => EditorEnabledStateProps;
 //# sourceMappingURL=EditorEnabledContext.d.ts.map

package/dist/types/EditorEnabledContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorEnabledContext.d.ts","sourceRoot":"","sources":["../../src/EditorEnabledContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,eAAO,MAAM,qBAAqB,aAAc,sBAAsB,iFACP,CAAC;AAEhE,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,iBAAiB,CAWvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,+BAO5B,CAAC"}
+{"version":3,"file":"EditorEnabledContext.d.ts","sourceRoot":"","sources":["../../src/EditorEnabledContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,eAAO,MAAM,qBAAqB,aAAc,sBAAsB,6FACP,CAAC;AAEhE,eAAO,MAAM,yBAAyB,GAAI,CAAC,qBACtB,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,uBAKnC,CAAC;AAEJ,eAAO,MAAM,wBAAwB,GAAI,CAAC,qBACrB,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,uBAEyC,CAAC;AAEhF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,iBAAiB,CAWvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,+BAAyC,CAAC"}

package/dist/types/EditorProvider.d.ts

@@ -1,10 +1,8 @@
 import { type FC, type PropsWithChildren } from 'react';
 import { type CommunicatorProviderProps } from './CommunicatorContext';
 import { type ConfigurationProviderProps } from './ConfigurationContext';
-type EditorProviderEnabledProps = CommunicatorProviderProps & {
+export type EditorProviderProps = CommunicatorProviderProps & ConfigurationProviderProps & {
     mode: 'editor' | 'client';
 };
-export type EditorProviderProps = EditorProviderEnabledProps & ConfigurationProviderProps;
 export declare const EditorProvider: FC<PropsWithChildren<EditorProviderProps>>;
-export {};
 //# sourceMappingURL=EditorProvider.d.ts.map

package/dist/types/EditorProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorProvider.d.ts","sourceRoot":"","sources":["../../src/EditorProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EACL,KAAK,yBAAyB,EAE/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,0BAA0B,EAEhC,MAAM,wBAAwB,CAAC;AAShC,KAAK,0BAA0B,GAAG,yBAAyB,GAAG;IAC5D,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAoBF,MAAM,MAAM,mBAAmB,GAAG,0BAA0B,GAC1D,0BAA0B,CAAC;AAE7B,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYrE,CAAC"}
+{"version":3,"file":"EditorProvider.d.ts","sourceRoot":"","sources":["../../src/EditorProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,yBAAyB,EAE/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,0BAA0B,EAEhC,MAAM,wBAAwB,CAAC;AA2EhC,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GACzD,0BAA0B,GAAG;IAC3B,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAwBrE,CAAC"}

package/dist/types/useCrossFrameMessageListener.d.ts

@@ -7,12 +7,13 @@ import { type MessageKey } from './messageKey';
  * state or events across different windows, iframes, or contexts.
  *
  * @template S - The type of the data payload in the message.
- * @param {`${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`} key - A unique identifier for the message type to listen for.
- * @param {(data: S) => void} [onEventTriggered] - A callback function triggered when a message
+ * @param key - A unique identifier for the message type to listen for.
+ * @param [onEventTriggered] - A callback function triggered when a message
+ * @param [revalidator] - A function that re-suscribes the listener. Could be usefull if onEventTriggered depend of some state
  * with the specified key is received. The callback receives the message data as its argument.
  *
  * @returns {{ postMessage: (data: S) => void }} An object containing a `postMessage` function
  * that allows broadcasting messages with the specified key and data.
  */
-export declare const useCrossFrameMessageListener: <S>(key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`, onEventTriggered?: (data: S) => void) => (data: S) => void;
+export declare const useCrossFrameMessageListener: <S>(key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`, onEventTriggered?: (data: S) => void, revalidator?: any) => (data?: S) => void;
 //# sourceMappingURL=useCrossFrameMessageListener.d.ts.map

package/dist/types/useCrossFrameMessageListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCrossFrameMessageListener.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameMessageListener.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AA+C/C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,OACvC,GAAG,UAAU,EAAE,GAAG,GAAG,UAAU,OAAO,GAAG,GAAG,UAAU,MAAM,qBAC9C,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,YAoDH,CAAC,KAAK,IAQxC,CAAC"}
+{"version":3,"file":"useCrossFrameMessageListener.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameMessageListener.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AA+C/C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,OACvC,GAAG,UAAU,EAAE,GAAG,GAAG,UAAU,OAAO,GAAG,GAAG,UAAU,MAAM,qBAC9C,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,gBACtB,GAAG,aAoDiB,CAAC,KAAK,IAKzC,CAAC"}

package/dist/types/useCrossFrameState.d.ts

@@ -25,5 +25,5 @@ export type CrossFrameStateOptions = {
  *
  * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.
  */
-export declare const useCrossFrameState: <S>(key: `${MessageKey}`, initialState?: S | (() => S), options?: CrossFrameStateOptions) => [S, Dispatch<SetStateAction<S>>];
+export declare const useCrossFrameState: <S>(key: `${MessageKey}`, initialState?: S | (() => S), options?: CrossFrameStateOptions) => [S, Dispatch<SetStateAction<S>>, () => void];
 //# sourceMappingURL=useCrossFrameState.d.ts.map

package/dist/types/useCrossFrameState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCrossFrameState.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameState.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAOF;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,OAC7B,GAAG,UAAU,EAAE,iBACL,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,YAClB,sBAAsB,KAC/B,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CA2FjC,CAAC"}
+{"version":3,"file":"useCrossFrameState.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameState.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAOF;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,OAC7B,GAAG,UAAU,EAAE,iBACL,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,YAClB,sBAAsB,KAC/B,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,aA6FjC,CAAC"}

package/dist/types/useCrossURLPathState.d.ts

@@ -1,3 +1,4 @@
 import { type CrossFrameStateOptions } from './useCrossFrameState';
-export declare const useCrossURLPathState: (initialState?: string, options?: CrossFrameStateOptions) => [string, import("react").Dispatch<import("react").SetStateAction<string>>];
+export declare const useCrossURLPathState: (initialState?: string, options?: CrossFrameStateOptions) => [string, import("react").Dispatch<import("react").SetStateAction<string>>, () => void];
+export declare const useCrossURLPathSetter: (initialState?: string) => [string, import("react").Dispatch<import("react").SetStateAction<string>>, () => void];
 //# sourceMappingURL=useCrossURLPathState.d.ts.map

package/dist/types/useCrossURLPathState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCrossURLPathState.d.ts","sourceRoot":"","sources":["../../src/useCrossURLPathState.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,kBAChB,MAAM,YACX,sBAAsB,+EAgEjC,CAAC"}
+{"version":3,"file":"useCrossURLPathState.d.ts","sourceRoot":"","sources":["../../src/useCrossURLPathState.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,kBAChB,MAAM,YACX,sBAAsB,2FACmC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,kBAAmB,MAAM,2FA8D1D,CAAC"}

package/dist/types/useIframeClickCommunicator.d.ts

@@ -1,3 +1,3 @@
 export declare const useIframeClickInterceptor: () => void;
-export declare const useIframeClickMerger: () => (data: MessageEvent<any>) => void;
+export declare const useIframeClickMerger: () => (data?: MessageEvent<any>) => void;
 //# sourceMappingURL=useIframeClickCommunicator.d.ts.map

package/dist/types/useIframeClickCommunicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIframeClickCommunicator.d.ts","sourceRoot":"","sources":["../../src/useIframeClickCommunicator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,YAerC,CAAC;AAyBF,eAAO,MAAM,oBAAoB,yCAI9B,CAAC"}
+{"version":3,"file":"useIframeClickCommunicator.d.ts","sourceRoot":"","sources":["../../src/useIframeClickCommunicator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,YAerC,CAAC;AAyBF,eAAO,MAAM,oBAAoB,0CAI9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/editor-react",
-  "version": "5.1.6",
+  "version": "5.1.7",
   "private": false,
   "description": "Provides the states, contexts, hooks and components to interact with the Intlayer editor for a React application",
   "keywords": [
@@ -52,9 +52,9 @@
   ],
   "dependencies": {
     "uuid": "^11.0.5",
-    "@intlayer/config": "5.1.6",
-    "@intlayer/core": "5.1.6",
-    "@intlayer/editor": "5.1.6"
+    "@intlayer/config": "5.1.7",
+    "@intlayer/editor": "5.1.7",
+    "@intlayer/core": "5.1.7"
   },
   "devDependencies": {
     "@types/node": "^22.10.6",
@@ -68,17 +68,17 @@
     "tsc-alias": "^1.8.10",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@utils/eslint-config": "1.0.4",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
-    "@utils/tsup-config": "1.0.4"
+    "@utils/tsup-config": "1.0.4",
+    "@utils/eslint-config": "1.0.4"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
-    "@intlayer/config": "5.1.6",
-    "@intlayer/core": "5.1.6",
-    "@intlayer/editor": "5.1.6"
+    "@intlayer/config": "5.1.7",
+    "@intlayer/editor": "5.1.7",
+    "@intlayer/core": "5.1.7"
   },
   "engines": {
     "node": ">=14.18"