@intlayer/design-system 5.1.2 → 5.1.4

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

@@ -1,30 +1,30 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { getNodeType, NodeType, getLocaleName } from "@intlayer/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getNodeType, NodeType, getLocaleName, getEmptyNode } from "@intlayer/core";
 import { useEditedContent, useConfiguration } from "@intlayer/editor-react";
-import { X, Plus, WandSparkles } from "lucide-react";
+import { Trash, Plus, WandSparkles } from "lucide-react";
+import { Fragment as Fragment$1, useState } from "react";
 import { useDictionary, useLocale } from "react-intlayer";
-import "react";
 import "../../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../../hooks/useAsync/useAsyncStateStore.mjs";
 import { useAuditContentDeclarationField } from "../../../hooks/intlayerAPIHooks.mjs";
 import "deepmerge";
 import { renameKey } from "../../../utils/object.mjs";
 import { Button } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { Label } from "../../Label/index.mjs";
 import "@intlayer/config/client";
 import "fuse.js";
-import "../../Container/index.mjs";
 import "../../DropDown/index.mjs";
 import "../../Input/Input.mjs";
 import "../../Input/Checkbox.mjs";
 import { SwitchSelector } from "../../SwitchSelector/index.mjs";
 import "../../LocaleSwitcherContentDropDown/localeSwitcher.content.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { MarkdownRenderer } from "../../MarkDownRender/index.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 = ({
@@ -119,7 +119,7 @@ const TranslationTextEditor = ({
   keyPath,
   dictionary
 }) => {
-  const { locale } = useLocale();
+  const { locale, defaultLocale } = useLocale();
   const { selectedLocales, availableLocales } = useLocaleSwitcherContent();
   const sectionContent = section[NodeType.Translation];
   const sectionContentKeys = Object.keys(sectionContent);
@@ -128,20 +128,21 @@ const TranslationTextEditor = ({
     // If the translation include content in other locales, we display all of them
     [.../* @__PURE__ */ new Set([...availableLocales, ...sectionContentKeys])]
   );
-  return /* @__PURE__ */ jsx("table", { className: "w-full gap-2", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y-[1.5px]", children: localesList.map((translationKey) => /* @__PURE__ */ jsx("tr", { className: "w-full", lang: translationKey, children: /* @__PURE__ */ jsxs("td", { className: "flex w-full flex-col p-2", children: [
-    selectedLocales.length > 1 && /* @__PURE__ */ jsx("span", { className: "w-full p-2 text-xs", children: getLocaleName(translationKey, locale) }),
-    /* @__PURE__ */ jsx(
-      TextEditor,
+  const content = section[NodeType.Translation];
+  return /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { className: "flex w-full flex-col gap-2", children: localesList.map((translationKey) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("tr", { className: "mt-2 w-full p-2 text-xs", children: getLocaleName(translationKey, locale) }),
+    /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      TextEditorContainer,
       {
-        section: section[NodeType.Translation][translationKey],
+        section: content[translationKey] ?? getEmptyNode(content[defaultLocale]),
         keyPath: [
           ...keyPath,
           { type: NodeType.Translation, key: translationKey }
         ],
         dictionary
       }
-    )
-  ] }) }, translationKey)) }) });
+    ) })
+  ] }, translationKey)) }) });
 };
 const EnumerationTextEditor = ({
   section,
@@ -149,31 +150,37 @@ const EnumerationTextEditor = ({
   dictionary
 }) => {
   const { addEditedContent } = useEditedContent();
-  const { addNewEnumeration } = useDictionary(navigationViewContent);
-  return /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed gap-2", children: [
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y-[1.5px]", children: Object.keys(
+  const { addNewEnumeration, removeEnumeration } = useDictionary(
+    navigationViewContent
+  );
+  const content = section[NodeType.Enumeration];
+  const firstKey = Object.keys(content)[0];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { className: "flex w-full flex-col gap-2", children: Object.keys(
       section[NodeType.Enumeration]
-    ).map((enumKey) => /* @__PURE__ */ jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("td", { className: "w-44 p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx(
+    ).map((enumKey) => {
+      const childrenKeyPath = [
+        ...keyPath,
+        { type: NodeType.Enumeration }
+      ];
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("tr", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1", children: /* @__PURE__ */ jsx(
           Button,
           {
-            label: "Remove",
+            label: removeEnumeration.label.value,
             variant: "hoverable",
-            size: "icon-md",
             color: "text",
-            Icon: X,
-            className: "w-16",
-            onClick: () => addEditedContent(dictionary.key, void 0, [
-              ...keyPath,
-              {
-                type: NodeType.Enumeration,
-                key: enumKey
-              }
-            ])
+            Icon: Trash,
+            className: "ml-auto",
+            onClick: () => addEditedContent(
+              dictionary.key,
+              void 0,
+              childrenKeyPath
+            ),
+            children: removeEnumeration.text
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }) }),
+        /* @__PURE__ */ jsx("tr", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
           EnumKeyInput,
           {
             value: enumKey,
@@ -191,38 +198,35 @@ const EnumerationTextEditor = ({
               addEditedContent(dictionary.key, newValue, keyPath);
             }
           }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
-        TextEditor,
-        {
-          section: section[NodeType.Enumeration][enumKey],
-          keyPath: [
-            ...keyPath,
-            { type: NodeType.Enumeration, key: enumKey }
-          ],
-          dictionary
-        }
-      ) })
-    ] }, enumKey)) }),
-    /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsx(
+          TextEditor,
+          {
+            section: content[enumKey] ?? getEmptyNode(content[firstKey]),
+            keyPath: childrenKeyPath,
+            dictionary
+          }
+        ) })
+      ] }, enumKey);
+    }) }) }),
+    /* @__PURE__ */ jsx(
       Button,
       {
         label: addNewEnumeration.label.value,
         variant: "hoverable",
         color: "neutral",
         textAlign: "left",
+        isFullWidth: true,
         onClick: () => addEditedContent(
           dictionary.key,
-          "",
-          [...keyPath, { type: NodeType.Enumeration, key: "unknown" }],
-          false
+          getEmptyNode(content[firstKey]) ?? "",
+          [...keyPath, { type: NodeType.Enumeration, key: "unknown" }]
         ),
         Icon: Plus,
         className: "m-2",
         children: addNewEnumeration.text
       }
-    ) })
+    )
   ] });
 };
 const ConditionTextEditor = ({
@@ -230,83 +234,24 @@ const ConditionTextEditor = ({
   keyPath,
   dictionary
 }) => {
-  const { addEditedContent } = useEditedContent();
-  const { addNewEnumeration } = useDictionary(navigationViewContent);
-  return /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed gap-2", children: [
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y-[1.5px]", children: ["true", "false", "fallback"].map((condKey) => /* @__PURE__ */ jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("td", { className: "w-44 p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx(
-          Button,
+  const content = section[NodeType.Condition];
+  return /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { className: "flex w-full flex-col gap-2", children: ["true", "false", "fallback"].map((condKey) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("tr", { className: "mt-2 block w-full p-2 text-xs", children: String(condKey) }, condKey),
+    /* @__PURE__ */ jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsx(
+      TextEditorContainer,
+      {
+        section: content[condKey] ?? getEmptyNode(content["true"]),
+        keyPath: [
+          ...keyPath,
           {
-            label: "Remove",
-            variant: "hoverable",
-            size: "icon-md",
-            color: "text",
-            Icon: X,
-            className: "w-16",
-            onClick: () => addEditedContent(dictionary.key, void 0, [
-              ...keyPath,
-              {
-                type: NodeType.Condition,
-                key: condKey
-              }
-            ])
+            type: NodeType.Condition,
+            key: condKey
           }
-        ),
-        /* @__PURE__ */ jsx(
-          EnumKeyInput,
-          {
-            value: condKey,
-            onChange: (value) => {
-              const preValueContent = section[NodeType.Condition];
-              const newValueContent = renameKey(
-                preValueContent,
-                condKey,
-                value
-              );
-              const newValue = {
-                ...section,
-                [NodeType.Condition]: newValueContent
-              };
-              addEditedContent(dictionary.key, newValue, keyPath);
-            }
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
-        TextEditor,
-        {
-          section: section[NodeType.Enumeration][condKey],
-          keyPath: [
-            ...keyPath,
-            {
-              type: NodeType.Array,
-              key: parseInt(condKey)
-            }
-          ],
-          dictionary
-        }
-      ) })
-    ] }, condKey)) }),
-    /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        label: addNewEnumeration.label.value,
-        variant: "hoverable",
-        color: "neutral",
-        textAlign: "left",
-        onClick: () => addEditedContent(
-          dictionary.key,
-          "",
-          [...keyPath, { type: NodeType.Enumeration, key: "unknown" }],
-          false
-        ),
-        Icon: Plus,
-        className: "m-2",
-        children: addNewEnumeration.text
+        ],
+        dictionary
       }
