react-intlayer 1.2.1 → 2.0.0

package/dist/esm/processDictionary/index.d.mts

@@ -1,11 +1,12 @@
 import { Locales } from '@intlayer/config/client';
-import { ContentValue, TransformedContentValue, Content, TransformedContent } from './contentDictionary.d.mjs';
-import '@intlayer/core';
+import { KeyPath } from '@intlayer/core';
+import { ContentValue, TransformedContentValue, Content, TransformedContent } from './contentDictionary.mjs';
+import 'react';
 
-declare const processNode: (field: ContentValue | undefined, locale: Locales) => TransformedContentValue;
+declare const processNode: (field: ContentValue | undefined, locale: Locales, dictionaryId: string, dictionaryPath: string, keyPath?: KeyPath[]) => TransformedContentValue;
 /**
  * Function that process a dictionary and return the result to be used in the application.
  */
-declare const processDictionary: (content: Content, locale?: Locales) => TransformedContent;
+declare const processDictionary: (content: Content, dictionaryId: string, dictionaryPath: string, keyPath?: KeyPath[], locale?: Locales) => TransformedContent;
 
 export { processDictionary, processNode };

package/dist/esm/processDictionary/index.mjs

@@ -1,46 +1,85 @@
 import "../chunk-ZNCO4QRF.mjs";
 import { getConfiguration } from "@intlayer/config/client";
 import {
-  NodeType
+  NodeType,
+  findMatchingCondition
 } from "@intlayer/core";
+import { renderContentEditor } from "intlayer-editor/client";
 import { createElement } from "react";
 import { getEnumeration } from '../getEnumeration.mjs';
 import { getTranslation } from '../getTranslation.mjs';
