react-intlayer 4.0.0 → 4.0.3

package/README.md

@@ -17,259 +17,163 @@
   </a>
 </div>
 
-# Intlayer: Next-Level Content Management in JavaScript
+# react-intlayer: Internationalize (i18n) an React application
 
-**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make your development stronger and more efficient.
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
 
-## Example of usage
-
-```bash
-.
-├── Component1
-│   ├── index.content.ts
-│   └── index.tsx
-└── Component2
-    ├── index.content.ts
-    └── index.tsx
-```
-
-```tsx
-// ./Component1/index.content.ts
-
-import { type DeclarationContent, t } from "intlayer";
-
-const component1Content = {
-  key: "component1",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      fr: "Bonjour le monde",
-      es: "Hola Mundo",
-    }),
-  },
-} satisfies DeclarationContent;
-```
-
-```tsx
-// ./Component1/index.tsx
-
-import { useIntlayer } from "react-intlayer";
+**The `react-intlayer` package** allows you to internationalize your React application. It provides context providers and hooks for React internationalization.
 
-export const Component1 = () => {
-  const { myTranslatedContent } = useIntlayer("component1");
+## Why Internationalize Your React Application?
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
+Internationalizing your React application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
 
-## Why Choose Intlayer?
+## Why to integrate Intlayer?
 
 - **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
 - **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
 - **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
-- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
-- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
-
-# Getting Started with Intlayer and React Create App
-
-Setting up Intlayer in a Create React App application is straightforward:
 
-## Step 1: Install Dependencies
+## Installation
 
-Install the necessary packages using npm:
+Install the necessary package using your preferred package manager:
 
-```bash
-npm install intlayer react-intlayer
+```bash packageManager="npm"
+npm install react-intlayer
 ```
 
-```bash
-yarn add intlayer react-intlayer
+```bash packageManager="yarn"
+yarn add react-intlayer
 ```
 
-```bash
-pnpm add intlayer react-intlayer
+```bash packageManager="pnpm"
+pnpm add react-intlayer
 ```
 
-## Step 2: Configuration of your project
-
-Create a config file to configure the languages of your application:
-
-```typescript
-// intlayer.config.ts
-
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
+## Example of usage
 
-To see all available parameters, refer to the [configuration documentation here](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
+With Intlayer, you can declare your content in a structured way anywhere in your codebase.
 
-## Step 3: Integrate Intlayer in Your CRA Configuration
+By default, Intlayer scans for files with the extension `.content.{ts,tsx,js,jsx,mjs,cjs}`.
 
-Change your scripts to use react-intlayer
+> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
 
-```json
-  "scripts": {
-    "build": "react-intlayer build",
-    "start": "react-intlayer start",
-    "transpile": "intlayer build"
-  },
+```bash codeFormat="typescript"
+.
+├── intlayer.config.ts
+└── src
+    └── components
+        ├── Component1
+        │   ├── index.content.ts
+        │   └── index.tsx
+        └── Component2
+            ├── index.content.ts
+            └── index.tsx
 ```
 
-Note: react-intlayer scripts are based on craco. You can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+### Declare your content
 
-## Step 4: Declare Your Content
+`react-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
 
-Create and manage your content dictionaries:
+Here’s an example of content declaration:
 
-```tsx
-// src/app.content.tsx
-import { t, type DeclarationContent } from "intlayer";
-import { type ReactNode } from "react";
+```tsx filePath="src/Component1/index.content.ts" codeFormat="typescript"
+import { type DeclarationContent, t } from "intlayer";
 
-const appContent = {
-  key: "app",
+const component1Content = {
+  key: "component-1",
   content: {
-    getStarted: t<ReactNode>({
-      en: (
-        <>
-          Edit <code>src/App.tsx</code> and save to reload
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/App.tsx</code> et enregistrez pour recharger
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/App.tsx</code> y guarda para recargar
-        </>
-      ),
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Less than minus one car",
+      "-1": "Minus one car",
+      "0": "No cars",
+      "1": "One car",
+      ">5": "Some cars",
+      ">19": "Many cars",
     }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Learn React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-      }),
-    },
   },
 } satisfies DeclarationContent;
 
-export default appContent;
+export default component1Content;
 ```
 
