intlayer-editor 2.1.12 → 3.0.2

package/README.md

@@ -21,7 +21,7 @@
 
 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/enabledpletion.png)
+![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/enabledpletion.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.
 
@@ -29,19 +29,19 @@ 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/docs/intlayer_with_nextjs_en.md).
+For integration with Next.js, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/intlayer_with_nextjs_en.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/docs/intlayer_with_create_react_app_en.md).
+For integration with Create React App, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/intlayer_with_create_react_app_en.md).
 
 ### Integrating with Vite + React
 
-For integration with Vite + React, refer to the [setup guide](https://github.com/aypineau/intlayer/blob/main/docs/docs/intlayer_with_vite+react_en.md).
+For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/intlayer_with_vite+react_en.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/docs/content_declaration/get_started_en.md), wherever these files are declared in your project.
+Each time you make a change using Intlayer Editor, the server automatically inserts your changes into your [Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/content_declaration/get_started_en.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.
 
@@ -54,11 +54,11 @@ npm install intlayer-editor -D
 ```
 
 ```bash
-yarn install intlayer-editor -D
+yarn add intlayer-editor -D
 ```
 
 ```bash
-pnpm install intlayer-editor -D
+pnpm add intlayer-editor -D
 ```
 
 In your Intlayer configuration file, you can customize the editor settings:
@@ -73,7 +73,7 @@ const config: IntlayerConfig = {
 };
 ```
 
-To see all available parameters, refer to the [configuration documentation](https://github.com/aypineau/intlayer/blob/main/docs/docs/configuration_en.md).
+To see all available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/configuration_en.md).
 
 ### Start Editing
 
@@ -105,6 +105,6 @@ To start both the Next.js server and the Intlayer Editor simultaneously, you can
 
 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)
