@intlayer/design-system 5.1.2 → 5.1.4

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

@@ -5,28 +5,28 @@ const jsxRuntime = require("react/jsx-runtime");
 const core = require("@intlayer/core");
 const editorReact = require("@intlayer/editor-react");
 const lucideReact = require("lucide-react");
+const ReactExports = require("react");
 const reactIntlayer = require("react-intlayer");
-require("react");
 require("../../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 require("../../../hooks/useAsync/useAsyncStateStore.cjs");
 const hooks_intlayerAPIHooks = require("../../../hooks/intlayerAPIHooks.cjs");
 require("deepmerge");
 const utils_object = require("../../../utils/object.cjs");
 const components_Button_Button = require("../../Button/Button.cjs");
+const components_Container_index = require("../../Container/index.cjs");
 const components_ContentEditor_ContentEditorInput = require("../../ContentEditor/ContentEditorInput.cjs");
 const components_ContentEditor_ContentEditorTextArea = require("../../ContentEditor/ContentEditorTextArea.cjs");
 const components_Label_index = require("../../Label/index.cjs");
 require("@intlayer/config/client");
 require("fuse.js");
-require("../../Container/index.cjs");
 require("../../DropDown/index.cjs");
 require("../../Input/Input.cjs");
 require("../../Input/Checkbox.cjs");
 const components_SwitchSelector_index = require("../../SwitchSelector/index.cjs");
 require("../../LocaleSwitcherContentDropDown/localeSwitcher.content.cjs");
 const components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext = require("../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
+const components_MarkDownRender_index = require("../../MarkDownRender/index.cjs");
 const components_DictionaryFieldEditor_EnumKeyInput = require("../EnumKeyInput.cjs");
-const components_DictionaryFieldEditor_getIsEditableSection = require("../getIsEditableSection.cjs");
 const components_DictionaryFieldEditor_NavigationView_navigationViewNode_content = require("../NavigationView/navigationViewNode.content.cjs");
 const traceKeys = ["filePath", "id", "nodeType"];
 const ContentEditorTextArea = ({
@@ -121,7 +121,7 @@ const TranslationTextEditor = ({
   keyPath,
   dictionary
 }) => {
-  const { locale } = reactIntlayer.useLocale();
+  const { locale, defaultLocale } = reactIntlayer.useLocale();
   const { selectedLocales, availableLocales } = components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.useLocaleSwitcherContent();
   const sectionContent = section[core.NodeType.Translation];
   const sectionContentKeys = Object.keys(sectionContent);
@@ -130,20 +130,21 @@ const TranslationTextEditor = ({
     // If the translation include content in other locales, we display all of them
     [.../* @__PURE__ */ new Set([...availableLocales, ...sectionContentKeys])]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y-[1.5px]", children: localesList.map((translationKey) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full", lang: translationKey, children: /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "flex w-full flex-col p-2", children: [
-    selectedLocales.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full p-2 text-xs", children: core.getLocaleName(translationKey, locale) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TextEditor,
+  const content = section[core.NodeType.Translation];
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "flex w-full flex-col gap-2", children: localesList.map((translationKey) => /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "mt-2 w-full p-2 text-xs", children: core.getLocaleName(translationKey, locale) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TextEditorContainer,
       {
-        section: section[core.NodeType.Translation][translationKey],
+        section: content[translationKey] ?? core.getEmptyNode(content[defaultLocale]),
         keyPath: [
           ...keyPath,
           { type: core.NodeType.Translation, key: translationKey }
         ],
         dictionary
       }
-    )
-  ] }) }, translationKey)) }) });
+    ) })
+  ] }, translationKey)) }) });
 };
 const EnumerationTextEditor = ({
   section,
@@ -151,31 +152,37 @@ const EnumerationTextEditor = ({
   dictionary
 }) => {
   const { addEditedContent } = editorReact.useEditedContent();
-  const { addNewEnumeration } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y-[1.5px]", children: Object.keys(
+  const { addNewEnumeration, removeEnumeration } = reactIntlayer.useDictionary(
+    components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent
+  );
+  const content = section[core.NodeType.Enumeration];
+  const firstKey = Object.keys(content)[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "flex w-full flex-col gap-2", children: Object.keys(
       section[core.NodeType.Enumeration]
-    ).map((enumKey) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "w-44 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+    ).map((enumKey) => {
+      const childrenKeyPath = [
+        ...keyPath,
+        { type: core.NodeType.Enumeration }
+      ];
+      return /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
           components_Button_Button.Button,
           {
-            label: "Remove",
+            label: removeEnumeration.label.value,
             variant: "hoverable",
-            size: "icon-md",
             color: "text",
-            Icon: lucideReact.X,
-            className: "w-16",
-            onClick: () => addEditedContent(dictionary.key, void 0, [
-              ...keyPath,
-              {
-                type: core.NodeType.Enumeration,
-                key: enumKey
-              }
-            ])
+            Icon: lucideReact.Trash,
+            className: "ml-auto",
+            onClick: () => addEditedContent(
+              dictionary.key,
+              void 0,
+              childrenKeyPath
+            ),
+            children: removeEnumeration.text
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           components_DictionaryFieldEditor_EnumKeyInput.EnumKeyInput,
           {
             value: enumKey,
@@ -193,38 +200,35 @@ const EnumerationTextEditor = ({
               addEditedContent(dictionary.key, newValue, keyPath);
             }
           }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        TextEditor,
-        {
-          section: section[core.NodeType.Enumeration][enumKey],
-          keyPath: [
-            ...keyPath,
-            { type: core.NodeType.Enumeration, key: enumKey }
-          ],
-          dictionary
-        }
-      ) })
-    ] }, enumKey)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          TextEditor,
+          {
+            section: content[enumKey] ?? core.getEmptyNode(content[firstKey]),
+            keyPath: childrenKeyPath,
+            dictionary
+          }
+        ) })
+      ] }, enumKey);
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
       components_Button_Button.Button,
       {
         label: addNewEnumeration.label.value,
         variant: "hoverable",
         color: "neutral",
         textAlign: "left",
+        isFullWidth: true,
         onClick: () => addEditedContent(
           dictionary.key,
-          "",
-          [...keyPath, { type: core.NodeType.Enumeration, key: "unknown" }],
-          false
+          core.getEmptyNode(content[firstKey]) ?? "",
+          [...keyPath, { type: core.NodeType.Enumeration, key: "unknown" }]
         ),
         Icon: lucideReact.Plus,
         className: "m-2",
         children: addNewEnumeration.text
       }