-[See how to declare your Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/en/content_declaration/get_started.md)
+### Utilize Content in Your Code
 
-## Step 5: Utilize Intlayer in Your Code
+Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:
 
-Access your content dictionaries throughout your application:
+```tsx {4,7} fileName="src/components/Component1Example.tsx" codeFormat="typescript"
+"use client";
 
-```tsx
-import logo from "./logo.svg";
-import "./App.css";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
-function AppContent() {
-  const content = useIntlayer("app");
+export const Component1Example: FC = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
 
   return (
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-
-      {content.getStarted}
-      <a
-        className="App-link"
-        href={content.reactLink.href.value}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {content.reactLink.content}
-      </a>
-    </header>
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
   );
-}
+};
+```
 
-function App() {
-  return (
-    <IntlayerProvider>
-      <div className="App">
-        {/* To use the useIntlayer hook properly, you should access your data in a children component */}
-        <AppContent />
-      </div>
-      <div className="absolute bottom-5 right-5 z-50">
-        <LocaleSwitcher />
-      </div>
-    </IntlayerProvider>
-  );
-}
+```jsx {3,6} fileName="src/components/Component1Example.mjx" codeFormat="esm"
+"use client";
 
-export default App;
-```
+import { useIntlayer } from "react-intlayer";
 
-> Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
->
-> ```tsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> ```
+const Component1Example = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
 
-## (Optional) Step 6: Change the language of your content
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
 
-To change the language of your content, you can use the `setLocale` function provided by the `useLocale` hook. This function allows you to set the locale of the application and update the content accordingly.
+```jsx {3,6} fileName="src/components/Component1Example.csx" codeFormat="commonjs"
+"use client";
 
-```tsx
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+const { useIntlayer } = require("react-intlayer");
 
-const MyComponent = () => {
-  const { setLocale } = useLocale();
+const Component1Example = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
 
   return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Change Language to English
-    </button>
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
   );
 };
 ```
 
-## Configure TypeScript
+## Mastering the internationalization of your React application
 
-Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
+Intlayer provides a lot of features to help you internationalize your React application.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application, or the [React Internationalization (i18n) with Intlayer and React (CRA)](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md) guide for React Create App.**
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+## Functions provided by `react-intlayer` package
 
-Ensure your TypeScript configuration includes the autogenerated types.
+The `react-intlayer` package also provides some functions to help you to internationalize your application.
 
-```json5
-// tsconfig.json
+- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/t.md)
+- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayer.md)
+- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useDictionary.md)
+- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md)
+- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayerAsync.md)
 
-{
-  // your custom config
-  "include": [
-    "src",
-    "types", // <- Include the auto generated types
-  ],
-}
-```
+## Read about Intlayer
 
-# Getting Started with Intlayer and Vite + React
+- [Intlayer Website](https://intlayer.org)
+- [Intlayer Documentation](https://intlayer.org/docs)
+- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
 
-For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite_react.md)
+- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)

package/dist/cjs/UI/ContentSelector.cjs

