preact-intlayer 6.1.6 → 7.0.0-canary.2

package/dist/esm/editor/EditorProvider.mjs

@@ -1,61 +1,64 @@
-"use client";
-import { jsx } from "preact/jsx-runtime";
-import {
-  useEffect,
-  useState
-} from "preact/compat";
-import {
-  CommunicatorProvider
-} from "./CommunicatorContext.mjs";
-import {
-  ConfigurationProvider
-} from "./ConfigurationContext.mjs";
+'use client';
+
+
+import { CommunicatorProvider } from "./CommunicatorContext.mjs";
+import { EditorEnabledProvider, useEditorEnabled, useGetEditorEnabledState } from "./EditorEnabledContext.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 { FocusDictionaryProvider } from "./FocusDictionaryContext.mjs";
+import { useEffect, useState } from "preact/compat";
+import { jsx } from "preact/jsx-runtime";
+
+//#region src/editor/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: /* @__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: /* @__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/editor/EditorProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useState,\n} from 'preact/compat';\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\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n  children,\n  configuration,\n  ...props\n}) => (\n  <EditorEnabledProvider>\n    <ConfigurationProvider configuration={configuration}>\n      <IframeCheckRenderer fallback={children}>\n        <CommunicatorProvider {...props}>\n          <EditorEnabledCheckRenderer fallback={children}>\n            <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n          </EditorEnabledCheckRenderer>\n        </CommunicatorProvider>\n      </IframeCheckRenderer>\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;AAKO,MAAM,iBAA6D,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,yBACC,8BAAC,yBAAsB,eACrB,8BAAC,uBAAoB,UAAU,UAC7B,8BAAC,wBAAsB,GAAG,OACxB,8BAAC,8BAA2B,UAAU,UACpC,8BAAC,0BAAwB,UAAS,GACpC,GACF,GACF,GACF,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/editor/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'preact/compat';\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\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n  children,\n  configuration,\n  ...props\n}) => (\n  <EditorEnabledProvider>\n    <ConfigurationProvider configuration={configuration}>\n      <IframeCheckRenderer fallback={children}>\n        <CommunicatorProvider {...props}>\n          <EditorEnabledCheckRenderer fallback={children}>\n            <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n          </EditorEnabledCheckRenderer>\n        </CommunicatorProvider>\n      </IframeCheckRenderer>\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;;AAMjC,MAAaC,kBAA8D,EACzE,UACA,cACA,GAAG,YAEH,oBAAC,mCACC,oBAAC;CAAqC;WACpC,oBAAC;EAAoB,UAAU;YAC7B,oBAAC;GAAqB,GAAI;aACxB,oBAAC;IAA2B,UAAU;cACpC,oBAAC,0BAAwB,WAAkC;KAChC;IACR;GACH;EACA,GACF"}

package/dist/esm/editor/FocusDictionaryContext.mjs

@@ -1,58 +1,51 @@
-"use client";
-import { jsx } from "preact/jsx-runtime";
-import { MessageKey } from "@intlayer/editor";
-import {
-  createContext,
-  useContext
-} from "preact/compat";
+'use client';
+
+
 import { useCrossFrameState } from "./useCrossFrameState.mjs";
+import { MessageKey } from "@intlayer/editor";
+import { createContext, useContext } from "preact/compat";
+import { jsx } from "preact/jsx-runtime";
+
+//#region src/editor/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/editor/FocusDictionaryContext.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/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 'preact/compat';\nimport { useCrossFrameState } from './useCrossFrameState';\n\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryKey: string;\n  keyPath?: KeyPath[];\n  dictionaryPath?: DictionaryPath;\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":";AA0DM;AAvDN,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AACP,SAAS,0BAA0B;AAmBnC,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/editor/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 'preact/compat';\nimport { useCrossFrameState } from './useCrossFrameState';\n\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryKey: string;\n  keyPath?: KeyPath[];\n  dictionaryPath?: DictionaryPath;\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":";;;;;;;;;AA+BA,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/editor/IntlayerEditorProvider.mjs

