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

package/dist/esm/EditorProvider.mjs

@@ -1,61 +1,67 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import {
-  useEffect,
-  useState
-} from "react";
-import {
-  CommunicatorProvider
-} from "./CommunicatorContext.mjs";
-import {
-  ConfigurationProvider
-} from "./ConfigurationContext.mjs";
+'use client';
+
+
+import { CommunicatorProvider } from "./CommunicatorContext.mjs";
+import { ConfigurationProvider } from "./ConfigurationContext.mjs";
 import { DictionariesRecordProvider } from "./DictionariesRecordContext.mjs";
-import {
-  EditedContentProvider,
-  useGetEditedContentState
-} from "./EditedContentContext.mjs";
-import {
-  EditorEnabledProvider,
-  useEditorEnabled,
-  useGetEditorEnabledState
-} from "./EditorEnabledContext.mjs";
+import { EditedContentProvider, useGetEditedContentState } from "./EditedContentContext.mjs";
+import { EditorEnabledProvider, useEditorEnabled, useGetEditorEnabledState } from "./EditorEnabledContext.mjs";
 import { FocusDictionaryProvider } from "./FocusDictionaryContext.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/EditorProvider.tsx
+/**
+* This component add all the providers needed by the editor.
+* It is used to wrap the application, or the editor to work together.
+*/
 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();
-  useEffect(() => {
-    if (enabled) return;
-    getEditorEnabled();
-  }, [enabled]);
-  return enabled ? children : fallback;
+	const getEditedContentState = useGetEditedContentState();
+	useEffect(() => {
+		getEditedContentState();
+	}, []);
+	return /* @__PURE__ */ jsx(DictionariesRecordProvider, { children: /* @__PURE__ */ jsx(EditedContentProvider, { children: /* @__PURE__ */ jsx(FocusDictionaryProvider, { children }) }) });
 };
-const IframeCheckRenderer = ({
-  children,
-  fallback
-}) => {
-  const [isInIframe, setIsInIframe] = useState(false);
-  useEffect(() => {
-    setIsInIframe(window.self !== window.top);
-  }, []);
-  return isInIframe ? children : fallback;
+/**
+* This component check if the editor is enabled to render the editor providers.
+*/
+const EditorEnabledCheckRenderer = ({ children, fallback }) => {
+	const getEditorEnabled = useGetEditorEnabledState();
+	const { enabled } = useEditorEnabled();
+	useEffect(() => {
+		if (enabled) return;
+		getEditorEnabled();
+	}, [enabled]);
+	return enabled ? children : fallback;
 };
-const EditorProvider = ({
-  children,
-  configuration,
-  ...props
-}) => /* @__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
+/**
+* This component is used to check if the editor is wrapping the application.
+* It avoid to send window.postMessage to the application if the editor is not wrapping the application.
+*/
+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(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 })
+			})
+		})
+	})
+}) });
+
+//#endregion
+export { EditorProvider };
 //# sourceMappingURL=EditorProvider.mjs.map

