intlayer-editor 2.0.0 → 2.1.0

package/README.md

@@ -1,175 +1,91 @@
-# Intlayer: Next-Level Content Management in JavaScript
+# Intlayer Editor Documentation
 
-**Intlayer** is an innovative Content Management System (CMS) designed specifically for JavaScript developers. It enables seamless transpilation of JavaScript content into structured dictionaries, making integration into your codebase straightforward and efficient.
+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.
 
-## Why Choose Intlayer?
+![Intlayer Editor Interface](https://github.com/aypineau/intlayer/blob/main/docs/assets/enabledpletion.png)
 
-- **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.
+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.
 
-## intlayer package
+For more details on how to install the package, see the relevant section below:
 
-`intlayer` package intend to declare your content in a structured way, using JavaScript.
+### Integrating with Next.js
 
-To build dictionaries from this declaration, you can use [intlayer-cli](https://github.com/aypineau/intlayer/blob/main/packages/intlayer-cli/readme.md).
-And to interpret intlayer dictionaries you can interpreters, such as [react-intlayer](https://github.com/aypineau/intlayer/blob/main/packages/react-intlayer/readme.md), or [next-intlayer](https://github.com/aypineau/intlayer/blob/main/packages/next-intlayer/readme.md)
+For integration with Next.js, refer to the [setup guide](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_nextjs.md).
 
-## Getting Started with Intlayer
+### Integrating with Create React App
 
-[See how to use intlayer with NextJS](https://github.com/aypineau/intlayer/blob/main/readme.md)
+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).
 
-### Install Package
+### Integrating with Vite + React
 
-Install the necessary packages using npm:
+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
+npm install intlayer-editor -D
 ```
 
 ```bash
-yarn install intlayer
+yarn install intlayer-editor -D
 ```
 
 ```bash
-pnpm install intlayer
+pnpm install intlayer-editor -D
 ```
 
-### Manage Your Content
-
-Create and manage your content dictionaries:
-
-#### Using typescript
+In your Intlayer configuration file, you can customize the editor settings:
 
 ```typescript
-// src/app/[locale]/page.content.ts
-import { t, enu, type ContentModule } from "intlayer";
-
-const pageContent: ContentModule = {
-  id: "page",
-  getStarted: {
-    main: t({
-      en: "Get started by editing",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    pageLink: "src/app/page.tsx",
-  },
-  nestedContent: {
-    id: "enumeration",
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
+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
   },
 };
-
-// Content should be exported as default
-export default pageContent;
 ```
 
-#### Using ECMAScript modules
+To see all available parameters, refer to the [configuration documentation](https://github.com/aypineau/intlayer/blob/main/docs/configuration.md).
 
-```javascript
-// src/app/[locale]/page.content.mjs
+### Start Editing
 
-import { t } from "intlayer";
+To start editing, launch the editor server using `npx intlayer-editor start`.
 
-/** @type {import('intlayer').ContentModule} */
-const pageContent = {
-  id: "page",
-  getStarted: {
-    main: t({
-      en: "Get started by editing",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    pageLink: "src/app/page.tsx",
-  },
-  nestedContent: {
-    id: "enumeration",
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-  },
-};
-
-// Content should be exported as default
-export default pageContent;
-```
+You can also create a custom script in your `package.json` file:
 
-#### Using CommonJS modules
-
-```javascript
-// src/app/[locale]/page.content.cjs
-
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').ContentModule} */
-const pageContent = {
-  id: "page",
-  getStarted: {
-    main: t({
-      en: "Get started by editing",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    pageLink: "src/app/page.tsx",
-  },
-  nestedContent: {
-    id: "enumeration",
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
+```json5
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start",
   },
-};
-
-// Content should be exported as default
-module.exports = pageContent;
+}
 ```
 
-#### Using JSON
+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
-// src/app/[locale]/page.content.json
 {
-  "id": "page",
-  "getStarted": {
-    "main": {
-      "nodeType": "translation",
-      "en": "Get started by editing",
-      "fr": "Commencez par éditer",
-      "es": "Comience por editar",
-    },
-    "pageLink": "src/app/page.tsx",
-  },
-  "nestedContent": {
-    "id": "enumeration",
-    "nodeType": "enumeration",
-    "numberOfCar": {
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    },
+  "scripts": {
+    "dev": "next dev",
+    "start:editor": "npx intlayer-editor start",
+    "dev:all": "concurrently \"npm run dev:nextjs\" \"npm run dev:intlayer-editor\"",
   },
 }
 ```
 
-This version emphasizes ease of use, practical steps, and the professional application of Intlayer in a Next.js environment.
+## 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.

package/dist/cjs/client/ContentEditionLayout.cjs

@@ -22,7 +22,8 @@ __export(ContentEditionLayout_exports, {
 });
 module.exports = __toCommonJS(ContentEditionLayout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_EditionPanel = require('./EditionPanel/index.cjs');
+var import_DictionaryEditionDrawer = require('./DictionaryEditionDrawer/index.cjs');
+var import_DictionaryListDrawer = require('./DictionaryListDrawer/index.cjs');
 const ContentEditionLayout = ({
   children,
   locale,
@@ -31,13 +32,14 @@ const ContentEditionLayout = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
   children,
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_EditionPanel.EditionPanel,
+    import_DictionaryEditionDrawer.DictionaryEditionDrawerController,
     {
       locale,
       localeList,
       setLocale
     }
-  )
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DictionaryListDrawer.DictionaryListDrawer, {})
 ] });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/client/ContentEditionLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/ContentEditionLayout.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { FC, ReactNode } from 'react';\nimport { EditionPanel } from './EditionPanel/index';\n\nexport type ContentEditionLayoutProps = {\n  children?: ReactNode;\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const ContentEditionLayout: FC<ContentEditionLayoutProps> = ({\n  children,\n  locale,\n  setLocale,\n  localeList,\n}) => (\n  <>\n    {children}\n    <EditionPanel\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n    />\n  </>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBE;AAfF,0BAA6B;AAStB,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,4EACG;AAAA;AAAA,EACD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAAA,GACF;","names":[]}
+{"version":3,"sources":["../../../src/client/ContentEditionLayout.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { FC, ReactNode } from 'react';\nimport { DictionaryEditionDrawerController } from './DictionaryEditionDrawer/index';\nimport { DictionaryListDrawer } from './DictionaryListDrawer/index';\n\nexport type ContentEditionLayoutProps = {\n  children?: ReactNode;\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const ContentEditionLayout: FC<ContentEditionLayoutProps> = ({\n  children,\n  locale,\n  setLocale,\n  localeList,\n}) => (\n  <>\n    {children}\n    <DictionaryEditionDrawerController\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n    />\n    <DictionaryListDrawer />\n  </>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBE;AAhBF,qCAAkD;AAClD,kCAAqC;AAS9B,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,4EACG;AAAA;AAAA,EACD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAAA,EACA,4CAAC,oDAAqB;AAAA,GACxB;","names":[]}

package/dist/cjs/client/ContentSelectorWrapper.cjs

@@ -23,24 +23,28 @@ __export(ContentSelectorWrapper_exports, {
 });
 module.exports = __toCommonJS(ContentSelectorWrapper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@intlayer/core");
 var import_design_system = require("@intlayer/design-system");
-var import_useEditedContentStore = require('./EditionPanel/useEditedContentStore.cjs');
-var import_useEditionPanelStore = require('./EditionPanel/useEditionPanelStore.cjs');
+var import_react = require("react");
+var import_useDictionaryEditionDrawer = require('./DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs');
 const ContentSelectorWrapper = ({
   children,
   dictionaryId,
   dictionaryPath,
   keyPath
 }) => {
-  const { setFocusedContent } = (0, import_useEditionPanelStore.useEditionPanelStore)();
-  const handleSelect = () => setFocusedContent({
-    dictionaryId,
-    dictionaryPath,
-    keyPath
-  });
-  const { getEditedContentValue } = (0, import_useEditedContentStore.useEditedContentStore)();
+  const { open, getEditedContentValue, focusedContent, isOpen } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
   const editedValue = getEditedContentValue(dictionaryPath, keyPath);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.ContentSelector, { onSelect: handleSelect, children: editedValue ?? children });
+  const handleSelect = (0, import_react.useCallback)(
+    () => open({
+      dictionaryId,
+      dictionaryPath,
+      keyPath
+    }),
+    [dictionaryId, dictionaryPath, keyPath, open]
+  );
+  const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.ContentSelector, { onSelect: handleSelect, isSelecting: isSelected, children: editedValue ?? children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/client/ContentSelectorWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport type { FC } from 'react';\nimport { useEditedContentStore } from './EditionPanel/useEditedContentStore';\nimport { useEditionPanelStore } from './EditionPanel/useEditionPanelStore';\n\ntype ContentSelectorWrapperProps = {\n  children: string;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { setFocusedContent } = useEditionPanelStore();\n  const handleSelect = () =>\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath,\n      keyPath,\n    });\n\n  const { getEditedContentValue } = useEditedContentStore();\n  const editedValue = getEditedContentValue(dictionaryPath, keyPath);\n\n  return (\n    <ContentSelector onSelect={handleSelect}>\n      {editedValue ?? children}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCI;AA9BJ,2BAAgC;AAEhC,mCAAsC;AACtC,kCAAqC;AAS9B,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,kBAAkB,QAAI,kDAAqB;AACnD,QAAM,eAAe,MACnB,kBAAkB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,EAAE,sBAAsB,QAAI,oDAAsB;AACxD,QAAM,cAAc,sBAAsB,gBAAgB,OAAO;AAEjE,SACE,4CAAC,wCAAgB,UAAU,cACxB,yBAAe,UAClB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/client/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport { useCallback, type FC, type ReactNode } from 'react';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n  children: ReactNode;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { open, getEditedContentValue, focusedContent, isOpen } =\n    useDictionaryEditionDrawer(dictionaryId);\n  const editedValue = getEditedContentValue(dictionaryPath, keyPath);\n\n  const handleSelect = useCallback(\n    () =>\n      open({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryId, dictionaryPath, keyPath, open]\n  );\n\n  const isSelected =\n    (isOpen &&\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n    false;\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {editedValue ?? children}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCI;AAvCJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAAqD;AACrD,wCAA2C;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,QAC1D,8DAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,gBAAgB,OAAO;AAEjE,QAAM,mBAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,SACzC,2BAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,yBAAe,UAClB;AAEJ;","names":[]}

package/dist/cjs/client/ContentSelectorWrapper.d.ts

@@ -1,8 +1,8 @@
 import { KeyPath } from '@intlayer/core';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 type ContentSelectorWrapperProps = {
-    children: string;
+    children: ReactNode;
     dictionaryId: string;
     dictionaryPath: string;
     keyPath: KeyPath[];

package/dist/cjs/client/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs

@@ -0,0 +1,135 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DictionaryEditionDrawer_exports = {};
+__export(DictionaryEditionDrawer_exports, {
+  DictionaryEditionDrawer: () => DictionaryEditionDrawer,
+  DictionaryEditionDrawerContent: () => DictionaryEditionDrawerContent,
+  DictionaryEditionDrawerController: () => DictionaryEditionDrawerController,
+  getDrawerIdentifier: () => getDrawerIdentifier
+});
+module.exports = __toCommonJS(DictionaryEditionDrawer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_design_system = require("@intlayer/design-system");
+var import_dictionaries_entry = __toESM(require("@intlayer/dictionaries-entry"));
+var import_DictionaryListDrawer = require('../DictionaryListDrawer/index.cjs');
+var import_useDictionaryEditionDrawer = require('./useDictionaryEditionDrawer.cjs');
+var import_useFocusContentStore = require('./useFocusContentStore.cjs');
+const DictionaryEditionDrawerContent = ({ focusedContent, locale, identifier }) => {
+  const {
+    setFocusedContent,
+    editContentRequest,
+    editedContent,
+    addEditedContent,
+    clearEditedDictionaryContent
+  } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(identifier);
+  const dictionaryId = focusedContent.dictionaryId;
+  const dictionary = import_dictionaries_entry.default[dictionaryId];
+  const dictionaryPath = dictionary.filePath;
+  const editedDictionaryContent = editedContent[dictionaryPath];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_design_system.DictionaryEditor,
+    {
+      dictionary,
+      locale,
+      focusedKeyPath: focusedContent.keyPath,
+      editedContent: editedDictionaryContent,
+      onFocusKeyPath: (keyPath) => setFocusedContent({ ...focusedContent, keyPath }),
+      onContentChange: (keyPath, newValue) => addEditedContent(dictionaryPath, keyPath, newValue),
+      onValidEdition: editContentRequest,
+      onCancelEdition: () => clearEditedDictionaryContent(dictionaryPath)
+    }
+  );
+};
+const getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
+const DictionaryEditionDrawer = ({
+  locale,
+  localeList,
+  setLocale,
+  dictionaryId
+}) => {
+  const id = getDrawerIdentifier(dictionaryId);
+  const { focusedContent, close } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
+  const { open: openDictionaryListDrawer } = (0, import_DictionaryListDrawer.useDictionaryListDrawer)();
+  const handleOnBack = () => {
+    close();
+    openDictionaryListDrawer();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_design_system.RightDrawer,
+    {
+      title: dictionaryId,
+      identifier: id,
+      header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design_system.LocaleSwitcher,
+        {
+          setLocale,
+          locale,
+          localeList
+        }
+      ),
+      backButton: {
+        onBack: handleOnBack,
+        text: "Dictionary list"
+      },
+      children: focusedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DictionaryEditionDrawerContent,
+        {
+          focusedContent,
+          locale,
+          identifier: id
+        }
+      )
+    }
+  );
+};
+const DictionaryEditionDrawerController = ({ locale, localeList, setLocale }) => {
+  const focusedContent = (0, import_useFocusContentStore.useEditionPanelStore)((s) => s.focusedContent);
+  const dictionaryId = focusedContent?.dictionaryId;
+  if (!dictionaryId) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DictionaryEditionDrawer,
+    {
+      locale,
+      localeList,
+      setLocale,
+      dictionaryId
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DictionaryEditionDrawer,
+  DictionaryEditionDrawerContent,
+  DictionaryEditionDrawerController,
+  getDrawerIdentifier
+});
+//# sourceMappingURL=DictionaryEditionDrawer.cjs.map

package/dist/cjs/client/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  type FileContent,\n} from '@intlayer/design-system';\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 { FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/index';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n} from './useDictionaryEditionDrawer';\nimport { useEditionPanelStore } from './useFocusContentStore';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ focusedContent, locale, identifier }) => {\n  const {\n    setFocusedContent,\n    editContentRequest,\n    editedContent,\n    addEditedContent,\n    clearEditedDictionaryContent,\n  } = useDictionaryEditionDrawer(identifier);\n\n  const dictionaryId: string = focusedContent.dictionaryId;\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n  const dictionaryPath: string = dictionary.filePath;\n  const editedDictionaryContent: FileContent[] = editedContent[dictionaryPath];\n\n  return (\n    <DictionaryEditor\n      dictionary={dictionary}\n      locale={locale}\n      focusedKeyPath={focusedContent.keyPath}\n      editedContent={editedDictionaryContent}\n      onFocusKeyPath={(keyPath) =>\n        setFocusedContent({ ...focusedContent, keyPath })\n      }\n      onContentChange={(keyPath, newValue) =>\n        addEditedContent(dictionaryPath, keyPath, newValue)\n      }\n      onValidEdition={editContentRequest}\n      onCancelEdition={() => clearEditedDictionaryContent(dictionaryPath)}\n    />\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n  locale,\n  localeList,\n  setLocale,\n  dictionaryId,\n}) => {\n  const id = getDrawerIdentifier(dictionaryId);\n\n  const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n  const { open: openDictionaryListDrawer } = useDictionaryListDrawer();\n\n  const handleOnBack = () => {\n    close();\n    openDictionaryListDrawer();\n  };\n\n  return (\n    <RightDrawer\n      title={dictionaryId}\n      identifier={id}\n      header={\n        <LocaleSwitcher\n          setLocale={setLocale}\n          locale={locale}\n          localeList={localeList}\n        />\n      }\n      backButton={{\n        onBack: handleOnBack,\n        text: 'Dictionary list',\n      }}\n    >\n      {focusedContent && (\n        <DictionaryEditionDrawerContent\n          focusedContent={focusedContent}\n          locale={locale}\n          identifier={id}\n        />\n      )}\n    </RightDrawer>\n  );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n  DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n  const focusedContent = useEditionPanelStore((s) => s.focusedContent);\n  const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) {\n    return null;\n  }\n\n  return (\n    <DictionaryEditionDrawer\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n      dictionaryId={dictionaryId}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CI;AA3CJ,2BAKO;AAMP,gCAAyB;AAEzB,kCAAwC;AACxC,wCAGO;AACP,kCAAqC;AAQ9B,MAAM,iCAET,CAAC,EAAE,gBAAgB,QAAQ,WAAW,MAAM;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,UAAU;AAEzC,QAAM,eAAuB,eAAe;AAC5C,QAAM,aAAyB,0BAAAA,QAAa,YAAY;AACxD,QAAM,iBAAyB,WAAW;AAC1C,QAAM,0BAAyC,cAAc,cAAc;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,gBAAgB,eAAe;AAAA,MAC/B,eAAe;AAAA,MACf,gBAAgB,CAAC,YACf,kBAAkB,EAAE,GAAG,gBAAgB,QAAQ,CAAC;AAAA,MAElD,iBAAiB,CAAC,SAAS,aACzB,iBAAiB,gBAAgB,SAAS,QAAQ;AAAA,MAEpD,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,6BAA6B,cAAc;AAAA;AAAA,EACpE;AAEJ;AAMO,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AAE7B,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,KAAK,oBAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,QAAI,qDAAwB;AAEnE,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,MACd;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,qBAAiB,kDAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":["dictionaries"]}

package/dist/cjs/client/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts

@@ -0,0 +1,28 @@
+import { Locales } from '@intlayer/config/client';
+import { FC } from 'react';
+import { FileContent } from './useDictionaryEditionDrawer.js';
+import './useEditedContentStore.js';
+import '@intlayer/core';
+import 'zustand/middleware';
+import 'zustand';
+import '@intlayer/design-system';
+
+type DictionaryEditionDrawerContentProps = {
+    focusedContent: FileContent;
+    locale: Locales;
+    identifier: string;
+};
+declare const DictionaryEditionDrawerContent: FC<DictionaryEditionDrawerContentProps>;
+type DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {
+    dictionaryId: string;
+};
+declare const getDrawerIdentifier: (dictionaryId: string) => string;
+declare const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps>;
+type DictionaryEditionDrawerControllerProps = {
+    locale: Locales;
+    localeList: Locales[];
+    setLocale: (locale: Locales) => void;
+};
+declare const DictionaryEditionDrawerController: FC<DictionaryEditionDrawerControllerProps>;
+
+export { DictionaryEditionDrawer, DictionaryEditionDrawerContent, DictionaryEditionDrawerController, getDrawerIdentifier };

package/dist/cjs/client/DictionaryEditionDrawer/index.cjs

@@ -0,0 +1,27 @@
+"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 DictionaryEditionDrawer_exports = {};
+module.exports = __toCommonJS(DictionaryEditionDrawer_exports);
+__reExport(DictionaryEditionDrawer_exports, require('./DictionaryEditionDrawer.cjs'), module.exports);
+__reExport(DictionaryEditionDrawer_exports, require('./useDictionaryEditionDrawer.cjs'), module.exports);
+__reExport(DictionaryEditionDrawer_exports, require('./useEditedContentStore.cjs'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require('./DictionaryEditionDrawer.cjs'),
+  ...require('./useDictionaryEditionDrawer.cjs'),
+  ...require('./useEditedContentStore.cjs')
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/client/DictionaryEditionDrawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/DictionaryEditionDrawer/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer';\nexport * from './useDictionaryEditionDrawer';\nexport * from './useEditedContentStore';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4CAAc,sCAAd;AACA,4CAAc,yCADd;AAEA,4CAAc,oCAFd;","names":[]}

package/dist/cjs/client/DictionaryEditionDrawer/index.d.ts

@@ -0,0 +1,9 @@
+export { DictionaryEditionDrawer, DictionaryEditionDrawerContent, DictionaryEditionDrawerController, getDrawerIdentifier } from './DictionaryEditionDrawer.js';
+export { FileContent, useDictionaryEditionDrawer, useDictionaryEditionDrawerControl } from './useDictionaryEditionDrawer.js';
+export { EditedContent, useEditedContentStore } from './useEditedContentStore.js';
+import '@intlayer/config/client';
+import 'react';
+import '@intlayer/core';
+import 'zustand/middleware';
+import 'zustand';
+import '@intlayer/design-system';

package/dist/cjs/client/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs

@@ -0,0 +1,103 @@
+"use strict";
+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 useDictionaryEditionDrawer_exports = {};
+__export(useDictionaryEditionDrawer_exports, {
+  useDictionaryEditionDrawer: () => useDictionaryEditionDrawer,
+  useDictionaryEditionDrawerControl: () => useDictionaryEditionDrawerControl
+});
+module.exports = __toCommonJS(useDictionaryEditionDrawer_exports);
+var import_design_system = require("@intlayer/design-system");
+var import_useEditorServer = require('../useEditorServer.cjs');
+var import_DictionaryEditionDrawer = require('./DictionaryEditionDrawer.cjs');
+var import_useEditedContentStore = require('./useEditedContentStore.cjs');
+var import_useFocusContentStore = require('./useFocusContentStore.cjs');
+const useDictionaryEditionDrawer = (dictionaryId) => {
+  const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+  const { isOpen, open, close } = (0, import_design_system.useRightDrawerStore)(id)();
+  const {
+    editedContent,
+    getEditedContentValue,
+    addEditedContent,
+    clearEditedDictionaryContent
+  } = (0, import_useEditedContentStore.useEditedContentStore)((s) => ({
+    editedContent: s.editedContent,
+    addEditedContent: s.addEditedContent,
+    getEditedContentValue: s.getEditedContentValue,
+    clearEditedDictionaryContent: s.clearEditedDictionaryContent
+  }));
+  const { setFocusedContent, focusedContent } = (0, import_useFocusContentStore.useEditionPanelStore)((s) => ({
+    focusedContent: s.focusedContent,
+    setFocusedContent: s.setFocusedContent
+  }));
+  const { editContentRequest } = (0, import_useEditorServer.useEditorServer)();
+  const openDictionaryEditionDrawer = ({
+    dictionaryId: dictionaryId2,
+    dictionaryPath,
+    keyPath = []
+  }) => {
+    setFocusedContent({
+      dictionaryId: dictionaryId2,
+      dictionaryPath,
+      keyPath
+    });
+    open();
+  };
+  return {
+    isOpen,
+    focusedContent,
+    setFocusedContent,
+    open: openDictionaryEditionDrawer,
+    close,
+    getEditedContentValue,
+    editContentRequest,
+    editedContent,
+    addEditedContent,
+    clearEditedDictionaryContent
+  };
+};
+const useDictionaryEditionDrawerControl = () => {
+  const setFocusedContent = (0, import_useFocusContentStore.useEditionPanelStore)((s) => s.setFocusedContent);
+  const open = ({
+    dictionaryId,
+    dictionaryPath,
+    keyPath = []
+  }) => {
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath,
+      keyPath
+    });
+    const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+    (0, import_design_system.useRightDrawerStore)(id).getState().open();
+  };
+  const close = (dictionaryId) => {
+    const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+    (0, import_design_system.useRightDrawerStore)(id).getState().close();
+  };
+  return {
+    open,
+    close
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDictionaryEditionDrawer,
+  useDictionaryEditionDrawerControl
+});
+//# sourceMappingURL=useDictionaryEditionDrawer.cjs.map