@@ -1,67 +1,49 @@
-"use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import configuration from "@intlayer/config/built";
+'use client';
+
+
 import { useEditorEnabled } from "./EditorEnabledContext.mjs";
 import { EditorProvider } from "./EditorProvider.mjs";
 import { useCrossURLPathSetter } from "./useCrossURLPathState.mjs";
 import { useIframeClickInterceptor } from "./useIframeClickInterceptor.mjs";
+import configuration from "@intlayer/config/built";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/editor/IntlayerEditorProvider.tsx
 const IntlayerEditorHooksEnabled = () => {
-  useCrossURLPathSetter();
-  useIframeClickInterceptor();
-  return /* @__PURE__ */ jsx(Fragment, {});
+	/**
+	* URL Messages
+	*/
+	useCrossURLPathSetter();
+	/**
+	* Click Messages
+	*/
+	useIframeClickInterceptor();
+	return /* @__PURE__ */ jsx(Fragment, {});
 };
 const { editor } = configuration;
 const IntlayerEditorHook = () => {
-  const { enabled } = useEditorEnabled();
-  return enabled ? /* @__PURE__ */ jsx(IntlayerEditorHooksEnabled, {}) : /* @__PURE__ */ jsx(Fragment, {});
+	const { enabled } = useEditorEnabled();
+	return enabled ? /* @__PURE__ */ jsx(IntlayerEditorHooksEnabled, {}) : /* @__PURE__ */ jsx(Fragment, {});
 };
 const IntlayerEditorProvider = ({ children }) => {
-  return /* @__PURE__ */ jsxs(
-    EditorProvider,
-    {
-      postMessage: (data) => {
-        if (typeof window === "undefined") return;
-        const isInIframe = window.self !== window.top;
-        if (!isInIframe) return;
-        if (editor.applicationURL.length > 0) {
-          window?.postMessage(
-            data,
-            // Use to restrict the origin of the editor for security reasons.
-            // Correspond to the current application URL to synchronize the locales states.
-            editor.applicationURL
-          );
-        }
-        if (editor.editorURL.length > 0) {
-          window.parent?.postMessage(
-            data,
-            // Use to restrict the origin of the editor for security reasons.
-            // Correspond to the editor URL to synchronize the locales states.
-            editor.editorURL
-          );
-        }
-        if (editor.cmsURL.length > 0) {
-          window.parent?.postMessage(
-            data,
-            // Use to restrict the origin of the CMS for security reasons.
-            // Correspond to the CMS URL.
-            editor.cmsURL
-          );
-        }
-      },
-      allowedOrigins: [
-        editor?.editorURL,
-        editor?.cmsURL,
-        editor?.applicationURL
-      ],
-      configuration,
-      children: [
-        /* @__PURE__ */ jsx(IntlayerEditorHook, {}),
-        children
-      ]
-    }
-  );
-};
-export {
-  IntlayerEditorProvider
+	return /* @__PURE__ */ jsxs(EditorProvider, {
+		postMessage: (data) => {
+			if (typeof window === "undefined") return;
+			if (!(window.self !== window.top)) return;
+			if (editor.applicationURL.length > 0) window?.postMessage(data, editor.applicationURL);
+			if (editor.editorURL.length > 0) window.parent?.postMessage(data, editor.editorURL);
+			if (editor.cmsURL.length > 0) window.parent?.postMessage(data, editor.cmsURL);
+		},
+		allowedOrigins: [
+			editor?.editorURL,
+			editor?.cmsURL,
+			editor?.applicationURL
+		],
+		configuration,
+		children: [/* @__PURE__ */ jsx(IntlayerEditorHook, {}), children]
+	});
 };
+
+//#endregion
+export { IntlayerEditorProvider };
 //# sourceMappingURL=IntlayerEditorProvider.mjs.map