-    ) })
-  ] });
+    ) }, condKey)
+  ] }, condKey)) }) });
 };
 const ArrayTextEditor = ({
   section,
@@ -314,14 +259,38 @@ const ArrayTextEditor = ({
   dictionary
 }) => {
   const { addEditedContent } = useEditedContent();
-  const { addNewElement } = useDictionary(navigationViewContent);
-  return /* @__PURE__ */ jsxs("table", { className: "w-full gap-2", children: [
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y-[1.5px]", children: section.map((subSection, index) => /* @__PURE__ */ jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("td", { className: "p-2", children: index }),
-      /* @__PURE__ */ jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
-        TextEditor,
+  const { addNewElement, removeElement } = useDictionary(navigationViewContent);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { className: "flex w-full flex-col gap-2", children: section.map((subSection, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs("tr", { className: "mt-2 flex w-full justify-between gap-2 p-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs", children: String(index) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: removeElement.label.value,
+            variant: "hoverable",
+            color: "neutral",
+            className: "ml-auto",
+            textAlign: "left",
+            onClick: () => {
+              const newKeyPath = [
+                ...keyPath,
+                {
+                  type: NodeType.Array,
+                  key: section.length
+                }
+              ];
+              addEditedContent(dictionary.key, void 0, newKeyPath);
+            },
+            Icon: Trash,
+            children: removeElement.text
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsx(
+        TextEditorContainer,
         {
-          section: subSection,
+          section: subSection ?? getEmptyNode(section[0]),
           keyPath: [
             ...keyPath,
             {
@@ -332,14 +301,15 @@ const ArrayTextEditor = ({
           dictionary
         }
       ) })
-    ] }, JSON.stringify(subSection))) }),
-    /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx(
+    ] }, JSON.stringify(subSection))) }) }),
+    /* @__PURE__ */ jsx(
       Button,
       {
         label: addNewElement.label.value,
         variant: "hoverable",
         color: "neutral",
         textAlign: "left",
+        isFullWidth: true,
         onClick: () => {
           const newKeyPath = [
             ...keyPath,
@@ -348,29 +318,101 @@ const ArrayTextEditor = ({
               key: section.length
             }
           ];
-          addEditedContent(dictionary.key, "", newKeyPath, false);
+          addEditedContent(
+            dictionary.key,
+            getEmptyNode(section[0]) ?? "",
+            newKeyPath,
+            false
+          );
         },
         Icon: Plus,
         children: addNewElement.text
       }
-    ) })
+    )
   ] });
 };