package/dist/esm/EditorProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useState,\n} from 'react';\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  <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);\n"],"mappings":";AA2CQ;AAzCR;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AACP;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,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;","names":[]}
+{"version":3,"file":"EditorProvider.mjs","names":["EditorProvidersWrapper: FC<PropsWithChildren>","EditorEnabledCheckRenderer: FC<PropsWithChildren<FallbackProps>>","IframeCheckRenderer: FC<PropsWithChildren<FallbackProps>>","EditorProvider: FC<PropsWithChildren<EditorProviderProps>>"],"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  CommunicatorProvider,\n  type CommunicatorProviderProps,\n} from './CommunicatorContext';\nimport {\n  ConfigurationProvider,\n  type ConfigurationProviderProps,\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  <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);\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAMA,0BAAiD,EAAE,eAAe;CACtE,MAAM,wBAAwB,0BAA0B;AAExD,iBAAgB;AACd,yBAAuB;IACtB,EAAE,CAAC;AAEN,QACE,oBAAC,wCACC,oBAAC,mCACC,oBAAC,2BAAyB,WAAmC,GACvC,GACG;;;;;AAWjC,MAAMC,8BAAoE,EACxE,UACA,eACI;CACJ,MAAM,mBAAmB,0BAA0B;CAEnD,MAAM,EAAE,YAAY,kBAAkB;AAEtC,iBAAgB;AACd,MAAI,QAAS;AAGb,oBAAkB;IACjB,CAAC,QAAQ,CAAC;AAEb,QAAO,UAAU,WAAW;;;;;;AAO9B,MAAMC,uBAA6D,EACjE,UACA,eACI;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAEnD,iBAAgB;AACd,gBAAc,OAAO,SAAS,OAAO,IAAI;IACxC,EAAE,CAAC;AAEN,QAAO,aAAa,WAAW;;AAQjC,MAAaC,kBAA8D,EACzE,UACA,cACA,GAAG,YAEH,oBAAC,mCACC,oBAAC;CAAqC;WACnC,MAAM,SAAS,WACd,oBAAC;EAAqB,GAAI;YACxB,oBAAC,0BAAwB,WAAkC;GACtC,GAEvB,oBAAC;EAAoB,UAAU;YAC7B,oBAAC;GAAqB,GAAI;aACxB,oBAAC;IAA2B,UAAU;cACpC,oBAAC,0BAAwB,WAAkC;KAChC;IACR;GACH;EAEF,GACF"}

package/dist/esm/FocusDictionaryContext.mjs

@@ -1,58 +1,51 @@
-"use client";
+'use client';
+
+
+import { useCrossFrameState } from "./useCrossFrameState.mjs";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MessageKey } from "@intlayer/editor";
-import {
-  createContext,
-  useContext
-} from "react";
-import { useCrossFrameState } from "./useCrossFrameState.mjs";
+
+//#region src/FocusDictionaryContext.tsx
 const FocusDictionaryStateContext = createContext(void 0);
 const FocusDictionaryActionsContext = createContext(void 0);
