intlayer-editor 2.0.0 → 2.1.1

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/docs/intlayer_with_nextjs_en.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/docs/intlayer_with_create_react_app_en.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/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.
+
+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/docs/configuration_en.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,23 +22,31 @@ __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_ContentEditorProvider = require('./ContentEditorProvider.cjs');
+var import_DictionaryEditionDrawer = require('./DictionaryEditionDrawer/index.cjs');
+var import_DictionaryListDrawer = require('./DictionaryListDrawer/index.cjs');
 const ContentEditionLayout = ({
   children,
   locale,
   setLocale,
-  localeList
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-  children,
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_EditionPanel.EditionPanel,
-    {
-      locale,
-      localeList,
-      setLocale
-    }
-  )
-] });
+  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: [
+    children,
+    editorEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        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 = {
   ContentEditionLayout

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 { 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    <>\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};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BU;AAzBV,mCAAuC;AACvC,qCAAkD;AAClD,kCAAqC;AAU9B,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,MAAM;AACJ,SACE,2EACE,uDAAC,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,GACF;AAEJ;","names":[]}

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

@@ -6,6 +6,7 @@ type ContentEditionLayoutProps = {
     locale: Locales;
     localeList: Locales[];
     setLocale: (locale: Locales) => void;
+    editorEnabled?: boolean;
 };
 declare const ContentEditionLayout: FC<ContentEditionLayoutProps>;
 

package/dist/cjs/client/ContentEditorProvider.cjs

@@ -0,0 +1,47 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ContentEditorProvider_exports = {};
+__export(ContentEditorProvider_exports, {
+  IntlayerEditorContext: () => IntlayerEditorContext,
+  IntlayerEditorProvider: () => IntlayerEditorProvider,
+  useIntlayerEditorContext: () => useIntlayerEditorContext
+});
+module.exports = __toCommonJS(ContentEditorProvider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_client = require("@intlayer/config/client");
+var import_react = require("react");
+const IntlayerEditorContext = (0, import_react.createContext)({
+  editorEnabled: false
+});
+const useIntlayerEditorContext = () => (0, import_react.useContext)(IntlayerEditorContext);
+const {
+  editor: { enabled }
+} = (0, import_client.getConfiguration)();
+const IntlayerEditorProvider = ({
+  children,
+  editorEnabled = enabled
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IntlayerEditorContext.Provider, { value: { editorEnabled }, children });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IntlayerEditorContext,
+  IntlayerEditorProvider,
+  useIntlayerEditorContext
+});
+//# sourceMappingURL=ContentEditorProvider.cjs.map

package/dist/cjs/client/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} 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  <IntlayerEditorContext.Provider value={{ editorEnabled }}>\n    {children}\n  </IntlayerEditorContext.Provider>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCE;AAvCF,oBAAiC;AACjC,mBAKO;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,MACE,4CAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,cAAc,GACpD,UACH;","names":[]}

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { PropsWithChildren, FC } from 'react';
+
+type IntlayerEditorValue = {
+    editorEnabled: boolean;
+};
+/**
+ * Context that store the current locale on the client side
+ */
+declare const IntlayerEditorContext: react.Context<IntlayerEditorValue>;
+/**
+ * Hook that provides the current locale
+ */
+declare const useIntlayerEditorContext: () => IntlayerEditorValue;
+type IntlayerEditorProviderProps = PropsWithChildren & {
+    editorEnabled?: boolean;
+};
+/**
+ * Provider that store the current locale on the client side
+ */
+declare const IntlayerEditorProvider: FC<IntlayerEditorProviderProps>;
+
+export { IntlayerEditorContext, IntlayerEditorProvider, type IntlayerEditorProviderProps, useIntlayerEditorContext };

package/dist/cjs/client/ContentSelectorWrapper.cjs

@@ -23,24 +23,41 @@ __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_ContentEditorProvider = require('./ContentEditorProvider.cjs');
+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 { editorEnabled } = (0, import_react.useContext)(import_ContentEditorProvider.IntlayerEditorContext);
+  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;
+  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
+    }
+  );
 };
 // 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, useContext, type FC, type ReactNode } 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(dictionaryPath, keyPath);\n  const { editorEnabled } = useContext(IntlayerEditorContext);\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  if (!editorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector\n      onSelect={handleSelect}\n      isSelecting={isSelected}\n      popoverContent=\"Long press to edit\"\n    >\n      {editedValue ?? children}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CI;AA7CJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAAiE;AACjE,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,gBAAgB,OAAO;AACjE,QAAM,EAAE,cAAc,QAAI,yBAAW,kDAAqB;AAE1D,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,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,aAAa;AAAA,MACb,gBAAe;AAAA,MAEd,yBAAe;AAAA;AAAA,EAClB;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 };