package/dist/esm/editor/IntlayerEditorProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport { type ComponentChildren, type FunctionComponent } from 'preact';\nimport { useEditorEnabled } from './EditorEnabledContext';\nimport { EditorProvider } from './EditorProvider';\nimport { useCrossURLPathSetter } from './useCrossURLPathState';\nimport { useIframeClickInterceptor } from './useIframeClickInterceptor';\n\nconst IntlayerEditorHooksEnabled: FunctionComponent = () => {\n  /**\n   * URL Messages\n   */\n  useCrossURLPathSetter();\n\n  /**\n   * Click Messages\n   */\n  useIframeClickInterceptor();\n\n  return <></>;\n};\n\nconst { editor } = configuration;\n\nconst IntlayerEditorHook: FunctionComponent = () => {\n  const { enabled } = useEditorEnabled();\n\n  return enabled ? <IntlayerEditorHooksEnabled /> : <></>;\n};\n\nexport const IntlayerEditorProvider: FunctionComponent<{\n  children?: ComponentChildren;\n}> = ({ children }) => {\n  return (\n    <EditorProvider\n      postMessage={(data: any) => {\n        if (typeof window === 'undefined') return;\n\n        const isInIframe = window.self !== window.top;\n        if (!isInIframe) return;\n\n        if (editor.applicationURL.length > 0) {\n          window?.postMessage(\n            data,\n            // Use to restrict the origin of the editor for security reasons.\n            // Correspond to the current application URL to synchronize the locales states.\n            editor.applicationURL\n          );\n        }\n\n        if (editor.editorURL.length > 0) {\n          window.parent?.postMessage(\n            data,\n            // Use to restrict the origin of the editor for security reasons.\n            // Correspond to the editor URL to synchronize the locales states.\n            editor.editorURL\n          );\n        }\n\n        if (editor.cmsURL.length > 0) {\n          window.parent?.postMessage(\n            data,\n            // Use to restrict the origin of the CMS for security reasons.\n            // Correspond to the CMS URL.\n            editor.cmsURL\n          );\n        }\n      }}\n      allowedOrigins={[\n        editor?.editorURL,\n        editor?.cmsURL,\n        editor?.applicationURL,\n      ]}\n      configuration={configuration}\n    >\n      <IntlayerEditorHook />\n      {children}\n    </EditorProvider>\n  );\n};\n"],"mappings":";AAoBS,wBAeL,YAfK;AAlBT,OAAO,mBAAmB;AAE1B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAE1C,MAAM,6BAAgD,MAAM;AAI1D,wBAAsB;AAKtB,4BAA0B;AAE1B,SAAO,gCAAE;AACX;AAEA,MAAM,EAAE,OAAO,IAAI;AAEnB,MAAM,qBAAwC,MAAM;AAClD,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,SAAO,UAAU,oBAAC,8BAA2B,IAAK,gCAAE;AACtD;AAEO,MAAM,yBAER,CAAC,EAAE,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,SAAc;AAC1B,YAAI,OAAO,WAAW,YAAa;AAEnC,cAAM,aAAa,OAAO,SAAS,OAAO;AAC1C,YAAI,CAAC,WAAY;AAEjB,YAAI,OAAO,eAAe,SAAS,GAAG;AACpC,kBAAQ;AAAA,YACN;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAEA,YAAI,OAAO,UAAU,SAAS,GAAG;AAC/B,iBAAO,QAAQ;AAAA,YACb;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAEA,YAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,iBAAO,QAAQ;AAAA,YACb;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACA,gBAAgB;AAAA,QACd,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,sBAAmB;AAAA,QACnB;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"file":"IntlayerEditorProvider.mjs","names":["IntlayerEditorHooksEnabled: FunctionComponent","IntlayerEditorHook: FunctionComponent","IntlayerEditorProvider: FunctionComponent<{\n  children?: ComponentChildren;\n}>"],"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport type { ComponentChildren, FunctionComponent } from 'preact';\nimport { useEditorEnabled } from './EditorEnabledContext';\nimport { EditorProvider } from './EditorProvider';\nimport { useCrossURLPathSetter } from './useCrossURLPathState';\nimport { useIframeClickInterceptor } from './useIframeClickInterceptor';\n\nconst IntlayerEditorHooksEnabled: FunctionComponent = () => {\n  /**\n   * URL Messages\n   */\n  useCrossURLPathSetter();\n\n  /**\n   * Click Messages\n   */\n  useIframeClickInterceptor();\n\n  return <></>;\n};\n\nconst { editor } = configuration;\n\nconst IntlayerEditorHook: FunctionComponent = () => {\n  const { enabled } = useEditorEnabled();\n\n  return enabled ? <IntlayerEditorHooksEnabled /> : <></>;\n};\n\nexport const IntlayerEditorProvider: FunctionComponent<{\n  children?: ComponentChildren;\n}> = ({ children }) => {\n  return (\n    <EditorProvider\n      postMessage={(data: any) => {\n        if (typeof window === 'undefined') return;\n\n        const isInIframe = window.self !== window.top;\n        if (!isInIframe) return;\n\n        if (editor.applicationURL.length > 0) {\n          window?.postMessage(\n            data,\n            // Use to restrict the origin of the editor for security reasons.\n            // Correspond to the current application URL to synchronize the locales states.\n            editor.applicationURL\n          );\n        }\n\n        if (editor.editorURL.length > 0) {\n          window.parent?.postMessage(\n            data,\n            // Use to restrict the origin of the editor for security reasons.\n            // Correspond to the editor URL to synchronize the locales states.\n            editor.editorURL\n          );\n        }\n\n        if (editor.cmsURL.length > 0) {\n          window.parent?.postMessage(\n            data,\n            // Use to restrict the origin of the CMS for security reasons.\n            // Correspond to the CMS URL.\n            editor.cmsURL\n          );\n        }\n      }}\n      allowedOrigins={[\n        editor?.editorURL,\n        editor?.cmsURL,\n        editor?.applicationURL,\n      ]}\n      configuration={configuration}\n    >\n      <IntlayerEditorHook />\n      {children}\n    </EditorProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAMA,mCAAsD;;;;AAI1D,wBAAuB;;;;AAKvB,4BAA2B;AAE3B,QAAO,iCAAK;;AAGd,MAAM,EAAE,WAAW;AAEnB,MAAMC,2BAA8C;CAClD,MAAM,EAAE,YAAY,kBAAkB;AAEtC,QAAO,UAAU,oBAAC,+BAA6B,GAAG,iCAAK;;AAGzD,MAAaC,0BAEP,EAAE,eAAe;AACrB,QACE,qBAAC;EACC,cAAc,SAAc;AAC1B,OAAI,OAAO,WAAW,YAAa;AAGnC,OAAI,EADe,OAAO,SAAS,OAAO,KACzB;AAEjB,OAAI,OAAO,eAAe,SAAS,EACjC,SAAQ,YACN,MAGA,OAAO,eACR;AAGH,OAAI,OAAO,UAAU,SAAS,EAC5B,QAAO,QAAQ,YACb,MAGA,OAAO,UACR;AAGH,OAAI,OAAO,OAAO,SAAS,EACzB,QAAO,QAAQ,YACb,MAGA,OAAO,OACR;;EAGL,gBAAgB;GACd,QAAQ;GACR,QAAQ;GACR,QAAQ;GACT;EACc;aAEf,oBAAC,uBAAqB,EACrB;GACc"}

package/dist/esm/editor/index.mjs

@@ -1,2 +1,3 @@
-export * from "./ContentSelectorWrapper.mjs";
-//# sourceMappingURL=index.mjs.map
+import { ContentSelectorRenderer } from "./ContentSelectorWrapper.mjs";
+
+export { ContentSelectorRenderer };

package/dist/esm/editor/useCrossFrameMessageListener.mjs

@@ -1,29 +1,73 @@
-"use client";
+'use client';
+
+
+import { useCommunicator } from "./CommunicatorContext.mjs";
 import { compareUrls } from "@intlayer/editor";
 import { useEffect } from "preact/hooks";
-import { useCommunicator } from "./CommunicatorContext.mjs";
+
+//#region src/editor/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/editor/useCrossFrameMessageListener.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { type MessageKey, compareUrls } from '@intlayer/editor';\nimport { useEffect } from 'preact/hooks';\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/editor/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { compareUrls, type MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'preact/hooks';\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"}