@intlayer/design-system 6.1.6 → 7.0.0-canary.0

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

@@ -0,0 +1,558 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
+import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
+import { InputVariant } from "../../Input/Input.mjs";
+import { Label } from "../../Label/index.mjs";
+import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
+import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { renameKey } from "../../../utils/object.mjs";
+import { ContentEditorInput } from "../../ContentEditor/ContentEditorInput.mjs";
+import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
+import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.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$1 = ({ keyPath, dictionary,...props }) => {
+	const { editedContent, addEditedContent } = useEditedContent();
+	const configuration = useConfiguration();
+	const { mutate: auditContentDeclarationField, isPending: isAuditing } = useAuditContentDeclarationField();
+	return /* @__PURE__ */ jsx(ContentEditorTextArea, {
+		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$1 = response.data.fileContent;
+						addEditedContent(dictionary.localId, editedContent$1, keyPath);
+					} catch (error) {
+						console.error(error);
+					}
+				} });
+			}
+		}),
+		...props
+	});
+};
+const ContentEditorInput$1 = ({ keyPath, dictionary,...props }) => {
+	const { addEditedContent } = useEditedContent();
+	return /* @__PURE__ */ jsx(ContentEditorInput, {
+		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) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+				className: "mt-2 w-full p-2 text-xs",
+				children: getLocaleName(translationKey, locale)
+			}), /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(TextEditorContainer, {
+				section: content[translationKey] ?? getEmptyNode(content[defaultLocale]),
+				keyPath: [...keyPath, {
+					type: NodeType.Translation,
+					key: translationKey
+				}],
+				dictionary,
+				renderSection
+			}) })] }, translationKey))
+		})
+	});
+};
+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 }];
+					return /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("tr", {
+							className: "mt-2 w-full",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "flex flex-1",
+								children: /* @__PURE__ */ jsx(Button, {
+									label: removeEnumeration.label.value,
+									variant: ButtonVariant.HOVERABLE,
+									color: ButtonColor.TEXT,
+									Icon: Trash,
+									className: "ml-auto",
+									onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
+									children: removeEnumeration.text
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("tr", {
+							className: "w-full p-2",
+							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
+									};
+									addEditedContent(dictionary.localId, newValue, keyPath);
+								}
+							})
+						}),
+						/* @__PURE__ */ jsx("tr", {
+							className: "block w-full",
+							children: /* @__PURE__ */ jsx(TextEditor, {
+								section: content[enumKey] ?? getEmptyNode(content[firstKey]),
+								keyPath: childrenKeyPath,
+								dictionary,
+								renderSection
+							})
+						})
+					] }, enumKey);
+				})
+			})
+		}), /* @__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) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+				className: "mt-2 block w-full p-2 text-xs",
+				children: String(condKey)
+			}, condKey), /* @__PURE__ */ jsx("tr", {
+				className: "block w-full",
+				children: /* @__PURE__ */ jsx(TextEditorContainer, {
+					section: content[condKey] ?? getEmptyNode(content.true),
+					keyPath: [...keyPath, {
+						type: NodeType.Condition,
+						key: condKey
+					}],
+					dictionary,
+					renderSection
+				})
+			}, condKey)] }, condKey))
+		})
+	});
+};
+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) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+				className: "mt-2 block w-full p-2 text-xs",
+				children: String(condKey)
+			}, condKey), /* @__PURE__ */ jsx("tr", {
+				className: "block w-full",
+				children: /* @__PURE__ */ jsx(TextEditorContainer, {
+					section: content[condKey] ?? getEmptyNode(content.male),
+					keyPath: [...keyPath, {
+						type: NodeType.Gender,
+						key: condKey
+					}],
+					dictionary,
+					renderSection
+				})
+			}, condKey)] }, condKey))
+		})
+	});
+};
+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) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+					className: "mt-2 flex w-full justify-between gap-2 p-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs",
+						children: String(index)
+					}), /* @__PURE__ */ jsx(Button, {
+						label: removeElement.label.value,
+						variant: ButtonVariant.HOVERABLE,
+						color: ButtonColor.NEUTRAL,
+						className: "ml-auto",
+						textAlign: ButtonTextAlign.LEFT,
+						onClick: () => {
+							const newKeyPath = [...keyPath, {
+								type: NodeType.Array,
+								key: section.length
+							}];
+							addEditedContent(dictionary.localId, void 0, newKeyPath);
+						},
+						Icon: Trash,
+						children: removeElement.text
+					})]
+				}), /* @__PURE__ */ jsx("tr", {
+					className: "block w-full",
+					children: /* @__PURE__ */ jsx(TextEditorContainer, {
+						section: subSection ?? getEmptyNode(section[0]),
+						keyPath: [...keyPath, {
+							type: NodeType.Array,
+							key: index
+						}],
+						dictionary,
+						renderSection
+					})
+				})] }, JSON.stringify(subSection)))
+			})
+		}), /* @__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]);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+				className: "mt-2 p-2 text-xs",
+				children: String(key)
+			}, JSON.stringify(subSection)), /* @__PURE__ */ jsx("tr", {
+				className: "block w-full",
+				children: /* @__PURE__ */ jsx(TextEditor, {
+					section: subSection,
+					keyPath: childKeyPath,
+					dictionary,
+					renderSection
+				})
+			}, JSON.stringify(subSection))] }, key);
+		})
+	})
+}) });
+var MarkdownViewMode = /* @__PURE__ */ function(MarkdownViewMode$1) {
+	MarkdownViewMode$1[MarkdownViewMode$1["Edit"] = 0] = "Edit";
+	MarkdownViewMode$1[MarkdownViewMode$1["Preview"] = 1] = "Preview";
+	return MarkdownViewMode$1;
+}(MarkdownViewMode || {});
+const MarkdownTextEditor = ({ section, keyPath, dictionary, isDarkMode }) => {
+	const [mode, setMode] = useState(MarkdownViewMode.Edit);
+	const toggleContent$1 = [{
+		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$1,
+			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$1) => /* @__PURE__ */ jsx(MarkdownRenderer, {
+				isDarkMode,
+				children: content$1
+			}) : 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: "w-full p-2",
+		children: [
+			/* @__PURE__ */ jsx(Label, { children: "Dictionary key" }),
+			/* @__PURE__ */ jsx(ContentEditorInput, {
+				"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, {
+				"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(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: "[React Node]" }), /* @__PURE__ */ jsx("span", {
+		className: "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.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$1, {
+			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$1, {
+			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 };
+//# sourceMappingURL=TextEditor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.mjs","names":["traceKeys: string[]","ContentEditorTextArea: FC<ContentEditorTextAreaProps>","ContentEditorTextAreaBase","editedContent","ContentEditorInput: FC<ContentEditorInputProps>","ContentEditorInputBase","ContentEditorToggle: FC<ContentEditorToggleProps>","TranslationTextEditor: FC<TextEditorProps>","content: any","EnumerationTextEditor: FC<TextEditorProps>","ConditionTextEditor: FC<TextEditorProps>","GenderTextEditor: FC<TextEditorProps>","ArrayTextEditor: FC<TextEditorProps>","newKeyPath: KeyPath[]","ObjectTextEditor: FC<TextEditorProps>","childKeyPath: KeyPath[]","MarkdownTextEditor: FC<TextEditorProps>","toggleContent","content","InsertionTextEditor: FC<TextEditorProps>","FileTextEditor: FC<TextEditorProps>","NestedTextEditor: FC<TextEditorProps>","TextEditor: FC<TextEditorProps>","ContentEditorInput","ContentEditorTextArea","TextEditorContainer: FC<TextEditorProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ConditionContent,\n  type EnumerationContent,\n  type FileContent,\n  type GenderContent,\n  getEmptyNode,\n  getLocaleName,\n  getNodeType,\n  type InsertionContent,\n  type MarkdownContent,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { useConfiguration, useEditedContent } from '@intlayer/editor-react';\nimport {\n  type ContentNode,\n  type Dictionary,\n  type KeyPath,\n  type Locales,\n  type LocalesValues,\n  NodeType,\n} from '@intlayer/types';\nimport { Plus, Trash, WandSparkles } from 'lucide-react';\nimport { type FC, Fragment, type ReactNode, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { useAuditContentDeclarationField } from '../../../hooks';\nimport { renameKey } from '../../../utils/object';\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../../Button';\nimport { Container } from '../../Container';\nimport {\n  ContentEditorInput as ContentEditorInputBase,\n  type ContentEditorInputProps as ContentEditorInputPropsBase,\n} from '../../ContentEditor/ContentEditorInput';\nimport {\n  ContentEditorTextArea as ContentEditorTextAreaBase,\n  type ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '../../ContentEditor/ContentEditorTextArea';\nimport { InputVariant } from '../../Input';\nimport { Label } from '../../Label';\nimport { useLocaleSwitcherContent } from '../../LocaleSwitcherContentDropDown';\nimport { MarkdownRenderer } from '../../MarkDownRender';\nimport {\n  SwitchSelector,\n  type SwitchSelectorChoices,\n  SwitchSelectorColor,\n  type SwitchSelectorProps,\n  SwitchSelectorSize,\n} from '../../SwitchSelector';\nimport { EnumKeyInput } from '../EnumKeyInput';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n  ContentEditorTextAreaPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const configuration = useConfiguration();\n  const { mutate: auditContentDeclarationField, isPending: isAuditing } =\n    useAuditContentDeclarationField();\n\n  return (\n    <ContentEditorTextAreaBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      additionalButtons={\n        <Button\n          Icon={WandSparkles}\n          label=\"Audit\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          className=\"cursor-pointer hover:scale-110\"\n          isLoading={isAuditing}\n          onClick={() => {\n            auditContentDeclarationField(\n              {\n                fileContent: JSON.stringify({\n                  ...dictionary,\n                  ...(editedContent?.[dictionary.localId!] ?? {}),\n                }),\n                keyPath,\n                locales: configuration.internationalization.locales ?? [],\n                aiOptions: {\n                  apiKey: configuration.ai?.apiKey,\n                  model: configuration.ai?.model,\n                  temperature: configuration.ai?.temperature,\n                },\n              },\n              {\n                onSuccess: (response) => {\n                  if (!response?.data) return;\n\n                  try {\n                    const editedContent = response.data.fileContent as string;\n\n                    addEditedContent(\n                      dictionary.localId!,\n                      editedContent,\n                      keyPath\n                    );\n                  } catch (error) {\n                    console.error(error);\n                  }\n                },\n              }\n            );\n          }}\n        />\n      }\n      {...props}\n    />\n  );\n};\n\ntype ContentEditorInputProps = Omit<\n  ContentEditorInputPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorInput: FC<ContentEditorInputProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <ContentEditorInputBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      {...props}\n    />\n  );\n};\n\nconst toggleContent = [\n  {\n    content: 'False',\n    value: false,\n  },\n  {\n    content: 'True',\n    value: true,\n  },\n] as SwitchSelectorChoices<boolean>;\n\ntype ContentEditorToggleProps = SwitchSelectorProps & {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n};\n\nconst ContentEditorToggle: FC<ContentEditorToggleProps> = ({\n  dictionary,\n  keyPath,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <SwitchSelector\n      choices={toggleContent}\n      value={true}\n      onChange={(value) =>\n        addEditedContent(dictionary.localId!, value, keyPath)\n      }\n      color={SwitchSelectorColor.TEXT}\n      size={SwitchSelectorSize.SM}\n      {...props}\n    />\n  );\n};\n\nexport type TextEditorProps = {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  isDarkMode?: boolean;\n  renderSection?: (content: string) => ReactNode;\n  onContentChange?: (newValue: string) => void;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}: TextEditorProps) => {\n  const { locale, defaultLocale } = useLocale();\n  const { selectedLocales, availableLocales } = useLocaleSwitcherContent();\n\n  const sectionContent = (section as TranslationContent<string>)[\n    NodeType.Translation\n  ] as Record<Locale, string>;\n\n  const sectionContentKeys = Object.keys(sectionContent) as LocalesValues[];\n\n  const isFiltered = availableLocales.length > selectedLocales.length;\n\n  const localesList = isFiltered\n    ? selectedLocales\n    : // If the translation include content in other locales, we display all of them\n      [...new Set([...availableLocales, ...sectionContentKeys])];\n\n  const content: any = (section as TranslationContent<string>)[\n    NodeType.Translation\n  ];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {localesList.map((translationKey) => (\n          <Fragment key={translationKey}>\n            <tr className=\"mt-2 w-full p-2 text-xs\">\n              {getLocaleName(translationKey, locale)}\n            </tr>\n            <tr>\n              <TextEditorContainer\n                section={\n                  content[translationKey] ??\n                  getEmptyNode(content[defaultLocale])\n                }\n                keyPath={[\n                  ...keyPath,\n                  { type: NodeType.Translation, key: translationKey },\n                ]}\n                dictionary={dictionary}\n                renderSection={renderSection}\n              />\n            </tr>\n          </Fragment>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewEnumeration, removeEnumeration } =\n    useIntlayer('navigation-view');\n\n  const content = (section as EnumerationContent<string>)[NodeType.Enumeration];\n  const firstKey = Object.keys(content)[0] as keyof typeof content;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<ContentNode>)[NodeType.Enumeration]\n          ).map((enumKey) => {\n            const childrenKeyPath = [\n              ...keyPath,\n              { type: NodeType.Enumeration },\n            ] as KeyPath[];\n            return (\n              <Fragment key={enumKey}>\n                <tr className=\"mt-2 w-full\">\n                  <div className=\"flex flex-1\">\n                    <Button\n                      label={removeEnumeration.label.value}\n                      variant={ButtonVariant.HOVERABLE}\n                      color={ButtonColor.TEXT}\n                      Icon={Trash}\n                      className=\"ml-auto\"\n                      onClick={() =>\n                        addEditedContent(\n                          dictionary.localId!,\n                          undefined,\n                          childrenKeyPath\n                        )\n                      }\n                    >\n                      {removeEnumeration.text}\n                    </Button>\n                  </div>\n                </tr>\n                <tr className=\"w-full p-2\">\n                  <EnumKeyInput\n                    value={enumKey}\n                    onChange={(value) => {\n                      const preValueContent = (\n                        section as EnumerationContent<string>\n                      )[NodeType.Enumeration];\n                      const newValueContent = renameKey(\n                        preValueContent,\n                        enumKey as keyof typeof preValueContent,\n                        value\n                      );\n                      const newValue = {\n                        ...(section as EnumerationContent<string>),\n                        [NodeType.Enumeration]: newValueContent,\n                      };\n\n                      addEditedContent(dictionary.localId!, newValue, keyPath);\n                    }}\n                  />\n                </tr>\n                <tr className=\"block w-full\">\n                  <TextEditor\n                    section={\n                      content[enumKey as keyof typeof content] ??\n                      getEmptyNode(content[firstKey])\n                    }\n                    keyPath={childrenKeyPath}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </tr>\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n\n      <Button\n        label={addNewEnumeration.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() =>\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode(content[firstKey]) ?? '',\n            [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }]\n          )\n        }\n        Icon={Plus}\n        className=\"m-2\"\n      >\n        {addNewEnumeration.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ConditionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as ConditionContent<string>)[NodeType.Condition];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['true', 'false', 'fallback'].map((condKey) => (\n          <Fragment key={condKey}>\n            <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n              {String(condKey)}\n            </tr>\n            <tr key={condKey} className=\"block w-full\">\n              <TextEditorContainer\n                section={\n                  content[condKey as keyof typeof content] ??\n                  getEmptyNode(content.true)\n                }\n                keyPath={[\n                  ...keyPath,\n                  {\n                    type: NodeType.Condition,\n                    key: condKey,\n                  } as KeyPath,\n                ]}\n                dictionary={dictionary}\n                renderSection={renderSection}\n              />\n            </tr>\n          </Fragment>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst GenderTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as GenderContent<string>)[NodeType.Gender];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['male', 'female', 'fallback'].map((condKey) => (\n          <Fragment key={condKey}>\n            <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n              {String(condKey)}\n            </tr>\n            <tr key={condKey} className=\"block w-full\">\n              <TextEditorContainer\n                section={\n                  content[condKey as keyof typeof content] ??\n                  getEmptyNode(content.male)\n                }\n                keyPath={[\n                  ...keyPath,\n                  {\n                    type: NodeType.Gender,\n                    key: condKey,\n                  } as KeyPath,\n                ]}\n                dictionary={dictionary}\n                renderSection={renderSection}\n              />\n            </tr>\n          </Fragment>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewElement, removeElement } = useIntlayer('navigation-view');\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {(section as unknown as ContentNode[]).map((subSection, index) => (\n            <Fragment key={JSON.stringify(subSection)}>\n              <tr className=\"mt-2 flex w-full justify-between gap-2 p-2\">\n                <span className=\"text-xs\">{String(index)}</span>\n                <Button\n                  label={removeElement.label.value}\n                  variant={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.NEUTRAL}\n                  className=\"ml-auto\"\n                  textAlign={ButtonTextAlign.LEFT}\n                  onClick={() => {\n                    const newKeyPath: KeyPath[] = [\n                      ...keyPath,\n                      {\n                        type: NodeType.Array,\n                        key: (section as unknown as ContentNode[]).length,\n                      },\n                    ];\n                    addEditedContent(\n                      dictionary.localId!,\n                      undefined,\n                      newKeyPath\n                    );\n                  }}\n                  Icon={Trash}\n                >\n                  {removeElement.text}\n                </Button>\n              </tr>\n\n              <tr className=\"block w-full\">\n                <TextEditorContainer\n                  section={\n                    subSection ??\n                    getEmptyNode((section as unknown as ContentNode[])[0])\n                  }\n                  keyPath={[\n                    ...keyPath,\n                    {\n                      type: NodeType.Array,\n                      key: index,\n                    },\n                  ]}\n                  dictionary={dictionary}\n                  renderSection={renderSection}\n                />\n              </tr>\n            </Fragment>\n          ))}\n        </tbody>\n      </table>\n      <Button\n        label={addNewElement.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() => {\n          const newKeyPath: KeyPath[] = [\n            ...keyPath,\n            {\n              type: NodeType.Array,\n              key: (section as unknown as ContentNode[]).length,\n            },\n          ];\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode((section as unknown as ContentNode[])[0]) ?? '',\n            newKeyPath,\n            false\n          );\n        }}\n        Icon={Plus}\n      >\n        {addNewElement.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ObjectTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => (\n  <>\n    <table className=\"w-full\">\n      <tbody className=\"flex flex-col gap-2\">\n        {Object.keys(section as unknown as Record<string, ContentNode>).map(\n          (key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key },\n            ];\n            const typedSection = section as unknown as Record<\n              string,\n              ContentNode\n            >;\n            const firstKey = Object.keys(\n              typedSection\n            )[0] as keyof typeof section;\n            const subSection =\n              typedSection[key as keyof typeof section] ??\n              getEmptyNode(typedSection[firstKey]);\n\n            return (\n              <Fragment key={key}>\n                <tr\n                  key={JSON.stringify(subSection)}\n                  className=\"mt-2 p-2 text-xs\"\n                >\n                  {String(key)}\n                </tr>\n                <tr key={JSON.stringify(subSection)} className=\"block w-full\">\n                  <TextEditor\n                    section={subSection}\n                    keyPath={childKeyPath}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </tr>\n              </Fragment>\n            );\n          }\n        )}\n      </tbody>\n    </table>\n  </>\n);\n\nenum MarkdownViewMode {\n  Edit,\n  Preview,\n}\n\nconst MarkdownTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  isDarkMode,\n}) => {\n  const [mode, setMode] = useState(MarkdownViewMode.Edit);\n  const toggleContent = [\n    {\n      content: 'Edit',\n      value: MarkdownViewMode.Edit,\n    },\n    {\n      content: 'Preview',\n      value: MarkdownViewMode.Preview,\n    },\n  ] as SwitchSelectorChoices<MarkdownViewMode>;\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Markdown }];\n\n  const content = (section as MarkdownContent<ContentNode>)[\n    NodeType.Markdown\n  ] as ContentNode;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <SwitchSelector\n        choices={toggleContent}\n        value={mode}\n        onChange={setMode}\n        color={SwitchSelectorColor.TEXT}\n        size={SwitchSelectorSize.SM}\n        className=\"ml-auto\"\n      />\n\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        dictionary={dictionary}\n        renderSection={\n          mode === MarkdownViewMode.Preview\n            ? (content) => (\n                <MarkdownRenderer isDarkMode={isDarkMode}>\n                  {content}\n                </MarkdownRenderer>\n              )\n            : undefined\n        }\n      />\n    </div>\n  );\n};\n\nconst InsertionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Insertion }];\n\n  const content = (section as InsertionContent<ContentNode>)[\n    NodeType.Insertion\n  ];\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst FileTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.File }];\n\n  const fileUrl = (section as FileContent)[NodeType.File];\n  const { content } = section as FileContent;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <span className=\"text-neutral text-sm\">{fileUrl} </span>\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst NestedTextEditor: FC<TextEditorProps> = ({\n  keyPath,\n  dictionary,\n  renderSection,\n  section,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  const content = (section as any)[NodeType.Nested];\n  const childrenKeyPath = [...keyPath, { type: NodeType.Nested }] as KeyPath[];\n\n  return (\n    <div className=\"w-full p-2\">\n      <Label>Dictionary key</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              dictionaryKey: String(newValue),\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.dictionaryKey ?? ''}\n      </ContentEditorInputBase>\n\n      <Label>Path (optional)</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              path: newValue !== '' ? newValue : undefined,\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.path ?? ''}\n      </ContentEditorInputBase>\n    </div>\n  );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n  isDarkMode,\n}) => {\n  const { tsxNotEditable } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n\n  if (nodeType === NodeType.ReactNode) {\n    return (\n      <>\n        <span>[React Node]</span>\n        <span className=\"text-neutral text-xs\">{tsxNotEditable}</span>\n      </>\n    );\n  }\n\n  if (nodeType === NodeType.Nested) {\n    return (\n      <NestedTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Translation) {\n    return (\n      <TranslationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Enumeration) {\n    return (\n      <EnumerationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Condition) {\n    return (\n      <ConditionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Gender) {\n    return (\n      <GenderTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Insertion) {\n    return (\n      <InsertionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Markdown) {\n    return (\n      <MarkdownTextEditor\n        dictionary={dictionary}\n        keyPath={keyPath}\n        section={section}\n        isDarkMode={isDarkMode}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.File) {\n    return (\n      <FileTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    return (\n      <ArrayTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <ObjectTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeType.Number) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorInput\n          dictionary={dictionary}\n          keyPath={keyPath}\n          type=\"number\"\n          aria-label=\"Edit field\"\n        >\n          {section as number}\n        </ContentEditorInput>\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Text) {\n    return (\n      <div className=\"w-full p-2\">\n        {typeof renderSection === 'function' ? (\n          renderSection(section as string)\n        ) : (\n          <ContentEditorTextArea\n            variant={InputVariant.DEFAULT}\n            aria-label=\"Edit field\"\n            keyPath={keyPath}\n            dictionary={dictionary}\n          >\n            {section as string}\n          </ContentEditorTextArea>\n        )}\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Boolean) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorToggle\n          dictionary={dictionary}\n          keyPath={keyPath}\n          value={section as boolean}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full p-2\">\n      Error. Format not supported.\n      {JSON.stringify(section, null, 2)}\n      {JSON.stringify(keyPath, null, 2)}\n      NodeType : {nodeType}\n    </div>\n  );\n};\n\nexport const TextEditorContainer: FC<TextEditorProps> = (props) => (\n  <Container\n    border\n    background=\"none\"\n    className=\"top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky\"\n    roundedSize=\"xl\"\n  >\n    <TextEditor {...props} />\n  </Container>\n);\n"],"mappings":"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"}