-    ) })
+    )
   ] });
 };
 const ConditionTextEditor = ({
@@ -232,83 +236,24 @@ const ConditionTextEditor = ({
   keyPath,
   dictionary
 }) => {
-  const { addEditedContent } = editorReact.useEditedContent();
-  const { addNewEnumeration } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y-[1.5px]", children: ["true", "false", "fallback"].map((condKey) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "w-44 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          components_Button_Button.Button,
+  const content = section[core.NodeType.Condition];
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "flex w-full flex-col gap-2", children: ["true", "false", "fallback"].map((condKey) => /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "mt-2 block w-full p-2 text-xs", children: String(condKey) }, condKey),
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TextEditorContainer,
+      {
+        section: content[condKey] ?? core.getEmptyNode(content["true"]),
+        keyPath: [
+          ...keyPath,
           {
-            label: "Remove",
-            variant: "hoverable",
-            size: "icon-md",
-            color: "text",
-            Icon: lucideReact.X,
-            className: "w-16",
-            onClick: () => addEditedContent(dictionary.key, void 0, [
-              ...keyPath,
-              {
-                type: core.NodeType.Condition,
-                key: condKey
-              }
-            ])
+            type: core.NodeType.Condition,
+            key: condKey
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          components_DictionaryFieldEditor_EnumKeyInput.EnumKeyInput,
-          {
-            value: condKey,
-            onChange: (value) => {
-              const preValueContent = section[core.NodeType.Condition];
-              const newValueContent = utils_object.renameKey(
-                preValueContent,
-                condKey,
-                value
-              );
-              const newValue = {
-                ...section,
-                [core.NodeType.Condition]: newValueContent
-              };
-              addEditedContent(dictionary.key, newValue, keyPath);
-            }
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        TextEditor,
-        {
-          section: section[core.NodeType.Enumeration][condKey],
-          keyPath: [
-            ...keyPath,
-            {
-              type: core.NodeType.Array,
-              key: parseInt(condKey)
-            }
-          ],
-          dictionary
-        }
-      ) })
-    ] }, condKey)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsx(
-      components_Button_Button.Button,
-      {
-        label: addNewEnumeration.label.value,
-        variant: "hoverable",
-        color: "neutral",
-        textAlign: "left",
-        onClick: () => addEditedContent(
-          dictionary.key,
-          "",
-          [...keyPath, { type: core.NodeType.Enumeration, key: "unknown" }],
-          false
-        ),
-        Icon: lucideReact.Plus,
-        className: "m-2",
-        children: addNewEnumeration.text
+        ],
+        dictionary
       }