-const FocusDictionaryProvider = ({
-  children
-}) => {
-  const [focusedContent, setFocusedContent] = useCrossFrameState(
-    MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED,
-    null
-  );
-  const setFocusedContentKeyPath = (keyPath) => {
-    setFocusedContent((prev) => {
-      if (!prev) {
-        return prev;
-      }
-      return { ...prev, keyPath };
-    });
-  };
-  return /* @__PURE__ */ jsx(FocusDictionaryStateContext.Provider, { value: { focusedContent }, children: /* @__PURE__ */ jsx(
-    FocusDictionaryActionsContext.Provider,
-    {
-      value: { setFocusedContent, setFocusedContentKeyPath },
-      children
-    }
-  ) });
+const FocusDictionaryProvider = ({ children }) => {
+	const [focusedContent, setFocusedContent] = useCrossFrameState(MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED, null);
+	const setFocusedContentKeyPath = (keyPath) => {
+		setFocusedContent((prev) => {
+			if (!prev) return prev;
+			return {
+				...prev,
+				keyPath
+			};
+		});
+	};
+	return /* @__PURE__ */ jsx(FocusDictionaryStateContext.Provider, {
+		value: { focusedContent },
+		children: /* @__PURE__ */ jsx(FocusDictionaryActionsContext.Provider, {
+			value: {
+				setFocusedContent,
+				setFocusedContentKeyPath
+			},
+			children
+		})
+	});
 };
 const useFocusDictionaryActions = () => {
-  const context = useContext(FocusDictionaryActionsContext);
-  if (context === void 0) {
-    throw new Error(
-      "useFocusDictionaryActions must be used within a FocusDictionaryProvider"
-    );
-  }
-  return context;
+	const context = useContext(FocusDictionaryActionsContext);
+	if (context === void 0) throw new Error("useFocusDictionaryActions must be used within a FocusDictionaryProvider");
+	return context;
 };
 const useFocusDictionary = () => {
-  const actionContext = useFocusDictionaryActions();
-  const stateContext = useContext(FocusDictionaryStateContext);
-  if (stateContext === void 0) {
-    throw new Error(
-      "useFocusDictionaryState must be used within a FocusDictionaryProvider"
-    );
-  }
-  return { ...stateContext, ...actionContext };
-};
-export {
-  FocusDictionaryProvider,
-  useFocusDictionary,
-  useFocusDictionaryActions
+	const actionContext = useFocusDictionaryActions();
+	const stateContext = useContext(FocusDictionaryStateContext);
+	if (stateContext === void 0) throw new Error("useFocusDictionaryState must be used within a FocusDictionaryProvider");
+	return {
+		...stateContext,
+		...actionContext
+	};
 };
+
+//#endregion
+export { FocusDictionaryProvider, useFocusDictionary, useFocusDictionaryActions };
 //# sourceMappingURL=FocusDictionaryContext.mjs.map

package/dist/esm/FocusDictionaryContext.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyPath } from '@intlayer/core';\nimport { MessageKey } from '@intlayer/editor';\nimport {\n  createContext,\n  useContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n} from 'react';\nimport { useCrossFrameState } from './useCrossFrameState';\n\nexport type FileContent = {\n  dictionaryKey: string;\n  dictionaryLocalId?: string;\n  keyPath?: KeyPath[];\n};\n\ntype FocusDictionaryState = {\n  focusedContent: FileContent | null;\n};\n\ntype FocusDictionaryActions = {\n  setFocusedContent: Dispatch<SetStateAction<FileContent | null>>;\n  setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nconst FocusDictionaryStateContext = createContext<\n  FocusDictionaryState | undefined\n>(undefined);\nconst FocusDictionaryActionsContext = createContext<\n  FocusDictionaryActions | undefined\n>(undefined);\n\nexport const FocusDictionaryProvider: FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [focusedContent, setFocusedContent] =\n    useCrossFrameState<FileContent | null>(\n      MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED,\n      null\n    );\n\n  const setFocusedContentKeyPath = (keyPath: KeyPath[]) => {\n    setFocusedContent((prev) => {\n      if (!prev) {\n        return prev; // nothing to update if there's no focused content\n      }\n      return { ...prev, keyPath };\n    });\n  };\n\n  return (\n    <FocusDictionaryStateContext.Provider value={{ focusedContent }}>\n      <FocusDictionaryActionsContext.Provider\n        value={{ setFocusedContent, setFocusedContentKeyPath }}\n      >\n        {children}\n      </FocusDictionaryActionsContext.Provider>\n    </FocusDictionaryStateContext.Provider>\n  );\n};\n\nexport const useFocusDictionaryActions = () => {\n  const context = useContext(FocusDictionaryActionsContext);\n  if (context === undefined) {\n    throw new Error(\n      'useFocusDictionaryActions must be used within a FocusDictionaryProvider'\n    );\n  }\n  return context;\n};\n\nexport const useFocusDictionary = () => {\n  const actionContext = useFocusDictionaryActions();\n  const stateContext = useContext(FocusDictionaryStateContext);\n\n  if (stateContext === undefined) {\n    throw new Error(\n      'useFocusDictionaryState must be used within a FocusDictionaryProvider'\n    );\n  }\n\n  return { ...stateContext, ...actionContext };\n};\n"],"mappings":";AAwDM;AArDN,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AACP,SAAS,0BAA0B;AAiBnC,MAAM,8BAA8B,cAElC,MAAS;AACX,MAAM,gCAAgC,cAEpC,MAAS;AAEJ,MAAM,0BAAiD,CAAC;AAAA,EAC7D;AACF,MAAM;AACJ,QAAM,CAAC,gBAAgB,iBAAiB,IACtC;AAAA,IACE,WAAW;AAAA,IACX;AAAA,EACF;AAEF,QAAM,2BAA2B,CAAC,YAAuB;AACvD,sBAAkB,CAAC,SAAS;AAC1B,UAAI,CAAC,MAAM;AACT,eAAO;AAAA,MACT;AACA,aAAO,EAAE,GAAG,MAAM,QAAQ;AAAA,IAC5B,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,EAAE,eAAe,GAC5D;AAAA,IAAC,8BAA8B;AAAA,IAA9B;AAAA,MACC,OAAO,EAAE,mBAAmB,yBAAyB;AAAA,MAEpD;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,MAAM,4BAA4B,MAAM;AAC7C,QAAM,UAAU,WAAW,6BAA6B;AACxD,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,MAAM;AACtC,QAAM,gBAAgB,0BAA0B;AAChD,QAAM,eAAe,WAAW,2BAA2B;AAE3D,MAAI,iBAAiB,QAAW;AAC9B,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,cAAc,GAAG,cAAc;AAC7C;","names":[]}
+{"version":3,"file":"FocusDictionaryContext.mjs","names":["FocusDictionaryProvider: FC<PropsWithChildren>"],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types';\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n} from 'react';\nimport { useCrossFrameState } from './useCrossFrameState';\n\nexport type FileContent = {\n  dictionaryKey: string;\n  dictionaryLocalId?: string;\n  keyPath?: KeyPath[];\n};\n\ntype FocusDictionaryState = {\n  focusedContent: FileContent | null;\n};\n\ntype FocusDictionaryActions = {\n  setFocusedContent: Dispatch<SetStateAction<FileContent | null>>;\n  setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nconst FocusDictionaryStateContext = createContext<\n  FocusDictionaryState | undefined\n>(undefined);\nconst FocusDictionaryActionsContext = createContext<\n  FocusDictionaryActions | undefined\n>(undefined);\n\nexport const FocusDictionaryProvider: FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [focusedContent, setFocusedContent] =\n    useCrossFrameState<FileContent | null>(\n      MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED,\n      null\n    );\n\n  const setFocusedContentKeyPath = (keyPath: KeyPath[]) => {\n    setFocusedContent((prev) => {\n      if (!prev) {\n        return prev; // nothing to update if there's no focused content\n      }\n      return { ...prev, keyPath };\n    });\n  };\n\n  return (\n    <FocusDictionaryStateContext.Provider value={{ focusedContent }}>\n      <FocusDictionaryActionsContext.Provider\n        value={{ setFocusedContent, setFocusedContentKeyPath }}\n      >\n        {children}\n      </FocusDictionaryActionsContext.Provider>\n    </FocusDictionaryStateContext.Provider>\n  );\n};\n\nexport const useFocusDictionaryActions = () => {\n  const context = useContext(FocusDictionaryActionsContext);\n  if (context === undefined) {\n    throw new Error(\n      'useFocusDictionaryActions must be used within a FocusDictionaryProvider'\n    );\n  }\n  return context;\n};\n\nexport const useFocusDictionary = () => {\n  const actionContext = useFocusDictionaryActions();\n  const stateContext = useContext(FocusDictionaryStateContext);\n\n  if (stateContext === undefined) {\n    throw new Error(\n      'useFocusDictionaryState must be used within a FocusDictionaryProvider'\n    );\n  }\n\n  return { ...stateContext, ...actionContext };\n};\n"],"mappings":";;;;;;;;;AA6BA,MAAM,8BAA8B,cAElC,OAAU;AACZ,MAAM,gCAAgC,cAEpC,OAAU;AAEZ,MAAaA,2BAAkD,EAC7D,eACI;CACJ,MAAM,CAAC,gBAAgB,qBACrB,mBACE,WAAW,kCACX,KACD;CAEH,MAAM,4BAA4B,YAAuB;AACvD,qBAAmB,SAAS;AAC1B,OAAI,CAAC,KACH,QAAO;AAET,UAAO;IAAE,GAAG;IAAM;IAAS;IAC3B;;AAGJ,QACE,oBAAC,4BAA4B;EAAS,OAAO,EAAE,gBAAgB;YAC7D,oBAAC,8BAA8B;GAC7B,OAAO;IAAE;IAAmB;IAA0B;GAErD;IACsC;GACJ;;AAI3C,MAAa,kCAAkC;CAC7C,MAAM,UAAU,WAAW,8BAA8B;AACzD,KAAI,YAAY,OACd,OAAM,IAAI,MACR,0EACD;AAEH,QAAO;;AAGT,MAAa,2BAA2B;CACtC,MAAM,gBAAgB,2BAA2B;CACjD,MAAM,eAAe,WAAW,4BAA4B;AAE5D,KAAI,iBAAiB,OACnB,OAAM,IAAI,MACR,wEACD;AAGH,QAAO;EAAE,GAAG;EAAc,GAAG;EAAe"}

package/dist/esm/index.mjs

@@ -1,13 +1,15 @@
-export * from "@intlayer/editor";
-export * from "./CommunicatorContext.mjs";
-export * from "./ConfigurationContext.mjs";
-export * from "./DictionariesRecordContext.mjs";
-export * from "./EditedContentContext.mjs";
-export * from "./EditorEnabledContext.mjs";
-export * from "./EditorProvider.mjs";
-export * from "./FocusDictionaryContext.mjs";
-export * from "./useCrossFrameMessageListener.mjs";
-export * from "./useCrossFrameState.mjs";
-export * from "./useCrossURLPathState.mjs";
-export * from "./useIframeClickInterceptor.mjs";
-//# sourceMappingURL=index.mjs.map
+import { CommunicatorProvider, useCommunicator } from "./CommunicatorContext.mjs";
+import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
+import { useCrossFrameState } from "./useCrossFrameState.mjs";
+import { ConfigurationProvider, useConfiguration, useConfigurationState } from "./ConfigurationContext.mjs";
+import { DictionariesRecordProvider, useDictionariesRecord, useDictionariesRecordActions } from "./DictionariesRecordContext.mjs";
+import { EditedContentProvider, useEditedContent, useEditedContentActions, useGetEditedContentState, usePostEditedContentState } from "./EditedContentContext.mjs";
+import { EditorEnabledProvider, useEditorEnabled, useEditorEnabledState, useGetEditorEnabledState, usePostEditorEnabledState } from "./EditorEnabledContext.mjs";
+import { FocusDictionaryProvider, useFocusDictionary, useFocusDictionaryActions } from "./FocusDictionaryContext.mjs";
+import { EditorProvider } from "./EditorProvider.mjs";
+import { useCrossURLPathSetter, useCrossURLPathState } from "./useCrossURLPathState.mjs";
+import { useIframeClickInterceptor, useIframeClickMerger } from "./useIframeClickInterceptor.mjs";
+
+export * from "@intlayer/editor"
+
+export { CommunicatorProvider, ConfigurationProvider, DictionariesRecordProvider, EditedContentProvider, EditorEnabledProvider, EditorProvider, FocusDictionaryProvider, useCommunicator, useConfiguration, useConfigurationState, useCrossFrameMessageListener, useCrossFrameState, useCrossURLPathSetter, useCrossURLPathState, useDictionariesRecord, useDictionariesRecordActions, useEditedContent, useEditedContentActions, useEditorEnabled, useEditorEnabledState, useFocusDictionary, useFocusDictionaryActions, useGetEditedContentState, useGetEditorEnabledState, useIframeClickInterceptor, useIframeClickMerger, usePostEditedContentState, usePostEditorEnabledState };

package/dist/esm/useCrossFrameMessageListener.mjs

@@ -1,29 +1,73 @@
-"use client";
-import { compareUrls } from "@intlayer/editor";
-import { useEffect } from "react";
+'use client';
+
+
 import { useCommunicator } from "./CommunicatorContext.mjs";
+import { useEffect } from "react";
+import { compareUrls } from "@intlayer/editor";
+
+//#region src/useCrossFrameMessageListener.tsx
+/**
+* useCrossFrameMessageListener
+*
+* This React hook listens for messages sent via the `postMessage` API and triggers a callback
+* whenever a message of the specified type (`key`) is received. It is useful for synchronizing
+* state or events across different windows, iframes, or contexts.
+*
+* @template S - The type of the data payload in the 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.
+*/
 const useCrossFrameMessageListener = (key, onEventTriggered, revalidator) => {
-  const { allowedOrigins, postMessage, senderId } = useCommunicator();
-  useEffect(() => {
-    if (onEventTriggered) {
-      const handleMessage = (event) => {
-        const { type, data, senderId: msgSenderId } = event.data;
-        if (type !== key) return;
-        if (msgSenderId === senderId) return;
-        if (typeof allowedOrigins === "undefined" || allowedOrigins?.some((url) => compareUrls(url, event.origin)) || allowedOrigins?.includes("*")) {
-          onEventTriggered(data);
-        }
-      };
-      window.addEventListener("message", handleMessage);
-      return () => window.removeEventListener("message", handleMessage);
-    }
-  }, [allowedOrigins, postMessage, senderId, revalidator]);
-  const postMessageWrapper = (data) => {
-    postMessage({ type: key, data, senderId });
-  };
-  return postMessageWrapper;
-};
-export {
-  useCrossFrameMessageListener
+	const { allowedOrigins, postMessage, senderId } = useCommunicator();
+	useEffect(() => {
+		if (onEventTriggered) {
+			/**
+			* Message handler to process incoming messages.
+			*
+			* - **Message Filtering:** Ensures only messages with the specified `key` are processed.
+			* - **Origin Validation:** Checks that the origin of the message is within the allowed origins.
+			*
+			* @param {MessageEvent<{ type: string; data: S }>} event - The incoming message event object.
+			*/
+			const handleMessage = (event) => {
+				const { type, data, senderId: msgSenderId } = event.data;
+				if (type !== key) return;
+				if (msgSenderId === senderId) return;
+				if (typeof allowedOrigins === "undefined" || allowedOrigins?.some((url) => compareUrls(url, event.origin)) || allowedOrigins?.includes("*")) onEventTriggered(data);
+			};
+			window.addEventListener("message", handleMessage);
+			return () => window.removeEventListener("message", handleMessage);
+		}
+	}, [
+		allowedOrigins,
+		postMessage,
+		senderId,
+		revalidator
+	]);
+	/**
+	* A wrapper function around the `postMessage` function to broadcast messages efficiently.
+	*
+	* - **Encapsulation:** Ensures the `postMessage` function is scoped to the provided key.
+	* - **Ease of Use:** Simplifies broadcasting messages with consistent type and format.
+	*
+	* @param {S} data - The data payload to include in the message.
+	* @returns {void}
+	*/
+	const postMessageWrapper = (data) => {
+		postMessage({
+			type: key,
+			data,
+			senderId
+		});
+	};
+	return postMessageWrapper;
 };
+
+//#endregion
+export { useCrossFrameMessageListener };
 //# sourceMappingURL=useCrossFrameMessageListener.mjs.map

package/dist/esm/useCrossFrameMessageListener.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { type MessageKey, compareUrls } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\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,SAA0B,mBAAmB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAkBzB,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":[]}
+{"version":3,"file":"useCrossFrameMessageListener.mjs","names":["postMessageWrapper: (data?: S) => void"],"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { compareUrls, type MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\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":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,gCACX,KACA,kBACA,gBACG;CACH,MAAM,EAAE,gBAAgB,aAAa,aAAa,iBAAiB;AAEnE,iBAAgB;AACd,MAAI,kBAAkB;;;;;;;;;GASpB,MAAM,iBACJ,UACG;IACH,MAAM,EAAE,MAAM,MAAM,UAAU,gBAAgB,MAAM;AAGpD,QAAI,SAAS,IAAK;AAGlB,QAAI,gBAAgB,SAAU;AAG9B,QACE,OAAO,mBAAmB,eAC1B,gBAAgB,MAAM,QAAQ,YAAY,KAAK,MAAM,OAAO,CAAC,IAC7D,gBAAgB,SAAS,IAAI,CAG7B,kBAAiB,KAAK;;AAI1B,UAAO,iBAAiB,WAAW,cAAc;AAGjD,gBAAa,OAAO,oBAAoB,WAAW,cAAc;;IAElE;EAAC;EAAgB;EAAa;EAAU;EAAY,CAAC;;;;;;;;;;CAWxD,MAAMA,sBAA0C,SAAS;AACvD,cAAY;GAAE,MAAM;GAAK;GAAM;GAAU,CAAC;;AAG5C,QAAO"}

package/dist/esm/useCrossFrameState.mjs

@@ -1,53 +1,108 @@
-"use client";
-import { useEffect, useState } from "react";
+'use client';
+
+
 import { useCommunicator } from "./CommunicatorContext.mjs";
 import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
+import { useEffect, useState } from "react";
+
+//#region src/useCrossFrameState.tsx
 const resolveState = (state, prevState) => typeof state === "function" ? state(prevState) : state;
+/**
+* Configuration options for `useCrossFrameState`.
+* @typedef {Object} CrossFrameStateOptions
+* @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.
+* @property {boolean} [receive=true] - Whether to listen for state updates from other instances.
+*/
+/**
+* useCrossFrameState
+*
+* This React hook synchronizes state across multiple instances (e.g., different iframes or windows).
+* It uses the `postMessage` API to communicate state changes and updates between instances.
+*
+* @template S - The type of the state.
+* @param key - A unique identifier for the state to synchronize.
+* @param initialState - The initial state value or a function to compute it lazily.
+* @param options - Configuration options to control emitting and receiving messages.
+*   - `emit` (default: true): Whether to broadcast state changes to other instances.
+*   - `receive` (default: true): Whether to listen for state updates from other instances.
+*
+* @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.
+*/
 const useCrossFrameState = (key, initialState, options) => {
-  const { postMessage, senderId } = useCommunicator();
-  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 = (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState));
-  useCrossFrameMessageListener(
-    `${key}/post`,
-    // Only activate the state listener if the `receive` option is true
-    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,
-    state
-    // Revalidate the listener if the state changes
-  );
-  useEffect(() => {
-    if (receive && typeof postMessage === "function" && typeof state === "undefined") {
-      postMessage({ type: `${key}/get`, senderId });
-    }
-  }, []);
-  return [state, setStateWrapper, postState];
-};
-export {
-  useCrossFrameState
+	const { postMessage, senderId } = useCommunicator();
+	const { emit, receive } = options ?? {
+		emit: true,
+		receive: true
+	};
+	const handleStateChange = (state$1, prevState) => {
+		const resolvedState = resolveState(state$1, 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));
+	/**
+	* A wrapper function around the `setState` function to handle messaging efficiently.
+	*
+	* This approach has several advantages over using an additional `useEffect`:
+	* - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,
+	*   it prevents the extra render cycle that would be triggered when using `useEffect`.
+	* - **Consistency:** Ensures the message is emitted immediately when the state is updated,
+	*   avoiding potential delays caused by the asynchronous nature of `useEffect`.
+	*
+	* This function keeps the same API as `setState` and is memoized using `useCallback`
+	* to prevent unnecessary re-renders of dependent components.
+	*
+	* @template S - The type of the state.
+	* @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.
+	* @returns {void}
+	*/
+	const setStateWrapper = (valueOrUpdater) => setState((prevState) => handleStateChange(valueOrUpdater, prevState));
+	/**
+	* Listen for messages with the specified key and update the state accordingly.
+	*/
+	useCrossFrameMessageListener(`${key}/post`, 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
+		});
+	};
+	/**
+	* Listen for messages request to get the state content and send it back.
+	*/
+	useCrossFrameMessageListener(`${key}/get`, emit ? onGetMessage : void 0, state);
+	useEffect(() => {
+		if (receive && typeof postMessage === "function" && typeof state === "undefined") postMessage({
+			type: `${key}/get`,
+			senderId
+		});
+	}, []);
+	return [
+		state,
+		setStateWrapper,
+		postState
+	];
 };
+
+//#endregion
+export { useCrossFrameState };
 //# sourceMappingURL=useCrossFrameState.mjs.map

package/dist/esm/useCrossFrameState.mjs.map

@@ -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":";AAGA,SAAS,WAAW,gBAAoD;AACxE,SAAS,uBAAuB;AAChC,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"]}
+{"version":3,"file":"useCrossFrameState.mjs","names":["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,aAAa,iBAAiB;CAEnD,MAAM,EAAE,MAAM,YAAY,WAAW;EAAE,MAAM;EAAM,SAAS;EAAM;CAElE,MAAM,qBAAqB,SAA2B,cAAkB;EAEtE,MAAMA,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,YAAY,eAAkB,kBAAkB,aAAa,CAAC;;;;;;;;;;;;;;;;;CAkB5E,MAAMC,mBAAgD,mBACpD,UAAU,cAAc,kBAAkB,gBAAgB,UAAU,CAAC;;;;AAKvE,8BACE,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,8BACE,GAAG,IAAI,OAEP,OAAO,eAAe,QACtB,MACD;AAED,iBAAgB;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"}