+![Hovering over content](https://github.com/aymericzip/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 → ContentEditionLayout.cjs}

@@ -32,7 +32,7 @@ const ContentEditionLayout = ({
   localeList,
   editorEnabled = true
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ContentEditorProvider.IntlayerEditorProvider, { editorEnabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ContentEditorProvider.IntlayerEditorProvider, { editorEnabled, children: [
     children,
     editorEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -45,7 +45,7 @@ const ContentEditionLayout = ({
       ),
       /* @__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/ContentEditionLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/ContentEditionLayout.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { FC, ReactNode } from 'react';\nimport { IntlayerEditorProvider } from './ContentEditorProvider';\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  editorEnabled?: boolean;\n};\n\nexport const ContentEditionLayout: FC<ContentEditionLayoutProps> = ({\n  children,\n  locale,\n  setLocale,\n  localeList,\n  editorEnabled = true,\n}) => {\n  return (\n    <IntlayerEditorProvider editorEnabled={editorEnabled}>\n      {children}\n\n      {editorEnabled && (\n        <>\n          <DictionaryEditionDrawerController\n            locale={locale}\n            localeList={localeList}\n            setLocale={setLocale}\n          />\n          <DictionaryListDrawer />\n        </>\n      )}\n    </IntlayerEditorProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BQ;AAxBR,mCAAuC;AACvC,qCAAkD;AAClD,kCAAqC;AAU9B,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,MAAM;AACJ,SACE,6CAAC,uDAAuB,eACrB;AAAA;AAAA,IAEA,iBACC,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,oDAAqB;AAAA,OACxB;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/cjs/{client/ContentEditorProvider.cjs → ContentEditorProvider.cjs}

@@ -37,7 +37,15 @@ const {
 const IntlayerEditorProvider = ({
   children,
   editorEnabled = enabled
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IntlayerEditorContext.Provider, { value: { editorEnabled }, children });
+}) => {
+  const memoValue = (0, import_react.useMemo)(
+    () => ({
+      editorEnabled
+    }),
+    [editorEnabled]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IntlayerEditorContext.Provider, { value: memoValue, children });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   IntlayerEditorContext,

package/dist/cjs/ContentEditorProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/ContentEditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  type FC,\n  useMemo,\n} from 'react';\n\ntype IntlayerEditorValue = {\n  editorEnabled: boolean;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const IntlayerEditorContext = createContext<IntlayerEditorValue>({\n  editorEnabled: false,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useIntlayerEditorContext = () => useContext(IntlayerEditorContext);\n\nexport type IntlayerEditorProviderProps = PropsWithChildren<{\n  editorEnabled?: boolean;\n}>;\n\nconst {\n  editor: { enabled },\n} = getConfiguration();\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const IntlayerEditorProvider: FC<IntlayerEditorProviderProps> = ({\n  children,\n  editorEnabled = enabled,\n}) => {\n  const memoValue = useMemo(\n    () => ({\n      editorEnabled,\n    }),\n    [editorEnabled]\n  );\n\n  return (\n    <IntlayerEditorContext.Provider value={memoValue}>\n      {children}\n    </IntlayerEditorContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDI;AAhDJ,oBAAiC;AACjC,mBAMO;AASA,MAAM,4BAAwB,4BAAmC;AAAA,EACtE,eAAe;AACjB,CAAC;AAKM,MAAM,2BAA2B,UAAM,yBAAW,qBAAqB;AAM9E,MAAM;AAAA,EACJ,QAAQ,EAAE,QAAQ;AACpB,QAAI,gCAAiB;AAKd,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA,gBAAgB;AAClB,MAAM;AACJ,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,SACE,4CAAC,sBAAsB,UAAtB,EAA+B,OAAO,WACpC,UACH;AAEJ;","names":[]}

package/dist/cjs/{client/ContentSelectorWrapper.cjs → ContentSelectorWrapper.cjs}

@@ -35,8 +35,9 @@ const ContentSelectorWrapper = ({
   keyPath
 }) => {
   const { open, getEditedContentValue, focusedContent, isOpen } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
-  const editedValue = getEditedContentValue(dictionaryPath, keyPath);
+  const editedValue = getEditedContentValue(dictionaryId, keyPath);
   const { editorEnabled } = (0, import_react.useContext)(import_ContentEditorProvider.IntlayerEditorContext);
+  const [displayedChildren, setDisplayedChildren] = (0, import_react.useState)(children);
   const handleSelect = (0, import_react.useCallback)(
     () => open({
       dictionaryId,
@@ -46,18 +47,15 @@ const ContentSelectorWrapper = ({
     [dictionaryId, dictionaryPath, keyPath, open]
   );
   const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false;
+  (0, import_react.useEffect)(() => {
+    if (editorEnabled && editedValue && typeof editedValue === "string") {
+      setDisplayedChildren(editedValue);
+    }
+  }, [editedValue, editorEnabled]);
   if (!editorEnabled) {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design_system.ContentSelector,
-    {
-      onSelect: handleSelect,
-      isSelecting: isSelected,
-      popoverContent: "Long press to edit",
-      children: editedValue ?? children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.ContentSelector, { onSelect: handleSelect, isSelecting: isSelected, children: displayedChildren });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/ContentSelectorWrapper.cjs.map

@@ -0,0 +1 @@
+{"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 {\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { IntlayerEditorContext } from './ContentEditorProvider';\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(dictionaryId, keyPath);\n  const { editorEnabled } = useContext(IntlayerEditorContext);\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\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  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (editorEnabled && editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    }\n  }, [editedValue, editorEnabled]);\n\n  if (!editorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DI;AA7DJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAOO;AACP,mCAAsC;AACtC,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,cAAc,OAAO;AAC/D,QAAM,EAAE,cAAc,QAAI,yBAAW,kDAAqB;AAC1D,QAAM,CAAC,mBAAmB,oBAAoB,QAC5C,uBAAoB,QAAQ;AAE9B,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,8BAAU,MAAM;AAEd,QAAI,iBAAiB,eAAe,OAAO,gBAAgB,UAAU;AACnE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}

package/dist/cjs/{client/DictionaryEditionDrawer → DictionaryEditionDrawer}/DictionaryEditionDrawer.cjs

@@ -1,10 +1,8 @@
 "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)
@@ -18,65 +16,77 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
+  DictionaryEditionDrawerController: () => DictionaryEditionDrawerController
 });
 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_hooks = require("@intlayer/design-system/hooks");
+var import_react = require("react");
+var import_useDictionaryListDrawer = require('../DictionaryListDrawer/useDictionaryListDrawer.cjs');
 var import_useDictionaryEditionDrawer = require('./useDictionaryEditionDrawer.cjs');
-var import_useFocusContentStore = require('./useFocusContentStore.cjs');
-const DictionaryEditionDrawerContent = ({ focusedContent, locale, identifier }) => {
+const DictionaryEditionDrawerContent = ({ locale, identifier }) => {
+  const [keyPathEditionModal, setKeyPathEditionModal] = (0, import_react.useState)(null);
   const {
     setFocusedContent,
+    setDictionariesRecord,
     editContentRequest,
     editedContent,
+    focusedContent,
     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 { all: dictionaries } = (0, import_hooks.useGetAllDictionaries)();
+  (0, import_react.useEffect)(() => {
+    if (dictionaries) {
+      setDictionariesRecord(dictionaries);
     }
-  );
+  }, [setDictionariesRecord, dictionaries]);
+  const dictionaryId = focusedContent?.dictionaryId;
+  if (!dictionaryId) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "No dictionary focused" });
+  const dictionary = dictionaries[dictionaryId];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_design_system.Modal,
+      {
+        isOpen: keyPathEditionModal !== null,
+        onClose: () => setKeyPathEditionModal(null),
+        hasCloseButton: true,
+        title: "Edit field",
+        size: "xl",
+        children: dictionary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.DictionaryFieldEditor, { dictionary })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_design_system.DictionaryEditor,
+      {
+        dictionary,
+        locale,
+        focusedKeyPath: focusedContent.keyPath,
+        editedContent: editedContent[dictionaryId],
+        onFocusKeyPath: (keyPath) => setFocusedContent({ ...focusedContent, keyPath }),
+        onContentChange: (keyPath, newValue) => addEditedContent(dictionaryId, newValue, keyPath),
+        onValidEdition: editContentRequest,
+        onCancelEdition: () => clearEditedDictionaryContent(dictionaryId),
+        onClickEdit: setKeyPathEditionModal
+      }
+    )
+  ] });
 };
-const getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
 const DictionaryEditionDrawer = ({
   locale,
   localeList,
   setLocale,
   dictionaryId
 }) => {
-  const id = getDrawerIdentifier(dictionaryId);
+  const id = (0, import_useDictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
   const { focusedContent, close } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
-  const { open: openDictionaryListDrawer } = (0, import_DictionaryListDrawer.useDictionaryListDrawer)();
+  const { open: openDictionaryListDrawer } = (0, import_useDictionaryListDrawer.useDictionaryListDrawer)();
   const handleOnBack = () => {
     close();
     openDictionaryListDrawer();
@@ -110,7 +120,7 @@ const DictionaryEditionDrawer = ({
   );
 };
 const DictionaryEditionDrawerController = ({ locale, localeList, setLocale }) => {
-  const focusedContent = (0, import_useFocusContentStore.useEditionPanelStore)((s) => s.focusedContent);
+  const focusedContent = (0, import_design_system.useEditionPanelStore)((s) => s.focusedContent);
   const dictionaryId = focusedContent?.dictionaryId;
   if (!dictionaryId) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
@@ -129,7 +139,6 @@ const DictionaryEditionDrawerController = ({ locale, localeList, setLocale }) =>
 0 && (module.exports = {
   DictionaryEditionDrawer,
   DictionaryEditionDrawerContent,
-  DictionaryEditionDrawerController,
-  getDrawerIdentifier
+  DictionaryEditionDrawerController
 });
 //# sourceMappingURL=DictionaryEditionDrawer.cjs.map

package/dist/cjs/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, KeyPath } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  Modal,\n  useEditionPanelStore,\n  DictionaryFieldEditor,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useEffect, useState, type FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n  getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ locale, identifier }) => {\n  const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n    KeyPath[] | null\n  >(null);\n  const {\n    setFocusedContent,\n    setDictionariesRecord,\n    editContentRequest,\n    editedContent,\n    focusedContent,\n    addEditedContent,\n    clearEditedDictionaryContent,\n  } = useDictionaryEditionDrawer(identifier);\n  const { all: dictionaries } = useGetAllDictionaries();\n\n  useEffect(() => {\n    if (dictionaries) {\n      setDictionariesRecord(dictionaries);\n    }\n  }, [setDictionariesRecord, dictionaries]);\n\n  const dictionaryId = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) return <>No dictionary focused</>;\n\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n\n  return (\n    <>\n      <Modal\n        isOpen={keyPathEditionModal !== null}\n        onClose={() => setKeyPathEditionModal(null)}\n        hasCloseButton\n        title=\"Edit field\"\n        size=\"xl\"\n      >\n        {dictionary && <DictionaryFieldEditor dictionary={dictionary} />}\n      </Modal>\n      <DictionaryEditor\n        dictionary={dictionary}\n        locale={locale}\n        focusedKeyPath={focusedContent.keyPath}\n        editedContent={editedContent[dictionaryId]}\n        onFocusKeyPath={(keyPath) =>\n          setFocusedContent({ ...focusedContent, keyPath })\n        }\n        onContentChange={(keyPath, newValue) =>\n          addEditedContent(dictionaryId, newValue, keyPath)\n        }\n        onValidEdition={editContentRequest}\n        onCancelEdition={() => clearEditedDictionaryContent(dictionaryId)}\n        onClickEdit={setKeyPathEditionModal}\n      />\n    </>\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\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 <></>;\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;AAoD4B;AAhD5B,2BAOO;AACP,mBAAsC;AACtC,mBAA6C;AAC7C,qCAAwC;AACxC,wCAIO;AAQA,MAAM,iCAET,CAAC,EAAE,QAAQ,WAAW,MAAM;AAC9B,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAEpD,IAAI;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,UAAU;AACzC,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AAEpD,8BAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,2EAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAM;AAAA,QACN,MAAK;AAAA,QAEJ,wBAAc,4CAAC,8CAAsB,YAAwB;AAAA;AAAA,IAChE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,eAAe;AAAA,QAC/B,eAAe,cAAc,YAAY;AAAA,QACzC,gBAAgB,CAAC,YACf,kBAAkB,EAAE,GAAG,gBAAgB,QAAQ,CAAC;AAAA,QAElD,iBAAiB,CAAC,SAAS,aACzB,iBAAiB,cAAc,UAAU,OAAO;AAAA,QAElD,gBAAgB;AAAA,QAChB,iBAAiB,MAAM,6BAA6B,YAAY;AAAA,QAChE,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAK,uDAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,QAAI,wDAAwB;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,2CAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,2EAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/cjs/{client/DictionaryEditionDrawer → DictionaryEditionDrawer}/index.cjs

@@ -17,11 +17,9 @@ 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')
+  ...require('./useDictionaryEditionDrawer.cjs')
 });
 //# sourceMappingURL=index.cjs.map

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

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

package/dist/cjs/{client/DictionaryEditionDrawer → DictionaryEditionDrawer}/useDictionaryEditionDrawer.cjs

@@ -18,30 +18,31 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useDictionaryEditionDrawer_exports = {};
 __export(useDictionaryEditionDrawer_exports, {
+  getDrawerIdentifier: () => getDrawerIdentifier,
   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 getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
 const useDictionaryEditionDrawer = (dictionaryId) => {
-  const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+  const id = getDrawerIdentifier(dictionaryId);
   const { isOpen, open, close } = (0, import_design_system.useRightDrawerStore)(id)();
   const {
     editedContent,
+    setDictionariesRecord,
     getEditedContentValue,
     addEditedContent,
     clearEditedDictionaryContent
-  } = (0, import_useEditedContentStore.useEditedContentStore)((s) => ({
+  } = (0, import_design_system.useEditedContentStore)((s) => ({
     editedContent: s.editedContent,
+    setDictionariesRecord: s.setDictionariesRecord,
     addEditedContent: s.addEditedContent,
     getEditedContentValue: s.getEditedContentValue,
     clearEditedDictionaryContent: s.clearEditedDictionaryContent
   }));
-  const { setFocusedContent, focusedContent } = (0, import_useFocusContentStore.useEditionPanelStore)((s) => ({
+  const { setFocusedContent, focusedContent } = (0, import_design_system.useEditionPanelStore)((s) => ({
     focusedContent: s.focusedContent,
     setFocusedContent: s.setFocusedContent
   }));
@@ -62,6 +63,7 @@ const useDictionaryEditionDrawer = (dictionaryId) => {
     isOpen,
     focusedContent,
     setFocusedContent,
+    setDictionariesRecord,
     open: openDictionaryEditionDrawer,
     close,
     getEditedContentValue,
@@ -72,7 +74,7 @@ const useDictionaryEditionDrawer = (dictionaryId) => {
   };
 };
 const useDictionaryEditionDrawerControl = () => {
-  const setFocusedContent = (0, import_useFocusContentStore.useEditionPanelStore)((s) => s.setFocusedContent);
+  const setFocusedContent = (0, import_design_system.useEditionPanelStore)((s) => s.setFocusedContent);
   const open = ({
     dictionaryId,
     dictionaryPath,
@@ -83,11 +85,11 @@ const useDictionaryEditionDrawerControl = () => {
       dictionaryPath,
       keyPath
     });
-    const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+    const id = getDrawerIdentifier(dictionaryId);
     (0, import_design_system.useRightDrawerStore)(id).getState().open();
   };
   const close = (dictionaryId) => {
-    const id = (0, import_DictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
+    const id = getDrawerIdentifier(dictionaryId);
     (0, import_design_system.useRightDrawerStore)(id).getState().close();
   };
   return {
@@ -97,6 +99,7 @@ const useDictionaryEditionDrawerControl = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getDrawerIdentifier,
   useDictionaryEditionDrawer,
   useDictionaryEditionDrawerControl
 });

package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/client/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n  useRightDrawerStore,\n  useEditedContentStore,\n  useEditionPanelStore,\n  type DictionaryContent,\n} from '@intlayer/design-system';\nimport { useEditorServer } from '../useEditorServer';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryPath?: DictionaryPath;\n  dictionaryId: string;\n  keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n  focusedContent: FileContent | null;\n  setFocusedContent: (content: FileContent | null) => void;\n  isOpen: boolean;\n  open: (content: FileContent) => void;\n  close: () => void;\n  editContentRequest: () => Promise<void>;\n  editedContent: DictionaryContent;\n  addEditedContent: (\n    dictionaryId: DictionaryId,\n    newValue: DictionaryValue,\n    keyPath: KeyPath[]\n  ) => void;\n  setDictionariesRecord: (\n    dictionariesRecord: Record<DictionaryId, Dictionary>\n  ) => void;\n  getEditedContentValue: (\n    dictionaryId: DictionaryId,\n    keyPath: KeyPath[]\n  ) => DictionaryValue | undefined;\n  clearEditedDictionaryContent: (dictionaryPath: DictionaryPath) => void;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n  dictionaryId: string;\n  dictionaryPath?: string;\n  keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n  dictionaryId: string\n): DictionaryEditionDrawer => {\n  const id = getDrawerIdentifier(dictionaryId);\n  const { isOpen, open, close } = useRightDrawerStore(id)();\n  const {\n    editedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    addEditedContent,\n    clearEditedDictionaryContent,\n  } = useEditedContentStore((s) => ({\n    editedContent: s.editedContent,\n    setDictionariesRecord: s.setDictionariesRecord,\n    addEditedContent: s.addEditedContent,\n    getEditedContentValue: s.getEditedContentValue,\n    clearEditedDictionaryContent: s.clearEditedDictionaryContent,\n  }));\n  const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({\n    focusedContent: s.focusedContent,\n    setFocusedContent: s.setFocusedContent,\n  }));\n  const { editContentRequest } = useEditorServer();\n\n  const openDictionaryEditionDrawer = ({\n    dictionaryId,\n    dictionaryPath,\n    keyPath = [],\n  }: OpenDictionaryEditionDrawerProps) => {\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath,\n      keyPath,\n    });\n\n    open();\n  };\n\n  return {\n    isOpen,\n    focusedContent,\n    setFocusedContent,\n    setDictionariesRecord,\n    open: openDictionaryEditionDrawer,\n    close,\n    getEditedContentValue,\n    editContentRequest,\n    editedContent,\n    addEditedContent,\n    clearEditedDictionaryContent,\n  };\n};\n\ntype DictionaryEditionDrawerControl = {\n  open: (content: FileContent) => void;\n  close: (dictionaryId: string) => void;\n};\n\nexport const useDictionaryEditionDrawerControl =\n  (): DictionaryEditionDrawerControl => {\n    const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);\n\n    const open = ({\n      dictionaryId,\n      dictionaryPath,\n      keyPath = [],\n    }: OpenDictionaryEditionDrawerProps) => {\n      setFocusedContent({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      });\n\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().open();\n    };\n\n    const close = (dictionaryId: string) => {\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().close();\n    };\n\n    return {\n      open,\n      close,\n    };\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAKO;AACP,6BAAgC;AAEzB,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AAwC7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,QAAQ,MAAM,MAAM,QAAI,0CAAoB,EAAE,EAAE;AACxD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4CAAsB,CAAC,OAAO;AAAA,IAChC,eAAe,EAAE;AAAA,IACjB,uBAAuB,EAAE;AAAA,IACzB,kBAAkB,EAAE;AAAA,IACpB,uBAAuB,EAAE;AAAA,IACzB,8BAA8B,EAAE;AAAA,EAClC,EAAE;AACF,QAAM,EAAE,mBAAmB,eAAe,QAAI,2CAAqB,CAAC,OAAO;AAAA,IACzE,gBAAgB,EAAE;AAAA,IAClB,mBAAmB,EAAE;AAAA,EACvB,EAAE;AACF,QAAM,EAAE,mBAAmB,QAAI,wCAAgB;AAE/C,QAAM,8BAA8B,CAAC;AAAA,IACnC,cAAAA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB,cAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,SAAK;AAAA,EACP;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAOO,MAAM,oCACX,MAAsC;AACpC,QAAM,wBAAoB,2CAAqB,CAAC,MAAM,EAAE,iBAAiB;AAEzE,QAAM,OAAO,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,KAAK;AAAA,EAC1C;AAEA,QAAM,QAAQ,CAAC,iBAAyB;AACtC,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,MAAM;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["dictionaryId"]}

package/dist/cjs/{client/DictionaryListDrawer → DictionaryListDrawer}/DictionaryListDrawer.cjs

@@ -1,9 +1,7 @@
 "use strict";
-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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 DictionaryListDrawer_exports = {};
 __export(DictionaryListDrawer_exports, {
@@ -33,37 +23,40 @@ __export(DictionaryListDrawer_exports, {
 module.exports = __toCommonJS(DictionaryListDrawer_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_hooks = require("@intlayer/design-system/hooks");
+var import_lucide_react = require("lucide-react");
 var import_DictionaryEditionDrawer = require('../DictionaryEditionDrawer/index.cjs');
 var import_useDictionaryListDrawer = require('./useDictionaryListDrawer.cjs');
 const DictionaryListDrawer = () => {
-  const dictionaryKeyList = Object.keys(import_dictionaries_entry.default);
+  const { all: dictionaries } = (0, import_hooks.useGetAllDictionaries)();
+  const dictionaryKeyList = Object.keys(dictionaries);
   const { open: openDictionaryEditionDrawer } = (0, import_DictionaryEditionDrawer.useDictionaryEditionDrawerControl)();
   const { close } = (0, import_useDictionaryListDrawer.useDictionaryListDrawer)();
-  const editedContent = (0, import_DictionaryEditionDrawer.useEditedContentStore)((s) => s.editedContent);
+  const editedContent = (0, import_design_system.useEditedContentStore)((s) => s.editedContent);
   const handleClickDictionary = (dictionaryId) => {
-    const { filePath } = import_dictionaries_entry.default[dictionaryId];
+    const { filePath } = dictionaries[dictionaryId];
     close();
     openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });
   };
-  const isDictionaryEdited = (dictionaryId) => {
-    const dictionaryPath = import_dictionaries_entry.default[dictionaryId].filePath;
-    return Object.keys(editedContent).includes(dictionaryPath);
-  };
+  const isDictionaryEdited = (dictionaryId) => Object.keys(editedContent).includes(dictionaryId);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_design_system.RightDrawer,
     {
       title: "Dictionary list",
       identifier: import_useDictionaryListDrawer.dictionaryListDrawerIdentifier,
-      children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.RedirectionButton,
+      children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design_system.Button,
         {
           label: `Open dictionary editor ${dictionaryId}`,
           onClick: () => handleClickDictionary(dictionaryId),
+          variant: "hoverable",
+          color: "text",
+          IconRight: import_lucide_react.ChevronRight,
+          size: "md",
+          isFullWidth: true,
           children: isDictionaryEdited(dictionaryId) ? `\u270E ${dictionaryId}` : dictionaryId
-        },
-        dictionaryId
-      ))
+        }
+      ) }, dictionaryId))
     }
   );
 };

package/dist/cjs/DictionaryListDrawer/DictionaryListDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/client/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n  RightDrawer,\n  Button,\n  useEditedContentStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index';\nimport {\n  dictionaryListDrawerIdentifier,\n  useDictionaryListDrawer,\n} from './useDictionaryListDrawer';\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = Object.keys(dictionaries) as Locales[];\n  const { open: openDictionaryEditionDrawer } =\n    useDictionaryEditionDrawerControl();\n  const { close } = useDictionaryListDrawer();\n  const editedContent = useEditedContentStore((s) => s.editedContent);\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    const { filePath } = dictionaries[dictionaryId];\n\n    close();\n    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });\n  };\n\n  const isDictionaryEdited = (dictionaryId: string) =>\n    Object.keys(editedContent).includes(dictionaryId);\n\n  return (\n    <RightDrawer\n      title=\"Dictionary list\"\n      identifier={dictionaryListDrawerIdentifier}\n    >\n      {dictionaryKeyList.map((dictionaryId) => (\n        <div key={dictionaryId}>\n          <Button\n            label={`Open dictionary editor ${dictionaryId}`}\n            onClick={() => handleClickDictionary(dictionaryId)}\n            variant=\"hoverable\"\n            color=\"text\"\n            IconRight={ChevronRight}\n            size=\"md\"\n            isFullWidth\n          >\n            {isDictionaryEdited(dictionaryId)\n              ? `✎ ${dictionaryId}`\n              : dictionaryId}\n          </Button>\n        </div>\n      ))}\n    </RightDrawer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,2BAIO;AACP,mBAAsC;AACtC,0BAA6B;AAE7B,qCAAkD;AAClD,qCAGO;AAEA,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AACpD,QAAM,oBAAoB,OAAO,KAAK,YAAY;AAClD,QAAM,EAAE,MAAM,4BAA4B,QACxC,kEAAkC;AACpC,QAAM,EAAE,MAAM,QAAI,wDAAwB;AAC1C,QAAM,oBAAgB,4CAAsB,CAAC,MAAM,EAAE,aAAa;AAElE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAE9C,UAAM;AACN,gCAA4B,EAAE,cAAc,gBAAgB,SAAS,CAAC;AAAA,EACxE;AAEA,QAAM,qBAAqB,CAAC,iBAC1B,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/DictionaryListDrawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/client/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './useDictionaryListDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;AACA,yCAAc,sCADd;","names":[]}

package/dist/cjs/DictionaryListDrawer/useDictionaryListDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/client/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = () =>\n  useRightDrawerStore(dictionaryListDrawerIdentifier)();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B,UACrC,0CAAoB,8BAA8B,EAAE;","names":[]}

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer/index';\nexport * from './DictionaryListDrawer/index';\nexport * from './ContentEditionLayout';\nexport * from './useEditorServer';\nexport * from './renderContentEditor';\nexport * from './ContentEditorProvider';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,4CAAd;AACA,2BAAc,yCADd;AAEA,2BAAc,mCAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,kCAJd;AAKA,2BAAc,oCALd;","names":[]}

package/dist/cjs/{client/renderContentEditor.cjs → renderContentEditor.cjs}

@@ -29,16 +29,22 @@ const {
 } = (0, import_client.getConfiguration)();
 const IntlayerEditorElement = ({
   content,
+  isContentSelectable,
   ...props
 }) => {
-  if (enabled) {
+  if (enabled && isContentSelectable) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ContentSelectorWrapper.ContentSelectorWrapper, { ...props, children: content });
   }
   return content;
 };
-IntlayerEditorElement.content = "";
-const renderIntlayerEditor = (data) => {
-  const Result = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IntlayerEditorElement, { ...data });
+const renderIntlayerEditor = (data, isContentSelectable) => {
+  const Result = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    IntlayerEditorElement,
+    {
+      ...data,
+      isContentSelectable
+    }
+  );
   return { ...Result, value: data.content };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/renderContentEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/renderContentEditor.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC, ReactNode } from 'react';\nimport { ContentSelectorWrapper } from './ContentSelectorWrapper';\n\nconst {\n  editor: { enabled },\n} = getConfiguration();\n\nexport type IntlayerEditorElementProps = {\n  content: string;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n  isContentSelectable: boolean;\n};\n\nconst IntlayerEditorElement: FC<IntlayerEditorElementProps> = ({\n  content,\n  isContentSelectable,\n  ...props\n}) => {\n  if (enabled && isContentSelectable) {\n    return (\n      <ContentSelectorWrapper {...props}>{content}</ContentSelectorWrapper>\n    );\n  }\n  return content;\n};\n\nexport type RenderIntlayerEditorResult = ReactNode & { value: string };\n\nexport const renderIntlayerEditor = (\n  data: IntlayerEditorElementProps,\n  isContentSelectable: boolean\n): RenderIntlayerEditorResult => {\n  const Result = (\n    <IntlayerEditorElement\n      {...data}\n      isContentSelectable={isContentSelectable}\n    />\n  );\n\n  return { ...Result, value: data.content };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBM;AAxBN,oBAAiC;AAGjC,oCAAuC;AAEvC,MAAM;AAAA,EACJ,QAAQ,EAAE,QAAQ;AACpB,QAAI,gCAAiB;AAUrB,MAAM,wBAAwD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,WAAW,qBAAqB;AAClC,WACE,4CAAC,wDAAwB,GAAG,OAAQ,mBAAQ;AAAA,EAEhD;AACA,SAAO;AACT;AAIO,MAAM,uBAAuB,CAClC,MACA,wBAC+B;AAC/B,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAGF,SAAO,EAAE,GAAG,QAAQ,OAAO,KAAK,QAAQ;AAC1C;","names":[]}

package/dist/cjs/{client/useEditorServer.cjs → useEditorServer.cjs}

@@ -22,17 +22,17 @@ __export(useEditorServer_exports, {
 });
 module.exports = __toCommonJS(useEditorServer_exports);
 var import_client = require("@intlayer/config/client");
-var import_useEditedContentStore = require('./DictionaryEditionDrawer/useEditedContentStore.cjs');
+var import_design_system = require("@intlayer/design-system");
 const useEditorServer = () => {
-  const { editedContent, clearEditedContent } = (0, import_useEditedContentStore.useEditedContentStore)((s) => ({
+  const { editedContent, clearEditedContent } = (0, import_design_system.useEditedContentStore)((s) => ({
     editedContent: s.editedContent,
     clearEditedContent: s.clearEditedContent
   }));
   const editContentRequest = async () => {
     const {
-      editor: { port }
+      editor: { backendURL }
     } = (0, import_client.getConfiguration)();
-    await fetch(`http://localhost:${port}`, {
+    await fetch(backendURL, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"

package/dist/cjs/useEditorServer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/useEditorServer.ts"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport { useEditedContentStore } from '@intlayer/design-system';\n\nexport const useEditorServer = () => {\n  const { editedContent, clearEditedContent } = useEditedContentStore((s) => ({\n    editedContent: s.editedContent,\n    clearEditedContent: s.clearEditedContent,\n  }));\n\n  const editContentRequest = async () => {\n    const {\n      editor: { backendURL },\n    } = getConfiguration();\n\n    await fetch(backendURL, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify(editedContent),\n    })\n      .then((response) => {\n        if (!response.ok) {\n          throw new Error('Failed to edit content');\n        }\n        clearEditedContent();\n      })\n      .catch((error) => {\n        console.error('Failed to edit content:', error);\n      });\n  };\n\n  return { editContentRequest };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiC;AACjC,2BAAsC;AAE/B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,eAAe,mBAAmB,QAAI,4CAAsB,CAAC,OAAO;AAAA,IAC1E,eAAe,EAAE;AAAA,IACjB,oBAAoB,EAAE;AAAA,EACxB,EAAE;AAEF,QAAM,qBAAqB,YAAY;AACrC,UAAM;AAAA,MACJ,QAAQ,EAAE,WAAW;AAAA,IACvB,QAAI,gCAAiB;AAErB,UAAM,MAAM,YAAY;AAAA,MACtB,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,MACA,MAAM,KAAK,UAAU,aAAa;AAAA,IACpC,CAAC,EACE,KAAK,CAAC,aAAa;AAClB,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,wBAAwB;AAAA,MAC1C;AACA,yBAAmB;AAAA,IACrB,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,cAAQ,MAAM,2BAA2B,KAAK;AAAA,IAChD,CAAC;AAAA,EACL;AAEA,SAAO,EAAE,mBAAmB;AAC9B;","names":[]}

package/dist/esm/{client/ContentEditionLayout.mjs → ContentEditionLayout.mjs}

@@ -9,7 +9,7 @@ const ContentEditionLayout = ({
   localeList,
   editorEnabled = true
 }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(IntlayerEditorProvider, { editorEnabled, children: [
+  return /* @__PURE__ */ jsxs(IntlayerEditorProvider, { editorEnabled, children: [
     children,
     editorEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -22,7 +22,7 @@ const ContentEditionLayout = ({
       ),
       /* @__PURE__ */ jsx(DictionaryListDrawer, {})
     ] })
-  ] }) });
+  ] });
 };
 export {
   ContentEditionLayout

package/dist/esm/ContentEditionLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/ContentEditionLayout.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { FC, ReactNode } from 'react';\nimport { IntlayerEditorProvider } from './ContentEditorProvider';\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  editorEnabled?: boolean;\n};\n\nexport const ContentEditionLayout: FC<ContentEditionLayoutProps> = ({\n  children,\n  locale,\n  setLocale,\n  localeList,\n  editorEnabled = true,\n}) => {\n  return (\n    <IntlayerEditorProvider editorEnabled={editorEnabled}>\n      {children}\n\n      {editorEnabled && (\n        <>\n          <DictionaryEditionDrawerController\n            locale={locale}\n            localeList={localeList}\n            setLocale={setLocale}\n          />\n          <DictionaryListDrawer />\n        </>\n      )}\n    </IntlayerEditorProvider>\n  );\n};\n"],"mappings":"AA0BQ,mBACE,KADF;AAxBR,SAAS,8BAA8B;AACvC,SAAS,yCAAyC;AAClD,SAAS,4BAA4B;AAU9B,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,MAAM;AACJ,SACE,qBAAC,0BAAuB,eACrB;AAAA;AAAA,IAEA,iBACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,wBAAqB;AAAA,OACxB;AAAA,KAEJ;AAEJ;","names":[]}