@intlayer/design-system 5.1.3 → 5.1.5

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

@@ -13,12 +13,12 @@ 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");
@@ -27,7 +27,6 @@ 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 = ({
@@ -35,7 +34,7 @@ const ContentEditorTextArea = ({
   dictionary,
   ...props
 }) => {
-  const { addEditedContent } = editorReact.useEditedContent();
+  const { editedContent, addEditedContent } = editorReact.useEditedContent();
   const configuration = editorReact.useConfiguration();
   const { auditContentDeclarationField, isLoading: isAuditing } = hooks_intlayerAPIHooks.useAuditContentDeclarationField();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -55,14 +54,17 @@ const ContentEditorTextArea = ({
           isLoading: isAuditing,
           onClick: () => {
             auditContentDeclarationField({
-              fileContent: JSON.stringify(dictionary),
+              fileContent: JSON.stringify({
+                ...dictionary,
+                ...editedContent?.[dictionary.key] ?? {}
+              }),
               keyPath,
               locales: configuration.internationalization.locales ?? []
             }).then((response) => {
-              if (!response.data) return;
+              if (!response?.data) return;
               try {
-                const editedContent = response.data.fileContent;
-                addEditedContent(dictionary.key, editedContent, keyPath);
+                const editedContent2 = response.data.fileContent;
+                addEditedContent(dictionary.key, editedContent2, keyPath);
               } catch (error) {
                 console.error(error);
               }
@@ -122,7 +124,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);
@@ -131,20 +133,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,
@@ -152,31 +155,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,
@@ -194,38 +203,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 = ({
@@ -233,83 +239,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,
@@ -317,14 +264,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,
             {
@@ -335,14 +306,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,
@@ -351,14 +323,54 @@ 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 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,
@@ -469,76 +481,82 @@ const TextEditor = ({
 }) => {
   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,
-          isDarkMode
-        }
-      );
-    }
-    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(
+      ObjectTextEditor,
+      {
+        dictionary,
+        keyPath,
+        section
+      }
+    );
   }
   if (nodeType === core.NodeType.Number) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -576,9 +594,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