-const { defaultLocale } = getConfiguration().internationalization;
-const processTranslation = (languageContent, locale) => {
+const {
+  internationalization: { defaultLocale }
+} = getConfiguration();
+const processTranslation = (languageContent, locale, dictionaryId, dictionaryPath, keyPath = []) => {
   const translationResult = getTranslation(
     languageContent,
     locale
   );
-  return processDictionary(translationResult, locale);
+  const resultKeyPath = [
+    ...keyPath,
+    { type: NodeType.Translation, key: locale }
+  ];
+  return processDictionary(
+    translationResult,
+    dictionaryId,
+    dictionaryPath,
+    resultKeyPath,
+    locale
+  );
 };
-const processEnumeration = (enumerationContent, locale) => {
+const processEnumeration = (enumerationContent, locale, dictionaryId, dictionaryPath, keyPath = []) => {
   return (quantity) => {
     const enumerationResult = getEnumeration(
       enumerationContent,
       quantity
     );
-    return processDictionary(enumerationResult, locale);
+    const matchingCondition = findMatchingCondition(
+      enumerationContent,
+      quantity
+    );
+    const resultKeyPath = [
+      ...keyPath,
+      { type: NodeType.Enumeration, key: matchingCondition.toString() }
+    ];
+    return processDictionary(
+      enumerationResult,
+      dictionaryId,
+      dictionaryPath,
+      resultKeyPath,
+      locale
+    );
   };
 };
 const isReactNode = (node) => typeof node?.key !== "undefined" && typeof node?.props !== "undefined";
-const processNode = (field, locale) => {
-  if (typeof field !== "object" || field === null) {
-    return field;
-  }
-  if (field.nodeType === NodeType.Translation) {
-    return processTranslation(field, locale);
-  }
-  if (field.nodeType === NodeType.Enumeration) {
-    return processEnumeration(
-      field,
-      locale
-    );
-  }
-  if (typeof field.type === "undefined") {
-    return processDictionary(field, locale);
+const processNode = (field, locale, dictionaryId, dictionaryPath, keyPath = []) => {
+  if (typeof field === "object") {
+    if (field.nodeType === NodeType.Translation) {
+      return processTranslation(
+        field,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    }
+    if (field.nodeType === NodeType.Enumeration) {
+      return processEnumeration(
+        field,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    }
   }
-  return field;
+  return processDictionary(
+    field,
+    dictionaryId,
+    dictionaryPath,
+    keyPath,
+    locale
+  );
 };
 const createReactElement = (element) => {
   if (typeof element === "string") {
@@ -67,7 +106,8 @@ const createReactElement = (element) => {
   const { type, props } = fixedElement;
   return createElement(type ?? "div", props, ...props.children);
 };
-const processDictionary = (content, locale = defaultLocale) => {
+const traceKeys = ["filePath", "id", "nodeType"];
+const processDictionary = (content, dictionaryId, dictionaryPath, keyPath = [], locale = defaultLocale) => {
   if (isReactNode(content)) {
     return createReactElement(
       content
@@ -77,10 +117,36 @@ const processDictionary = (content, locale = defaultLocale) => {
     const result = {};
     for (const key of Object.keys(content)) {
       const field = content[key];
-      result[key] = processNode(field, locale);
+      if (traceKeys.includes(key)) {
+        result[key] = field;
+        continue;
+      }
+      const resultKeyPath = [
+        ...keyPath,
+        { type: "ObjectExpression", key }
+      ];
+      result[key] = processNode(
+        field,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        resultKeyPath
+      );
     }
     return result;
   }
+  if (typeof content === "string") {
+    try {
+      return renderContentEditor(
+        content,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    } catch (e) {
+      return content;
+    }
+  }
   return content;
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/processDictionary/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type Locales, getConfiguration } from '@intlayer/config/client';\nimport {\n  NodeType,\n  type QuantityContent,\n  type LanguageContent,\n} from '@intlayer/core';\nimport { type ReactElement, createElement, type ReactNode } from 'react';\nimport { getEnumeration } from '../getEnumeration';\nimport { getTranslation } from '../getTranslation';\nimport type {\n  Content,\n  ContentValue,\n  TransformedContent,\n  TransformedContentValue,\n} from './contentDictionary';\n\nconst { defaultLocale } = getConfiguration().internationalization;\n\nconst processTranslation = (\n  languageContent: LanguageContent<ContentValue>,\n  locale: Locales\n): TransformedContent => {\n  const translationResult: ContentValue = getTranslation<ContentValue>(\n    languageContent,\n    locale\n  );\n\n  return processDictionary(translationResult as Content, locale);\n};\n\nconst processEnumeration = (\n  enumerationContent: QuantityContent<ContentValue>,\n  locale: Locales\n): TransformedContentValue => {\n  return (quantity: number): TransformedContentValue => {\n    const enumerationResult: ContentValue = getEnumeration<ContentValue>(\n      enumerationContent,\n      quantity\n    );\n\n    //\n    return processDictionary(enumerationResult as Content, locale);\n  };\n};\n\nconst isReactNode = (node: Record<string, unknown>): boolean =>\n  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';\n\nexport const processNode = (\n  field: ContentValue | undefined,\n  locale: Locales\n): TransformedContentValue => {\n  if (typeof field !== 'object' || field === null) {\n    return field;\n  }\n\n  if (field.nodeType === NodeType.Translation) {\n    return processTranslation(field as LanguageContent<ContentValue>, locale);\n  }\n\n  if (field.nodeType === NodeType.Enumeration) {\n    return processEnumeration(\n      field satisfies QuantityContent<ContentValue>,\n      locale\n    );\n  }\n\n  if (typeof (field as any).type === 'undefined') {\n    return processDictionary(field as Content, locale);\n  }\n\n  return field as TransformedContentValue;\n};\n\n// This function recursively creates React elements from a given JSON-like structure\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  // Destructure the component properties\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) => {\n        childrenResult.push(createReactElement(children[key]));\n      });\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\n/**\n * Function that process a dictionary and return the result to be used in the application.\n */\nexport const processDictionary = (\n  content: Content,\n  locale: Locales = defaultLocale\n): TransformedContent => {\n  // If it's a React element, render it\n  if (isReactNode(content)) {\n    return createReactElement(\n      content as unknown as ReactElement\n    ) as unknown as TransformedContent;\n  }\n\n  if (content && typeof content === 'object') {\n    const result: TransformedContent = {};\n\n    // List each key in the content and process it\n    for (const key of Object.keys(content)) {\n      const field = content[key];\n\n      result[key] = processNode(field, locale);\n    }\n\n    return result;\n  }\n\n  // If it's a string, number, or function, return it\n  return content;\n};\n"],"mappings":";AACA,SAAuB,wBAAwB;AAC/C;AAAA,EACE;AAAA,OAGK;AACP,SAA4B,qBAAqC;AACjE,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAQ/B,MAAM,EAAE,cAAc,IAAI,iBAAiB,EAAE;AAE7C,MAAM,qBAAqB,CACzB,iBACA,WACuB;AACvB,QAAM,oBAAkC;AAAA,IACtC;AAAA,IACA;AAAA,EACF;AAEA,SAAO,kBAAkB,mBAA8B,MAAM;AAC/D;AAEA,MAAM,qBAAqB,CACzB,oBACA,WAC4B;AAC5B,SAAO,CAAC,aAA8C;AACpD,UAAM,oBAAkC;AAAA,MACtC;AAAA,MACA;AAAA,IACF;AAGA,WAAO,kBAAkB,mBAA8B,MAAM;AAAA,EAC/D;AACF;AAEA,MAAM,cAAc,CAAC,SACnB,OAAO,MAAM,QAAQ,eAAe,OAAO,MAAM,UAAU;AAEtD,MAAM,cAAc,CACzB,OACA,WAC4B;AAC5B,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,MAAM,aAAa,SAAS,aAAa;AAC3C,WAAO,mBAAmB,OAAwC,MAAM;AAAA,EAC1E;AAEA,MAAI,MAAM,aAAa,SAAS,aAAa;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,MAAI,OAAQ,MAAc,SAAS,aAAa;AAC9C,WAAO,kBAAkB,OAAkB,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;AAGA,MAAM,qBAAqB,CAAC,YAA0B;AACpD,MAAI,OAAO,YAAY,UAAU;AAE/B,WAAO;AAAA,EACT;AAIA,QAAM,yBAAyB,CAACA,aAAwC;AACtE,QAAIA,UAAS,SAAS,OAAOA,SAAQ,MAAM,aAAa,UAAU;AAChE,YAAM,iBAA8B,CAAC;AACrC,YAAM,EAAE,SAAS,IAAIA,SAAQ;AAG7B,aAAO,KAAK,QAAQ,EAAE,QAAQ,CAAC,QAAQ;AACrC,uBAAe,KAAK,mBAAmB,SAAS,GAAG,CAAC,CAAC;AAAA,MACvD,CAAC;AAED,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,OAAO,EAAE,GAAGA,SAAQ,OAAO,UAAU,eAAe;AAAA,MACtD;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,OAAO,EAAE,GAAGA,SAAQ,OAAO,UAAUA,SAAQ,MAAM,SAAS;AAAA,IAC9D;AAAA,EACF;AAEA,QAAM,eAAe,uBAAuB,OAAO;AAEnD,QAAM,EAAE,MAAM,MAAM,IAAI;AAGxB,SAAO,cAAc,QAAQ,OAAO,OAAO,GAAG,MAAM,QAAQ;AAC9D;AAKO,MAAM,oBAAoB,CAC/B,SACA,SAAkB,kBACK;AAEvB,MAAI,YAAY,OAAO,GAAG;AACxB,WAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAEA,MAAI,WAAW,OAAO,YAAY,UAAU;AAC1C,UAAM,SAA6B,CAAC;AAGpC,eAAW,OAAO,OAAO,KAAK,OAAO,GAAG;AACtC,YAAM,QAAQ,QAAQ,GAAG;AAEzB,aAAO,GAAG,IAAI,YAAY,OAAO,MAAM;AAAA,IACzC;AAEA,WAAO;AAAA,EACT;AAGA,SAAO;AACT;","names":["element"]}
+{"version":3,"sources":["../../../src/processDictionary/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type Locales, getConfiguration } from '@intlayer/config/client';\nimport {\n  NodeType,\n  type QuantityContent,\n  type LanguageContent,\n  findMatchingCondition,\n  type KeyPath,\n} from '@intlayer/core';\nimport { renderContentEditor } from 'intlayer-editor/client';\nimport { type ReactElement, createElement, type ReactNode } from 'react';\nimport { getEnumeration } from '../getEnumeration';\nimport { getTranslation } from '../getTranslation';\nimport type {\n  Content,\n  ContentValue,\n  TransformedContent,\n  TransformedContentValue,\n} from './contentDictionary';\n\nconst {\n  internationalization: { defaultLocale },\n} = getConfiguration();\n\nconst processTranslation = (\n  languageContent: LanguageContent<ContentValue>,\n  locale: Locales,\n  dictionaryId: string,\n  dictionaryPath: string,\n  keyPath: KeyPath[] = []\n): TransformedContent => {\n  const translationResult: ContentValue = getTranslation<ContentValue>(\n    languageContent,\n    locale\n  );\n\n  const resultKeyPath: KeyPath[] = [\n    ...keyPath,\n    { type: NodeType.Translation, key: locale },\n  ];\n\n  return processDictionary(\n    translationResult as Content,\n    dictionaryId,\n    dictionaryPath,\n    resultKeyPath,\n    locale\n  );\n};\n\nconst processEnumeration = (\n  enumerationContent: QuantityContent<ContentValue>,\n  locale: Locales,\n  dictionaryId: string,\n  dictionaryPath: string,\n  keyPath: KeyPath[] = []\n): TransformedContentValue => {\n  return (quantity: number): TransformedContentValue => {\n    const enumerationResult: ContentValue = getEnumeration<ContentValue>(\n      enumerationContent,\n      quantity\n    );\n\n    const matchingCondition = findMatchingCondition(\n      enumerationContent,\n      quantity\n    );\n\n    const resultKeyPath: KeyPath[] = [\n      ...keyPath,\n      { type: NodeType.Enumeration, key: matchingCondition.toString() },\n    ];\n\n    //\n    return processDictionary(\n      enumerationResult as Content,\n      dictionaryId,\n      dictionaryPath,\n      resultKeyPath,\n      locale\n    );\n  };\n};\n\nconst isReactNode = (node: Record<string, unknown>): boolean =>\n  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';\n\nexport const processNode = (\n  field: ContentValue | undefined,\n  locale: Locales,\n  dictionaryId: string,\n  dictionaryPath: string,\n  keyPath: KeyPath[] = []\n): TransformedContentValue => {\n  if (typeof field === 'object') {\n    if (field.nodeType === NodeType.Translation) {\n      return processTranslation(\n        field as LanguageContent<ContentValue>,\n        locale,\n        dictionaryId,\n        dictionaryPath,\n        keyPath\n      );\n    }\n\n    if (field.nodeType === NodeType.Enumeration) {\n      return processEnumeration(\n        field satisfies QuantityContent<ContentValue>,\n        locale,\n        dictionaryId,\n        dictionaryPath,\n        keyPath\n      );\n    }\n  }\n\n  return processDictionary(\n    field as Content,\n    dictionaryId,\n    dictionaryPath,\n    keyPath,\n    locale\n  );\n};\n\n// This function recursively creates React elements from a given JSON-like structure\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  // Destructure the component properties\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) => {\n        childrenResult.push(createReactElement(children[key]));\n      });\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nconst traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\n/**\n * Function that process a dictionary and return the result to be used in the application.\n */\nexport const processDictionary = (\n  content: Content,\n  dictionaryId: string,\n  dictionaryPath: string,\n  keyPath: KeyPath[] = [],\n  locale: Locales = defaultLocale\n): TransformedContent => {\n  // If it's a React element, render it\n  if (isReactNode(content)) {\n    return createReactElement(\n      content as unknown as ReactElement\n    ) as unknown as TransformedContent;\n  }\n\n  if (content && typeof content === 'object') {\n    const result: TransformedContent = {};\n\n    // List each key in the content and process it\n    for (const key of Object.keys(content)) {\n      const field = content[key];\n\n      if (traceKeys.includes(key)) {\n        result[key] = field as TransformedContentValue;\n        continue;\n      }\n\n      const resultKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: 'ObjectExpression', key },\n      ];\n\n      result[key] = processNode(\n        field,\n        locale,\n        dictionaryId,\n        dictionaryPath,\n        resultKeyPath\n      );\n    }\n\n    return result;\n  }\n\n  if (typeof content === 'string') {\n    try {\n      // renderContentEditor come from intlayer-editor, which is an optional dependency.\n      // intlayer-editor should be installed in the project to use the content editor.\n      return renderContentEditor(\n        content,\n        dictionaryId,\n        dictionaryPath,\n        keyPath\n      );\n    } catch (e) {\n      // If renderContentEditor not available, it will return the content as is.\n      return content;\n    }\n  }\n\n  // If it's a string, number, or function, return it\n  return content;\n};\n"],"mappings":"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","names":["element"]}

package/dist/esm/useIntlayerBase.mjs

@@ -5,6 +5,9 @@ const useIntlayerBase = (id, locale) => {
   const dictionary = dictionaries[id];
   return processDictionary(
     dictionary,
+    id,
+    dictionary.filePath,
+    [],
     locale
   );
 };

package/dist/esm/useIntlayerBase.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useIntlayerBase.ts"],"sourcesContent":["import type { Locales } 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 type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport type { Content } from './processDictionary/contentDictionary';\nimport { processDictionary } from './processDictionary/index';\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\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\nexport type UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => IntlayerDictionaryTypesConnector[T];\n\n/**\n * Hook that picking one dictionary by its id and return the content.\n */\nexport const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const dictionary: Content = dictionaries[id];\n\n  return processDictionary(\n    dictionary,\n    locale\n  ) as IntlayerDictionaryTypesConnector[T];\n};\n"],"mappings":";AAMA,OAAO,kBAAkB;AAGzB,SAAS,yBAAyB;AAe3B,MAAM,kBAA+B,CAC1C,IACA,WACG;AACH,QAAM,aAAsB,aAAa,EAAE;AAE3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/useIntlayerBase.ts"],"sourcesContent":["import type { Locales } 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 type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport type { Content } from './processDictionary/contentDictionary';\nimport { processDictionary } from './processDictionary/index';\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\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\nexport type UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => IntlayerDictionaryTypesConnector[T];\n\n/**\n * Hook that picking one dictionary by its id and return the content.\n */\nexport const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const dictionary: Content = dictionaries[id];\n\n  return processDictionary(\n    dictionary,\n    id,\n    dictionary.filePath as string,\n    [],\n    locale\n  ) as IntlayerDictionaryTypesConnector[T];\n};\n"],"mappings":";AAMA,OAAO,kBAAkB;AAGzB,SAAS,yBAAyB;AAe3B,MAAM,kBAA+B,CAC1C,IACA,WACG;AACH,QAAM,aAAsB,aAAa,EAAE;AAE3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,CAAC;AAAA,IACD;AAAA,EACF;AACF;","names":[]}

package/dist/esm/vite/intlayerPlugin.mjs

@@ -27,7 +27,7 @@ const intLayerPlugin = (_pluginOptions = {}) => ({
       persistent: import.meta.env === "development"
     });
   },
-  configureServer: (server) => {
+  configureServer: () => {
   }
 });
 export {

package/dist/esm/vite/intlayerPlugin.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/vite/intlayerPlugin.ts"],"sourcesContent":["import { join, relative, resolve } from 'path';\nimport { watch } from '@intlayer/chokidar';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { loadEnv, type Plugin } from 'vite';\n\n// Plugin options type definition\ntype PluginOptions = {\n  // Custom options for your plugin, if any\n};\n\n/**\n *\n * A Vite plugin that integrates IntLayer configuration into the build process\n *\n * ```ts\n * // Example usage of the plugin in a Vite configuration\n * export default defineConfig({\n *   plugins: [ intLayerPlugin() ],\n * });\n * ```\n *  */\nexport const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({\n  name: 'vite-intlayer-plugin',\n\n  config: (config, { mode }) => {\n    const intlayerConfig = getConfiguration();\n\n    // Set all configuration values as environment variables\n    const env = formatEnvVariable('vite');\n\n    process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };\n\n    const { mainDir, baseDir } = intlayerConfig.content;\n    const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n    const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n    // Update Vite's resolve alias\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve?.alias,\n        '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n      },\n    };\n\n    return config;\n  },\n\n  buildStart: () => {\n    // Code to run when Vite build starts\n    watch({\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      persistent: (import.meta as any).env === 'development',\n    });\n  },\n  configureServer: (server) => {\n    // Custom server configuration, if needed\n  },\n});\n"],"mappings":";AAAA,SAAS,MAAM,UAAU,eAAe;AACxC,SAAS,aAAa;AACtB,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,eAA4B;AAkB9B,MAAM,iBAAiB,CAAC,iBAAgC,CAAC,OAAe;AAAA,EAC7E,MAAM;AAAA,EAEN,QAAQ,CAAC,QAAQ,EAAE,KAAK,MAAM;AAC5B,UAAM,iBAAiB,iBAAiB;AAGxC,UAAM,MAAM,kBAAkB,MAAM;AAEpC,YAAQ,MAAM,EAAE,GAAG,QAAQ,KAAK,GAAG,QAAQ,MAAM,QAAQ,IAAI,CAAC,GAAG,GAAG,IAAI;AAExE,UAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,UAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,UAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAGnE,WAAO,UAAU;AAAA,MACf,GAAG,OAAO;AAAA,MACV,OAAO;AAAA,QACL,GAAG,OAAO,SAAS;AAAA,QACnB,gCAAgC,QAAQ,wBAAwB;AAAA,MAClE;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,MAAM;AAEhB,UAAM;AAAA;AAAA,MAEJ,YAAa,YAAoB,QAAQ;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EACA,iBAAiB,CAAC,WAAW;AAAA,EAE7B;AACF;","names":[]}
+{"version":3,"sources":["../../../src/vite/intlayerPlugin.ts"],"sourcesContent":["import { join, relative, resolve } from 'path';\nimport { watch } from '@intlayer/chokidar';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { loadEnv, type Plugin } from 'vite';\n\n// Plugin options type definition\ntype PluginOptions = {\n  // Custom options for your plugin, if any\n};\n\n/**\n *\n * A Vite plugin that integrates IntLayer configuration into the build process\n *\n * ```ts\n * // Example usage of the plugin in a Vite configuration\n * export default defineConfig({\n *   plugins: [ intLayerPlugin() ],\n * });\n * ```\n *  */\nexport const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({\n  name: 'vite-intlayer-plugin',\n\n  config: (config, { mode }) => {\n    const intlayerConfig = getConfiguration();\n\n    // Set all configuration values as environment variables\n    const env = formatEnvVariable('vite');\n\n    process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };\n\n    const { mainDir, baseDir } = intlayerConfig.content;\n    const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n    const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n    // Update Vite's resolve alias\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve?.alias,\n        '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n      },\n    };\n\n    return config;\n  },\n\n  buildStart: () => {\n    // Code to run when Vite build starts\n    watch({\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      persistent: (import.meta as any).env === 'development',\n    });\n  },\n  configureServer: () => {\n    // Custom server configuration, if needed\n  },\n});\n"],"mappings":";AAAA,SAAS,MAAM,UAAU,eAAe;AACxC,SAAS,aAAa;AACtB,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,eAA4B;AAkB9B,MAAM,iBAAiB,CAAC,iBAAgC,CAAC,OAAe;AAAA,EAC7E,MAAM;AAAA,EAEN,QAAQ,CAAC,QAAQ,EAAE,KAAK,MAAM;AAC5B,UAAM,iBAAiB,iBAAiB;AAGxC,UAAM,MAAM,kBAAkB,MAAM;AAEpC,YAAQ,MAAM,EAAE,GAAG,QAAQ,KAAK,GAAG,QAAQ,MAAM,QAAQ,IAAI,CAAC,GAAG,GAAG,IAAI;AAExE,UAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,UAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,UAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAGnE,WAAO,UAAU;AAAA,MACf,GAAG,OAAO;AAAA,MACV,OAAO;AAAA,QACL,GAAG,OAAO,SAAS;AAAA,QACnB,gCAAgC,QAAQ,wBAAwB;AAAA,MAClE;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,MAAM;AAEhB,UAAM;AAAA;AAAA,MAEJ,YAAa,YAAoB,QAAQ;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EACA,iBAAiB,MAAM;AAAA,EAEvB;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intlayer",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "private": false,
   "description": "Internationalization layer for React applications - Layer of abstraction between the business logic and the data access layer. Manage internationalization in a simple way, through TypeScript, JavaScript or JSON declaration file.",
   "keywords": [
@@ -76,12 +76,12 @@
     "react-cookie": "^7.1.4",
     "vite": "^5.2.0",
     "webpack": "^5.91.0",
-    "@intlayer/chokidar": "^1.2.1",
-    "@intlayer/config": "^1.2.1",
-    "@intlayer/core": "^1.2.1",
-    "@intlayer/dictionaries-entry": "^1.2.1",
-    "@intlayer/webpack": "^1.2.1",
-    "intlayer": "^1.2.1"
+    "@intlayer/chokidar": "^2.0.0",
+    "@intlayer/core": "^2.0.0",
+    "@intlayer/config": "^2.0.0",
+    "@intlayer/webpack": "^2.0.0",
+    "@intlayer/dictionaries-entry": "^2.0.0",
+    "intlayer": "^2.0.0"
   },
   "devDependencies": {
     "@craco/types": "^7.1.0",
@@ -99,7 +99,13 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "intlayer-editor": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "intlayer-editor": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=14.18"

package/src/client/ContentEditionLayout.tsx

@@ -0,0 +1,15 @@
+import {
+  ContentEditionLayout as ContentEditionLayoutBase,
+  type ContentEditionLayoutProps,
+} from 'intlayer-editor/client';
+import type { FC } from 'react';
+
+const BlankLayout: FC<ContentEditionLayoutProps> = ({ children }) => (
+  <>{children}</>
+);
+
+// intlayer-editor is an optional dependency. If it's not installed, return the blank layout
+export const ContentEditionLayout: FC<ContentEditionLayoutProps> =
+  typeof ContentEditionLayoutBase === 'undefined'
+    ? BlankLayout
+    : (ContentEditionLayoutBase as typeof ContentEditionLayout);

package/src/client/IntlayerClientProvider.tsx

@@ -10,6 +10,7 @@ import {
   useState,
   useCallback,
 } from 'react';
+import { ContentEditionLayout } from './ContentEditionLayout';
 import { localeCookie, setLocaleCookie } from './useLocaleCookie';
 
 type IntlayerValue = {
@@ -70,7 +71,13 @@ export const IntlayerClientProvider: FC<IntlayerClientProviderProps> = ({
 
   return (
     <IntlayerClientContext.Provider value={value}>
-      {children}
+      <ContentEditionLayout
+        locale={currentLocale}
+        setLocale={setLocale}
+        localeList={availableLocales}
+      >
+        {children}
+      </ContentEditionLayout>
     </IntlayerClientContext.Provider>
   );
 };

package/src/getEnumeration.ts

@@ -1,5 +1,4 @@
 import { type QuantityContent, getEnumerationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
 
 /**
  * Allow to pick a content based on a quantity.
@@ -38,9 +37,5 @@ export const getEnumeration = <Content>(
     quantity
   );
 
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
   return result;
 };

package/src/getTranslation.ts

@@ -1,6 +1,5 @@
 import { type Locales, getConfiguration } from '@intlayer/config/client';
 import { type LanguageContent, getTranslationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
 
 /**
  *
@@ -34,9 +33,5 @@ export const getTranslation = <Content = string>(
     locale ?? defaultLocale
   );
 
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
   return result;
 };

package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts}

@@ -1,4 +1,5 @@
-import { type TranslationContent } from '@intlayer/core';
+import type { TranslationContent } from '@intlayer/core';
+import type { ReactNode } from 'react';
 
 export type ContentValue =
   | string
@@ -11,16 +12,16 @@ export type Content = Record<string, ContentValue | undefined>;
 
 export type TransformedContentValue =
   | string
+  | ReactNode
   | {
       [key: string]: TransformedContentValue;
     }
   | undefined
   | ((quantity: number) => TransformedContentValue);
 
-export type TransformedContent = Record<
-  string,
-  TransformedContentValue | undefined
->;
+export type TransformedContent =
+  | Record<string, TransformedContentValue | undefined>
+  | ReactNode;
 
 export type ContentDictionary = Content & {
   id: string;

package/src/processDictionary/index.ts

@@ -4,7 +4,10 @@ import {
   NodeType,
   type QuantityContent,
   type LanguageContent,
+  findMatchingCondition,
+  type KeyPath,
 } from '@intlayer/core';
+import { renderContentEditor } from 'intlayer-editor/client';
 import { type ReactElement, createElement, type ReactNode } from 'react';
 import { getEnumeration } from '../getEnumeration';
 import { getTranslation } from '../getTranslation';
@@ -15,23 +18,42 @@ import type {
   TransformedContentValue,
 } from './contentDictionary';
 
-const { defaultLocale } = getConfiguration().internationalization;
+const {
+  internationalization: { defaultLocale },
+} = getConfiguration();
 
 const processTranslation = (
   languageContent: LanguageContent<ContentValue>,
-  locale: Locales
+  locale: Locales,
+  dictionaryId: string,
+  dictionaryPath: string,
+  keyPath: KeyPath[] = []
 ): TransformedContent => {
   const translationResult: ContentValue = getTranslation<ContentValue>(
     languageContent,
     locale
   );
 
-  return processDictionary(translationResult as Content, locale);
+  const resultKeyPath: KeyPath[] = [
+    ...keyPath,
+    { type: NodeType.Translation, key: locale },
+  ];
+
+  return processDictionary(
+    translationResult as Content,
+    dictionaryId,
+    dictionaryPath,
+    resultKeyPath,
+    locale
+  );
 };
 
 const processEnumeration = (
   enumerationContent: QuantityContent<ContentValue>,
-  locale: Locales
+  locale: Locales,
+  dictionaryId: string,
+  dictionaryPath: string,
+  keyPath: KeyPath[] = []
 ): TransformedContentValue => {
   return (quantity: number): TransformedContentValue => {
     const enumerationResult: ContentValue = getEnumeration<ContentValue>(
@@ -39,8 +61,24 @@ const processEnumeration = (
       quantity
     );
 
+    const matchingCondition = findMatchingCondition(
+      enumerationContent,
+      quantity
+    );
+
+    const resultKeyPath: KeyPath[] = [
+      ...keyPath,
+      { type: NodeType.Enumeration, key: matchingCondition.toString() },
+    ];
+
     //
-    return processDictionary(enumerationResult as Content, locale);
+    return processDictionary(
+      enumerationResult as Content,
+      dictionaryId,
+      dictionaryPath,
+      resultKeyPath,
+      locale
+    );
   };
 };
 
@@ -49,28 +87,40 @@ const isReactNode = (node: Record<string, unknown>): boolean =>
 
 export const processNode = (
   field: ContentValue | undefined,
-  locale: Locales
+  locale: Locales,
+  dictionaryId: string,
+  dictionaryPath: string,
+  keyPath: KeyPath[] = []
 ): TransformedContentValue => {
-  if (typeof field !== 'object' || field === null) {
-    return field;
-  }
-
-  if (field.nodeType === NodeType.Translation) {
-    return processTranslation(field as LanguageContent<ContentValue>, locale);
-  }
-
-  if (field.nodeType === NodeType.Enumeration) {
-    return processEnumeration(
-      field satisfies QuantityContent<ContentValue>,
-      locale
-    );
-  }
+  if (typeof field === 'object') {
+    if (field.nodeType === NodeType.Translation) {
+      return processTranslation(
+        field as LanguageContent<ContentValue>,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    }
 
-  if (typeof (field as any).type === 'undefined') {
-    return processDictionary(field as Content, locale);
+    if (field.nodeType === NodeType.Enumeration) {
+      return processEnumeration(
+        field satisfies QuantityContent<ContentValue>,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    }
   }
 
-  return field as TransformedContentValue;
+  return processDictionary(
+    field as Content,
+    dictionaryId,
+    dictionaryPath,
+    keyPath,
+    locale
+  );
 };
 
 // This function recursively creates React elements from a given JSON-like structure
@@ -112,11 +162,16 @@ const createReactElement = (element: ReactElement) => {
   return createElement(type ?? 'div', props, ...props.children);
 };
 
+const traceKeys: string[] = ['filePath', 'id', 'nodeType'];
+
 /**
  * Function that process a dictionary and return the result to be used in the application.
  */
 export const processDictionary = (
   content: Content,
+  dictionaryId: string,
+  dictionaryPath: string,
+  keyPath: KeyPath[] = [],
   locale: Locales = defaultLocale
 ): TransformedContent => {
   // If it's a React element, render it
@@ -133,12 +188,44 @@ export const processDictionary = (
     for (const key of Object.keys(content)) {
       const field = content[key];
 
-      result[key] = processNode(field, locale);
+      if (traceKeys.includes(key)) {
+        result[key] = field as TransformedContentValue;
+        continue;
+      }
+
+      const resultKeyPath: KeyPath[] = [
+        ...keyPath,
+        { type: 'ObjectExpression', key },
+      ];
+
+      result[key] = processNode(
+        field,
+        locale,
+        dictionaryId,
+        dictionaryPath,
+        resultKeyPath
+      );
     }
 
     return result;
   }
 
+  if (typeof content === 'string') {
+    try {
+      // renderContentEditor come from intlayer-editor, which is an optional dependency.
+      // intlayer-editor should be installed in the project to use the content editor.
+      return renderContentEditor(
+        content,
+        dictionaryId,
+        dictionaryPath,
+        keyPath
+      );
+    } catch (e) {
+      // If renderContentEditor not available, it will return the content as is.
+      return content;
+    }
+  }
+
   // If it's a string, number, or function, return it
   return content;
 };

package/src/useIntlayerBase.ts

@@ -30,6 +30,9 @@ export const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(
 
   return processDictionary(
     dictionary,
+    id,
+    dictionary.filePath as string,
+    [],
     locale
   ) as IntlayerDictionaryTypesConnector[T];
 };

package/src/vite/intlayerPlugin.ts

@@ -53,7 +53,7 @@ export const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({
       persistent: (import.meta as any).env === 'development',
     });
   },
-  configureServer: (server) => {
+  configureServer: () => {
     // Custom server configuration, if needed
   },
 });