@intlayer/design-system 8.4.4 → 8.4.6

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

@@ -1,2 +1,663 @@
-"use client";import{renameKey as e}from"../../../utils/object.mjs";import{useAuditContentDeclarationField as t}from"../../../hooks/reactQuery.mjs";import{Container as n}from"../../Container/index.mjs";import{Button as r,ButtonColor as i,ButtonSize as a,ButtonTextAlign as o,ButtonVariant as s}from"../../Button/Button.mjs";import{InputVariant as c}from"../../Input/Input.mjs";import{SwitchSelector as l,SwitchSelectorColor as u,SwitchSelectorSize as d}from"../../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as f}from"../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{ContentEditorInput as p}from"../../ContentEditor/ContentEditorInput.mjs";import{ContentEditorTextArea as m}from"../../ContentEditor/ContentEditorTextArea.mjs";import{Label as h}from"../../Label/index.mjs";import{MarkdownRenderer as g}from"../../MarkDownRender/MarkDownRender.mjs";import{EnumKeyInput as _}from"../EnumKeyInput.mjs";import{Fragment as v,useState as y}from"react";import{Plus as b,Trash as x,WandSparkles as S}from"lucide-react";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";import{useConfiguration as E,useEditedContent as D}from"@intlayer/editor-react";import{useIntlayer as O,useLocale as k}from"react-intlayer";import{getLocaleName as A}from"@intlayer/core/localization";import{getEmptyNode as j,getNodeType as M}from"@intlayer/core/dictionaryManipulator";import{NodeType as N}from"@intlayer/types/nodeType";const P=[`filePath`,`id`,`nodeType`],F=({keyPath:e,dictionary:n,...o})=>{let{editedContent:l,addEditedContent:u}=D(),d=E(),{mutate:f,isPending:p}=t();return w(m,{variant:c.DEFAULT,onContentChange:t=>u(n.localId,t,e),additionalButtons:w(r,{Icon:S,label:`Audit`,variant:s.HOVERABLE,size:a.ICON_SM,color:i.TEXT,className:`cursor-pointer hover:scale-110`,isLoading:p,onClick:()=>{f({fileContent:JSON.stringify({...n,...l?.[n.localId]??{}}),keyPath:e,locales:d?.internationalization.locales??[],aiOptions:{apiKey:d?.ai?.apiKey,model:d?.ai?.model,temperature:d?.ai?.temperature}},{onSuccess:t=>{if(t?.data)try{let r=t.data.fileContent;u(n.localId,r,e)}catch(e){console.error(e)}}})}}),...o})},I=({keyPath:e,dictionary:t,...n})=>{let{addEditedContent:r}=D();return w(p,{variant:c.DEFAULT,onContentChange:n=>r(t.localId,n,e),...n})},L=[{content:`False`,value:!1},{content:`True`,value:!0}],R=({dictionary:e,keyPath:t,...n})=>{let{addEditedContent:r}=D();return w(l,{choices:L,value:!0,onChange:n=>r(e.localId,n,t),color:u.TEXT,size:d.SM,...n})},z=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let{locale:i,defaultLocale:a}=k(),{selectedLocales:o,availableLocales:s}=f(),c=e[N.Translation],l=Object.keys(c),u=s.length>o.length?o:[...new Set([...s,...l])],d=e[N.Translation];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:u.map(e=>{let o=`${JSON.stringify(t)}-translation-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:A(e,i)})}),w(`tr`,{className:`flex`,children:w(`td`,{className:`flex w-full`,children:w($,{section:d[e]??j(d[a]),keyPath:[...t,{type:N.Translation,key:e}],dictionary:n,renderSection:r})})})]},o)})})})},B=({section:t,keyPath:n,dictionary:a,renderSection:c})=>{let{addEditedContent:l}=D(),{addNewEnumeration:u,removeEnumeration:d}=O(`navigation-view`),f=t[N.Enumeration],p=Object.keys(f)[0];return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:Object.keys(t[N.Enumeration]).map(i=>{let o=[...n,{type:N.Enumeration,key:i}],s=`${JSON.stringify(n)}-enumeration-${i}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full`,children:w(`td`,{className:`flex w-full`,children:w(`div`,{className:`flex flex-1`,children:w(r,{label:d.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,Icon:x,onClick:()=>l(a.localId,void 0,o),children:d.text})})})}),w(`tr`,{className:`w-full p-2`,children:w(`td`,{className:`flex w-full`,children:w(_,{value:i,onChange:r=>{let o=t[N.Enumeration],s=e(o,i,r),c={...t,[N.Enumeration]:s};console.log(`newValue`,c),l(a.localId,c,n)}})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:f[i]??j(f[p]),keyPath:o,dictionary:a,renderSection:c})})})]},s)})})}),w(r,{label:u.label.value,variant:s.HOVERABLE,color:i.NEUTRAL,textAlign:o.LEFT,isFullWidth:!0,onClick:()=>l(a.localId,j(f[p])??``,[...n,{type:N.Enumeration,key:`unknown`}]),Icon:b,className:`m-2`,children:u.text})]})},V=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Condition];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`true`,`false`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-condition-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.true),keyPath:[...t,{type:N.Condition,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},H=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Gender];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`male`,`female`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-gender-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.male),keyPath:[...t,{type:N.Gender,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},U=({section:e,keyPath:t,dictionary:n,renderSection:a})=>{let{addEditedContent:c}=D(),{addNewElement:l,removeElement:u}=O(`navigation-view`);return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:e.map((i,o)=>{let s=`${JSON.stringify(t)}-array-${o}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2`,children:w(`td`,{className:`flex w-full`,children:T(`div`,{className:`flex w-full items-center justify-between gap-2`,children:[w(`span`,{className:`text-xs`,children:String(o)}),w(r,{label:u.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,onClick:()=>{let e=[...t,{type:N.Array,key:o}];c(n.localId,void 0,e)},Icon:x,children:u.text})]})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i??j(e[0]),keyPath:[...t,{type:N.Array,key:o}],dictionary:n,renderSection:a})})})]},s)})})}),w(r,{label:l.label.value,variant:s.HOVERABLE,color:i.NEUTRAL,textAlign:o.LEFT,isFullWidth:!0,onClick:()=>{let r=[...t,{type:N.Array,key:e.length}];c(n.localId,j(e[0])??``,r,!1)},Icon:b,children:l.text})]})},W=({section:e,keyPath:t,dictionary:n,renderSection:r})=>w(C,{children:w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex flex-col gap-2`,children:Object.keys(e).map(i=>{let a=[...t,{type:N.Object,key:i}],o=e,s=Object.keys(o)[0],c=o[i]??j(o[s]),l=`${JSON.stringify(t)}-object-${i}`;return T(v,{children:[w(`tr`,{className:`mt-2 p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(i)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:c,keyPath:a,dictionary:n,renderSection:r})})})]},l)})})})});var G=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(G||{}),K=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(K||{});const q=({section:e,keyPath:t,dictionary:n})=>{let[r,i]=y(K.Edit),a=[{content:`Edit`,value:K.Edit},{content:`Preview`,value:K.Preview}],o=[...t,{type:N.HTML}],s=e[N.HTML];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:a,value:r,onChange:i,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:s,keyPath:o,dictionary:n,renderSection:r===K.Preview?e=>w(`div`,{dangerouslySetInnerHTML:{__html:e}}):void 0})]})},J=({section:e,keyPath:t,dictionary:n,isDarkMode:r})=>{let[i,a]=y(G.Edit),o=[{content:`Edit`,value:G.Edit},{content:`Preview`,value:G.Preview}],s=[...t,{type:N.Markdown}],c=e[N.Markdown];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:o,value:i,onChange:a,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:c,keyPath:s,dictionary:n,renderSection:i===G.Preview?e=>w(g,{isDarkMode:r,children:e}):void 0})]})},Y=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.Insertion}],i=e[N.Insertion];return w(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:w($,{section:i,keyPath:r,...n})})},X=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.File}],i=e[N.File],{content:a}=e;return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[T(`span`,{className:`text-neutral text-sm`,children:[i,` `]}),w($,{section:a,keyPath:r,...n})]})},Z=({keyPath:e,dictionary:t,renderSection:n,section:r,...i})=>{let{addEditedContent:a}=D(),o=r[N.Nested],s=[...e,{type:N.Nested}];return T(`div`,{className:`flex w-full flex-col gap-4 p-2`,children:[w(h,{children:`Dictionary key`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:c.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,dictionaryKey:String(e)},s)},children:o.dictionaryKey??``}),w(h,{children:`Path (optional)`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:c.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,path:e===``?void 0:e},s)},children:o.path??``})]})},Q=({section:e,keyPath:t,dictionary:n,renderSection:r,isDarkMode:i})=>{let{tsxNotEditable:a}=O(`navigation-view`),o=M(e);return o===N.ReactNode?T(`div`,{className:`flex w-full flex-col gap-2`,children:[w(`span`,{children:`(React Node)`}),w(`span`,{className:`flex text-neutral text-xs`,children:a})]}):o===N.Nested?w(Z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Translation?w(z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Enumeration?w(B,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Condition?w(V,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Gender?w(H,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Insertion?w(Y,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Markdown?w(J,{dictionary:n,keyPath:t,section:e,isDarkMode:i}):o===N.HTML?w(q,{dictionary:n,keyPath:t,section:e}):o===N.File?w(X,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Array?w(U,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Object?w(W,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Number?w(`div`,{className:`w-full p-2`,children:w(I,{dictionary:n,keyPath:t,type:`number`,"aria-label":`Edit field`,children:e})}):o===N.Text?w(`div`,{className:`w-full p-2`,children:typeof r==`function`?r(e):w(F,{variant:c.DEFAULT,"aria-label":`Edit field`,keyPath:t,dictionary:n,children:e})}):o===N.Boolean?w(`div`,{className:`w-full p-2`,children:w(R,{dictionary:n,keyPath:t,value:e})}):T(`div`,{className:`w-full p-2`,children:[`Error. Format not supported.`,JSON.stringify(e,null,2),JSON.stringify(t,null,2),`NodeType : `,o]})},$=e=>w(n,{border:!0,background:`none`,className:`top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky`,roundedSize:`xl`,children:w(Q,{...e})});export{Q as TextEditor,$ as TextEditorContainer,P as traceKeys};
+'use client';
+
+import { renameKey } from "../../../utils/object.mjs";
+import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
+import { Container } from "../../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
+import { InputVariant } from "../../Input/Input.mjs";
+import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
+import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.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 { MarkdownRenderer as MarkdownRenderer$1 } from "../../MarkDownRender/MarkDownRender.mjs";
+import { EnumKeyInput } from "../EnumKeyInput.mjs";
+import { Fragment, useState } from "react";
+import { Plus, Trash, WandSparkles } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer, useLocale } from "react-intlayer";
+import { getLocaleName } from "@intlayer/core/localization";
+import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
+import * as NodeTypes from "@intlayer/types/nodeType";
+
+//#region src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
+const traceKeys = [
+	"filePath",
+	"id",
+	"nodeType"
+];
+const ContentEditorTextArea = ({ keyPath, dictionary, ...props }) => {
+	const { editedContent, addEditedContent } = useEditedContent();
+	const configuration = useConfiguration();
+	const { mutate: auditContentDeclarationField, isPending: isAuditing } = useAuditContentDeclarationField();
+	return /* @__PURE__ */ jsx(ContentEditorTextArea$1, {
+		variant: InputVariant.DEFAULT,
+		onContentChange: (newValue) => addEditedContent(dictionary.localId, newValue, keyPath),
+		additionalButtons: /* @__PURE__ */ jsx(Button, {
+			Icon: WandSparkles,
+			label: "Audit",
+			variant: ButtonVariant.HOVERABLE,
+			size: ButtonSize.ICON_SM,
+			color: ButtonColor.TEXT,
+			className: "cursor-pointer hover:scale-110",
+			isLoading: isAuditing,
+			onClick: () => {
+				auditContentDeclarationField({
+					fileContent: JSON.stringify({
+						...dictionary,
+						...editedContent?.[dictionary.localId] ?? {}
+					}),
+					keyPath,
+					locales: configuration?.internationalization.locales ?? [],
+					aiOptions: {
+						apiKey: configuration?.ai?.apiKey,
+						model: configuration?.ai?.model,
+						temperature: configuration?.ai?.temperature
+					}
+				}, { onSuccess: (response) => {
+					if (!response?.data) return;
+					try {
+						const editedContent = response.data.fileContent;
+						addEditedContent(dictionary.localId, editedContent, keyPath);
+					} catch (error) {
+						console.error(error);
+					}
+				} });
+			}
+		}),
+		...props
+	});
+};
+const ContentEditorInput = ({ keyPath, dictionary, ...props }) => {
+	const { addEditedContent } = useEditedContent();
+	return /* @__PURE__ */ jsx(ContentEditorInput$1, {
+		variant: InputVariant.DEFAULT,
+		onContentChange: (newValue) => addEditedContent(dictionary.localId, newValue, keyPath),
+		...props
+	});
+};
+const toggleContent = [{
+	content: "False",
+	value: false
+}, {
+	content: "True",
+	value: true
+}];
+const ContentEditorToggle = ({ dictionary, keyPath, ...props }) => {
+	const { addEditedContent } = useEditedContent();
+	return /* @__PURE__ */ jsx(SwitchSelector, {
+		choices: toggleContent,
+		value: true,
+		onChange: (value) => addEditedContent(dictionary.localId, value, keyPath),
+		color: SwitchSelectorColor.TEXT,
+		size: SwitchSelectorSize.SM,
+		...props
+	});
+};
+const TranslationTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
+	const { locale, defaultLocale } = useLocale();
+	const { selectedLocales, availableLocales } = useLocaleSwitcherContent();
+	const sectionContent = section[NodeTypes.TRANSLATION];
+	const sectionContentKeys = Object.keys(sectionContent);
+	const localesList = availableLocales.length > selectedLocales.length ? selectedLocales : [...new Set([...availableLocales, ...sectionContentKeys])];
+	const content = section[NodeTypes.TRANSLATION];
+	return /* @__PURE__ */ jsx("table", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsx("tbody", {
+			className: "flex w-full flex-col gap-2",
+			children: localesList.map((translationKey) => {
+				const uniqueKey = `${JSON.stringify(keyPath)}-translation-${translationKey}`;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+					className: "mt-2 w-full p-2 text-xs",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: getLocaleName(translationKey, locale)
+					})
+				}), /* @__PURE__ */ jsx("tr", {
+					className: "flex",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: /* @__PURE__ */ jsx(TextEditorContainer, {
+							section: content[translationKey] ?? getEmptyNode(content[defaultLocale]),
+							keyPath: [...keyPath, {
+								type: NodeTypes.TRANSLATION,
+								key: translationKey
+							}],
+							dictionary,
+							renderSection
+						})
+					})
+				})] }, uniqueKey);
+			})
+		})
+	});
+};
+const EnumerationTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
+	const { addEditedContent } = useEditedContent();
+	const { addNewEnumeration, removeEnumeration } = useIntlayer("navigation-view");
+	const content = section[NodeTypes.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[NodeTypes.ENUMERATION]).map((enumKey) => {
+					const childrenKeyPath = [...keyPath, {
+						type: NodeTypes.ENUMERATION,
+						key: enumKey
+					}];
+					const uniqueKey = `${JSON.stringify(keyPath)}-enumeration-${enumKey}`;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("tr", {
+							className: "mt-2 w-full",
+							children: /* @__PURE__ */ jsx("td", {
+								className: "flex w-full",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex flex-1",
+									children: /* @__PURE__ */ jsx(Button, {
+										label: removeEnumeration.label.value,
+										variant: "hoverable",
+										size: "sm",
+										color: "error",
+										className: "ml-auto text-neutral hover:text-error",
+										Icon: Trash,
+										onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
+										children: removeEnumeration.text
+									})
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("tr", {
+							className: "w-full p-2",
+							children: /* @__PURE__ */ jsx("td", {
+								className: "flex w-full",
+								children: /* @__PURE__ */ jsx(EnumKeyInput, {
+									value: enumKey,
+									onChange: (value) => {
+										const preValueContent = section[NodeTypes.ENUMERATION];
+										const newValueContent = renameKey(preValueContent, enumKey, value);
+										const newValue = {
+											...section,
+											[NodeTypes.ENUMERATION]: newValueContent
+										};
+										console.log("newValue", newValue);
+										addEditedContent(dictionary.localId, newValue, keyPath);
+									}
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("tr", {
+							className: "block w-full",
+							children: /* @__PURE__ */ jsx("td", {
+								className: "flex w-full",
+								children: /* @__PURE__ */ jsx(TextEditor, {
+									section: content[enumKey] ?? getEmptyNode(content[firstKey]),
+									keyPath: childrenKeyPath,
+									dictionary,
+									renderSection
+								})
+							})
+						})
+					] }, uniqueKey);
+				})
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			label: addNewEnumeration.label.value,
+			variant: ButtonVariant.HOVERABLE,
+			color: ButtonColor.NEUTRAL,
+			textAlign: ButtonTextAlign.LEFT,
+			isFullWidth: true,
+			onClick: () => addEditedContent(dictionary.localId, getEmptyNode(content[firstKey]) ?? "", [...keyPath, {
+				type: NodeTypes.ENUMERATION,
+				key: "unknown"
+			}]),
+			Icon: Plus,
+			className: "m-2",
+			children: addNewEnumeration.text
+		})]
+	});
+};
+const ConditionTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
+	const content = section[NodeTypes.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) => {
+				const uniqueKey = `${JSON.stringify(keyPath)}-condition-${condKey}`;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+					className: "mt-2 block w-full p-2 text-xs",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: String(condKey)
+					})
+				}), /* @__PURE__ */ jsx("tr", {
+					className: "block w-full",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: /* @__PURE__ */ jsx(TextEditorContainer, {
+							section: content[condKey] ?? getEmptyNode(content.true),
+							keyPath: [...keyPath, {
+								type: NodeTypes.CONDITION,
+								key: condKey
+							}],
+							dictionary,
+							renderSection
+						})
+					})
+				})] }, uniqueKey);
+			})
+		})
+	});
+};
+const GenderTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
+	const content = section[NodeTypes.GENDER];
+	return /* @__PURE__ */ jsx("table", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsx("tbody", {
+			className: "flex w-full flex-col gap-2",
+			children: [
+				"male",
+				"female",
+				"fallback"
+			].map((condKey) => {
+				const uniqueKey = `${JSON.stringify(keyPath)}-gender-${condKey}`;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+					className: "mt-2 block w-full p-2 text-xs",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: String(condKey)
+					})
+				}), /* @__PURE__ */ jsx("tr", {
+					className: "block w-full",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "flex w-full",
+						children: /* @__PURE__ */ jsx(TextEditorContainer, {
+							section: content[condKey] ?? getEmptyNode(content.male),
+							keyPath: [...keyPath, {
+								type: NodeTypes.GENDER,
+								key: condKey
+							}],
+							dictionary,
+							renderSection
+						})
+					})
+				})] }, uniqueKey);
+			})
+		})
+	});
+};
+const ArrayTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
+	const { addEditedContent } = useEditedContent();
+	const { addNewElement, removeElement } = useIntlayer("navigation-view");
+	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) => {
+					const uniqueKey = `${JSON.stringify(keyPath)}-array-${index}`;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+						className: "mt-2 w-full p-2",
+						children: /* @__PURE__ */ jsx("td", {
+							className: "flex w-full",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex w-full items-center justify-between gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-xs",
+									children: String(index)
+								}), /* @__PURE__ */ jsx(Button, {
+									label: removeElement.label.value,
+									variant: "hoverable",
+									size: "sm",
+									color: "error",
+									className: "ml-auto text-neutral hover:text-error",
+									onClick: () => {
+										const newKeyPath = [...keyPath, {
+											type: NodeTypes.ARRAY,
+											key: index
+										}];
+										addEditedContent(dictionary.localId, void 0, newKeyPath);
+									},
+									Icon: Trash,
+									children: removeElement.text
+								})]
+							})
+						})
+					}), /* @__PURE__ */ jsx("tr", {
+						className: "block w-full",
+						children: /* @__PURE__ */ jsx("td", {
+							className: "flex w-full",
+							children: /* @__PURE__ */ jsx(TextEditorContainer, {
+								section: subSection ?? getEmptyNode(section[0]),
+								keyPath: [...keyPath, {
+									type: NodeTypes.ARRAY,
+									key: index
+								}],
+								dictionary,
+								renderSection
+							})
+						})
+					})] }, uniqueKey);
+				})
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			label: addNewElement.label.value,
+			variant: ButtonVariant.HOVERABLE,
+			color: ButtonColor.NEUTRAL,
+			textAlign: ButtonTextAlign.LEFT,
+			isFullWidth: true,
+			onClick: () => {
+				const newKeyPath = [...keyPath, {
+					type: NodeTypes.ARRAY,
+					key: section.length
+				}];
+				addEditedContent(dictionary.localId, getEmptyNode(section[0]) ?? "", newKeyPath, false);
+			},
+			Icon: Plus,
+			children: addNewElement.text
+		})]
+	});
+};
+const ObjectTextEditor = ({ section, keyPath, dictionary, renderSection }) => /* @__PURE__ */ jsx(Fragment$1, { 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: NodeTypes.OBJECT,
+				key
+			}];
+			const typedSection = section;
+			const firstKey = Object.keys(typedSection)[0];
+			const subSection = typedSection[key] ?? getEmptyNode(typedSection[firstKey]);
+			const uniqueKey = `${JSON.stringify(keyPath)}-object-${key}`;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+				className: "mt-2 p-2 text-xs",
+				children: /* @__PURE__ */ jsx("td", {
+					className: "flex w-full",
+					children: String(key)
+				})
+			}), /* @__PURE__ */ jsx("tr", {
+				className: "block w-full",
+				children: /* @__PURE__ */ jsx("td", {
+					className: "flex w-full",
+					children: /* @__PURE__ */ jsx(TextEditor, {
+						section: subSection,
+						keyPath: childKeyPath,
+						dictionary,
+						renderSection
+					})
+				})
+			})] }, uniqueKey);
+		})
+	})
+}) });
+var MarkdownViewMode = /* @__PURE__ */ function(MarkdownViewMode) {
+	MarkdownViewMode[MarkdownViewMode["Edit"] = 0] = "Edit";
+	MarkdownViewMode[MarkdownViewMode["Preview"] = 1] = "Preview";
+	return MarkdownViewMode;
+}(MarkdownViewMode || {});
+var HtmlViewMode = /* @__PURE__ */ function(HtmlViewMode) {
+	HtmlViewMode[HtmlViewMode["Edit"] = 0] = "Edit";
+	HtmlViewMode[HtmlViewMode["Preview"] = 1] = "Preview";
+	return HtmlViewMode;
+}(HtmlViewMode || {});
+const HtmlTextEditor = ({ section, keyPath, dictionary }) => {
+	const [mode, setMode] = useState(HtmlViewMode.Edit);
+	const toggleContent = [{
+		content: "Edit",
+		value: HtmlViewMode.Edit
+	}, {
+		content: "Preview",
+		value: HtmlViewMode.Preview
+	}];
+	const childKeyPath = [...keyPath, { type: NodeTypes.HTML }];
+	const content = section[NodeTypes.HTML];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col justify-center gap-6 p-2",
+		children: [/* @__PURE__ */ jsx(SwitchSelector, {
+			choices: toggleContent,
+			value: mode,
+			onChange: setMode,
+			color: SwitchSelectorColor.TEXT,
+			size: SwitchSelectorSize.SM,
+			className: "ml-auto"
+		}), /* @__PURE__ */ jsx(TextEditorContainer, {
+			section: content,
+			keyPath: childKeyPath,
+			dictionary,
+			renderSection: mode === HtmlViewMode.Preview ? (content) => /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: content } }) : void 0
+		})]
+	});
+};
+const MarkdownTextEditor = ({ section, keyPath, dictionary, isDarkMode }) => {
+	const [mode, setMode] = useState(MarkdownViewMode.Edit);
+	const toggleContent = [{
+		content: "Edit",
+		value: MarkdownViewMode.Edit
+	}, {
+		content: "Preview",
+		value: MarkdownViewMode.Preview
+	}];
+	const childKeyPath = [...keyPath, { type: NodeTypes.MARKDOWN }];
+	const content = section[NodeTypes.MARKDOWN];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col justify-center gap-6 p-2",
+		children: [/* @__PURE__ */ jsx(SwitchSelector, {
+			choices: toggleContent,
+			value: mode,
+			onChange: setMode,
+			color: SwitchSelectorColor.TEXT,
+			size: SwitchSelectorSize.SM,
+			className: "ml-auto"
+		}), /* @__PURE__ */ jsx(TextEditorContainer, {
+			section: content,
+			keyPath: childKeyPath,
+			dictionary,
+			renderSection: mode === MarkdownViewMode.Preview ? (content) => /* @__PURE__ */ jsx(MarkdownRenderer$1, {
+				isDarkMode,
+				children: content
+			}) : void 0
+		})]
+	});
+};
+const InsertionTextEditor = ({ section, keyPath, ...props }) => {
+	const childKeyPath = [...keyPath, { type: NodeTypes.INSERTION }];
+	const content = section[NodeTypes.INSERTION];
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-col justify-center gap-6 p-2",
+		children: /* @__PURE__ */ jsx(TextEditorContainer, {
+			section: content,
+			keyPath: childKeyPath,
+			...props
+		})
+	});
+};
+const FileTextEditor = ({ section, keyPath, ...props }) => {
+	const childKeyPath = [...keyPath, { type: NodeTypes.FILE }];
+	const fileUrl = section[NodeTypes.FILE];
+	const { content } = section;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col justify-center gap-6 p-2",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-neutral text-sm",
+			children: [fileUrl, " "]
+		}), /* @__PURE__ */ jsx(TextEditorContainer, {
+			section: content,
+			keyPath: childKeyPath,
+			...props
+		})]
+	});
+};
+const NestedTextEditor = ({ keyPath, dictionary, renderSection, section, ...props }) => {
+	const { addEditedContent } = useEditedContent();
+	const content = section[NodeTypes.NESTED];
+	const childrenKeyPath = [...keyPath, { type: NodeTypes.NESTED }];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-4 p-2",
+		children: [
+			/* @__PURE__ */ jsx(Label, { children: "Dictionary key" }),
+			/* @__PURE__ */ jsx(ContentEditorInput$1, {
+				"aria-label": "Edit field",
+				type: "text",
+				variant: InputVariant.DEFAULT,
+				...props,
+				onContentChange: (newValue) => {
+					addEditedContent(dictionary.localId, {
+						...content,
+						dictionaryKey: String(newValue)
+					}, childrenKeyPath);
+				},
+				children: content.dictionaryKey ?? ""
+			}),
+			/* @__PURE__ */ jsx(Label, { children: "Path (optional)" }),
+			/* @__PURE__ */ jsx(ContentEditorInput$1, {
+				"aria-label": "Edit field",
+				type: "text",
+				variant: InputVariant.DEFAULT,
+				...props,
+				onContentChange: (newValue) => {
+					addEditedContent(dictionary.localId, {
+						...content,
+						path: newValue !== "" ? newValue : void 0
+					}, childrenKeyPath);
+				},
+				children: content.path ?? ""
+			})
+		]
+	});
+};
+const TextEditor = ({ section, keyPath, dictionary, renderSection, isDarkMode }) => {
+	const { tsxNotEditable } = useIntlayer("navigation-view");
+	const nodeType = getNodeType(section);
+	if (nodeType === NodeTypes.REACT_NODE) return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("span", { children: "(React Node)" }), /* @__PURE__ */ jsx("span", {
+			className: "flex text-neutral text-xs",
+			children: tsxNotEditable
+		})]
+	});
+	if (nodeType === NodeTypes.NESTED) return /* @__PURE__ */ jsx(NestedTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.TRANSLATION) return /* @__PURE__ */ jsx(TranslationTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.ENUMERATION) return /* @__PURE__ */ jsx(EnumerationTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.CONDITION) return /* @__PURE__ */ jsx(ConditionTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.GENDER) return /* @__PURE__ */ jsx(GenderTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.INSERTION) return /* @__PURE__ */ jsx(InsertionTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.MARKDOWN) return /* @__PURE__ */ jsx(MarkdownTextEditor, {
+		dictionary,
+		keyPath,
+		section,
+		isDarkMode
+	});
+	if (nodeType === NodeTypes.HTML) return /* @__PURE__ */ jsx(HtmlTextEditor, {
+		dictionary,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.FILE) return /* @__PURE__ */ jsx(FileTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.ARRAY) return /* @__PURE__ */ jsx(ArrayTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.OBJECT) return /* @__PURE__ */ jsx(ObjectTextEditor, {
+		dictionary,
+		renderSection,
+		keyPath,
+		section
+	});
+	if (nodeType === NodeTypes.NUMBER) return /* @__PURE__ */ jsx("div", {
+		className: "w-full p-2",
+		children: /* @__PURE__ */ jsx(ContentEditorInput, {
+			dictionary,
+			keyPath,
+			type: "number",
+			"aria-label": "Edit field",
+			children: section
+		})
+	});
+	if (nodeType === NodeTypes.TEXT) return /* @__PURE__ */ jsx("div", {
+		className: "w-full p-2",
+		children: typeof renderSection === "function" ? renderSection(section) : /* @__PURE__ */ jsx(ContentEditorTextArea, {
+			variant: InputVariant.DEFAULT,
+			"aria-label": "Edit field",
+			keyPath,
+			dictionary,
+			children: section
+		})
+	});
+	if (nodeType === NodeTypes.BOOLEAN) return /* @__PURE__ */ jsx("div", {
+		className: "w-full p-2",
+		children: /* @__PURE__ */ jsx(ContentEditorToggle, {
+			dictionary,
+			keyPath,
+			value: section
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full p-2",
+		children: [
+			"Error. Format not supported.",
+			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 })
+});
+
+//#endregion
+export { TextEditor, TextEditorContainer, traceKeys };
 //# sourceMappingURL=TextEditor.mjs.map