preact-intlayer 5.5.4 → 5.5.6

package/dist/esm/editor/EditorProvider.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "preact/jsx-runtime";
+import {
+  useEffect,
+  useState
+} from "preact/compat";
+import { ChangedContentProvider } from "./ChangedContentContext.mjs";
+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 { FocusDictionaryProvider } from "./FocusDictionaryContext.mjs";
+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 IframeCheckRenderer = ({
+  children,
+  fallback
+}) => {
+  const [isInIframe, setIsInIframe] = useState(false);
+  useEffect(() => {
+    setIsInIframe(window.self !== window.top);
+  }, []);
+  return isInIframe ? children : fallback;
+};
+const EditorProvider = ({
+  children,
+  configuration,
+  ...props
+}) => /* @__PURE__ */ jsx(ChangedContentProvider, { children: /* @__PURE__ */ jsx(EditorEnabledProvider, { children: /* @__PURE__ */ jsx(ConfigurationProvider, { configuration, children: /* @__PURE__ */ jsx(IframeCheckRenderer, { fallback: children, children: /* @__PURE__ */ jsx(CommunicatorProvider, { ...props, children: /* @__PURE__ */ jsx(EditorEnabledCheckRenderer, { fallback: children, children: /* @__PURE__ */ jsx(EditorProvidersWrapper, { children }) }) }) }) }) }) });
+export {
+  EditorProvider
+};
+//# sourceMappingURL=EditorProvider.mjs.map

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

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

package/dist/esm/editor/FocusDictionaryContext.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "preact/jsx-runtime";
+import { MessageKey } from "@intlayer/editor";
+import {
+  createContext,
+  useContext
+} from "preact/compat";
+import { useCrossFrameState } from "./useCrossFrameState.mjs";
+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 useFocusDictionaryActions = () => {
+  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
+};
+//# sourceMappingURL=FocusDictionaryContext.mjs.map

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

@@ -0,0 +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":[]}

