react-intlayer 4.0.3 → 4.0.5

package/dist/esm/client/IntlayerProvider.mjs

@@ -1,29 +1,30 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getConfiguration } from "@intlayer/config/client";
+import { useCrossFrameState } from "@intlayer/editor-react";
 import {
   createContext,
   useContext,
   useMemo,
-  useState,
   useCallback
 } from "react";
-import { localeCookie, setLocaleCookie } from './useLocaleCookie.mjs';
-import { IntlayerEditorProvider } from '../editor/IntlayerEditorProvider.mjs';
-import { PoweredByMeta } from './PoweredByMeta.mjs';
+import { IntlayerEditorProvider } from "../editor/IntlayerEditorProvider.mjs";
+import { PoweredByMeta } from "./PoweredByMeta.mjs";
+import { localeCookie, setLocaleCookie } from "./useLocaleCookie.mjs";
 const IntlayerClientContext = createContext({
   locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,
   setLocale: () => null
 });
 const useIntlayerContext = () => useContext(IntlayerClientContext);
-const IntlayerProvider = ({
+const IntlayerProviderContent = ({
   locale,
   children,
   setLocale: setLocaleProp
 }) => {
   const { internationalization } = getConfiguration();
   const { defaultLocale, locales: availableLocales } = internationalization;
-  const [currentLocale, setCurrentLocale] = useState(
+  const [currentLocale, setCurrentLocale] = useCrossFrameState(
+    "INTLAYER_CURRENT_LOCALE",
     locale ?? localeCookie ?? defaultLocale
   );
   const setLocaleBase = useCallback(
@@ -38,16 +39,20 @@ const IntlayerProvider = ({
     },
     [availableLocales, currentLocale, locale]
   );
-  const setLocale = setLocaleProp ?? setLocaleBase;
+  const setLocale = useMemo(
+    () => setLocaleProp ?? setLocaleBase,
+    [setLocaleProp, setLocaleBase]
+  );
   const value = useMemo(
     () => ({ locale: currentLocale, setLocale }),
     [currentLocale, setLocale]
   );
   return /* @__PURE__ */ jsxs(IntlayerClientContext.Provider, { value, children: [
     /* @__PURE__ */ jsx(PoweredByMeta, {}),
-    /* @__PURE__ */ jsx(IntlayerEditorProvider, { children })
+    children
   ] });
 };
+const IntlayerProvider = (props) => /* @__PURE__ */ jsx(IntlayerEditorProvider, { children: /* @__PURE__ */ jsx(IntlayerProviderContent, { ...props }) });
 export {
   IntlayerClientContext,
   IntlayerProvider,

package/dist/esm/client/IntlayerProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration, type Locales } from '@intlayer/config/client';\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n  type FC,\n  useState,\n  useCallback,\n} from 'react';\nimport { localeCookie, setLocaleCookie } from './useLocaleCookie';\nimport { IntlayerEditorProvider } from '../editor/IntlayerEditorProvider';\nimport { PoweredByMeta } from './PoweredByMeta';\n\ntype IntlayerValue = {\n  locale: Locales;\n  setLocale: (newLocale: Locales) => void;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n  locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,\n  setLocale: () => null,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\nexport type IntlayerProviderProps = PropsWithChildren & {\n  locale?: Locales;\n  setLocale?: (locale: Locales) => void;\n};\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const IntlayerProvider: FC<IntlayerProviderProps> = ({\n  locale,\n  children,\n  setLocale: setLocaleProp,\n}) => {\n  const { internationalization } = getConfiguration();\n  const { defaultLocale, locales: availableLocales } = internationalization;\n\n  const [currentLocale, setCurrentLocale] = useState(\n    locale ?? localeCookie ?? defaultLocale\n  );\n\n  const setLocaleBase = useCallback(\n    (newLocale: Locales) => {\n      if (currentLocale.toString() === newLocale.toString()) return;\n\n      if (!availableLocales.includes(newLocale)) {\n        console.error(`Locale ${locale} is not available`);\n        return;\n      }\n\n      setCurrentLocale(newLocale); // Update state\n      setLocaleCookie(newLocale); // Optionally set cookie for persistence\n    },\n    [availableLocales, currentLocale, locale]\n  );\n\n  const setLocale = setLocaleProp ?? setLocaleBase;\n\n  const value: IntlayerValue = useMemo<IntlayerValue>(\n    () => ({ locale: currentLocale, setLocale: setLocale }),\n    [currentLocale, setLocale]\n  );\n\n  return (\n    <IntlayerClientContext.Provider value={value}>\n      <PoweredByMeta />\n      <IntlayerEditorProvider>{children}</IntlayerEditorProvider>\n    </IntlayerClientContext.Provider>\n  );\n};\n"],"mappings":";AA6EI,SACE,KADF;AA3EJ,SAAS,wBAAsC;AAC/C;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,uBAAuB;AAC9C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAUvB,MAAM,wBAAwB,cAA6B;AAAA,EAChE,QAAQ,gBAAgB,iBAAiB,EAAE,qBAAqB;AAAA,EAChE,WAAW,MAAM;AACnB,CAAC;AAKM,MAAM,qBAAqB,MAAM,WAAW,qBAAqB;AAUjE,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,qBAAqB,IAAI,iBAAiB;AAClD,QAAM,EAAE,eAAe,SAAS,iBAAiB,IAAI;AAErD,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,UAAU,gBAAgB;AAAA,EAC5B;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,cAAuB;AACtB,UAAI,cAAc,SAAS,MAAM,UAAU,SAAS,EAAG;AAEvD,UAAI,CAAC,iBAAiB,SAAS,SAAS,GAAG;AACzC,gBAAQ,MAAM,UAAU,MAAM,mBAAmB;AACjD;AAAA,MACF;AAEA,uBAAiB,SAAS;AAC1B,sBAAgB,SAAS;AAAA,IAC3B;AAAA,IACA,CAAC,kBAAkB,eAAe,MAAM;AAAA,EAC1C;AAEA,QAAM,YAAY,iBAAiB;AAEnC,QAAM,QAAuB;AAAA,IAC3B,OAAO,EAAE,QAAQ,eAAe,UAAqB;AAAA,IACrD,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAC9B;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,0BAAwB,UAAS;AAAA,KACpC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration, type Locales } from '@intlayer/config/client';\nimport { useCrossFrameState } from '@intlayer/editor-react';\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n  type FC,\n  useState,\n  useCallback,\n} from 'react';\nimport { IntlayerEditorProvider } from '../editor/IntlayerEditorProvider';\nimport { PoweredByMeta } from './PoweredByMeta';\nimport { localeCookie, setLocaleCookie } from './useLocaleCookie';\n\ntype IntlayerValue = {\n  locale: Locales;\n  setLocale: (newLocale: Locales) => void;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n  locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,\n  setLocale: () => null,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\nexport type IntlayerProviderProps = PropsWithChildren & {\n  locale?: Locales;\n  setLocale?: (locale: Locales) => void;\n};\n\n/**\n * Provider that store the current locale on the client side\n */\nconst IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n  locale,\n  children,\n  setLocale: setLocaleProp,\n}) => {\n  const { internationalization } = getConfiguration();\n  const { defaultLocale, locales: availableLocales } = internationalization;\n\n  const [currentLocale, setCurrentLocale] = useCrossFrameState(\n    'INTLAYER_CURRENT_LOCALE',\n    locale ?? localeCookie ?? defaultLocale\n  );\n\n  const setLocaleBase = useCallback(\n    (newLocale: Locales) => {\n      if (currentLocale.toString() === newLocale.toString()) return;\n\n      if (!availableLocales.includes(newLocale)) {\n        console.error(`Locale ${locale} is not available`);\n        return;\n      }\n\n      setCurrentLocale(newLocale); // Update state\n      setLocaleCookie(newLocale); // Optionally set cookie for persistence\n    },\n    [availableLocales, currentLocale, locale]\n  );\n\n  const setLocale = useMemo(\n    () => setLocaleProp ?? setLocaleBase,\n    [setLocaleProp, setLocaleBase]\n  );\n\n  const value: IntlayerValue = useMemo<IntlayerValue>(\n    () => ({ locale: currentLocale, setLocale }),\n    [currentLocale, setLocale]\n  );\n\n  return (\n    <IntlayerClientContext.Provider value={value}>\n      <PoweredByMeta />\n      {children}\n    </IntlayerClientContext.Provider>\n  );\n};\n\nexport const IntlayerProvider: FC<IntlayerProviderProps> = (props) => (\n  <IntlayerEditorProvider>\n    <IntlayerProviderContent {...props} />\n  </IntlayerEditorProvider>\n);\n"],"mappings":";AAkFI,SACE,KADF;AAhFJ,SAAS,wBAAsC;AAC/C,SAAS,0BAA0B;AACnC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,cAAc,uBAAuB;AAUvC,MAAM,wBAAwB,cAA6B;AAAA,EAChE,QAAQ,gBAAgB,iBAAiB,EAAE,qBAAqB;AAAA,EAChE,WAAW,MAAM;AACnB,CAAC;AAKM,MAAM,qBAAqB,MAAM,WAAW,qBAAqB;AAUxE,MAAM,0BAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,qBAAqB,IAAI,iBAAiB;AAClD,QAAM,EAAE,eAAe,SAAS,iBAAiB,IAAI;AAErD,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC;AAAA,IACA,UAAU,gBAAgB;AAAA,EAC5B;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,cAAuB;AACtB,UAAI,cAAc,SAAS,MAAM,UAAU,SAAS,EAAG;AAEvD,UAAI,CAAC,iBAAiB,SAAS,SAAS,GAAG;AACzC,gBAAQ,MAAM,UAAU,MAAM,mBAAmB;AACjD;AAAA,MACF;AAEA,uBAAiB,SAAS;AAC1B,sBAAgB,SAAS;AAAA,IAC3B;AAAA,IACA,CAAC,kBAAkB,eAAe,MAAM;AAAA,EAC1C;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,iBAAiB;AAAA,IACvB,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,QAAM,QAAuB;AAAA,IAC3B,OAAO,EAAE,QAAQ,eAAe,UAAU;AAAA,IAC1C,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAC9B;AAAA,wBAAC,iBAAc;AAAA,IACd;AAAA,KACH;AAEJ;AAEO,MAAM,mBAA8C,CAAC,UAC1D,oBAAC,0BACC,8BAAC,2BAAyB,GAAG,OAAO,GACtC;","names":[]}

package/dist/esm/client/PoweredByMeta.mjs

@@ -3,10 +3,15 @@ import { useEffect } from "react";
 const PoweredByMeta = () => {
   if (process.env.NODE_ENV !== "production") return null;
   useEffect(() => {
-    const metaTag = document.createElement("meta");
-    metaTag.name = "content-powered-by";
-    metaTag.content = "Intlayer - https://intlayer.org";
-    document.head.appendChild(metaTag);
+    const existingMeta = document.head.querySelector(
+      'meta[name="content-powered-by"]'
+    );
+    if (!existingMeta) {
+      const metaTag = document.createElement("meta");
+      metaTag.name = "content-powered-by";
+      metaTag.content = "Intlayer - https://intlayer.org";
+      document.head.appendChild(metaTag);
+    }
   }, []);
   return null;
 };

package/dist/esm/client/PoweredByMeta.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/PoweredByMeta.ts"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect } from 'react';\n\nexport const PoweredByMeta: FC = () => {\n  if (process.env.NODE_ENV !== 'production') return null;\n\n  useEffect(() => {\n    const metaTag = document.createElement('meta');\n    metaTag.name = 'content-powered-by';\n    metaTag.content = 'Intlayer - https://intlayer.org';\n    document.head.appendChild(metaTag);\n  }, []);\n\n  return null; // This component does not render anything visible\n};\n"],"mappings":";AAEA,SAAkB,iBAAiB;AAE5B,MAAM,gBAAoB,MAAM;AACrC,MAAI,QAAQ,IAAI,aAAa,aAAc,QAAO;AAElD,YAAU,MAAM;AACd,UAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,YAAQ,OAAO;AACf,YAAQ,UAAU;AAClB,aAAS,KAAK,YAAY,OAAO;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/client/PoweredByMeta.ts"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect } from 'react';\n\nexport const PoweredByMeta: FC = () => {\n  if (process.env.NODE_ENV !== 'production') return null;\n\n  useEffect(() => {\n    // Check if the meta tag already exists\n    const existingMeta = document.head.querySelector(\n      'meta[name=\"content-powered-by\"]'\n    );\n\n    if (!existingMeta) {\n      const metaTag = document.createElement('meta');\n      metaTag.name = 'content-powered-by';\n      metaTag.content = 'Intlayer - https://intlayer.org';\n      document.head.appendChild(metaTag);\n    }\n  }, []);\n\n  return null; // This component does not render anything visible\n};\n"],"mappings":";AAEA,SAAkB,iBAAiB;AAE5B,MAAM,gBAAoB,MAAM;AACrC,MAAI,QAAQ,IAAI,aAAa,aAAc,QAAO;AAElD,YAAU,MAAM;AAEd,UAAM,eAAe,SAAS,KAAK;AAAA,MACjC;AAAA,IACF;AAEA,QAAI,CAAC,cAAc;AACjB,YAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,cAAQ,OAAO;AACf,cAAQ,UAAU;AAClB,eAAS,KAAK,YAAY,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/esm/client/index.mjs

@@ -2,20 +2,20 @@ import {
   IntlayerClientContext,
   useIntlayerContext,
   IntlayerProvider
-} from './IntlayerProvider.mjs';
-import { useIntlayer } from './useIntlayer.mjs';
-import { useIntlayerAsync } from './useIntlayerAsync.mjs';
-import { useDictionary } from './useDictionary.mjs';
-import { useLocaleBase } from './useLocaleBase.mjs';
-import { useLocale } from './useLocale.mjs';
-import { useTraduction } from './useTraduction.mjs';
+} from "./IntlayerProvider.mjs";
+import { useIntlayer } from "./useIntlayer.mjs";
+import { useIntlayerAsync } from "./useIntlayerAsync.mjs";
+import { useDictionary } from "./useDictionary.mjs";
+import { useLocaleBase } from "./useLocaleBase.mjs";
+import { useLocale } from "./useLocale.mjs";
+import { useTraduction } from "./useTraduction.mjs";
 import {
   useLocaleCookie,
   localeCookie,
   setLocaleCookie
-} from './useLocaleCookie.mjs';
-import { getBrowserLocale } from './getBrowserLocale.mjs';
-import { t } from './t.mjs';
+} from "./useLocaleCookie.mjs";
+import { getBrowserLocale } from "./getBrowserLocale.mjs";
+import { t } from "./t.mjs";
 export {
   IntlayerClientContext,
   IntlayerProvider,

package/dist/esm/client/t.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useContext } from "react";
-import { getTranslation } from '../getTranslation.mjs';
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+import { getTranslation } from "../getTranslation.mjs";
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const t = (multilangContent, locale) => {
   const { locale: currentLocale } = useContext(IntlayerClientContext);
   const localeTarget = locale ?? currentLocale;

package/dist/esm/client/useContent.mjs

@@ -1,5 +1,5 @@
-import { useLocaleBase } from './useLocaleBase.mjs';
-import { useTraduction } from './useTraduction.mjs';
+import { useLocaleBase } from "./useLocaleBase.mjs";
+import { useTraduction } from "./useTraduction.mjs";
 const useContent = (languageContent) => {
   const { locale } = useLocaleBase();
   const content = useTraduction(languageContent);

package/dist/esm/client/useDictionary.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useContext } from "react";
-import { getDictionary } from '../getDictionary.mjs';
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+import { getDictionary } from "../getDictionary.mjs";
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const useDictionary = (dictionary, locale, isRenderEditor = false) => {
   const { locale: currentLocale } = useContext(IntlayerClientContext);
   const localeTarget = locale ?? currentLocale;

package/dist/esm/client/useIntlayer.mjs

@@ -2,8 +2,8 @@
 import { useContext } from "react";
 import {
   getIntlayer
-} from '../getIntlayer.mjs';
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+} from "../getIntlayer.mjs";
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const useIntlayer = (key, locale, isRenderEditor = true) => {
   const { locale: currentLocale } = useContext(IntlayerClientContext);
   const localeTarget = locale ?? currentLocale;

package/dist/esm/client/useIntlayerAsync.mjs

@@ -2,9 +2,9 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import {
   getIntlayer
-} from '../getIntlayer.mjs';
-import { getIntlayerAsync } from '../getIntlayerAsync.mjs';
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+} from "../getIntlayer.mjs";
+import { getIntlayerAsync } from "../getIntlayerAsync.mjs";
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const useIntlayerAsync = (key, locale, isRenderEditor = true) => {
   const { locale: currentLocale } = useContext(IntlayerClientContext);
   const localeTarget = locale ?? currentLocale;

package/dist/esm/client/useLocale.mjs

@@ -2,8 +2,8 @@
 import { getConfiguration } from "@intlayer/config/client";
 import { localeList } from "@intlayer/core";
 import { useCallback, useContext } from "react";
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
-import { useLocaleCookie } from './useLocaleCookie.mjs';
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
+import { useLocaleCookie } from "./useLocaleCookie.mjs";
 const useLocale = ({ onLocaleChange } = {}) => {
   const {
     /**

package/dist/esm/client/useLocaleBase.mjs

@@ -2,7 +2,7 @@
 import { getConfiguration } from "@intlayer/config/client";
 import { localeList } from "@intlayer/core";
 import { useContext } from "react";
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const { defaultLocale, locales: availableLocales } = getConfiguration().internationalization;
 const useLocaleBase = () => {
   const { locale, setLocale } = useContext(IntlayerClientContext);

package/dist/esm/client/useTraduction.mjs

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { getTranslation } from '../getTranslation.mjs';
-import { IntlayerClientContext } from './IntlayerProvider.mjs';
+import { getTranslation } from "../getTranslation.mjs";
+import { IntlayerClientContext } from "./IntlayerProvider.mjs";
 const useTraduction = (languageContent) => {
   const { locale } = useContext(IntlayerClientContext);
   return getTranslation(languageContent, locale);

package/dist/esm/editor/ContentSelectorWrapper.mjs

@@ -1,18 +1,19 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { isSameKeyPath } from "@intlayer/core";
+import {
+  useFocusDictionary,
+  useEditedContentActions,
+  useEditorEnabled
+} from "@intlayer/editor-react";
 import {
   useCallback,
   useEffect,
   useState,
   useMemo
 } from "react";
-import {
-  useFocusDictionary,
-  useEditedContentActions
-} from "@intlayer/editor-react";
-import { ContentSelector } from '../UI/ContentSelector.mjs';
-const ContentSelectorWrapper = ({
+import { ContentSelector } from "../UI/ContentSelector.mjs";
+const ContentSelectorWrapperContent = ({
   children,
   dictionaryKey,
   dictionaryPath,
@@ -35,7 +36,7 @@ const ContentSelectorWrapper = ({
     [dictionaryKey, dictionaryPath, keyPath, setFocusedContent]
   );
   const isSelected = useMemo(
-    () => ((focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false,
+    () => (focusedContent?.dictionaryKey === dictionaryKey && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false,
     [focusedContent, keyPath]
   );
   useEffect(() => {
@@ -47,6 +48,16 @@ const ContentSelectorWrapper = ({
   }, [editedValue, focusedContent, children]);
   return /* @__PURE__ */ jsx(ContentSelector, { onPress: handleSelect, isSelecting: isSelected, ...props, children: displayedChildren });
 };
+const ContentSelectorWrapper = ({
+  children,
+  ...props
+}) => {
+  const { enabled } = useEditorEnabled();
+  if (enabled) {
+    return /* @__PURE__ */ jsx(ContentSelectorWrapperContent, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 export {
   ContentSelectorWrapper
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  useMemo,\n  type FC,\n  type ReactNode,\n  HTMLAttributes,\n} from 'react';\nimport {\n  useFocusDictionary,\n  useEditedContentActions,\n} from '@intlayer/editor-react';\nimport { ContentSelector } from '../UI/ContentSelector';\n\ntype ContentData = {\n  dictionaryKey: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport type ContentSelectorWrapperProps = ContentData &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryKey,\n  dictionaryPath,\n  keyPath,\n  ...props\n}) => {\n  const { focusedContent, setFocusedContent } = useFocusDictionary();\n  const { getEditedContentValue } = useEditedContentActions();\n\n  const editedValue = useMemo(\n    () => getEditedContentValue(dictionaryKey, keyPath),\n    [dictionaryKey, keyPath, getEditedContentValue]\n  );\n\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      setFocusedContent({\n        dictionaryKey,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryKey, dictionaryPath, keyPath, setFocusedContent]\n  );\n\n  const isSelected = useMemo(\n    () =>\n      ((focusedContent?.keyPath?.length ?? 0) > 0 &&\n        isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n      false,\n    [focusedContent, keyPath]\n  );\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    } else {\n      setDisplayedChildren(children);\n    }\n  }, [editedValue, focusedContent, children]);\n\n  return (\n    <ContentSelector onPress={handleSelect} isSelecting={isSelected} {...props}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";AAyEI;AAvEJ,SAAS,qBAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAWzB,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAgB,kBAAkB,IAAI,mBAAmB;AACjE,QAAM,EAAE,sBAAsB,IAAI,wBAAwB;AAE1D,QAAM,cAAc;AAAA,IAClB,MAAM,sBAAsB,eAAe,OAAO;AAAA,IAClD,CAAC,eAAe,SAAS,qBAAqB;AAAA,EAChD;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,eAAe,gBAAgB,SAAS,iBAAiB;AAAA,EAC5D;AAEA,QAAM,aAAa;AAAA,IACjB,QACI,gBAAgB,SAAS,UAAU,KAAK,KACxC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAAA,IACF,CAAC,gBAAgB,OAAO;AAAA,EAC1B;AAEA,YAAU,MAAM;AAEd,QAAI,eAAe,OAAO,gBAAgB,UAAU;AAClD,2BAAqB,WAAW;AAAA,IAClC,OAAO;AACL,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,QAAQ,CAAC;AAE1C,SACE,oBAAC,mBAAgB,SAAS,cAAc,aAAa,YAAa,GAAG,OAClE,6BACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/editor/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport {\n  useFocusDictionary,\n  useEditedContentActions,\n  useEditorEnabled,\n} from '@intlayer/editor-react';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  useMemo,\n  type FC,\n  type ReactNode,\n  HTMLAttributes,\n} from 'react';\nimport { ContentSelector } from '../UI/ContentSelector';\n\ntype ContentData = {\n  dictionaryKey: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport type ContentSelectorWrapperProps = ContentData &\n  HTMLAttributes<HTMLDivElement>;\n\nconst ContentSelectorWrapperContent: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryKey,\n  dictionaryPath,\n  keyPath,\n  ...props\n}) => {\n  const { focusedContent, setFocusedContent } = useFocusDictionary();\n  const { getEditedContentValue } = useEditedContentActions();\n\n  const editedValue = useMemo(\n    () => getEditedContentValue(dictionaryKey, keyPath),\n    [dictionaryKey, keyPath, getEditedContentValue]\n  );\n\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      setFocusedContent({\n        dictionaryKey,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryKey, dictionaryPath, keyPath, setFocusedContent]\n  );\n\n  const isSelected = useMemo(\n    () =>\n      (focusedContent?.dictionaryKey === dictionaryKey &&\n        (focusedContent?.keyPath?.length ?? 0) > 0 &&\n        isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n      false,\n    [focusedContent, keyPath]\n  );\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    } else {\n      setDisplayedChildren(children);\n    }\n  }, [editedValue, focusedContent, children]);\n\n  return (\n    <ContentSelector onPress={handleSelect} isSelecting={isSelected} {...props}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  ...props\n}) => {\n  const { enabled } = useEditorEnabled();\n\n  if (enabled) {\n    return (\n      <ContentSelectorWrapperContent {...props}>\n        {children}\n      </ContentSelectorWrapperContent>\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"mappings":";AA2EI,SAoBK,UApBL;AAzEJ,SAAS,qBAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,uBAAuB;AAWhC,MAAM,gCAAiE,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAgB,kBAAkB,IAAI,mBAAmB;AACjE,QAAM,EAAE,sBAAsB,IAAI,wBAAwB;AAE1D,QAAM,cAAc;AAAA,IAClB,MAAM,sBAAsB,eAAe,OAAO;AAAA,IAClD,CAAC,eAAe,SAAS,qBAAqB;AAAA,EAChD;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,eAAe,gBAAgB,SAAS,iBAAiB;AAAA,EAC5D;AAEA,QAAM,aAAa;AAAA,IACjB,OACG,gBAAgB,kBAAkB,kBAChC,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAAA,IACF,CAAC,gBAAgB,OAAO;AAAA,EAC1B;AAEA,YAAU,MAAM;AAEd,QAAI,eAAe,OAAO,gBAAgB,UAAU;AAClD,2BAAqB,WAAW;AAAA,IAClC,OAAO;AACL,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,QAAQ,CAAC;AAE1C,SACE,oBAAC,mBAAgB,SAAS,cAAc,aAAa,YAAa,GAAG,OAClE,6BACH;AAEJ;AAEO,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,MAAI,SAAS;AACX,WACE,oBAAC,iCAA+B,GAAG,OAChC,UACH;AAAA,EAEJ;AAEA,SAAO,gCAAG,UAAS;AACrB;","names":[]}

package/dist/esm/editor/IntlayerEditorProvider.mjs

@@ -1,14 +1,65 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getConfiguration } from "@intlayer/config/client";
-import { EditorProvider } from "@intlayer/editor-react";
-const {
-  editor: { enabled }
-} = getConfiguration();
+import dictionaries from "@intlayer/dictionaries-entry";
+import {
+  EditorProvider,
+  useCrossURLPathState,
+  useDictionariesRecordActions,
+  useConfigurationState,
+  useIframeClickInterceptor,
+  useEditorEnabled
+} from "@intlayer/editor-react";
+import { useEffect } from "react";
+const IntlayerEditorHooksEnabled = () => {
+  useCrossURLPathState(void 0, {
+    receive: false,
+    emit: true
+  });
+  const [, setConfiguration] = useConfigurationState();
+  useEffect(() => {
+    const config = getConfiguration();
+    setConfiguration(config);
+  }, [setConfiguration]);
+  const { setLocaleDictionaries } = useDictionariesRecordActions();
+  useEffect(() => {
+    setLocaleDictionaries(dictionaries);
+  }, [setLocaleDictionaries]);
+  useIframeClickInterceptor();
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+const IntlayerEditorHook = () => {
+  const { enabled } = useEditorEnabled();
+  return enabled ? /* @__PURE__ */ jsx(IntlayerEditorHooksEnabled, {}) : /* @__PURE__ */ jsx(Fragment, {});
+};
 const IntlayerEditorProvider = ({ children }) => {
-  if (enabled) {
-    return /* @__PURE__ */ jsx(EditorProvider, { targetWindow: window, children });
-  }
-  return children;
+  const { editor } = getConfiguration();
+  return /* @__PURE__ */ jsxs(
+    EditorProvider,
+    {
+      postMessage: (data) => {
+        if (typeof window === "undefined") return;
+        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
+        );
+        window.parent?.postMessage(
+          data,
+          // Use to restrict the origin of the editor for security reasons.
+          // Correspond to the current editor URL.
+          editor.editorURL
+        );
+      },
+      allowedOrigins: [editor.editorURL, editor.applicationURL],
+      mode: "client",
+      children: [
+        /* @__PURE__ */ jsx(IntlayerEditorHook, {}),
+        children
+      ]
+    }
+  );
 };
 export {
   IntlayerEditorProvider

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["import { FC, PropsWithChildren } from 'react';\nimport { getConfiguration } from '@intlayer/config/client';\nimport { EditorProvider } from '@intlayer/editor-react';\n\nconst {\n  editor: { enabled },\n} = getConfiguration();\n\nexport const IntlayerEditorProvider: FC<PropsWithChildren> = ({ children }) => {\n  if (enabled) {\n    return <EditorProvider targetWindow={window}>{children}</EditorProvider>;\n  }\n\n  return children;\n};\n"],"mappings":"AAUW;AATX,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAE/B,MAAM;AAAA,EACJ,QAAQ,EAAE,QAAQ;AACpB,IAAI,iBAAiB;AAEd,MAAM,yBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,MAAI,SAAS;AACX,WAAO,oBAAC,kBAAe,cAAc,QAAS,UAAS;AAAA,EACzD;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport {\n  EditorProvider,\n  useCrossURLPathState,\n  useDictionariesRecordActions,\n  useConfigurationState,\n  useIframeClickInterceptor,\n  useEditorEnabled,\n} from '@intlayer/editor-react';\nimport { useEffect, type FC, type PropsWithChildren } from 'react';\n\nconst IntlayerEditorHooksEnabled: FC = () => {\n  /**\n   * URL Messages\n   */\n  useCrossURLPathState(undefined, {\n    receive: false,\n    emit: true,\n  });\n\n  /**\n   * Configuration Messages\n   */\n  const [, setConfiguration] = useConfigurationState();\n\n  useEffect(() => {\n    const config = getConfiguration();\n    setConfiguration(config);\n  }, [setConfiguration]);\n\n  /**\n   * Locale Dictionaries Messages\n   */\n  const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    setLocaleDictionaries(dictionaries);\n  }, [setLocaleDictionaries]);\n\n  /**\n   * Click Messages\n   */\n  useIframeClickInterceptor();\n\n  return <></>;\n};\n\nconst IntlayerEditorHook: FC = () => {\n  const { enabled } = useEditorEnabled();\n\n  return enabled ? <IntlayerEditorHooksEnabled /> : <></>;\n};\n\nexport const IntlayerEditorProvider: FC<PropsWithChildren> = ({ children }) => {\n  const { editor } = getConfiguration();\n\n  return (\n    <EditorProvider\n      postMessage={(data: any) => {\n        if (typeof window === 'undefined') return;\n\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        window.parent?.postMessage(\n          data,\n          // Use to restrict the origin of the editor for security reasons.\n          // Correspond to the current editor URL.\n          editor.editorURL\n        );\n      }}\n      allowedOrigins={[editor.editorURL, editor.applicationURL]}\n      mode=\"client\"\n    >\n      <IntlayerEditorHook />\n      {children}\n    </EditorProvider>\n  );\n};\n"],"mappings":";AAsDS,wBAaL,YAbK;AAlDT,SAAS,wBAAwB;AAMjC,OAAO,kBAAkB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAkD;AAE3D,MAAM,6BAAiC,MAAM;AAI3C,uBAAqB,QAAW;AAAA,IAC9B,SAAS;AAAA,IACT,MAAM;AAAA,EACR,CAAC;AAKD,QAAM,CAAC,EAAE,gBAAgB,IAAI,sBAAsB;AAEnD,YAAU,MAAM;AACd,UAAM,SAAS,iBAAiB;AAChC,qBAAiB,MAAM;AAAA,EACzB,GAAG,CAAC,gBAAgB,CAAC;AAKrB,QAAM,EAAE,sBAAsB,IAAI,6BAA6B;AAE/D,YAAU,MAAM;AACd,0BAAsB,YAAY;AAAA,EACpC,GAAG,CAAC,qBAAqB,CAAC;AAK1B,4BAA0B;AAE1B,SAAO,gCAAE;AACX;AAEA,MAAM,qBAAyB,MAAM;AACnC,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,SAAO,UAAU,oBAAC,8BAA2B,IAAK,gCAAE;AACtD;AAEO,MAAM,yBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,EAAE,OAAO,IAAI,iBAAiB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,SAAc;AAC1B,YAAI,OAAO,WAAW,YAAa;AAEnC,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA,UAGA,OAAO;AAAA,QACT;AACA,eAAO,QAAQ;AAAA,UACb;AAAA;AAAA;AAAA,UAGA,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,gBAAgB,CAAC,OAAO,WAAW,OAAO,cAAc;AAAA,MACxD,MAAK;AAAA,MAEL;AAAA,4BAAC,sBAAmB;AAAA,QACnB;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/editor/index.mjs

@@ -1,3 +1,3 @@
-export * from './ContentSelectorWrapper.mjs';
-export * from './renderContentEditor.mjs';
+export * from "./ContentSelectorWrapper.mjs";
+export * from "./renderContentEditor.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/esm/editor/renderContentEditor.mjs

@@ -1,28 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { getConfiguration } from "@intlayer/config/client";
-import { ContentSelectorWrapper } from './ContentSelectorWrapper.mjs';
-const {
-  editor: { enabled }
-} = getConfiguration();
-const IntlayerEditorElement = ({
-  content,
-  isContentSelectable,
-  ...props
-}) => {
-  if (enabled && isContentSelectable) {
-    return /* @__PURE__ */ jsx(ContentSelectorWrapper, { ...props, children: content });
-  }
-  return content;
-};
-const renderIntlayerEditor = (data, isContentSelectable = true) => {
-  const Result = /* @__PURE__ */ jsx(
-    IntlayerEditorElement,
-    {
-      ...data,
-      isContentSelectable
-    }
-  );
-  return { ...Result, value: data.content };
+import {
+  ContentSelectorWrapper
+} from "./ContentSelectorWrapper.mjs";
+const renderIntlayerEditor = (props) => {
+  const Result = /* @__PURE__ */ jsx(ContentSelectorWrapper, { ...props, children: props.content });
+  return { ...Result, value: props.content };
 };
 export {
   renderIntlayerEditor

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/editor/renderContentEditor.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC, ReactNode } from 'react';\nimport { ContentSelectorWrapper } from './ContentSelectorWrapper';\n\nconst {\n  editor: { enabled },\n} = getConfiguration();\n\nexport type IntlayerEditorElementProps = {\n  content: string;\n  dictionaryKey: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n  isContentSelectable: boolean;\n};\n\nconst IntlayerEditorElement: FC<IntlayerEditorElementProps> = ({\n  content,\n  isContentSelectable,\n  ...props\n}) => {\n  if (enabled && isContentSelectable) {\n    return (\n      <ContentSelectorWrapper {...props}>{content}</ContentSelectorWrapper>\n    );\n  }\n  return content;\n};\n\nexport type IntlayerNode<T = string> = ReactNode & {\n  value: T;\n};\n\nexport const renderIntlayerEditor = (\n  data: IntlayerEditorElementProps,\n  isContentSelectable = true\n): IntlayerNode => {\n  const Result = (\n    <IntlayerEditorElement\n      {...data}\n      isContentSelectable={isContentSelectable}\n    />\n  );\n\n  return { ...Result, value: data.content };\n};\n"],"mappings":"AAwBM;AAxBN,SAAS,wBAAwB;AAGjC,SAAS,8BAA8B;AAEvC,MAAM;AAAA,EACJ,QAAQ,EAAE,QAAQ;AACpB,IAAI,iBAAiB;AAUrB,MAAM,wBAAwD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,WAAW,qBAAqB;AAClC,WACE,oBAAC,0BAAwB,GAAG,OAAQ,mBAAQ;AAAA,EAEhD;AACA,SAAO;AACT;AAMO,MAAM,uBAAuB,CAClC,MACA,sBAAsB,SACL;AACjB,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAGF,SAAO,EAAE,GAAG,QAAQ,OAAO,KAAK,QAAQ;AAC1C;","names":[]}
+{"version":3,"sources":["../../../src/editor/renderContentEditor.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  ContentSelectorWrapper,\n  type ContentSelectorWrapperProps,\n} from './ContentSelectorWrapper';\n\nexport type IntlayerNode<T = string> = ReactNode & {\n  value: T;\n};\n\nexport type RenderIntlayerEditorProps = Omit<\n  ContentSelectorWrapperProps,\n  'children'\n> & {\n  content: string;\n};\n\nexport const renderIntlayerEditor = (\n  props: RenderIntlayerEditorProps\n): IntlayerNode => {\n  const Result = (\n    <ContentSelectorWrapper {...props}>{props.content}</ContentSelectorWrapper>\n  );\n\n  return { ...Result, value: props.content };\n};\n"],"mappings":"AAqBI;AApBJ;AAAA,EACE;AAAA,OAEK;AAaA,MAAM,uBAAuB,CAClC,UACiB;AACjB,QAAM,SACJ,oBAAC,0BAAwB,GAAG,OAAQ,gBAAM,SAAQ;AAGpD,SAAO,EAAE,GAAG,QAAQ,OAAO,MAAM,QAAQ;AAC3C;","names":[]}

package/dist/esm/getDictionary.mjs

@@ -1,32 +1,7 @@
-import { isValidElement } from "react";
+import { processDictionary } from "./processDictionary/index.mjs";
 import {
-  renderIntlayerEditor
-} from './editor/renderContentEditor.mjs';
-import { processDictionary } from './processDictionary/index.mjs';
-const recursiveTransformContent = (value, isRenderEditor = false) => {
-  if (typeof value === "function") {
-    return (props) => recursiveTransformContent(value(props), isRenderEditor);
-  } else if (typeof value === "object") {
-    if (typeof value.dictionaryKey !== "undefined") {
-      if (isRenderEditor) {
-        return renderIntlayerEditor(value);
-      }
-      return value.content;
-    } else if (Array.isArray(value)) {
-      return value.map((el) => recursiveTransformContent(el, isRenderEditor));
-    } else if (isValidElement(value)) {
-      return value;
-    }
-    return Object.entries(value).reduce(
-      (acc, [key, value2]) => ({
-        ...acc,
-        [key]: recursiveTransformContent(value2, isRenderEditor)
-      }),
-      {}
-    );
-  }
-  return value;
-};
+  recursiveTransformContent
+} from "./recursiveTransformContent.mjs";
 const getDictionary = (dictionary, locale, isRenderEditor = false) => {
   const result = processDictionary(
     dictionary.content,
@@ -41,7 +16,6 @@ const getDictionary = (dictionary, locale, isRenderEditor = false) => {
   );
 };
 export {
-  getDictionary,
-  recursiveTransformContent
+  getDictionary
 };
 //# sourceMappingURL=getDictionary.mjs.map

package/dist/esm/getDictionary.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/getDictionary.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Locales } from '@intlayer/config';\nimport type {\n  DeclarationContent,\n  DictionaryValue,\n  NodeType,\n} from '@intlayer/core';\nimport { isValidElement, type ReactNode } from 'react';\nimport {\n  type IntlayerNode,\n  renderIntlayerEditor,\n} from './editor/renderContentEditor';\nimport { processDictionary } from './processDictionary/index';\n\ntype TransformNodeType<T, L extends Locales, R extends boolean> = T extends {\n  [NodeType.Enumeration]: { '1': any };\n}\n  ? (\n      quantity: number\n    ) => DeepTransformContent<T[NodeType.Enumeration]['1'], L, R>\n  : T extends {\n        [NodeType.Translation]: object;\n      }\n    ? L extends keyof T[NodeType.Translation]\n      ? DeepTransformContent<T[NodeType.Translation][L], L, R>\n      : never\n    : T;\n\nexport type DeepTransformContent<\n  T,\n  L extends Locales,\n  R extends boolean,\n> = T extends object // Check if the property is an object\n  ? T extends (infer U)[] // If it's an array, infer the type of array elements\n    ? DeepTransformContent<U, L, R>[] // Apply DeepTransformContent recursively to each element of the array\n    : T extends {\n          nodeType: NodeType | string;\n        }\n      ? TransformNodeType<T, L, R>\n      : T extends { _owner: any; key: any; props: any; ref: any }\n        ? ReactNode\n        : {\n            [K in keyof T]: DeepTransformContent<T[K], L, R>;\n          }\n  : T extends undefined\n    ? never\n    : R extends true\n      ? IntlayerNode<T>\n      : T;\n\n/**\n * Go through the object. If a object has a keyPath, render the intlayer editor if editor enabled.\n */\nexport const recursiveTransformContent = (\n  value: any,\n  isRenderEditor = false\n): object => {\n  if (typeof value === 'function') {\n    return (props: any) =>\n      recursiveTransformContent(value(props), isRenderEditor);\n  } else if (typeof value === 'object') {\n    if (typeof value.dictionaryKey !== 'undefined') {\n      if (isRenderEditor) {\n        return renderIntlayerEditor(value);\n      }\n      return value.content;\n    } else if (Array.isArray(value)) {\n      return value.map((el) => recursiveTransformContent(el, isRenderEditor));\n    } else if (isValidElement(value)) {\n      return value;\n    }\n\n    return Object.entries(value).reduce(\n      (acc, [key, value]) => ({\n        ...acc,\n        [key]: recursiveTransformContent(value, isRenderEditor),\n      }),\n      {} as object\n    );\n  }\n\n  return value;\n};\n\ntype DataFromDictionary<\n  T extends DeclarationContent,\n  K extends Locales,\n  R extends boolean = false,\n> = DeepTransformContent<T['content'], K, R>;\n\nexport type UseDictionary = <\n  T extends DeclarationContent,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  dictionary: T,\n  locale?: L,\n  isRenderEditor?: R\n) => DataFromDictionary<T, L, R>;\n\n/**\n * Hook that picks one dictionary by its id and return the content\n *\n * If the locale is not provided, it will use the locale from the client context\n */\nexport const getDictionary: UseDictionary = <\n  T extends DeclarationContent,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  dictionary: T,\n  locale?: L,\n  isRenderEditor: R = false as R\n) => {\n  const result = processDictionary(\n    dictionary.content as DictionaryValue,\n    dictionary.key,\n    dictionary.filePath,\n    [],\n    locale\n  );\n\n  return recursiveTransformContent(\n    result,\n    isRenderEditor\n  ) as DataFromDictionary<T, L, R>;\n};\n"],"mappings":"AAOA,SAAS,sBAAsC;AAC/C;AAAA,EAEE;AAAA,OACK;AACP,SAAS,yBAAyB;AAyC3B,MAAM,4BAA4B,CACvC,OACA,iBAAiB,UACN;AACX,MAAI,OAAO,UAAU,YAAY;AAC/B,WAAO,CAAC,UACN,0BAA0B,MAAM,KAAK,GAAG,cAAc;AAAA,EAC1D,WAAW,OAAO,UAAU,UAAU;AACpC,QAAI,OAAO,MAAM,kBAAkB,aAAa;AAC9C,UAAI,gBAAgB;AAClB,eAAO,qBAAqB,KAAK;AAAA,MACnC;AACA,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,QAAQ,KAAK,GAAG;AAC/B,aAAO,MAAM,IAAI,CAAC,OAAO,0BAA0B,IAAI,cAAc,CAAC;AAAA,IACxE,WAAW,eAAe,KAAK,GAAG;AAChC,aAAO;AAAA,IACT;AAEA,WAAO,OAAO,QAAQ,KAAK,EAAE;AAAA,MAC3B,CAAC,KAAK,CAAC,KAAKA,MAAK,OAAO;AAAA,QACtB,GAAG;AAAA,QACH,CAAC,GAAG,GAAG,0BAA0BA,QAAO,cAAc;AAAA,MACxD;AAAA,MACA,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAuBO,MAAM,gBAA+B,CAK1C,YACA,QACA,iBAAoB,UACjB;AACH,QAAM,SAAS;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,CAAC;AAAA,IACD;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["value"]}
+{"version":3,"sources":["../../src/getDictionary.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport type { DeclarationContent, DictionaryValue } from '@intlayer/core';\nimport { processDictionary } from './processDictionary/index';\nimport {\n  DeepTransformContent,\n  recursiveTransformContent,\n} from './recursiveTransformContent';\n\ntype DataFromDictionary<\n  T extends DeclarationContent,\n  K extends Locales,\n  R extends boolean = false,\n> = DeepTransformContent<T['content'], K, R>;\n\nexport type UseDictionary = <\n  T extends DeclarationContent,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  dictionary: T,\n  locale?: L,\n  isRenderEditor?: R,\n  isContentSelectable?: boolean\n) => DataFromDictionary<T, L, R>;\n\n/**\n * Hook that picks one dictionary by its id and return the content\n *\n * If the locale is not provided, it will use the locale from the client context\n */\nexport const getDictionary: UseDictionary = <\n  T extends DeclarationContent,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  dictionary: T,\n  locale?: L,\n  isRenderEditor: R = false as R\n) => {\n  const result = processDictionary(\n    dictionary.content as DictionaryValue,\n    dictionary.key,\n    dictionary.filePath,\n    [],\n    locale\n  );\n\n  return recursiveTransformContent(\n    result,\n    isRenderEditor\n  ) as DataFromDictionary<T, L, R>;\n};\n"],"mappings":"AAEA,SAAS,yBAAyB;AAClC;AAAA,EAEE;AAAA,OACK;AAwBA,MAAM,gBAA+B,CAK1C,YACA,QACA,iBAAoB,UACjB;AACH,QAAM,SAAS;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,CAAC;AAAA,IACD;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/getIntlayer.mjs

@@ -1,8 +1,8 @@
 import dictionaries from "@intlayer/dictionaries-entry";
+import { processDictionary } from "./processDictionary/index.mjs";
 import {
   recursiveTransformContent
-} from './getDictionary.mjs';
-import { processDictionary } from './processDictionary/index.mjs';
+} from "./recursiveTransformContent.mjs";
 const getIntlayer = (key, locale, isRenderEditor = false) => {
   const dictionary = dictionaries[key];
   if (!dictionary) {

package/dist/esm/getIntlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/getIntlayer.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport type { Dictionary } from '@intlayer/core';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport {\n  type DeepTransformContent,\n  recursiveTransformContent,\n} from './getDictionary';\nimport { processDictionary } from './processDictionary/index';\n\n/**\n * Provides a fallback to string type if the generic type T is never,\n * otherwise returns T. This is useful for handling cases where no keys are found.\n * Example: StringFallback<never> -> string; StringFallback<'key'> -> 'key'\n */\nexport type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key\n\n/**\n * Represents the keys of the IntlayerDictionaryTypesConnector,\n * ensuring they are valid dictionary keys or fallback to string if none exist.\n *\n * Example:\n * ```ts\n * DictionaryKeys -> 'key1' | 'key2'\n * // or if IntlayerDictionaryTypesConnector is not defined,\n * DictionaryKeys -> string\n * ```\n */\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\n/**\n * Represents the data type returned by the useIntlayer hook,\n * excluding the 'id' and 'filePath' keys from the dictionary content.\n */\nexport type DataFromDictionaryKey<\n  T extends DictionaryKeys,\n  K extends Locales,\n  R extends boolean = false,\n> = DeepTransformContent<IntlayerDictionaryTypesConnector[T]['content'], K, R>;\n\n/**\n * Type definition for the useIntlayer hook, which takes a dictionary ID and an optional locale,\n * and returns the deeply transformed dictionary content.\n *\n */\nexport type UseIntlayer = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R\n) => DataFromDictionaryKey<T, L, R>;\n\nexport type UseIntlayerEditable = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R\n) => DataFromDictionaryKey<T, L, R>;\n\nexport const getIntlayer: UseIntlayer = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor: R = false as R\n) => {\n  const dictionary: Dictionary = dictionaries[key as keyof typeof dictionaries];\n\n  if (!dictionary) {\n    throw new Error(`Dictionary ${key} not found`, dictionaries);\n  }\n\n  const result = processDictionary(\n    dictionary.content,\n    dictionary.key,\n    dictionary.filePath,\n    [],\n    locale\n  );\n\n  return recursiveTransformContent(\n    result,\n    isRenderEditor\n  ) as DataFromDictionaryKey<T, L, R>;\n};\n"],"mappings":"AAOA,OAAO,kBAAkB;AAEzB;AAAA,EAEE;AAAA,OACK;AACP,SAAS,yBAAyB;AA2D3B,MAAM,cAA2B,CAKtC,KACA,QACA,iBAAoB,UACjB;AACH,QAAM,aAAyB,aAAa,GAAgC;AAE5E,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,cAAc,GAAG,cAAc,YAAY;AAAA,EAC7D;AAEA,QAAM,SAAS;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,CAAC;AAAA,IACD;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/getIntlayer.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport type { Dictionary } from '@intlayer/core';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport { processDictionary } from './processDictionary/index';\nimport {\n  type DeepTransformContent,\n  recursiveTransformContent,\n} from './recursiveTransformContent';\n\n/**\n * Provides a fallback to string type if the generic type T is never,\n * otherwise returns T. This is useful for handling cases where no keys are found.\n * Example: StringFallback<never> -> string; StringFallback<'key'> -> 'key'\n */\nexport type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key\n\n/**\n * Represents the keys of the IntlayerDictionaryTypesConnector,\n * ensuring they are valid dictionary keys or fallback to string if none exist.\n *\n * Example:\n * ```ts\n * DictionaryKeys -> 'key1' | 'key2'\n * // or if IntlayerDictionaryTypesConnector is not defined,\n * DictionaryKeys -> string\n * ```\n */\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\n/**\n * Represents the data type returned by the useIntlayer hook,\n * excluding the 'id' and 'filePath' keys from the dictionary content.\n */\nexport type DataFromDictionaryKey<\n  T extends DictionaryKeys,\n  K extends Locales,\n  R extends boolean = false,\n> = DeepTransformContent<IntlayerDictionaryTypesConnector[T]['content'], K, R>;\n\n/**\n * Type definition for the useIntlayer hook, which takes a dictionary ID and an optional locale,\n * and returns the deeply transformed dictionary content.\n *\n */\nexport type UseIntlayer = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R,\n  isContentSelectable?: boolean\n) => DataFromDictionaryKey<T, L, R>;\n\nexport type UseIntlayerEditable = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R,\n  isContentSelectable?: boolean\n) => DataFromDictionaryKey<T, L, R>;\n\nexport const getIntlayer: UseIntlayer = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = false,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor: R = false as R\n) => {\n  const dictionary: Dictionary = dictionaries[key as keyof typeof dictionaries];\n\n  if (!dictionary) {\n    throw new Error(`Dictionary ${key} not found`, dictionaries);\n  }\n\n  const result = processDictionary(\n    dictionary.content,\n    dictionary.key,\n    dictionary.filePath,\n    [],\n    locale\n  );\n\n  return recursiveTransformContent(\n    result,\n    isRenderEditor\n  ) as DataFromDictionaryKey<T, L, R>;\n};\n"],"mappings":"AAOA,OAAO,kBAAkB;AAEzB,SAAS,yBAAyB;AAClC;AAAA,EAEE;AAAA,OACK;AA6DA,MAAM,cAA2B,CAKtC,KACA,QACA,iBAAoB,UACjB;AACH,QAAM,aAAyB,aAAa,GAAgC;AAE5E,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,cAAc,GAAG,cAAc,YAAY;AAAA,EAC7D;AAEA,QAAM,SAAS;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,CAAC;AAAA,IACD;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/getIntlayerAsync.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { fetchDistantDictionary } from './distantDictionary/fetchDistantDictionary.mjs';
-import { getDictionary } from './getDictionary.mjs';
+import { fetchDistantDictionary } from "@intlayer/api";
+import { getDictionary } from "./getDictionary.mjs";
 const getIntlayerAsync = async (key, locale, isRenderEditor = true) => {
   const jsonDistantDictionary = await fetchDistantDictionary(key);
   if (jsonDistantDictionary) {

package/dist/esm/getIntlayerAsync.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/getIntlayerAsync.ts"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport { DeclarationContent } from 'intlayer';\nimport { fetchDistantDictionary } from './distantDictionary/fetchDistantDictionary';\nimport { getDictionary } from './getDictionary';\nimport { DictionaryKeys, DataFromDictionaryKey } from './getIntlayer';\n\nexport type GetIntlayerAsync = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R\n) => Promise<DataFromDictionaryKey<T, L, R> | null>;\n\n/**\n * On the client side, Hook that picking one dictionary by its key and return the content\n *\n * This hook will prerender the locale dictionary and fetch simultaneously the distant dictionaries to hydrate it.\n *\n *\n * If the locale is not provided, it will use the locale from the client context\n */\nexport const getIntlayerAsync: GetIntlayerAsync = async <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor = true as R\n) => {\n  const jsonDistantDictionary = await fetchDistantDictionary(key);\n\n  if (jsonDistantDictionary) {\n    return getDictionary(\n      jsonDistantDictionary as unknown as DeclarationContent,\n      locale,\n      isRenderEditor\n    ) as DataFromDictionaryKey<T, L, R>;\n  }\n\n  return null;\n};\n"],"mappings":";AAIA,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAqBvB,MAAM,mBAAqC,OAKhD,KACA,QACA,iBAAiB,SACd;AACH,QAAM,wBAAwB,MAAM,uBAAuB,GAAG;AAE9D,MAAI,uBAAuB;AACzB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/getIntlayerAsync.ts"],"sourcesContent":["'use client';\n\nimport { fetchDistantDictionary } from '@intlayer/api';\nimport type { Locales } from '@intlayer/config/client';\nimport { DeclarationContent } from 'intlayer';\nimport { getDictionary } from './getDictionary';\nimport { DictionaryKeys, DataFromDictionaryKey } from './getIntlayer';\n\nexport type GetIntlayerAsync = <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor?: R\n) => Promise<DataFromDictionaryKey<T, L, R> | null>;\n\n/**\n * On the client side, Hook that picking one dictionary by its key and return the content\n *\n * This hook will prerender the locale dictionary and fetch simultaneously the distant dictionaries to hydrate it.\n *\n *\n * If the locale is not provided, it will use the locale from the client context\n */\nexport const getIntlayerAsync: GetIntlayerAsync = async <\n  T extends DictionaryKeys,\n  L extends Locales,\n  R extends boolean = true,\n>(\n  key: T,\n  locale?: L,\n  isRenderEditor = true as R\n) => {\n  const jsonDistantDictionary = await fetchDistantDictionary(key);\n\n  if (jsonDistantDictionary) {\n    return getDictionary(\n      jsonDistantDictionary as unknown as DeclarationContent,\n      locale,\n      isRenderEditor\n    ) as DataFromDictionaryKey<T, L, R>;\n  }\n\n  return null;\n};\n"],"mappings":";AAEA,SAAS,8BAA8B;AAGvC,SAAS,qBAAqB;AAqBvB,MAAM,mBAAqC,OAKhD,KACA,QACA,iBAAiB,SACd;AACH,QAAM,wBAAwB,MAAM,uBAAuB,GAAG;AAE9D,MAAI,uBAAuB;AACzB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import { getTranslation } from './getTranslation.mjs';
+import { getTranslation } from "./getTranslation.mjs";
 import {
   IntlayerProvider,
   IntlayerClientContext,
@@ -14,9 +14,9 @@ import {
   getBrowserLocale,
   useLocaleBase,
   t
-} from './client/index.mjs';
-import { getDictionary } from './getDictionary.mjs';
-import { getIntlayer } from './getIntlayer.mjs';
+} from "./client/index.mjs";
+import { getDictionary } from "./getDictionary.mjs";
+import { getIntlayer } from "./getIntlayer.mjs";
 export {
   IntlayerClientContext,
   IntlayerProvider,

package/dist/esm/processDictionary/index.mjs

@@ -4,8 +4,8 @@ import {
   findMatchingCondition
 } from "@intlayer/core";
 import { createElement } from "react";
-import { getEnumeration } from '../getEnumeration.mjs';
-import { getTranslation } from '../getTranslation.mjs';
+import { getEnumeration } from "../getEnumeration.mjs";
+import { getTranslation } from "../getTranslation.mjs";
 const {
   internationalization: { defaultLocale }
 } = getConfiguration();