-const MarkdownTextEditor = ({
+const ObjectTextEditor = ({
   section,
   keyPath,
   dictionary
+}) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { className: "flex flex-col gap-2", children: Object.keys(section).map(
+  (key) => {
+    const childKeyPath = [
+      ...keyPath,
+      { type: NodeType.Object, key }
+    ];
+    const typedSection = section;
+    const firstKey = Object.keys(
+      typedSection
+    )[0];
+    const subSection = typedSection[key] ?? getEmptyNode(typedSection[firstKey]);
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: "mt-2 p-2 text-xs",
+          children: String(key)
+        },
+        JSON.stringify(subSection)
+      ),
+      /* @__PURE__ */ jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsx(
+        TextEditor,
+        {
+          section: subSection,
+          keyPath: childKeyPath,
+          dictionary
+        }
+      ) }, JSON.stringify(subSection))
+    ] }, key);
+  }
+) }) }) });
+const MarkdownTextEditor = ({
+  section,
+  keyPath,
+  dictionary,
+  isDarkMode
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
-    ContentEditorTextArea,
+  const [mode, setMode] = useState(
+    0
+    /* Edit */
+  );
+  const toggleContent2 = [
     {
-      variant: "default",
-      "aria-label": "Edit field",
-      keyPath: [...keyPath, { type: NodeType.Markdown }],
-      dictionary,
-      children: section[NodeType.Markdown]
+      content: "Edit",
+      value: 0
+      /* Edit */
+    },
+    {
+      content: "Preview",
+      value: 1
+      /* Preview */
     }
-  ) });
+  ];
+  const content = section[NodeType.Markdown];
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col justify-center gap-6 p-2", children: [
+    /* @__PURE__ */ jsx(
+      SwitchSelector,
+      {
+        choices: toggleContent2,
+        value: mode,
+        onChange: setMode,
+        color: "text",
+        size: "sm",
+        className: "ml-auto"
+      }
+    ),
+    mode === 0 && /* @__PURE__ */ jsx(
+      ContentEditorTextArea,
+      {
+        variant: "default",
+        "aria-label": "Edit field",
+        keyPath: [...keyPath, { type: NodeType.Markdown }],
+        dictionary,
+        children: content
+      }
+    ),
+    mode === 1 && /* @__PURE__ */ jsx(MarkdownRenderer, { isDarkMode, children: content })
+  ] });
 };
 const NestedTextEditor = ({
   keyPath,
@@ -429,79 +471,87 @@ const NestedTextEditor = ({
 const TextEditor = ({
   section,
   keyPath,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
   const { tsxNotEditable } = useDictionary(navigationViewContent);
   const nodeType = getNodeType(section);
-  const isEditableSection = getIsEditableSection(section);
-  if (!isEditableSection) return /* @__PURE__ */ jsx(Fragment, {});
-  if (typeof section === "object") {
-    if (nodeType === NodeType.ReactNode) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { children: "[React Node]" }),
-        /* @__PURE__ */ jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: tsxNotEditable })
-      ] });
-    }
-    if (nodeType === NodeType.Nested) {
-      return /* @__PURE__ */ jsx(
-        NestedTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === NodeType.Translation) {
-      return /* @__PURE__ */ jsx(
-        TranslationTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === NodeType.Enumeration) {
-      return /* @__PURE__ */ jsx(
-        EnumerationTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === NodeType.Condition) {
-      return /* @__PURE__ */ jsx(
-        ConditionTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === NodeType.Markdown) {
-      return /* @__PURE__ */ jsx(
-        MarkdownTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === NodeType.Array) {
-      return /* @__PURE__ */ jsx(
-        ArrayTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
+  if (nodeType === NodeType.ReactNode) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: "[React Node]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: tsxNotEditable })
+    ] });
+  }
+  if (nodeType === NodeType.Nested) {
+    return /* @__PURE__ */ jsx(
+      NestedTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === NodeType.Translation) {
+    return /* @__PURE__ */ jsx(
+      TranslationTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === NodeType.Enumeration) {
+    return /* @__PURE__ */ jsx(
+      EnumerationTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === NodeType.Condition) {
+    return /* @__PURE__ */ jsx(
+      ConditionTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === NodeType.Markdown) {
+    return /* @__PURE__ */ jsx(
+      MarkdownTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section,
+        isDarkMode
+      }
+    );
+  }
+  if (nodeType === NodeType.Array) {
+    return /* @__PURE__ */ jsx(
+      ArrayTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === NodeType.Object) {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      ObjectTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    ) });
   }
   if (nodeType === NodeType.Number) {
     return /* @__PURE__ */ jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
@@ -539,11 +589,25 @@ const TextEditor = ({
   }
   return /* @__PURE__ */ jsxs("div", { className: "w-full p-2", children: [
     "Error. Format not supported.",
-    JSON.stringify(section)
+    JSON.stringify(section, null, 2),
+    JSON.stringify(keyPath, null, 2),
+    "NodeType : ",
+    nodeType
   ] });
 };
+const TextEditorContainer = (props) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    border: true,
+    background: "none",
+    className: "top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky",
+    roundedSize: "xl",
+    children: /* @__PURE__ */ jsx(TextEditor, { ...props })
+  }
+);
 export {
   TextEditor,
+  TextEditorContainer,
   traceKeys
 };
 //# sourceMappingURL=TextEditor.mjs.map