package/dist/esm/editor/IntlayerEditorProvider.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { IntlayerEventListener } from "@intlayer/api";
+import configuration from "@intlayer/config/built";
+import { useEffect } from "preact/hooks";
+import { useChangedContentActions } from "./ChangedContentContext.mjs";
+import { useEditorEnabled } from "./EditorEnabledContext.mjs";
+import { EditorProvider } from "./EditorProvider.mjs";
+import { useCrossURLPathSetter } from "./useCrossURLPathState.mjs";
+import { useIframeClickInterceptor } from "./useIframeClickInterceptor.mjs";
+const IntlayerEditorHooksEnabled = () => {
+  useCrossURLPathSetter();
+  useIframeClickInterceptor();
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+const { editor } = configuration;
+const IntlayerEditorHook = () => {
+  const { enabled } = useEditorEnabled();
+  const changedContentContext = useChangedContentActions();
+  useEffect(() => {
+    if (!editor.hotReload) return;
+    if (!editor.clientId) return;
+    if (!editor.clientSecret) return;
+    const eventSource = new IntlayerEventListener();
+    try {
+      eventSource.initialize().then(() => {
+        eventSource.onDictionaryChange = (dictionary) => changedContentContext?.setChangedContent(
+          dictionary.key,
+          dictionary.content
+        );
+      });
+    } catch (error) {
+      console.error("Error initializing IntlayerEventListener:", error);
+    }
+    return () => eventSource.cleanup();
+  }, []);
+  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
+};
+//# sourceMappingURL=IntlayerEditorProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport { IntlayerEventListener } from '@intlayer/api';\nimport configuration from '@intlayer/config/built';\nimport { type ComponentChildren, type FunctionComponent } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport { useChangedContentActions } from './ChangedContentContext';\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  /**\n   * Hot reloading\n   */\n  const changedContentContext = useChangedContentActions();\n\n  useEffect(() => {\n    if (!editor.hotReload) return;\n    if (!editor.clientId) return;\n    if (!editor.clientSecret) return;\n\n    const eventSource = new IntlayerEventListener();\n    try {\n      eventSource.initialize().then(() => {\n        eventSource.onDictionaryChange = (dictionary) =>\n          changedContentContext?.setChangedContent(\n            dictionary.key,\n            dictionary.content\n          );\n      });\n    } catch (error) {\n      console.error('Error initializing IntlayerEventListener:', error);\n    }\n\n    return () => eventSource.cleanup();\n  }, []);\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":";AAuBS,wBAyCL,YAzCK;AArBT,SAAS,6BAA6B;AACtC,OAAO,mBAAmB;AAE1B,SAAS,iBAAiB;AAC1B,SAAS,gCAAgC;AACzC,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;AAKrC,QAAM,wBAAwB,yBAAyB;AAEvD,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,UAAW;AACvB,QAAI,CAAC,OAAO,SAAU;AACtB,QAAI,CAAC,OAAO,aAAc;AAE1B,UAAM,cAAc,IAAI,sBAAsB;AAC9C,QAAI;AACF,kBAAY,WAAW,EAAE,KAAK,MAAM;AAClC,oBAAY,qBAAqB,CAAC,eAChC,uBAAuB;AAAA,UACrB,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,MACJ,CAAC;AAAA,IACH,SAAS,OAAO;AACd,cAAQ,MAAM,6CAA6C,KAAK;AAAA,IAClE;AAEA,WAAO,MAAM,YAAY,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,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":[]}

package/dist/esm/editor/index.mjs

@@ -0,0 +1,2 @@
+export * from "./ContentSelectorWrapper.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/index.ts"],"sourcesContent":["export * from './ContentSelectorWrapper';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/editor/useCrossFrameMessageListener.mjs

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

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

@@ -0,0 +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":[]}

package/dist/esm/editor/useCrossFrameState.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, useState } from "preact/hooks";
+import { useCommunicator } from "./CommunicatorContext.mjs";
+import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
+const resolveState = (valueOrUpdater, prevState) => typeof valueOrUpdater === "function" ? valueOrUpdater(prevState) : valueOrUpdater;
+const useCrossFrameState = (key, initialState, options) => {
+  const { postMessage, senderId } = useCommunicator();
+  const { emit, receive } = options ?? { emit: true, receive: true };
+  const handleStateChange = (valueOrUpdater, prevState) => {
+    const resolvedState = resolveState(valueOrUpdater, 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
+};
+//# sourceMappingURL=useCrossFrameState.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport { type MessageKey } from '@intlayer/editor';\nimport { SetStateAction } from 'preact/compat';\nimport { Dispatch, useEffect, useState, type StateUpdater } from 'preact/hooks';\nimport { useCommunicator } from './CommunicatorContext';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n  emit?: boolean;\n  receive?: boolean;\n};\n\nconst resolveState = <S,>(\n  valueOrUpdater?: S | ((prevState: S) => S),\n  prevState?: S\n): S =>\n  typeof valueOrUpdater === 'function'\n    ? (valueOrUpdater as (prevState?: S) => S)(prevState)\n    : (valueOrUpdater 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 Preact 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, StateUpdater<S>, typeof postState]} An array containing the current state and a setter function, and a function to manually post the state.\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 = (\n    valueOrUpdater?: S | ((prevState: S) => S),\n    prevState?: S\n  ): S => {\n    // Initialize state from the provided initial value, if defined\n    const resolvedState: S = resolveState(valueOrUpdater, 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 {S | ((prevState: S) => S)} valueOrUpdater - The new state or a function to produce it.\n   * @returns {void}\n   */\n  const setStateWrapper: Dispatch<SetStateAction<S>> = (\n    valueOrUpdater: S | ((prevState: S) => S)\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":";AAIA,SAAmB,WAAW,gBAAmC;AACjE,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAO7C,MAAM,eAAe,CACnB,gBACA,cAEA,OAAO,mBAAmB,aACrB,eAAwC,SAAS,IACjD;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,CACxB,gBACA,cACM;AAEN,UAAM,gBAAmB,aAAa,gBAAgB,SAAS;AAG/D,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,CACnD,mBACG,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAKzE;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":[]}

package/dist/esm/editor/useCrossURLPathState.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { MessageKey } from "@intlayer/editor";
+import { useEffect } from "preact/hooks";
+import {
+  useCrossFrameState
+} from "./useCrossFrameState.mjs";
+const useCrossURLPathState = (initialState, options) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);
+const useCrossURLPathSetter = (initialState) => {
+  const states = useCrossURLPathState(initialState, {
+    emit: true,
+    receive: false
+  });
+  const [_state, setState] = states;
+  useEffect(() => {
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    const injectLocationChangeEvent = (method) => function(...args) {
+      method.apply(this, args);
+      window.dispatchEvent(new Event("locationchange"));
+    };
+    history.pushState = injectLocationChangeEvent(originalPushState);
+    history.replaceState = injectLocationChangeEvent(originalReplaceState);
+    const updateURLState = () => {
+      setState(window.location.pathname);
+    };
+    window.addEventListener("locationchange", updateURLState);
+    window.addEventListener("popstate", updateURLState);
+    window.addEventListener("hashchange", updateURLState);
+    window.addEventListener("load", updateURLState);
+    updateURLState();
+    return () => {
+      window.removeEventListener("locationchange", updateURLState);
+      window.removeEventListener("popstate", updateURLState);
+      window.removeEventListener("hashchange", updateURLState);
+      window.removeEventListener("load", updateURLState);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+  return states;
+};
+export {
+  useCrossURLPathSetter,
+  useCrossURLPathState
+};
+//# sourceMappingURL=useCrossURLPathState.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'preact/hooks';\nimport {\n  useCrossFrameState,\n  type CrossFrameStateOptions,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n  initialState?: string,\n  options?: CrossFrameStateOptions\n) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);\n\nexport const useCrossURLPathSetter = (initialState?: string) => {\n  const states = useCrossURLPathState(initialState, {\n    emit: true,\n    receive: false,\n  });\n  const [_state, setState] = states;\n\n  useEffect(() => {\n    /**\n     * 1) Monkey patch history methods (pushState, replaceState)\n     *    to dispatch a custom event whenever they are called.\n     */\n    const originalPushState = history.pushState;\n    const originalReplaceState = history.replaceState;\n\n    const injectLocationChangeEvent = (method: (...args: any[]) => void) =>\n      function (this: typeof history, ...args: [any, string, string?]) {\n        method.apply(this, args);\n        window.dispatchEvent(new Event('locationchange'));\n      };\n\n    history.pushState = injectLocationChangeEvent(originalPushState);\n    history.replaceState = injectLocationChangeEvent(originalReplaceState);\n\n    /**\n     * 2) The callback to update our state whenever the URL changes.\n     */\n    const updateURLState = () => {\n      setState(window.location.pathname);\n    };\n\n    /**\n     * 3) Attach event listeners for locationchange, popstate, hashchange.\n     *    - 'locationchange' is our custom event triggered by push/replaceState overrides.\n     *    - 'popstate' is fired on back/forward navigation.\n     *    - 'hashchange' is for URL hash (#) changes.\n     *    - 'load' is when new page is loaded\n     */\n    window.addEventListener('locationchange', updateURLState);\n    window.addEventListener('popstate', updateURLState);\n    window.addEventListener('hashchange', updateURLState);\n    window.addEventListener('load', updateURLState);\n\n    // Initialize our state immediately on mount\n    updateURLState();\n\n    /**\n     * 4) Cleanup when the component unmounts:\n     *    - Remove event listeners.\n     *    - Restore original pushState & replaceState to avoid side effects.\n     */\n    return () => {\n      window.removeEventListener('locationchange', updateURLState);\n      window.removeEventListener('popstate', updateURLState);\n      window.removeEventListener('hashchange', updateURLState);\n      window.removeEventListener('load', updateURLState);\n      history.pushState = originalPushState;\n      history.replaceState = originalReplaceState;\n    };\n  }, []);\n\n  return states;\n};\n"],"mappings":";AAEA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,uBAAuB,CAClC,cACA,YACG,mBAAmB,WAAW,qBAAqB,cAAc,OAAO;AAEtE,MAAM,wBAAwB,CAAC,iBAA0B;AAC9D,QAAM,SAAS,qBAAqB,cAAc;AAAA,IAChD,MAAM;AAAA,IACN,SAAS;AAAA,EACX,CAAC;AACD,QAAM,CAAC,QAAQ,QAAQ,IAAI;AAE3B,YAAU,MAAM;AAKd,UAAM,oBAAoB,QAAQ;AAClC,UAAM,uBAAuB,QAAQ;AAErC,UAAM,4BAA4B,CAAC,WACjC,YAAmC,MAA8B;AAC/D,aAAO,MAAM,MAAM,IAAI;AACvB,aAAO,cAAc,IAAI,MAAM,gBAAgB,CAAC;AAAA,IAClD;AAEF,YAAQ,YAAY,0BAA0B,iBAAiB;AAC/D,YAAQ,eAAe,0BAA0B,oBAAoB;AAKrE,UAAM,iBAAiB,MAAM;AAC3B,eAAS,OAAO,SAAS,QAAQ;AAAA,IACnC;AASA,WAAO,iBAAiB,kBAAkB,cAAc;AACxD,WAAO,iBAAiB,YAAY,cAAc;AAClD,WAAO,iBAAiB,cAAc,cAAc;AACpD,WAAO,iBAAiB,QAAQ,cAAc;AAG9C,mBAAe;AAOf,WAAO,MAAM;AACX,aAAO,oBAAoB,kBAAkB,cAAc;AAC3D,aAAO,oBAAoB,YAAY,cAAc;AACrD,aAAO,oBAAoB,cAAc,cAAc;AACvD,aAAO,oBAAoB,QAAQ,cAAc;AACjD,cAAQ,YAAY;AACpB,cAAQ,eAAe;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/esm/editor/useEditedContentRenderer.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { getContent } from "@intlayer/core";
+import { useEditedContentActions } from "./EditedContentContext.mjs";
+const useEditedContentRenderer = ({
+  dictionaryKey,
+  keyPath,
+  children
+}) => {
+  const editedContentContext = useEditedContentActions();
+  if (editedContentContext) {
+    const editedValue = editedContentContext.getEditedContentValue(
+      dictionaryKey,
+      keyPath
+    );
+    const value = editedValue ?? children;
+    return value;
+  }
+  return children;
+};
+const EditedContentRenderer = (props) => {
+  const content = useEditedContentRenderer(props);
+  if (typeof content === "object") {
+    const transformedEditedContent = getContent(content, props, props.locale);
+    if (typeof transformedEditedContent !== "string") {
+      console.error(
+        `Incorrect edited content format. Content type: ${typeof transformedEditedContent}. Expected string. Value ${JSON.stringify(transformedEditedContent)}`
+      );
+      return props.children;
+    }
+    return transformedEditedContent;
+  }
+  return content;
+};
+export {
+  EditedContentRenderer,
+  useEditedContentRenderer
+};
+//# sourceMappingURL=useEditedContentRenderer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/useEditedContentRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { getContent, type KeyPath } from '@intlayer/core';\nimport { FC } from 'preact/compat';\nimport { useEditedContentActions } from './EditedContentContext';\n\ntype EditedContentRendererProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  children: string;\n  locale?: Locales;\n};\n\nexport const useEditedContentRenderer = ({\n  dictionaryKey,\n  keyPath,\n  children,\n}: EditedContentRendererProps) => {\n  const editedContentContext = useEditedContentActions();\n\n  if (editedContentContext) {\n    const editedValue = editedContentContext.getEditedContentValue(\n      dictionaryKey,\n      keyPath\n    ) as string;\n\n    const value = editedValue ?? children;\n\n    return value;\n  }\n\n  return children;\n};\n\nexport const EditedContentRenderer: FC<EditedContentRendererProps> = (\n  props\n) => {\n  const content = useEditedContentRenderer(props);\n\n  if (typeof content === 'object') {\n    const transformedEditedContent = getContent(content, props, props.locale);\n\n    if (typeof transformedEditedContent !== 'string') {\n      console.error(\n        `Incorrect edited content format. Content type: ${typeof transformedEditedContent}. Expected string. Value ${JSON.stringify(transformedEditedContent)}`\n      );\n\n      return props.children;\n    }\n\n    return transformedEditedContent;\n  }\n\n  return content;\n};\n"],"mappings":";AAGA,SAAS,kBAAgC;AAEzC,SAAS,+BAA+B;AASjC,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,uBAAuB,wBAAwB;AAErD,MAAI,sBAAsB;AACxB,UAAM,cAAc,qBAAqB;AAAA,MACvC;AAAA,MACA;AAAA,IACF;AAEA,UAAM,QAAQ,eAAe;AAE7B,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEO,MAAM,wBAAwD,CACnE,UACG;AACH,QAAM,UAAU,yBAAyB,KAAK;AAE9C,MAAI,OAAO,YAAY,UAAU;AAC/B,UAAM,2BAA2B,WAAW,SAAS,OAAO,MAAM,MAAM;AAExE,QAAI,OAAO,6BAA6B,UAAU;AAChD,cAAQ;AAAA,QACN,kDAAkD,OAAO,wBAAwB,4BAA4B,KAAK,UAAU,wBAAwB,CAAC;AAAA,MACvJ;AAEA,aAAO,MAAM;AAAA,IACf;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/editor/useIframeClickInterceptor.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { MessageKey, mergeIframeClick } from "@intlayer/editor";
+import { useEffect } from "preact/hooks";
+import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
+const useIframeClickInterceptor = () => {
+  const postMessage = useCrossFrameMessageListener(
+    MessageKey.INTLAYER_IFRAME_CLICKED
+  );
+  const handlePostMessageEvent = () => {
+    postMessage();
+  };
+  useEffect(() => {
+    window.addEventListener("mousedown", handlePostMessageEvent);
+    return () => window.removeEventListener("mousedown", handlePostMessageEvent);
+  }, [postMessage]);
+};
+const useIframeClickMerger = () => useCrossFrameMessageListener(
+  MessageKey.INTLAYER_IFRAME_CLICKED,
+  mergeIframeClick
+);
+export {
+  useIframeClickInterceptor,
+  useIframeClickMerger
+};
+//# sourceMappingURL=useIframeClickInterceptor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/useIframeClickInterceptor.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey, mergeIframeClick } from '@intlayer/editor';\nimport { useEffect } from 'preact/hooks';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport const useIframeClickInterceptor = () => {\n  const postMessage = useCrossFrameMessageListener<undefined>(\n    MessageKey.INTLAYER_IFRAME_CLICKED\n  );\n  const handlePostMessageEvent: EventListener = () => {\n    postMessage();\n  };\n\n  useEffect(() => {\n    window.addEventListener('mousedown', handlePostMessageEvent);\n\n    return () =>\n      window.removeEventListener('mousedown', handlePostMessageEvent);\n  }, [postMessage]);\n};\n\nexport const useIframeClickMerger = () =>\n  useCrossFrameMessageListener<MessageEvent>(\n    MessageKey.INTLAYER_IFRAME_CLICKED,\n    mergeIframeClick\n  );\n"],"mappings":";AAEA,SAAS,YAAY,wBAAwB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAEtC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,EACb;AACA,QAAM,yBAAwC,MAAM;AAClD,gBAAY;AAAA,EACd;AAEA,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,sBAAsB;AAE3D,WAAO,MACL,OAAO,oBAAoB,aAAa,sBAAsB;AAAA,EAClE,GAAG,CAAC,WAAW,CAAC;AAClB;AAEO,MAAM,uBAAuB,MAClC;AAAA,EACE,WAAW;AAAA,EACX;AACF;","names":[]}

package/dist/esm/getDictionary.mjs

@@ -0,0 +1,25 @@
+import {
+  getDictionary as getDictionaryCore
+} from "@intlayer/core";
+import {
+  intlayerNodePlugins,
+  markdownPlugin,
+  preactNodePlugins
+} from "./plugins.mjs";
+const getDictionary = (dictionary, locale, additionalPlugins) => {
+  const plugins = [
+    intlayerNodePlugins,
+    preactNodePlugins,
+    markdownPlugin,
+    ...additionalPlugins ?? []
+  ];
+  return getDictionaryCore(
+    dictionary,
+    locale,
+    plugins
+  );
+};
+export {
+  getDictionary
+};
+//# sourceMappingURL=getDictionary.mjs.map

package/dist/esm/getDictionary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/getDictionary.ts"],"sourcesContent":["import type { Locales, LocalesValues } from '@intlayer/config/client';\nimport {\n  type Dictionary,\n  type Plugins,\n  getDictionary as getDictionaryCore,\n} from '@intlayer/core';\nimport {\n  type DeepTransformContent,\n  intlayerNodePlugins,\n  markdownPlugin,\n  preactNodePlugins,\n} from './plugins';\n\nexport const getDictionary = <\n  T extends Dictionary,\n  L extends LocalesValues = Locales,\n>(\n  dictionary: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n) => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    preactNodePlugins,\n    markdownPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getDictionaryCore(\n    dictionary,\n    locale,\n    plugins\n  ) as any as DeepTransformContent<T['content']>;\n};\n"],"mappings":"AACA;AAAA,EAGE,iBAAiB;AAAA,OACZ;AACP;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,gBAAgB,CAI3B,YACA,QACA,sBACG;AACH,QAAM,UAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI,qBAAqB,CAAC;AAAA,EAC5B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/getIntlayer.mjs

@@ -0,0 +1,21 @@
+import {
+  getIntlayer as getIntlayerCore
+} from "@intlayer/core";
+import {
+  intlayerNodePlugins,
+  markdownPlugin,
+  preactNodePlugins
+} from "./plugins.mjs";
+const getIntlayer = (key, locale, additionalPlugins) => {
+  const plugins = [
+    intlayerNodePlugins,
+    preactNodePlugins,
+    markdownPlugin,
+    ...additionalPlugins ?? []
+  ];
+  return getIntlayerCore(key, locale, plugins);
+};
+export {
+  getIntlayer
+};
+//# sourceMappingURL=getIntlayer.mjs.map

package/dist/esm/getIntlayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/getIntlayer.ts"],"sourcesContent":["import {\n  type DictionaryKeys,\n  type Plugins,\n  getIntlayer as getIntlayerCore,\n} from '@intlayer/core';\n// @ts-ignore intlayer declared for module augmentation\nimport type { IntlayerDictionaryTypesConnector, LocalesValues } from 'intlayer';\nimport {\n  type DeepTransformContent,\n  intlayerNodePlugins,\n  markdownPlugin,\n  preactNodePlugins,\n} from './plugins';\n\nexport const getIntlayer = <T extends DictionaryKeys, L extends LocalesValues>(\n  key: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n) => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    preactNodePlugins,\n    markdownPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getIntlayerCore(key, locale, plugins) as any as DeepTransformContent<\n    IntlayerDictionaryTypesConnector[T]['content']\n  >;\n};\n"],"mappings":"AAAA;AAAA,EAGE,eAAe;AAAA,OACV;AAGP;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,cAAc,CACzB,KACA,QACA,sBACG;AACH,QAAM,UAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI,qBAAqB,CAAC;AAAA,EAC5B;AAEA,SAAO,gBAAgB,KAAK,QAAQ,OAAO;AAG7C;","names":[]}

package/dist/esm/index.mjs

@@ -1,3 +1,39 @@
-export * from "./intlayerPlugin.mjs";
-export * from "./intlayerMiddlewarePlugin.mjs";
+import {
+  getBrowserLocale,
+  IntlayerClientContext,
+  IntlayerProvider,
+  IntlayerProviderContent,
+  localeCookie,
+  setLocaleCookie,
+  t,
+  useDictionary,
+  useDictionaryDynamic,
+  useIntlayer,
+  useIntlayerAsync,
+  useIntlayerContext,
+  useLoadDynamic,
+  useLocale,
+  useLocaleBase,
+  useLocaleCookie
+} from "./client/index.mjs";
+import { MarkdownProvider } from "./markdown/index.mjs";
+export {
+  IntlayerClientContext,
+  IntlayerProvider,
+  IntlayerProviderContent,
+  MarkdownProvider,
+  getBrowserLocale,
+  localeCookie,
+  setLocaleCookie,
+  t,
+  useDictionary,
+  useDictionaryDynamic,
+  useIntlayer,
+  useIntlayerAsync,
+  useIntlayerContext,
+  useLoadDynamic,
+  useLocale,
+  useLocaleBase,
+  useLocaleCookie
+};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './intlayerPlugin';\nexport * from './intlayerMiddlewarePlugin';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import type { IInterpreterPluginPreact } from './plugins';\n\ndeclare module '@intlayer/core' {\n  interface IInterpreterPlugin<T, S> extends IInterpreterPluginPreact<T> {}\n}\n\nexport {\n  getBrowserLocale,\n  IntlayerClientContext,\n  IntlayerProvider,\n  IntlayerProviderContent,\n  localeCookie,\n  setLocaleCookie,\n  t,\n  useDictionary,\n  useDictionaryDynamic,\n  useIntlayer,\n  useIntlayerAsync,\n  useIntlayerContext,\n  useLoadDynamic,\n  useLocale,\n  useLocaleBase,\n  useLocaleCookie,\n  type IntlayerProviderProps,\n} from './client/index';\nexport { type IntlayerNode } from './IntlayerNode';\nexport { MarkdownProvider } from './markdown/index';\n"],"mappings":"AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;","names":[]}

package/dist/esm/markdown/MarkdownProvider.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "preact/jsx-runtime";
+import {
+  createContext,
+  useContext
+} from "preact/compat";
+const MarkdownContext = createContext({
+  renderMarkdown: (markdown) => markdown
+});
+const useMarkdownContext = () => useContext(MarkdownContext);
+const MarkdownProvider = ({
+  children,
+  renderMarkdown
+}) => /* @__PURE__ */ jsx(MarkdownContext.Provider, { value: { renderMarkdown }, children });
+export {
+  MarkdownProvider,
+  useMarkdownContext
+};
+//# sourceMappingURL=MarkdownProvider.mjs.map

package/dist/esm/markdown/MarkdownProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/markdown/MarkdownProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'preact/compat';\n\ntype MarkdownContextValue = {\n  renderMarkdown: (markdown: string) => ReactNode;\n};\n\ntype MarkdownProviderProps = PropsWithChildren<MarkdownContextValue>;\n\nconst MarkdownContext = createContext<MarkdownContextValue>({\n  renderMarkdown: (markdown: string) => markdown,\n});\n\nexport const useMarkdownContext = () => useContext(MarkdownContext);\n\nexport const MarkdownProvider: FC<MarkdownProviderProps> = ({\n  children,\n  renderMarkdown,\n}) => (\n  <MarkdownContext.Provider value={{ renderMarkdown }}>\n    {children}\n  </MarkdownContext.Provider>\n);\n"],"mappings":";AA0BE;AAxBF;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAQP,MAAM,kBAAkB,cAAoC;AAAA,EAC1D,gBAAgB,CAAC,aAAqB;AACxC,CAAC;AAEM,MAAM,qBAAqB,MAAM,WAAW,eAAe;AAE3D,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,eAAe,GAC/C,UACH;","names":[]}