@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,662 +1,2 @@
-'use client';
-
-import { Container } from "../../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
-import { InputVariant } from "../../Input/Input.mjs";
-import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.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 { renameKey } from "../../../utils/object.mjs";
-import { EnumKeyInput } from "../EnumKeyInput.mjs";
-import { Plus, Trash, WandSparkles } from "lucide-react";
-import { Fragment, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { getEmptyNode, getLocaleName, getNodeType } from "@intlayer/core";
-import { useIntlayer, useLocale } from "react-intlayer";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
-import { NodeType } from "@intlayer/types";
-
-//#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[NodeType.Translation];
-	const sectionContentKeys = Object.keys(sectionContent);
-	const localesList = availableLocales.length > selectedLocales.length ? selectedLocales : [...new Set([...availableLocales, ...sectionContentKeys])];
-	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) => {
-				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: NodeType.Translation,
-								key: translationKey
-							}],
-							dictionary,
-							renderSection
-						})
-					})
-				})] }, uniqueKey);
-			})
-		})
-	});
-};
-const EnumerationTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
-	const { addEditedContent } = useEditedContent();
-	const { addNewEnumeration, removeEnumeration } = useIntlayer("navigation-view");
-	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) => {
-					const childrenKeyPath = [...keyPath, {
-						type: NodeType.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[NodeType.Enumeration];
-										const newValueContent = renameKey(preValueContent, enumKey, value);
-										const newValue = {
-											...section,
-											[NodeType.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: NodeType.Enumeration,
-				key: "unknown"
-			}]),
-			Icon: Plus,
-			className: "m-2",
-			children: addNewEnumeration.text
-		})]
-	});
-};
-const ConditionTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
-	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) => {
-				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: NodeType.Condition,
-								key: condKey
-							}],
-							dictionary,
-							renderSection
-						})
-					})
-				})] }, uniqueKey);
-			})
-		})
-	});
-};
-const GenderTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
-	const content = section[NodeType.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: NodeType.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: NodeType.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: NodeType.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: NodeType.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: NodeType.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: NodeType.HTML }];
-	const content = section[NodeType.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: NodeType.Markdown }];
-	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: 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: NodeType.Insertion }];
-	const content = section[NodeType.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: NodeType.File }];
-	const fileUrl = section[NodeType.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[NodeType.Nested];
-	const childrenKeyPath = [...keyPath, { type: NodeType.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 === NodeType.ReactNode) 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 === NodeType.Nested) return /* @__PURE__ */ jsx(NestedTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Translation) return /* @__PURE__ */ jsx(TranslationTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Enumeration) return /* @__PURE__ */ jsx(EnumerationTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Condition) return /* @__PURE__ */ jsx(ConditionTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Gender) return /* @__PURE__ */ jsx(GenderTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Insertion) return /* @__PURE__ */ jsx(InsertionTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Markdown) return /* @__PURE__ */ jsx(MarkdownTextEditor, {
-		dictionary,
-		keyPath,
-		section,
-		isDarkMode
-	});
-	if (nodeType === NodeType.HTML) return /* @__PURE__ */ jsx(HtmlTextEditor, {
-		dictionary,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.File) return /* @__PURE__ */ jsx(FileTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Array) return /* @__PURE__ */ jsx(ArrayTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.Object) return /* @__PURE__ */ jsx(ObjectTextEditor, {
-		dictionary,
-		renderSection,
-		keyPath,
-		section
-	});
-	if (nodeType === NodeType.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 === NodeType.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 === NodeType.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 };
+"use client";import{Container as e}from"../../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonTextAlign as i,ButtonVariant as a}from"../../Button/Button.mjs";import{InputVariant as o}from"../../Input/Input.mjs";import{useAuditContentDeclarationField as s}from"../../../hooks/reactQuery.mjs";import{SwitchSelector as c,SwitchSelectorColor as l,SwitchSelectorSize as u}from"../../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as d}from"../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{ContentEditorInput as f}from"../../ContentEditor/ContentEditorInput.mjs";import{ContentEditorTextArea as p}from"../../ContentEditor/ContentEditorTextArea.mjs";import{Label as m}from"../../Label/index.mjs";import{MarkdownRenderer as h}from"../../MarkDownRender/MarkDownRender.mjs";import{renameKey as g}from"../../../utils/object.mjs";import{EnumKeyInput as _}from"../EnumKeyInput.mjs";import{Plus as v,Trash as y,WandSparkles as b}from"lucide-react";import{Fragment as x,useState as S}from"react";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";import{useIntlayer as E,useLocale as D}from"react-intlayer";import{getLocaleName as O}from"@intlayer/core/localization";import{useConfiguration as k,useEditedContent as A}from"@intlayer/editor-react";import{getEmptyNode as j,getNodeType as M}from"@intlayer/core/dictionaryManipulator";import{NodeType as N}from"@intlayer/types";const P=[`filePath`,`id`,`nodeType`],F=({keyPath:e,dictionary:i,...c})=>{let{editedContent:l,addEditedContent:u}=A(),d=k(),{mutate:f,isPending:m}=s();return w(p,{variant:o.DEFAULT,onContentChange:t=>u(i.localId,t,e),additionalButtons:w(t,{Icon:b,label:`Audit`,variant:a.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`cursor-pointer hover:scale-110`,isLoading:m,onClick:()=>{f({fileContent:JSON.stringify({...i,...l?.[i.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 n=t.data.fileContent;u(i.localId,n,e)}catch(e){console.error(e)}}})}}),...c})},I=({keyPath:e,dictionary:t,...n})=>{let{addEditedContent:r}=A();return w(f,{variant:o.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}=A();return w(c,{choices:L,value:!0,onChange:n=>r(e.localId,n,t),color:l.TEXT,size:u.SM,...n})},z=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let{locale:i,defaultLocale:a}=D(),{selectedLocales:o,availableLocales:s}=d(),c=e[N.Translation],l=Object.keys(c),u=s.length>o.length?o:[...new Set([...s,...l])],f=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(x,{children:[w(`tr`,{className:`mt-2 w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:O(e,i)})}),w(`tr`,{className:`flex`,children:w(`td`,{className:`flex w-full`,children:w($,{section:f[e]??j(f[a]),keyPath:[...t,{type:N.Translation,key:e}],dictionary:n,renderSection:r})})})]},o)})})})},B=({section:e,keyPath:r,dictionary:o,renderSection:s})=>{let{addEditedContent:c}=A(),{addNewEnumeration:l,removeEnumeration:u}=E(`navigation-view`),d=e[N.Enumeration],f=Object.keys(d)[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(e[N.Enumeration]).map(n=>{let i=[...r,{type:N.Enumeration,key:n}],a=`${JSON.stringify(r)}-enumeration-${n}`;return T(x,{children:[w(`tr`,{className:`mt-2 w-full`,children:w(`td`,{className:`flex w-full`,children:w(`div`,{className:`flex flex-1`,children:w(t,{label:u.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,Icon:y,onClick:()=>c(o.localId,void 0,i),children:u.text})})})}),w(`tr`,{className:`w-full p-2`,children:w(`td`,{className:`flex w-full`,children:w(_,{value:n,onChange:t=>{let i=e[N.Enumeration],a=g(i,n,t),s={...e,[N.Enumeration]:a};console.log(`newValue`,s),c(o.localId,s,r)}})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:d[n]??j(d[f]),keyPath:i,dictionary:o,renderSection:s})})})]},a)})})}),w(t,{label:l.label.value,variant:a.HOVERABLE,color:n.NEUTRAL,textAlign:i.LEFT,isFullWidth:!0,onClick:()=>c(o.localId,j(d[f])??``,[...r,{type:N.Enumeration,key:`unknown`}]),Icon:v,className:`m-2`,children:l.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(x,{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(x,{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:r,dictionary:o,renderSection:s})=>{let{addEditedContent:c}=A(),{addNewElement:l,removeElement:u}=E(`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((n,i)=>{let a=`${JSON.stringify(r)}-array-${i}`;return T(x,{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(i)}),w(t,{label:u.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,onClick:()=>{let e=[...r,{type:N.Array,key:i}];c(o.localId,void 0,e)},Icon:y,children:u.text})]})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:n??j(e[0]),keyPath:[...r,{type:N.Array,key:i}],dictionary:o,renderSection:s})})})]},a)})})}),w(t,{label:l.label.value,variant:a.HOVERABLE,color:n.NEUTRAL,textAlign:i.LEFT,isFullWidth:!0,onClick:()=>{let t=[...r,{type:N.Array,key:e.length}];c(o.localId,j(e[0])??``,t,!1)},Icon:v,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(x,{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]=S(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(c,{choices:a,value:r,onChange:i,color:l.TEXT,size:u.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]=S(G.Edit),o=[{content:`Edit`,value:G.Edit},{content:`Preview`,value:G.Preview}],s=[...t,{type:N.Markdown}],d=e[N.Markdown];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(c,{choices:o,value:i,onChange:a,color:l.TEXT,size:u.SM,className:`ml-auto`}),w($,{section:d,keyPath:s,dictionary:n,renderSection:i===G.Preview?e=>w(h,{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}=A(),s=r[N.Nested],c=[...e,{type:N.Nested}];return T(`div`,{className:`flex w-full flex-col gap-4 p-2`,children:[w(m,{children:`Dictionary key`}),w(f,{"aria-label":`Edit field`,type:`text`,variant:o.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...s,dictionaryKey:String(e)},c)},children:s.dictionaryKey??``}),w(m,{children:`Path (optional)`}),w(f,{"aria-label":`Edit field`,type:`text`,variant:o.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...s,path:e===``?void 0:e},c)},children:s.path??``})]})},Q=({section:e,keyPath:t,dictionary:n,renderSection:r,isDarkMode:i})=>{let{tsxNotEditable:a}=E(`navigation-view`),s=M(e);return s===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})]}):s===N.Nested?w(Z,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Translation?w(z,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Enumeration?w(B,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Condition?w(V,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Gender?w(H,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Insertion?w(Y,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Markdown?w(J,{dictionary:n,keyPath:t,section:e,isDarkMode:i}):s===N.HTML?w(q,{dictionary:n,keyPath:t,section:e}):s===N.File?w(X,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Array?w(U,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Object?w(W,{dictionary:n,renderSection:r,keyPath:t,section:e}):s===N.Number?w(`div`,{className:`w-full p-2`,children:w(I,{dictionary:n,keyPath:t,type:`number`,"aria-label":`Edit field`,children:e})}):s===N.Text?w(`div`,{className:`w-full p-2`,children:typeof r==`function`?r(e):w(F,{variant:o.DEFAULT,"aria-label":`Edit field`,keyPath:t,dictionary:n,children:e})}):s===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 : `,s]})},$=t=>w(e,{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,{...t})});export{Q as TextEditor,$ as TextEditorContainer,P as traceKeys};
 //# sourceMappingURL=TextEditor.mjs.map