Feat implement array management in declraration file

.changeset/loud-frogs-walk.md

@@ -0,0 +1,20 @@
+---
+"@intlayer/dictionaries-entry": minor
+"@intlayer/design-system": minor
+"@intlayer/chokidar": minor
+"@intlayer/webpack": minor
+"@intlayer/config": minor
+"intlayer-editor": minor
+"@intlayer/core": minor
+"react-intlayer": minor
+"@intlayer/cli": minor
+"next-intlayer": minor
+"intlayer-cli": minor
+"nextjs-app-example": minor
+"react-app-example": minor
+"my-vite-app": minor
+"intlayer": minor
+"cli-example": minor
+---
+
+release of intlayer editor

README.md

@@ -37,9 +37,9 @@ pnpm add intlayer
 Intlayer allows you to declare your content in various formats, including TypeScript, ECMAScript modules, CommonJS modules, and JSON. Here's an example of a content declaration using TypeScript:
 
 ```typescript
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 
-const exampleContent: ContentModule = {
+const exampleContent: DeclarationContent = {
   id: "example",
   welcome: t({
     en: "Welcome",

docs/configuration.md

@@ -115,6 +115,26 @@ Defines settings related to internationalization, including available locales an
 
 ---
 
+### Editor Configuration
+
+Defines settings related to the integrated editor, including server port and active status.
+
+#### Properties
+
+- **port**:
+
+  - _Type_: `number`
+  - _Default_: `4000`
+  - _Description_: The port number where the editor server runs.
+  - _Example_: `4000`
+
+- **enabled**:
+  - _Type_: `boolean`
+  - _Default_: `true`
+  - _Description_: Indicates if the editor is active.
+  - _Example_: `true`
+  - _Note_: Can be set using NODE_ENV, or other dedicated env variable
+
 ### Middleware Configuration
 
 Settings that control middleware behavior, including how the application handles cookies, headers, and URL prefixes for locale management.

docs/content_declaration/enumeration.md

@@ -13,9 +13,9 @@ In Intlayer, enumeration is achieved through the `enu` function, which maps spec
 To set up enumeration in your Intlayer project, you need to create a content module that includes enumeration definitions. Here's an example of a simple enumeration for the number of cars:
 
 ```typescript
-import { enu, type ContentModule } from "intlayer";
+import { enu, type DeclarationContent } from "intlayer";
 