-    ) })
-  ] });
+    ) }, condKey)
+  ] }, condKey)) }) });
 };
 const ArrayTextEditor = ({
   section,
@@ -316,14 +261,38 @@ const ArrayTextEditor = ({
   dictionary
 }) => {
   const { addEditedContent } = editorReact.useEditedContent();
-  const { addNewElement } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y-[1.5px]", children: section.map((subSection, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-2", children: index }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        TextEditor,
+  const { addNewElement, removeElement } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "flex w-full flex-col gap-2", children: section.map((subSection, index) => /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "mt-2 flex w-full justify-between gap-2 p-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: String(index) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components_Button_Button.Button,
+          {
+            label: removeElement.label.value,
+            variant: "hoverable",
+            color: "neutral",
+            className: "ml-auto",
+            textAlign: "left",
+            onClick: () => {
+              const newKeyPath = [
+                ...keyPath,
+                {
+                  type: core.NodeType.Array,
+                  key: section.length
+                }
+              ];
+              addEditedContent(dictionary.key, void 0, newKeyPath);
+            },
+            Icon: lucideReact.Trash,
+            children: removeElement.text
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextEditorContainer,
         {
-          section: subSection,
+          section: subSection ?? core.getEmptyNode(section[0]),
           keyPath: [
             ...keyPath,
             {
@@ -334,14 +303,15 @@ const ArrayTextEditor = ({
           dictionary
         }
       ) })
-    ] }, JSON.stringify(subSection))) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ] }, JSON.stringify(subSection))) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
       components_Button_Button.Button,
       {
         label: addNewElement.label.value,
         variant: "hoverable",
         color: "neutral",
         textAlign: "left",
+        isFullWidth: true,
         onClick: () => {
           const newKeyPath = [
             ...keyPath,
@@ -350,29 +320,101 @@ const ArrayTextEditor = ({
               key: section.length
             }
           ];
-          addEditedContent(dictionary.key, "", newKeyPath, false);
+          addEditedContent(
+            dictionary.key,
+            core.getEmptyNode(section[0]) ?? "",
+            newKeyPath,
+            false
+          );
         },
         Icon: lucideReact.Plus,
         children: addNewElement.text
       }
-    ) })
+    )
   ] });
 };
