@intlayer/design-system 3.5.4 → 3.5.6

package/dist/components/DictionaryFieldEditor/EditorView/TextEditor.mjs

@@ -1,36 +1,90 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../../jsx-runtime-DaNGiM0W.js";
-import { getConfiguration } from "@intlayer/config/client";
 import { NodeType, getLocaleName } from "@intlayer/core";
-import { X, Plus } from "lucide-react";
+import { WandSparkles, X, Plus } from "lucide-react";
 import { createElement } from "react";
 import { useDictionary } from "react-intlayer";
 import { u as useShallow } from "../../../shallow-m9BpCkKh.js";
+import "../../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
+import "../../../hooks/useAsync/useAsyncStateStore.mjs";
+import { useAuditContentDeclarationField } from "../../../hooks/intlayerAPIHooks.mjs";
+import "@intlayer/dictionaries-entry";
+import "deepmerge";
 import { getSectionType } from "../../../utils/dictionary.mjs";
 import { renameKey } from "../../../utils/object.mjs";
 import { Button } from "../../Button/Button.mjs";
-import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
+import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { useEditedContentStore } from "../../DictionaryEditor/useEditedContentStore.mjs";
 import "../../DictionaryEditor/useEditionPanelStore.mjs";
 import "clsx";
 import "tailwind-merge";
 import "../../EditableField/EditableFieldInput.mjs";
 import "../../EditableField/EditableFieldTextArea.mjs";
-import "../../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
-import "../../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../../../libs/intlayer-api/index.mjs";
-import "../../Toaster/Toast.mjs";
-import "@intlayer/dictionaries-entry";
-import "deepmerge";
 import "../../Form/FormBase.mjs";
 import "../../Form/FormField.mjs";
 import "../../../Form-DhsgC7kB.js";
 import "../../DictionaryEditor/validDictionaryChangeButtons.content.mjs";
 import "zod";
+import "@intlayer/config/client";
+import "fuse.js";
+import "../../Container/index.mjs";
+import "../../DropDown/index.mjs";
+import "../../Input/Input.mjs";
+import "../../Input/InputPassword.mjs";
+import "../../Input/Checkbox.mjs";
+import "../../SwitchSelector/index.mjs";
+import "../../LocaleSwitcherContentDropDown/localeSwitcher.content.mjs";
+import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { EnumKeyInput } from "../EnumKeyInput.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { navigationViewContent } from "../NavigationView/navigationViewNode.content.mjs";
 const traceKeys = ["filePath", "id", "nodeType"];