-const carEnumeration: ContentModule = {
+const carEnumeration: DeclarationContent = {
   id: "car_count",
   numberOfCar: enu({
     "<-1": "Less than minus one car",

docs/content_declaration/function_fetching.md

@@ -13,9 +13,9 @@ Intlayer allows you to declare content functions in your content modules, which
 Here's an example of a simple synchronous function fetching content:
 
 ```typescript
-import type { ContentModule } from "intlayer";
+import type { DeclarationContent } from "intlayer";
 
-const functionContent: ContentModule = {
+const functionContent: DeclarationContent = {
   id: "function_content",
   text: () => "This is the content rendered by a function",
 };
@@ -33,7 +33,7 @@ Below is an example of an asynchronous function that simulates a server fetch:
 
 ```typescript
 import { setTimeout } from "node:timers/promises";
-import type { ContentModule } from "intlayer";
+import type { DeclarationContent } from "intlayer";
 
 const fakeFetch = async (): Promise<string> => {
   // Wait for 200ms to simulate a fetch from the server
@@ -42,7 +42,7 @@ const fakeFetch = async (): Promise<string> => {
   );
 };
 
-const asyncFunctionContent: ContentModule = {
+const asyncFunctionContent: DeclarationContent = {
   id: "async_function",
   text: fakeFetch,
 };

docs/content_declaration/get_started.md

@@ -35,9 +35,9 @@ Create and manage your content dictionaries:
 
 ```typescript
 // src/app/[locale]/page.content.ts
-import { t, enu, type ContentModule } from "intlayer";
+import { t, enu, type DeclarationContent } from "intlayer";
 
-const pageContent: ContentModule = {
+const pageContent: DeclarationContent = {
   id: "page",
   getStarted: {
     main: t({
@@ -71,7 +71,7 @@ export default pageContent;
 
 import { t } from "intlayer";
 
-/** @type {import('intlayer').ContentModule} */
+/** @type {import('intlayer').DeclarationContent} */
 const pageContent = {
   id: "page",
   getStarted: {
@@ -106,7 +106,7 @@ export default pageContent;
 
 const { t } = require("intlayer");
 
-/** @type {import('intlayer').ContentModule} */
+/** @type {import('intlayer').DeclarationContent} */
 const pageContent = {
   id: "page",
   getStarted: {

docs/content_declaration/nested_id.md

@@ -17,9 +17,9 @@ Nested IDs in `intlayer` allow you to declare complex content structures efficie
 To declare nested IDs in your content file, you create a structure with inner nodes containing additional content and unique identifiers. This setup is ideal for scenarios where content is vast or highly organized. Here's a typical example of a nested ID structure:
 
 ```typescript
-import type { ContentModule } from "intlayer";
+import type { DeclarationContent } from "intlayer";
 
-const nestedContent: ContentModule = {
+const nestedContent: DeclarationContent = {
   id: "parent_id",
   text: "This is the parent node",
 
@@ -75,9 +75,9 @@ Nested IDs offer several benefits:
 To further optimize the performance of nested IDs, you can declare multiple nested levels or use additional unique identifiers within the structure. Here's an example with deeper nesting:
 
 ```typescript
-import type { ContentModule } from "intlayer";
+import type { DeclarationContent } from "intlayer";
 
-const deeplyNestedContent: ContentModule = {
+const deeplyNestedContent: DeclarationContent = {
   id: "level_1",
   text: "Level 1 content",
 

docs/content_declaration/translation.md

@@ -11,9 +11,9 @@ The `t` function in `intlayer` allows you to declare content in multiple languag
 Here's an example of how to declare content with translations in a TypeScript file:
 
 ```typescript
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 
-const multiLangContent: ContentModule = {
+const multiLangContent: DeclarationContent = {
   id: "multi_lang",
   welcomeMessage: t({
     en: "Welcome to our application",
@@ -122,14 +122,14 @@ This component fetches the corresponding translation based on the current locale
 `intlayer` supports custom content objects for translation, allowing you to define more complex structures while ensuring type safety. Here's an example with a custom object:
 
 ```typescript
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 
 interface ICustomContent {
   title: string;
   content: string;
 }
 
-const customContent: ContentModule = {
+const customContent: DeclarationContent = {
   id: "custom_content",
   profileText: t<ICustomContent>({
     en: {

docs/intlayer_editor.md

@@ -0,0 +1,91 @@
+# Intlayer Editor Documentation
+
+The Intlayer Editor is a tool that transforms your application into a visual editor. With Intlayer Editor, your teams can manage your site's content in all configured languages.
+
+![Intlayer Editor Interface](https://github.com/aypineau/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
+
+The `intlayer-editor` package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
+
+For more details on how to install the package, see the relevant section below:
+
+### Integrating with Next.js
+
+For integration with Next.js, refer to the [setup guide](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_nextjs.md).
+
+### Integrating with Create React App
+
+For integration with Create React App, refer to the [setup guide](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_create_react_app.md).
+
+### Integrating with Vite + React
+
+For integration with Vite + React, refer to the [setup guide](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_vite+react.md).
+
+## How Intlayer Editor Works
+
+Each time you make a change using Intlayer Editor, the server automatically inserts your changes into your [Intlayer declaration files](https://github.com/aypineau/intlayer/blob/main/docs/content_declaration/get_started.md), wherever these files are declared in your project.
+
+In this way, you don't have to worry about where the file is declared or about finding your key in your dictionary collection.
+
+## Installation
+
+Once Intlayer is configured in your project, simply install `intlayer-editor` as a development dependency:
+
+```bash
+npm install intlayer-editor -D
+```
+
+```bash
+yarn install intlayer-editor -D
+```
+
+```bash
+pnpm install intlayer-editor -D
+```
+
+In your Intlayer configuration file, you can customize the editor settings:
+
+```typescript
+const config: IntlayerConfig = {
+  // ... other configuration settings
+  editor: {
+    enabled: process.env.NODE_ENV === "development", // If false, the editor is inactive and cannot be accessed.
+    port: 3000, // Port of the intlayer-editor backend
+  },
+};
+```
+
+To see all available parameters, refer to the [configuration documentation](https://github.com/aypineau/intlayer/blob/main/docs/configuration.md).
+
+### Start Editing
+
+To start editing, launch the editor server using `npx intlayer-editor start`.
+
+You can also create a custom script in your `package.json` file:
+
+```json5
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start",
+  },
+}
+```
+
+To start both the Next.js server and the Intlayer Editor simultaneously, you can use the [concurrently](https://github.com/open-cli-tools/concurrently) tool:
+
+```json5
+{
+  "scripts": {
+    "dev": "next dev",
+    "start:editor": "npx intlayer-editor start",
+    "dev:all": "concurrently \"npm run dev:nextjs\" \"npm run dev:intlayer-editor\"",
+  },
+}
+```
+
+## Using the Editor
+
+When the editor is installed, enabled, and started, you can view each field indexed by Intlayer by hovering over your content with your cursor.
+
+![Hovering over content](https://github.com/aypineau/intlayer/blob/main/docs/assets/intlayer_editor_hover_content.png)
+
+If your content is outlined, you can long-press it to display the edit drawer.

docs/intlayer_with_create_react_app.md

@@ -38,10 +38,10 @@ Create and manage your content dictionaries:
 
 ```tsx
 // src/app.content.ts
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 import { ReactNode } from "react";
 
-const appContent: ContentModule = {
+const appContent: DeclarationContent = {
   id: "app",
 
   getStarted: t<ReactNode>({
@@ -81,7 +81,7 @@ Access your content dictionaries throughout your application:
 ```tsx
 import logo from "./logo.svg";
 import "./App.css";
-import { IntlayerClientProvider, useIntlayer } from "react-intlayer";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
 import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
 
 function AppContent() {
@@ -106,15 +106,15 @@ function AppContent() {
 
 function App() {
   return (
-    <IntlayerClientProvider>
+    <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>
-    </IntlayerClientProvider>
+    </IntlayerProvider>
   );
 }
 

docs/intlayer_with_nextjs.md

@@ -56,9 +56,9 @@ Create and manage your content dictionaries:
 
 ```tsx
 // src/app/[locale]/page.content.ts
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 
-const pageContent: ContentModule = {
+const pageContent: DeclarationContent = {
   id: "page",
   getStarted: {
     main: t({

docs/intlayer_with_vite+react.md

@@ -39,10 +39,10 @@ Create and manage your content dictionaries:
 
 ```tsx
 // src/app.content.ts
-import { t, type ContentModule } from "intlayer";
+import { t, type DeclarationContent } from "intlayer";
 import { ReactNode } from "react";
 
-const appContent: ContentModule = {
+const appContent: DeclarationContent = {
   id: "app",
 
   viteLogo: t({
@@ -102,7 +102,7 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
 import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
-import { IntlayerClientProvider, useIntlayer } from "react-intlayer";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
 
 function AppContent() {
   const [count, setCount] = useState(0);
@@ -136,9 +136,9 @@ function AppContent() {
 
 function App() {
   return (
-    <IntlayerClientProvider>
+    <IntlayerProvider>
       <AppContent />
-    </IntlayerClientProvider>
+    </IntlayerProvider>
   );
 }
 

examples/cli/src/1_available_format/typescript.content.ts

@@ -1,6 +1,6 @@
-import { t, type ContentModule } from 'intlayer';
+import { t, type DeclarationContent } from 'intlayer';
 
-const tsContent: ContentModule = {
+const tsContent: DeclarationContent = {
   id: 'tsFile',
   profileText: t({
     en: 'Manage profile',

examples/cli/src/2_content_in_subpath/here/example/of/far/subpath/index.content.ts

@@ -1,6 +1,6 @@
-import type { ContentModule } from 'intlayer';
+import type { DeclarationContent } from 'intlayer';
 
-const tsContentInSubPath: ContentModule = {
+const tsContentInSubPath: DeclarationContent = {
   id: 'tsSubpath',
   testInSubPath: {
     en: 'Manage profile',

examples/cli/src/3_identic_file_names/index.content.ts

@@ -1,6 +1,6 @@
-import type { ContentModule } from 'intlayer';
+import type { DeclarationContent } from 'intlayer';
 
-const identicFileNameTSContent: ContentModule = {
+const identicFileNameTSContent: DeclarationContent = {
   id: 'identicFileName - TS',
   testInSubPath: {
     en: 'Manage profile',