-const MarkdownTextEditor = ({
+const ObjectTextEditor = ({
   section,
   keyPath,
   dictionary
+}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "flex flex-col gap-2", children: Object.keys(section).map(
+  (key) => {
+    const childKeyPath = [
+      ...keyPath,
+      { type: core.NodeType.Object, key }
+    ];
+    const typedSection = section;
+    const firstKey = Object.keys(
+      typedSection
+    )[0];
+    const subSection = typedSection[key] ?? core.getEmptyNode(typedSection[firstKey]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "tr",
+        {
+          className: "mt-2 p-2 text-xs",
+          children: String(key)
+        },
+        JSON.stringify(subSection)
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "block w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextEditor,
+        {
+          section: subSection,
+          keyPath: childKeyPath,
+          dictionary
+        }
+      ) }, JSON.stringify(subSection))
+    ] }, key);
+  }
+) }) }) });
+const MarkdownTextEditor = ({
+  section,
+  keyPath,
+  dictionary,
+  isDarkMode
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-    ContentEditorTextArea,
+  const [mode, setMode] = ReactExports.useState(
+    0
+    /* Edit */
+  );
+  const toggleContent2 = [
     {
-      variant: "default",
-      "aria-label": "Edit field",
-      keyPath: [...keyPath, { type: core.NodeType.Markdown }],
-      dictionary,
-      children: section[core.NodeType.Markdown]
+      content: "Edit",
+      value: 0
+      /* Edit */
+    },
+    {
+      content: "Preview",
+      value: 1
+      /* Preview */
     }
-  ) });
+  ];
+  const content = section[core.NodeType.Markdown];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-center gap-6 p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_SwitchSelector_index.SwitchSelector,
+      {
+        choices: toggleContent2,
+        value: mode,
+        onChange: setMode,
+        color: "text",
+        size: "sm",
+        className: "ml-auto"
+      }
+    ),
+    mode === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      ContentEditorTextArea,
+      {
+        variant: "default",
+        "aria-label": "Edit field",
+        keyPath: [...keyPath, { type: core.NodeType.Markdown }],
+        dictionary,
+        children: content
+      }
+    ),
+    mode === 1 && /* @__PURE__ */ jsxRuntime.jsx(components_MarkDownRender_index.MarkdownRenderer, { isDarkMode, children: content })
+  ] });
 };
 const NestedTextEditor = ({
   keyPath,
@@ -431,79 +473,87 @@ const NestedTextEditor = ({
 const TextEditor = ({
   section,
   keyPath,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
   const { tsxNotEditable } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
   const nodeType = core.getNodeType(section);
-  const isEditableSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(section);
-  if (!isEditableSection) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (typeof section === "object") {
-    if (nodeType === core.NodeType.ReactNode) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "[React Node]" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: tsxNotEditable })
-      ] });
-    }
-    if (nodeType === core.NodeType.Nested) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        NestedTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === core.NodeType.Translation) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        TranslationTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === core.NodeType.Enumeration) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        EnumerationTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === core.NodeType.Condition) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ConditionTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === core.NodeType.Markdown) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MarkdownTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
-    if (nodeType === core.NodeType.Array) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ArrayTextEditor,
-        {
-          dictionary,
-          keyPath,
-          section
-        }
-      );
-    }
+  if (nodeType === core.NodeType.ReactNode) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "[React Node]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: tsxNotEditable })
+    ] });
+  }
+  if (nodeType === core.NodeType.Nested) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NestedTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Translation) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TranslationTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Enumeration) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EnumerationTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Condition) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ConditionTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Markdown) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MarkdownTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section,
+        isDarkMode
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Array) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ArrayTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
+  }
+  if (nodeType === core.NodeType.Object) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      ObjectTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    ) });
   }
   if (nodeType === core.NodeType.Number) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -541,9 +591,23 @@ const TextEditor = ({
   }
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+  components_Container_index.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__ */ jsxRuntime.jsx(TextEditor, { ...props })
+  }
+);
 exports.TextEditor = TextEditor;
+exports.TextEditorContainer = TextEditorContainer;
 exports.traceKeys = traceKeys;
 //# sourceMappingURL=TextEditor.cjs.map