+const ContentEditorTextArea = ({
+  keyPath,
+  dictionary,
+  locales,
+  ...props
+}) => {
+  const addEditedContent = useEditedContentStore(
+    useShallow((s) => s.addEditedContent)
+  );
+  const { auditContentDeclarationField, isLoading: isAuditing } = useAuditContentDeclarationField();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ContentEditorTextArea$1,
+    {
+      variant: "default",
+      onContentChange: (newValue) => addEditedContent(dictionary.key, newValue, keyPath),
+      additionalButtons: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          Icon: WandSparkles,
+          label: "Audit",
+          variant: "hoverable",
+          size: "icon-sm",
+          color: "text",
+          className: "cursor-pointer hover:scale-110",
+          isLoading: isAuditing,
+          onClick: () => {
+            auditContentDeclarationField({
+              fileContent: JSON.stringify(dictionary),
+              keyPath,
+              locales
+            }).then((response) => {
+              if (!response.data) return;
+              try {
+                const editedContent = response.data.fileContent;
+                addEditedContent(dictionary.key, editedContent, keyPath);
+              } catch (error) {
+                console.error(error);
+              }
+            });
+          }
+        }
+      ),
+      ...props
+    }
+  );
+};
 const createReactElement = (element) => {
   if (typeof element === "string") {
     return element;
@@ -59,31 +113,35 @@ const createReactElement = (element) => {
 const TranslationTextEditor = ({
   section,
   keyPath,
-  dictionaryKey
+  dictionary,
+  locales
 }) => {
-  const { locales } = getConfiguration().internationalization;
-  const addEditedContent = useEditedContentStore(
-    useShallow((s) => s.addEditedContent)
+  const { selectedLocales, availableLocales } = useLocaleSwitcherContent();
+  const sectionContent = section[NodeType.Translation];
+  const sectionContentKeys = Object.keys(sectionContent);
+  const isFiltered = availableLocales.length > selectedLocales.length;
+  const localesList = isFiltered ? selectedLocales : (
+    // If the translation include content in other locales, we display all of them
+    [.../* @__PURE__ */ new Set([...availableLocales, ...sectionContentKeys])]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: locales.map((translationKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: localesList.map((translationKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "tr",
     {
       className: "border-text dark:border-text-dark w-full border-t-[1.5px]",
       lang: translationKey,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "border-text dark:border-text-dark border-r-[1.5px] p-2", children: getLocaleName(translationKey) }),
+        selectedLocales.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "border-text dark:border-text-dark border-r-[1.5px] p-2", children: getLocaleName(translationKey) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ContentEditorTextArea,
           {
             variant: "default",
             "aria-label": "Edit field",
-            onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, [
+            keyPath: [
               ...keyPath,
-              {
-                type: NodeType.Translation,
-                key: translationKey
-              }
-            ]),
+              { type: NodeType.Translation, key: translationKey }
+            ],
+            dictionary,
+            locales,
             children: section[NodeType.Translation][translationKey]
           }
         ) })
@@ -95,7 +153,8 @@ const TranslationTextEditor = ({
 const EnumerationTextEditor = ({
   section,
   keyPath,
-  dictionaryKey
+  dictionary,
+  locales
 }) => {
   const addEditedContent = useEditedContentStore(
     useShallow((s) => s.addEditedContent)
@@ -119,7 +178,7 @@ const EnumerationTextEditor = ({
                 color: "text",
                 Icon: X,
                 className: "w-16",
-                onClick: () => addEditedContent(dictionaryKey, void 0, [
+                onClick: () => addEditedContent(dictionary.key, void 0, [
                   ...keyPath,
                   {
                     type: NodeType.Enumeration,
@@ -143,7 +202,7 @@ const EnumerationTextEditor = ({
                     ...section,
                     [NodeType.Enumeration]: newValueContent
                   };
-                  addEditedContent(dictionaryKey, newValue, keyPath);
+                  addEditedContent(dictionary.key, newValue, keyPath);
                 }
               }
             )
@@ -153,13 +212,12 @@ const EnumerationTextEditor = ({
             {
               variant: "default",
               "aria-label": "Edit field",
-              onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, [
+              keyPath: [
                 ...keyPath,
-                {
-                  type: NodeType.Enumeration,
-                  key: enumKey
-                }
-              ]),
+                { type: NodeType.Enumeration, key: enumKey }
+              ],
+              dictionary,
+              locales,
               children: section[NodeType.Enumeration][enumKey]
             }
           ) })
@@ -175,7 +233,7 @@ const EnumerationTextEditor = ({
         color: "neutral",
         textAlign: "left",
         onClick: () => addEditedContent(
-          dictionaryKey,
+          dictionary.key,
           "",
           [...keyPath, { type: NodeType.Enumeration, key: "unknown" }],
           false
@@ -190,7 +248,8 @@ const EnumerationTextEditor = ({
 const ArrayTextEditor = ({
   section,
   keyPath,
-  dictionaryKey
+  dictionary,
+  locales
 }) => {
   const addEditedContent = useEditedContentStore(
     useShallow((s) => s.addEditedContent)
@@ -208,15 +267,15 @@ const ArrayTextEditor = ({
             {
               variant: "default",
               "aria-label": "Edit field",
-              onContentChange: (newValue) => {
-                addEditedContent(dictionaryKey, newValue, [
-                  ...keyPath,
-                  {
-                    type: NodeType.Array,
-                    key: index
-                  }
-                ]);
-              },
+              keyPath: [
+                ...keyPath,
+                {
+                  type: NodeType.Array,
+                  key: index
+                }
+              ],
+              dictionary,
+              locales,
               children: subSection
             }
           ) })
@@ -239,7 +298,7 @@ const ArrayTextEditor = ({
               key: section.length
             }
           ];
-          addEditedContent(dictionaryKey, "", newKeyPath, false);
+          addEditedContent(dictionary.key, "", newKeyPath, false);
         },
         Icon: Plus,
         children: addNewElement.text
@@ -250,11 +309,9 @@ const ArrayTextEditor = ({
 const TextEditor = ({
   section,
   keyPath,
-  dictionaryKey
+  dictionary,
+  locales
 }) => {
-  const addEditedContent = useEditedContentStore(
-    useShallow((s) => s.addEditedContent)
-  );
   const { tsxNotEditable } = useDictionary(navigationViewContent);
   const nodeType = getSectionType(section);
   const isEditableSection = getIsEditableSection(section);
@@ -270,9 +327,10 @@ const TextEditor = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         TranslationTextEditor,
         {
-          dictionaryKey,
+          dictionary,
           keyPath,
-          section
+          section,
+          locales
         }
       );
     }
@@ -280,9 +338,10 @@ const TextEditor = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         EnumerationTextEditor,
         {
-          dictionaryKey,
+          dictionary,
           keyPath,
-          section
+          section,
+          locales
         }
       );
     }
@@ -290,9 +349,10 @@ const TextEditor = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         ArrayTextEditor,
         {
-          dictionaryKey,
+          dictionary,
           keyPath,
-          section
+          section,
+          locales
         }
       );
     }
@@ -303,7 +363,9 @@ const TextEditor = ({
       {
         variant: "default",
         "aria-label": "Edit field",
-        onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, keyPath),
+        keyPath,
+        dictionary,
+        locales,
         children: section
       }
     ) });

package/dist/components/DictionaryFieldEditor/EditorView/TextEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/TextEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  type TranslationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  getLocaleName,\n} from '@intlayer/core';\nimport { Plus, X } from 'lucide-react';\nimport {\n  createElement,\n  type ReactElement,\n  type ReactNode,\n  type FC,\n} from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { getSectionType } from '../../../utils/dictionary';\nimport { renameKey } from '../../../utils/object';\nimport { Button } from '../../Button';\nimport { ContentEditorTextArea } from '../../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from '../NavigationView/navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) =>\n        childrenResult.push(createReactElement(children[key]))\n      );\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nexport type TextEditorProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}: TextEditorProps) => {\n  const { locales } = getConfiguration().internationalization;\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {locales.map((translationKey) => (\n          <tr\n            key={translationKey}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n            lang={translationKey}\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {getLocaleName(translationKey)}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Translation,\n                      key: translationKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as TranslationContent<string>)[NodeType.Translation][\n                    translationKey\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewEnumeration } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full table-fixed gap-2\">\n      <tbody>\n        {Object.keys(\n          (section as EnumerationContent<DictionaryValue>)[NodeType.Enumeration]\n        ).map((enumKey) => (\n          <tr\n            key={enumKey}\n            className=\"border-text dark:border-text-dark w-full border-y-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark w-44 border-r-[1.5px] p-2\">\n              <div className=\"flex gap-1\">\n                <Button\n                  label=\"Remove\"\n                  variant=\"hoverable\"\n                  size=\"icon-md\"\n                  color=\"text\"\n                  Icon={X}\n                  className=\"w-16\"\n                  onClick={() =>\n                    addEditedContent(dictionaryKey, undefined, [\n                      ...keyPath,\n                      {\n                        type: NodeType.Enumeration,\n                        key: enumKey,\n                      },\n                    ])\n                  }\n                />\n                <EnumKeyInput\n                  value={enumKey}\n                  onChange={(value) => {\n                    const preValueContent = (\n                      section as EnumerationContent<string>\n                    )[NodeType.Enumeration];\n                    const newValueContent = renameKey(\n                      preValueContent,\n                      enumKey as keyof typeof preValueContent,\n                      value\n                    );\n                    const newValue = {\n                      ...(section as EnumerationContent<string>),\n                      [NodeType.Enumeration]: newValueContent,\n                    };\n\n                    addEditedContent(dictionaryKey, newValue, keyPath);\n                  }}\n                />\n              </div>\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Enumeration,\n                      key: enumKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as EnumerationContent<string>)[NodeType.Enumeration][\n                    enumKey as any\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n\n      <tfoot>\n        <Button\n          label={addNewEnumeration.label}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() =>\n            addEditedContent(\n              dictionaryKey,\n              '',\n              [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }],\n              false\n            )\n          }\n          Icon={Plus}\n          className=\"m-2\"\n        >\n          {addNewEnumeration.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewElement } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {(section as DictionaryValue[]).map((subSection, index) => (\n          <tr\n            key={JSON.stringify(subSection)}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {index}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) => {\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Array,\n                      key: index,\n                    },\n                  ]);\n                }}\n              >\n                {subSection as string}\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n      <tfoot>\n        <Button\n          label={addNewElement.label}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              {\n                type: NodeType.Array,\n                key: (section as DictionaryValue[]).length,\n              },\n            ];\n            addEditedContent(dictionaryKey, '', newKeyPath, false);\n          }}\n          Icon={Plus}\n        >\n          {addNewElement.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { tsxNotEditable } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n\n  if (!isEditableSection) return <></>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <>\n          {createReactElement(section as unknown as ReactElement)}\n          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n            {tsxNotEditable}\n          </span>\n        </>\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n  }\n\n  if (nodeType === NodeType.Text) {\n    return (\n      <div className=\"border-text dark:border-text-dark w-full border-t-[1.5px] p-2\">\n        <ContentEditorTextArea\n          variant=\"default\"\n          aria-label=\"Edit field\"\n          onContentChange={(newValue) =>\n            addEditedContent(dictionaryKey, newValue, keyPath)\n          }\n        >\n          {section as string}\n        </ContentEditorTextArea>\n      </div>\n    );\n  }\n\n  return <>Error loading section</>;\n};\n"],"names":["element","jsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,YAAsB,CAAC,YAAY,MAAM,UAAU;AAEhE,MAAM,qBAAqB,CAAC,YAA0B;AAChD,MAAA,OAAO,YAAY,UAAU;AAExB,WAAA;AAAA,EAAA;AAGH,QAAA,yBAAyB,CAACA,aAAwC;AACtE,QAAIA,UAAS,SAAS,OAAOA,SAAQ,MAAM,aAAa,UAAU;AAChE,YAAM,iBAA8B,CAAC;AAC/B,YAAA,EAAE,aAAaA,SAAQ;AAGtB,aAAA,KAAK,QAAQ,EAAE;AAAA,QAAQ,CAAC,QAC7B,eAAe,KAAK,mBAAmB,SAAS,GAAG,CAAC,CAAC;AAAA,MACvD;AAEO,aAAA;AAAA,QACL,GAAGA;AAAAA,QACH,OAAO,EAAE,GAAGA,SAAQ,OAAO,UAAU,eAAe;AAAA,MACtD;AAAA,IAAA;AAGK,WAAA;AAAA,MACL,GAAGA;AAAAA,MACH,OAAO,EAAE,GAAGA,SAAQ,OAAO,UAAUA,SAAQ,MAAM,SAAS;AAAA,IAC9D;AAAA,EACF;AAEM,QAAA,eAAe,uBAAuB,OAAO;AAE7C,QAAA,EAAE,MAAM,MAAA,IAAU;AAGxB,SAAO,cAAc,QAAQ,OAAO,OAAO,GAAG,MAAM,QAAQ;AAC9D;AAQA,MAAM,wBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,EAAE,QAAA,IAAY,iBAAA,EAAmB;AACvC,QAAM,mBAAmB;AAAA,IACvB,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,EACtC;AAGE,SAAAC,kCAAA,IAAC,WAAM,WAAU,gBACf,gDAAC,SACE,EAAA,UAAA,QAAQ,IAAI,CAAC,mBACZC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,MAAM;AAAA,MAEN,UAAA;AAAA,QAAAD,sCAAC,MAAG,EAAA,WAAU,0DACX,UAAA,cAAc,cAAc,GAC/B;AAAA,QACAA,kCAAAA,IAAC,MAAG,EAAA,WAAU,cACZ,UAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,iBAAiB,CAAC,aAChB,iBAAiB,eAAe,UAAU;AAAA,cACxC,GAAG;AAAA,cACH;AAAA,gBACE,MAAM,SAAS;AAAA,gBACf,KAAK;AAAA,cAAA;AAAA,YACP,CACD;AAAA,YAIA,UAAuC,QAAA,SAAS,WAAW,EAC1D,cACF;AAAA,UAAA;AAAA,QAAA,EAGN,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IA3BK;AAAA,EAAA,CA6BR,GACH,EACF,CAAA;AAEJ;AAEA,MAAM,wBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,EACtC;AACA,QAAM,EAAE,kBAAA,IAAsB,cAAc,qBAAqB;AAG/D,SAAAC,kCAAA,KAAC,SAAM,EAAA,WAAU,4BACf,UAAA;AAAA,IAAAD,kCAAAA,IAAC,WACE,UAAO,OAAA;AAAA,MACL,QAAgD,SAAS,WAAW;AAAA,IAAA,EACrE,IAAI,CAAC,YACLC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAD,kCAAAA,IAAC,QAAG,WAAU,+DACZ,UAACC,kCAAA,KAAA,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS,MACP,iBAAiB,eAAe,QAAW;AAAA,kBACzC,GAAG;AAAA,kBACH;AAAA,oBACE,MAAM,SAAS;AAAA,oBACf,KAAK;AAAA,kBAAA;AAAA,gBAER,CAAA;AAAA,cAAA;AAAA,YAEL;AAAA,YACAA,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU,CAAC,UAAU;AACb,wBAAA,kBACJ,QACA,SAAS,WAAW;AACtB,wBAAM,kBAAkB;AAAA,oBACtB;AAAA,oBACA;AAAA,oBACA;AAAA,kBACF;AACA,wBAAM,WAAW;AAAA,oBACf,GAAI;AAAA,oBACJ,CAAC,SAAS,WAAW,GAAG;AAAA,kBAC1B;AAEiB,mCAAA,eAAe,UAAU,OAAO;AAAA,gBAAA;AAAA,cACnD;AAAA,YAAA;AAAA,UACF,EAAA,CACF,EACF,CAAA;AAAA,UACAA,kCAAAA,IAAC,MAAG,EAAA,WAAU,cACZ,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,cAAW;AAAA,cACX,iBAAiB,CAAC,aAChB,iBAAiB,eAAe,UAAU;AAAA,gBACxC,GAAG;AAAA,gBACH;AAAA,kBACE,MAAM,SAAS;AAAA,kBACf,KAAK;AAAA,gBAAA;AAAA,cACP,CACD;AAAA,cAIA,UAAuC,QAAA,SAAS,WAAW,EAC1D,OACF;AAAA,YAAA;AAAA,UAAA,EAGN,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MA/DK;AAAA,IAiER,CAAA,GACH;AAAA,0CAEC,SACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS,MACP;AAAA,UACE;AAAA,UACA;AAAA,UACA,CAAC,GAAG,SAAS,EAAE,MAAM,SAAS,aAAa,KAAK,WAAW;AAAA,UAC3D;AAAA,QACF;AAAA,QAEF,MAAM;AAAA,QACN,WAAU;AAAA,QAET,UAAkB,kBAAA;AAAA,MAAA;AAAA,IAAA,EAEvB,CAAA;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,kBAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,EACtC;AACA,QAAM,EAAE,cAAA,IAAkB,cAAc,qBAAqB;AAG3D,SAAAC,kCAAA,KAAC,SAAM,EAAA,WAAU,gBACf,UAAA;AAAA,IAAAD,sCAAC,SACG,EAAA,UAAA,QAA8B,IAAI,CAAC,YAAY,UAC/CC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAACD,kCAAA,IAAA,MAAA,EAAG,WAAU,0DACX,UACH,OAAA;AAAA,UACAA,kCAAAA,IAAC,MAAG,EAAA,WAAU,cACZ,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,cAAW;AAAA,cACX,iBAAiB,CAAC,aAAa;AAC7B,iCAAiB,eAAe,UAAU;AAAA,kBACxC,GAAG;AAAA,kBACH;AAAA,oBACE,MAAM,SAAS;AAAA,oBACf,KAAK;AAAA,kBAAA;AAAA,gBACP,CACD;AAAA,cACH;AAAA,cAEC,UAAA;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,KAAK,UAAU,UAAU;AAAA,IAwBjC,CAAA,GACH;AAAA,0CACC,SACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS,MAAM;AACb,gBAAM,aAAwB;AAAA,YAC5B,GAAG;AAAA,YACH;AAAA,cACE,MAAM,SAAS;AAAA,cACf,KAAM,QAA8B;AAAA,YAAA;AAAA,UAExC;AACiB,2BAAA,eAAe,IAAI,YAAY,KAAK;AAAA,QACvD;AAAA,QACA,MAAM;AAAA,QAEL,UAAc,cAAA;AAAA,MAAA;AAAA,IAAA,EAEnB,CAAA;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,EACtC;AACA,QAAM,EAAE,eAAA,IAAmB,cAAc,qBAAqB;AACxD,QAAA,WAAW,eAAe,OAAO;AACjC,QAAA,oBAAoB,qBAAqB,OAAO;AAElD,MAAA,CAAC,kBAAmB,QAASA,sCAAAE,kBAAAA,UAAA,CAAA,CAAA;AAE7B,MAAA,OAAO,YAAY,UAAU;AAC3B,QAAA,aAAa,SAAS,WAAW;AACnC,aAEKD,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,QAAA,mBAAmB,OAAkC;AAAA,QACrDF,kCAAA,IAAA,QAAA,EAAK,WAAU,+CACb,UACH,eAAA,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAIA,QAAA,aAAa,SAAS,aAAa;AAEnC,aAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAIA,QAAA,aAAa,SAAS,aAAa;AAEnC,aAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAIA,QAAA,aAAa,SAAS,OAAO;AAE7B,aAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAGE,MAAA,aAAa,SAAS,MAAM;AAE5B,WAAAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,iEACb,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,iBAAiB,CAAC,aAChB,iBAAiB,eAAe,UAAU,OAAO;AAAA,QAGlD,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAAA;AAIJ,6EAAS,UAAqB,wBAAA,CAAA;AAChC;"}
+{"version":3,"file":"TextEditor.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/TextEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n'use client';\n\nimport { Locales } from '@intlayer/config';\nimport {\n  type EnumerationContent,\n  type TranslationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  getLocaleName,\n  Dictionary,\n} from '@intlayer/core';\nimport { Plus, WandSparkles, X } from 'lucide-react';\nimport {\n  createElement,\n  type ReactElement,\n  type ReactNode,\n  type FC,\n} from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useAuditContentDeclarationField } from '../../../hooks';\nimport { getSectionType } from '../../../utils/dictionary';\nimport { renameKey } from '../../../utils/object';\nimport { Button } from '../../Button';\nimport {\n  ContentEditorTextArea as ContentEditorTextAreaBase,\n  ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '../../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { useLocaleSwitcherContent } from '../../LocaleSwitcherContentDropDown';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from '../NavigationView/navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n  ContentEditorTextAreaPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  locales: Locales[];\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  keyPath,\n  dictionary,\n  locales,\n  ...props\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { auditContentDeclarationField, isLoading: isAuditing } =\n    useAuditContentDeclarationField();\n\n  return (\n    <ContentEditorTextAreaBase\n      variant=\"default\"\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.key, newValue, keyPath)\n      }\n      additionalButtons={\n        <Button\n          Icon={WandSparkles}\n          label=\"Audit\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"text\"\n          className=\"cursor-pointer hover:scale-110\"\n          isLoading={isAuditing}\n          onClick={() => {\n            auditContentDeclarationField({\n              fileContent: JSON.stringify(dictionary),\n              keyPath,\n              locales,\n            }).then((response) => {\n              if (!response.data) return;\n\n              try {\n                const editedContent = response.data.fileContent as string;\n\n                addEditedContent(dictionary.key, editedContent, keyPath);\n              } catch (error) {\n                console.error(error);\n              }\n            });\n          }}\n        />\n      }\n      {...props}\n    />\n  );\n};\n\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) =>\n        childrenResult.push(createReactElement(children[key]))\n      );\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nexport type TextEditorProps = {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n  locales: Locales[];\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  locales,\n}: TextEditorProps) => {\n  const { selectedLocales, availableLocales } = useLocaleSwitcherContent();\n\n  const sectionContent = (section as TranslationContent<string>)[\n    NodeType.Translation\n  ] as Record<Locales, string>;\n\n  const sectionContentKeys = Object.keys(sectionContent) as Locales[];\n\n  const isFiltered = availableLocales.length > selectedLocales.length;\n\n  const localesList = isFiltered\n    ? selectedLocales\n    : // If the translation include content in other locales, we display all of them\n      [...new Set([...availableLocales, ...sectionContentKeys])];\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {localesList.map((translationKey) => (\n          <tr\n            key={translationKey}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n            lang={translationKey}\n          >\n            {selectedLocales.length > 1 && (\n              <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n                {getLocaleName(translationKey)}\n              </td>\n            )}\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                keyPath={[\n                  ...keyPath,\n                  { type: NodeType.Translation, key: translationKey },\n                ]}\n                dictionary={dictionary}\n                locales={locales}\n              >\n                {\n                  (section as TranslationContent<string>)[NodeType.Translation][\n                    translationKey\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  locales,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewEnumeration } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full table-fixed gap-2\">\n      <tbody>\n        {Object.keys(\n          (section as EnumerationContent<DictionaryValue>)[NodeType.Enumeration]\n        ).map((enumKey) => (\n          <tr\n            key={enumKey}\n            className=\"border-text dark:border-text-dark w-full border-y-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark w-44 border-r-[1.5px] p-2\">\n              <div className=\"flex gap-1\">\n                <Button\n                  label=\"Remove\"\n                  variant=\"hoverable\"\n                  size=\"icon-md\"\n                  color=\"text\"\n                  Icon={X}\n                  className=\"w-16\"\n                  onClick={() =>\n                    addEditedContent(dictionary.key, undefined, [\n                      ...keyPath,\n                      {\n                        type: NodeType.Enumeration,\n                        key: enumKey,\n                      },\n                    ])\n                  }\n                />\n                <EnumKeyInput\n                  value={enumKey}\n                  onChange={(value) => {\n                    const preValueContent = (\n                      section as EnumerationContent<string>\n                    )[NodeType.Enumeration];\n                    const newValueContent = renameKey(\n                      preValueContent,\n                      enumKey as keyof typeof preValueContent,\n                      value\n                    );\n                    const newValue = {\n                      ...(section as EnumerationContent<string>),\n                      [NodeType.Enumeration]: newValueContent,\n                    };\n\n                    addEditedContent(dictionary.key, newValue, keyPath);\n                  }}\n                />\n              </div>\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                keyPath={[\n                  ...keyPath,\n                  { type: NodeType.Enumeration, key: enumKey },\n                ]}\n                dictionary={dictionary}\n                locales={locales}\n              >\n                {\n                  (section as EnumerationContent<string>)[NodeType.Enumeration][\n                    enumKey as any\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n\n      <tfoot>\n        <Button\n          label={addNewEnumeration.label}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() =>\n            addEditedContent(\n              dictionary.key,\n              '',\n              [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }],\n              false\n            )\n          }\n          Icon={Plus}\n          className=\"m-2\"\n        >\n          {addNewEnumeration.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  locales,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewElement } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {(section as DictionaryValue[]).map((subSection, index) => (\n          <tr\n            key={JSON.stringify(subSection)}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {index}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                keyPath={[\n                  ...keyPath,\n                  {\n                    type: NodeType.Array,\n                    key: index,\n                  },\n                ]}\n                dictionary={dictionary}\n                locales={locales}\n              >\n                {subSection as string}\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n      <tfoot>\n        <Button\n          label={addNewElement.label}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              {\n                type: NodeType.Array,\n                key: (section as DictionaryValue[]).length,\n              },\n            ];\n            addEditedContent(dictionary.key, '', newKeyPath, false);\n          }}\n          Icon={Plus}\n        >\n          {addNewElement.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  locales,\n}) => {\n  const { tsxNotEditable } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n\n  if (!isEditableSection) return <></>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <>\n          {createReactElement(section as unknown as ReactElement)}\n          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n            {tsxNotEditable}\n          </span>\n        </>\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationTextEditor\n          dictionary={dictionary}\n          keyPath={keyPath}\n          section={section}\n          locales={locales}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationTextEditor\n          dictionary={dictionary}\n          keyPath={keyPath}\n          section={section}\n          locales={locales}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayTextEditor\n          dictionary={dictionary}\n          keyPath={keyPath}\n          section={section}\n          locales={locales}\n        />\n      );\n    }\n  }\n\n  if (nodeType === NodeType.Text) {\n    return (\n      <div className=\"border-text dark:border-text-dark w-full border-t-[1.5px] p-2\">\n        <ContentEditorTextArea\n          variant=\"default\"\n          aria-label=\"Edit field\"\n          keyPath={keyPath}\n          dictionary={dictionary}\n          locales={locales}\n        >\n          {section as string}\n        </ContentEditorTextArea>\n      </div>\n    );\n  }\n\n  return <>Error loading section</>;\n};\n"],"names":["jsx","ContentEditorTextAreaBase","element","jsxs","Fragment"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/JSONEditor.cjs

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
+const require$$0 = require("react");
 const shallow = require("../../shallow-lhDIFtEp.cjs");
-const components_ContentEditor_ContentEditorTextArea = require("../ContentEditor/ContentEditorTextArea.cjs");
 const components_DictionaryEditor_useEditedContentStore = require("../DictionaryEditor/useEditedContentStore.cjs");
 require("../DictionaryEditor/useEditionPanelStore.cjs");
-require("react");
 require("@intlayer/core");
 require("lucide-react");
 require("clsx");
@@ -26,8 +25,8 @@ require("../Form/FormField.cjs");
 require("../../Form-BDcoNTLV.cjs");
 require("../DictionaryEditor/validDictionaryChangeButtons.content.cjs");
 require("zod");
-const components_DictionaryFieldEditor_SaveForm_SaveForm = require("./SaveForm/SaveForm.cjs");
-const JSONEditor = ({ dictionary }) => {
+const components_IDE_MonacoCode = require("../IDE/MonacoCode.cjs");
+const JSONEditor = ({ dictionary, isDarkMode }) => {
   const { setEditedContent, editedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
     shallow.useShallow((s) => ({
       editedContent: s.editedContent,
@@ -42,21 +41,24 @@ const JSONEditor = ({ dictionary }) => {
       return false;
     }
   };
-  const displayedContent = editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      components_ContentEditor_ContentEditorTextArea.ContentEditorTextArea,
-      {
-        onContentChange: (content) => setEditedContent(dictionary.key, JSON.parse(content)),
-        validate: isValidJSON,
-        className: "text-sm",
-        variant: "default",
-        children: JSON.stringify(displayedContent, null, 2)
+  const displayedContent = require$$0.useMemo(
+    () => editedContent[dictionary.key]?.content ?? dictionary?.content ?? {},
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dictionary]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    components_IDE_MonacoCode.MonacoCode,
+    {
+      language: "json",
+      onChange: (content) => {
+        if (isValidJSON(content ?? "{}")) {
+          setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+        }
       },
-      JSON.stringify(displayedContent)
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryFieldEditor_SaveForm_SaveForm.SaveForm, { dictionary })
-  ] });
+      isDarkMode,
+      children: JSON.stringify(displayedContent, null, 2)
+    }
+  ) });
 };
 exports.JSONEditor = JSONEditor;
 //# sourceMappingURL=JSONEditor.cjs.map

package/dist/components/DictionaryFieldEditor/JSONEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["useEditedContentStore","useShallow","jsxs","Fragment","jsx","ContentEditorTextArea","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AAC3D,QAAA,EAAE,kBAAkB,cAAA,IAAkBA,kDAAA;AAAA,IAC1CC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EACJ;AAEM,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEM,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAEpE,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,+CAAA;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAD,iDAACE,mDAAAA,YAAS,WAAwB,CAAA;AAAA,EAAA,GACpC;AAEJ;;"}
+{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport { useMemo, type FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent[dictionary.key]?.content ?? dictionary?.content ?? {},\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dictionary]\n  );\n\n  return (\n    <div className=\"overflow-hidden rounded-md\">\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </div>\n  );\n};\n"],"names":["useEditedContentStore","useShallow","useMemo","jsx","MonacoCode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AACvE,QAAA,EAAE,kBAAkB,cAAA,IAAkBA,kDAAA;AAAA,IAC1CC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EACJ;AAEM,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmBC,WAAA;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA;AAAA,IAExE,CAAC,UAAU;AAAA,EACb;AAGE,SAAAC,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,8BACb,UAAAA,2BAAA,kBAAA;AAAA,IAACC,0BAAA;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAU,CAAC,YAAY;AACjB,YAAA,YAAY,WAAW,IAAI,GAAG;AAChC,2BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,QAAA;AAAA,MAEhE;AAAA,MACA;AAAA,MAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,IAAA;AAAA,EAAA,GAE7C;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/JSONEditor.d.ts

@@ -2,6 +2,7 @@ import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
 type JSONEditorProps = {
     dictionary: Dictionary;
+    isDarkMode?: boolean;
 };
 export declare const JSONEditor: FC<JSONEditorProps>;
 export {};

package/dist/components/DictionaryFieldEditor/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoC1C,CAAC"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKzC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsC1C,CAAC"}

package/dist/components/DictionaryFieldEditor/JSONEditor.mjs

@@ -1,9 +1,8 @@
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
+import { useMemo } from "react";
 import { u as useShallow } from "../../shallow-m9BpCkKh.js";
-import { ContentEditorTextArea } from "../ContentEditor/ContentEditorTextArea.mjs";
 import { useEditedContentStore } from "../DictionaryEditor/useEditedContentStore.mjs";
 import "../DictionaryEditor/useEditionPanelStore.mjs";
-import "react";
 import "@intlayer/core";
 import "lucide-react";
 import "clsx";
@@ -24,8 +23,8 @@ import "../Form/FormField.mjs";
 import "../../Form-DhsgC7kB.js";
 import "../DictionaryEditor/validDictionaryChangeButtons.content.mjs";
 import "zod";
-import { SaveForm } from "./SaveForm/SaveForm.mjs";
-const JSONEditor = ({ dictionary }) => {
+import { MonacoCode } from "../IDE/MonacoCode.mjs";
+const JSONEditor = ({ dictionary, isDarkMode }) => {
   const { setEditedContent, editedContent } = useEditedContentStore(
     useShallow((s) => ({
       editedContent: s.editedContent,
@@ -40,21 +39,24 @@ const JSONEditor = ({ dictionary }) => {
       return false;
     }
   };
-  const displayedContent = editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ContentEditorTextArea,
-      {
-        onContentChange: (content) => setEditedContent(dictionary.key, JSON.parse(content)),
-        validate: isValidJSON,
-        className: "text-sm",
-        variant: "default",
-        children: JSON.stringify(displayedContent, null, 2)
+  const displayedContent = useMemo(
+    () => editedContent[dictionary.key]?.content ?? dictionary?.content ?? {},
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dictionary]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    MonacoCode,
+    {
+      language: "json",
+      onChange: (content) => {
+        if (isValidJSON(content ?? "{}")) {
+          setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+        }
       },
-      JSON.stringify(displayedContent)
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SaveForm, { dictionary })
-  ] });
+      isDarkMode,
+      children: JSON.stringify(displayedContent, null, 2)
+    }
+  ) });
 };
 export {
   JSONEditor

package/dist/components/DictionaryFieldEditor/JSONEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AAC3D,QAAA,EAAE,kBAAkB,cAAA,IAAkB;AAAA,IAC1C,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EACJ;AAEM,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEM,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAEpE,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAA,sCAAC,YAAS,WAAwB,CAAA;AAAA,EAAA,GACpC;AAEJ;"}
+{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport { useMemo, type FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent[dictionary.key]?.content ?? dictionary?.content ?? {},\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dictionary]\n  );\n\n  return (\n    <div className=\"overflow-hidden rounded-md\">\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AACvE,QAAA,EAAE,kBAAkB,cAAA,IAAkB;AAAA,IAC1C,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EACJ;AAEM,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA;AAAA,IAExE,CAAC,UAAU;AAAA,EACb;AAGE,SAAAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,8BACb,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAU,CAAC,YAAY;AACjB,YAAA,YAAY,WAAW,IAAI,GAAG;AAChC,2BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,QAAA;AAAA,MAEhE;AAAA,MACA;AAAA,MAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,IAAA;AAAA,EAAA,GAE7C;AAEJ;"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs

@@ -5,7 +5,8 @@ const components_Breadcrumb_index = require("../Breadcrumb/index.cjs");
 const KeyPathBreadcrumb = ({
   keyPath,
   dictionaryKey,
-  onClickKeyPath
+  onClickKeyPath,
+  locale
 }) => {
   const formattedKeyPath = [
     { text: dictionaryKey, onClick: () => onClickKeyPath([]) },
@@ -16,7 +17,14 @@ const KeyPathBreadcrumb = ({
       text: el.key.toString()
     }))
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Breadcrumb_index.Breadcrumb, { links: formattedKeyPath });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    components_Breadcrumb_index.Breadcrumb,
+    {
+      links: formattedKeyPath,
+      locale,
+      elementType: "location"
+    }
+  );
 };
 exports.KeyPathBreadcrumb = KeyPathBreadcrumb;
 //# sourceMappingURL=KeyPathBreadcrumb.cjs.map

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyPathBreadcrumb.cjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return <Breadcrumb links={formattedKeyPath} />;\n};\n"],"names":["jsx","Breadcrumb"],"mappings":";;;;AAUO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EACJ;AAEO,SAAAA,2BAAA,kBAAA,IAACC,4BAAW,YAAA,EAAA,OAAO,iBAAkB,CAAA;AAC9C;;"}
+{"version":3,"file":"KeyPathBreadcrumb.cjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n  locale?: Locales;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n  locale,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return (\n    <Breadcrumb\n      links={formattedKeyPath}\n      locale={locale}\n      elementType=\"location\"\n    />\n  );\n};\n"],"names":["jsx","Breadcrumb"],"mappings":";;;;AAYO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EACJ;AAGE,SAAAA,2BAAA,kBAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAY;AAAA,IAAA;AAAA,EACd;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.d.ts

@@ -1,9 +1,11 @@
+import { Locales } from '@intlayer/config/client';
 import { KeyPath } from '@intlayer/core';
 import { FC } from 'react';
 type KeyPathBreadcrumbProps = {
     dictionaryKey: string;
     keyPath: KeyPath[];
     onClickKeyPath: (keyPath: KeyPath[]) => void;
+    locale?: Locales;
 };
 export declare const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps>;
 export {};

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeyPathBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,KAAK,sBAAsB,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqBxD,CAAC"}
+{"version":3,"file":"KeyPathBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,KAAK,sBAAsB,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA4BxD,CAAC"}