@@ -0,0 +1,126 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ContentSelector_exports = {};
+__export(ContentSelector_exports, {
+  ContentSelector: () => ContentSelector
+});
+module.exports = __toCommonJS(ContentSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const DEFAULT_PRESS_DETECT_DURATION = 400;
+const ContentSelector = ({
+  children,
+  onPress: onSelect,
+  onClickOutside: onUnselect,
+  pressDuration = DEFAULT_PRESS_DETECT_DURATION,
+  isSelecting: isSelectingProp,
+  ...props
+}) => {
+  const divRef = (0, import_react.useRef)(null);
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const [isSelectingState, setIsSelectingState] = (0, import_react.useState)(isSelectingProp);
+  const pressTimerRef = (0, import_react.useRef)(null);
+  const handleOnLongPress = () => {
+    setIsSelectingState(true);
+    onSelect();
+  };
+  const startPressTimer = () => {
+    pressTimerRef.current = setTimeout(() => {
+      handleOnLongPress();
+    }, pressDuration);
+  };
+  const clearPressTimer = () => {
+    if (pressTimerRef.current) {
+      clearTimeout(pressTimerRef.current);
+      pressTimerRef.current = null;
+    }
+  };
+  const handleMouseDown = () => {
+    clearPressTimer();
+    startPressTimer();
+  };
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const handleMouseUp = () => {
+    setIsHovered(false);
+    clearPressTimer();
+  };
+  const handleClickOutside = (0, import_react.useCallback)(
+    (event) => {
+      if (divRef.current && !divRef.current.contains(event.target)) {
+        setIsSelectingState(false);
+        onUnselect?.();
+      }
+    },
+    [onUnselect]
+  );
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  const handleOnClick = (e) => {
+    if (isSelectingState) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const handleOnBlur = () => {
+    setIsSelectingState(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline",
+        cursor: "pointer",
+        userSelect: "none",
+        borderRadius: "0.375rem",
+        outlineWidth: "2px",
+        outlineOffset: "4px",
+        outlineStyle: "solid",
+        outlineColor: isSelectingProp || isSelectingState || isHovered ? "inherit" : "transparent",
+        transition: "all 200ms 100ms ease-in-out"
+      },
+      role: "button",
+      tabIndex: 0,
+      onKeyUp: () => null,
+      onClick: handleOnClick,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+      onTouchStart: handleMouseDown,
+      onTouchEnd: handleMouseUp,
+      onTouchCancel: handleMouseUp,
+      onBlur: handleOnBlur,
+      onMouseEnter: handleMouseEnter,
+      ref: divRef,
+      ...props,
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContentSelector
+});
+//# sourceMappingURL=ContentSelector.cjs.map

package/dist/cjs/UI/ContentSelector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/UI/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useState,\n  useRef,\n  useCallback,\n  type FC,\n  type MouseEventHandler,\n  type HTMLAttributes,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype ContentSelectorProps = {\n  onPress: () => void;\n  onClickOutside?: () => void;\n  pressDuration?: number;\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseUp = () => {\n    setIsHovered(false);\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  return (\n    <span\n      style={{\n        display: 'inline',\n        cursor: 'pointer',\n        userSelect: 'none',\n        borderRadius: '0.375rem',\n        outlineWidth: '2px',\n        outlineOffset: '4px',\n        outlineStyle: 'solid',\n        outlineColor:\n          isSelectingProp || isSelectingState || isHovered\n            ? 'inherit'\n            : 'transparent',\n        transition: 'all 200ms 100ms ease-in-out',\n      }}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={() => null}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      onMouseEnter={handleMouseEnter}\n      ref={divRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGI;AAnGJ,mBAQO;AAEP,MAAM,gCAAgC;AAS/B,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,aAAS,qBAAuB,IAAI;AAC1C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,eAAe;AACxE,QAAM,oBAAgB,qBAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACxB,aAAS;AAAA,EACX;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAkB;AAAA,IACpB,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAgB;AAChB,oBAAgB;AAAA,EAClB;AAEA,QAAM,mBAAmB,MAAM;AAC7B,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,iBAAa,KAAK;AAClB,oBAAgB;AAAA,EAClB;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACzB,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,8BAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,cAAc;AAAA,QACd,eAAe;AAAA,QACf,cAAc;AAAA,QACd,cACE,mBAAmB,oBAAoB,YACnC,YACA;AAAA,QACN,YAAY;AAAA,MACd;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/UI/PressableSpan/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PressableSpan_exports = {};
+module.exports = __toCommonJS(PressableSpan_exports);
+__reExport(PressableSpan_exports, require('../ContentSelector.cjs'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require('../ContentSelector.cjs')
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/UI/PressableSpan/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/UI/PressableSpan/index.ts"],"sourcesContent":["export * from '../ContentSelector';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kCAAc,+BAAd;","names":[]}

package/dist/cjs/client/IntlayerProvider.cjs

@@ -29,6 +29,7 @@ var import_client = require("@intlayer/config/client");
 var import_react = require("react");
 var import_useLocaleCookie = require('./useLocaleCookie.cjs');
 var import_IntlayerEditorProvider = require('../editor/IntlayerEditorProvider.cjs');
+var import_PoweredByMeta = require('./PoweredByMeta.cjs');
 const IntlayerClientContext = (0, import_react.createContext)({
   locale: import_useLocaleCookie.localeCookie ?? (0, import_client.getConfiguration)().internationalization.defaultLocale,
   setLocale: () => null
@@ -61,7 +62,10 @@ const IntlayerProvider = ({
     () => ({ locale: currentLocale, setLocale }),
     [currentLocale, setLocale]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IntlayerClientContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IntlayerEditorProvider.IntlayerEditorProvider, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(IntlayerClientContext.Provider, { value, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PoweredByMeta.PoweredByMeta, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IntlayerEditorProvider.IntlayerEditorProvider, { children })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/client/IntlayerProvider.cjs.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';\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      <IntlayerEditorProvider>{children}</IntlayerEditorProvider>\n    </IntlayerClientContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EM;AA3EN,oBAA+C;AAC/C,mBAQO;AACP,6BAA8C;AAC9C,oCAAuC;AAUhC,MAAM,4BAAwB,4BAA6B;AAAA,EAChE,QAAQ,2CAAgB,gCAAiB,EAAE,qBAAqB;AAAA,EAChE,WAAW,MAAM;AACnB,CAAC;AAKM,MAAM,qBAAqB,UAAM,yBAAW,qBAAqB;AAUjE,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,qBAAqB,QAAI,gCAAiB;AAClD,QAAM,EAAE,eAAe,SAAS,iBAAiB,IAAI;AAErD,QAAM,CAAC,eAAe,gBAAgB,QAAI;AAAA,IACxC,UAAU,uCAAgB;AAAA,EAC5B;AAEA,QAAM,oBAAgB;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,kDAAgB,SAAS;AAAA,IAC3B;AAAA,IACA,CAAC,kBAAkB,eAAe,MAAM;AAAA,EAC1C;AAEA,QAAM,YAAY,iBAAiB;AAEnC,QAAM,YAAuB;AAAA,IAC3B,OAAO,EAAE,QAAQ,eAAe,UAAqB;AAAA,IACrD,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,SACE,4CAAC,sBAAsB,UAAtB,EAA+B,OAC9B,sDAAC,wDAAwB,UAAS,GACpC;AAEJ;","names":[]}
+{"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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EI;AA3EJ,oBAA+C;AAC/C,mBAQO;AACP,6BAA8C;AAC9C,oCAAuC;AACvC,2BAA8B;AAUvB,MAAM,4BAAwB,4BAA6B;AAAA,EAChE,QAAQ,2CAAgB,gCAAiB,EAAE,qBAAqB;AAAA,EAChE,WAAW,MAAM;AACnB,CAAC;AAKM,MAAM,qBAAqB,UAAM,yBAAW,qBAAqB;AAUjE,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,qBAAqB,QAAI,gCAAiB;AAClD,QAAM,EAAE,eAAe,SAAS,iBAAiB,IAAI;AAErD,QAAM,CAAC,eAAe,gBAAgB,QAAI;AAAA,IACxC,UAAU,uCAAgB;AAAA,EAC5B;AAEA,QAAM,oBAAgB;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,kDAAgB,SAAS;AAAA,IAC3B;AAAA,IACA,CAAC,kBAAkB,eAAe,MAAM;AAAA,EAC1C;AAEA,QAAM,YAAY,iBAAiB;AAEnC,QAAM,YAAuB;AAAA,IAC3B,OAAO,EAAE,QAAQ,eAAe,UAAqB;AAAA,IACrD,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,SACE,6CAAC,sBAAsB,UAAtB,EAA+B,OAC9B;AAAA,gDAAC,sCAAc;AAAA,IACf,4CAAC,wDAAwB,UAAS;AAAA,KACpC;AAEJ;","names":[]}

package/dist/cjs/{utils/PoweredByMeta/index.cjs → client/PoweredByMeta.cjs}

@@ -37,4 +37,4 @@ const PoweredByMeta = () => {
 0 && (module.exports = {
   PoweredByMeta
 });
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=PoweredByMeta.cjs.map

package/dist/cjs/client/PoweredByMeta.cjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmC;AAE5B,MAAM,gBAAoB,MAAM;AACrC,MAAI,QAAQ,IAAI,aAAa,aAAc,QAAO;AAElD,8BAAU,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":[]}

package/dist/cjs/distantDictionary/fetchDistantDictionary.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/distantDictionary/fetchDistantDictionary.ts"],"sourcesContent":["import { getIntlayerAPI } from '@intlayer/api';\n// @ts-ignore @intlayer/backend is not build yet\nimport { type DictionaryAPI } from '@intlayer/backend';\nimport { getConfiguration } from '@intlayer/config/client';\n// @ts-ignore @intlayer/design-system not build yet\n\n/**\n * Fetch distant dictionary\n */\nexport const fetchDistantDictionary = async (\n  dictionaryKey: string\n): Promise<DictionaryAPI> => {\n  try {\n    const config = getConfiguration();\n    const { clientId, clientSecret } = config.editor;\n    const intlayerAPI = getIntlayerAPI(undefined, config);\n\n    if (!clientId || !clientSecret) {\n      throw new Error(\n        'Missing OAuth2 client ID or client secret. To get access token go to https://intlayer.org/dashboard/project.'\n      );\n    }\n\n    const oAuth2TokenResult = await intlayerAPI.auth.getOAuth2AccessToken();\n\n    const oAuth2AccessToken = oAuth2TokenResult.data?.accessToken;\n\n    // Fetch the dictionary\n    const getDictionaryResult = await intlayerAPI.dictionary.getDictionary(\n      dictionaryKey,\n      undefined,\n      {\n        headers: { Authorization: `Bearer ${oAuth2AccessToken}` },\n      }\n    );\n\n    const distantDictionary = getDictionaryResult.data;\n\n    if (!distantDictionary) {\n      throw new Error(`Dictionary ${dictionaryKey} not found on remote`);\n    }\n\n    return distantDictionary;\n  } catch (error) {\n    console.error(error);\n    return undefined;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA+B;AAG/B,oBAAiC;AAM1B,MAAM,yBAAyB,OACpC,kBAC2B;AAC3B,MAAI;AACF,UAAM,aAAS,gCAAiB;AAChC,UAAM,EAAE,UAAU,aAAa,IAAI,OAAO;AAC1C,UAAM,kBAAc,2BAAe,QAAW,MAAM;AAEpD,QAAI,CAAC,YAAY,CAAC,cAAc;AAC9B,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAEA,UAAM,oBAAoB,MAAM,YAAY,KAAK,qBAAqB;AAEtE,UAAM,oBAAoB,kBAAkB,MAAM;AAGlD,UAAM,sBAAsB,MAAM,YAAY,WAAW;AAAA,MACvD;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,EAAE,eAAe,UAAU,iBAAiB,GAAG;AAAA,MAC1D;AAAA,IACF;AAEA,UAAM,oBAAoB,oBAAoB;AAE9C,QAAI,CAAC,mBAAmB;AACtB,YAAM,IAAI,MAAM,cAAc,aAAa,sBAAsB;AAAA,IACnE;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AACnB,WAAO;AAAA,EACT;AACF;","names":[]}
+{"version":3,"sources":["../../../src/distantDictionary/fetchDistantDictionary.ts"],"sourcesContent":["import { getIntlayerAPI } from '@intlayer/api';\n// @ts-ignore @intlayer/backend is not build yet\nimport { type DictionaryAPI } from '@intlayer/backend';\nimport { getConfiguration } from '@intlayer/config/client';\n// @ts-ignore @intlayer/design-system not build yet\n\n/**\n * Fetch distant dictionary\n */\nexport const fetchDistantDictionary = async (\n  dictionaryKey: string\n): Promise<DictionaryAPI | undefined> => {\n  try {\n    const config = getConfiguration();\n    const { clientId, clientSecret } = config.editor;\n    const intlayerAPI = getIntlayerAPI(undefined, config);\n\n    if (!clientId || !clientSecret) {\n      throw new Error(\n        'Missing OAuth2 client ID or client secret. To get access token go to https://intlayer.org/dashboard/project.'\n      );\n    }\n\n    const oAuth2TokenResult = await intlayerAPI.auth.getOAuth2AccessToken();\n\n    const oAuth2AccessToken = oAuth2TokenResult.data?.accessToken;\n\n    // Fetch the dictionary\n    const getDictionaryResult = await intlayerAPI.dictionary.getDictionary(\n      dictionaryKey,\n      undefined,\n      {\n        headers: { Authorization: `Bearer ${oAuth2AccessToken}` },\n      }\n    );\n\n    const distantDictionary = getDictionaryResult.data;\n\n    if (!distantDictionary) {\n      throw new Error(`Dictionary ${dictionaryKey} not found on remote`);\n    }\n\n    return distantDictionary;\n  } catch (error) {\n    console.error(error);\n    return undefined;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA+B;AAG/B,oBAAiC;AAM1B,MAAM,yBAAyB,OACpC,kBACuC;AACvC,MAAI;AACF,UAAM,aAAS,gCAAiB;AAChC,UAAM,EAAE,UAAU,aAAa,IAAI,OAAO;AAC1C,UAAM,kBAAc,2BAAe,QAAW,MAAM;AAEpD,QAAI,CAAC,YAAY,CAAC,cAAc;AAC9B,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAEA,UAAM,oBAAoB,MAAM,YAAY,KAAK,qBAAqB;AAEtE,UAAM,oBAAoB,kBAAkB,MAAM;AAGlD,UAAM,sBAAsB,MAAM,YAAY,WAAW;AAAA,MACvD;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,EAAE,eAAe,UAAU,iBAAiB,GAAG;AAAA,MAC1D;AAAA,IACF;AAEA,UAAM,oBAAoB,oBAAoB;AAE9C,QAAI,CAAC,mBAAmB;AACtB,YAAM,IAAI,MAAM,cAAc,aAAa,sBAAsB;AAAA,IACnE;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AACnB,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/cjs/editor/ContentSelectorWrapper.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,9 +23,45 @@ __export(ContentSelectorWrapper_exports, {
 });
 module.exports = __toCommonJS(ContentSelectorWrapper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@intlayer/core");
+var import_react = require("react");
+var import_editor_react = require("@intlayer/editor-react");
+var import_ContentSelector = require('../UI/ContentSelector.cjs');
 const ContentSelectorWrapper = ({
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  children,
+  dictionaryKey,
+  dictionaryPath,
+  keyPath,
+  ...props
+}) => {
+  const { focusedContent, setFocusedContent } = (0, import_editor_react.useFocusDictionary)();
+  const { getEditedContentValue } = (0, import_editor_react.useEditedContentActions)();
+  const editedValue = (0, import_react.useMemo)(
+    () => getEditedContentValue(dictionaryKey, keyPath),
+    [dictionaryKey, keyPath, getEditedContentValue]
+  );
+  const [displayedChildren, setDisplayedChildren] = (0, import_react.useState)(children);
+  const handleSelect = (0, import_react.useCallback)(
+    () => setFocusedContent({
+      dictionaryKey,
+      dictionaryPath,
+      keyPath
+    }),
+    [dictionaryKey, dictionaryPath, keyPath, setFocusedContent]
+  );
+  const isSelected = (0, import_react.useMemo)(
+    () => ((focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false,
+    [focusedContent, keyPath]
+  );
+  (0, import_react.useEffect)(() => {
+    if (editedValue && typeof editedValue === "string") {
+      setDisplayedChildren(editedValue);
+    } else {
+      setDisplayedChildren(children);
+    }
+  }, [editedValue, focusedContent, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ContentSelector.ContentSelector, { onPress: handleSelect, isSelecting: isSelected, ...props, children: displayedChildren });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ContentSelectorWrapper