@intlayer/design-system 8.4.3 → 8.4.5

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getContentNodeByKeyPath,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport type {\n  ConditionContent,\n  EnumerationContent,\n  FileContent,\n  HTMLContent,\n  InsertionContent,\n  MarkdownContent,\n  TranslationContent,\n} from '@intlayer/core/transpiler';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { ContentNode, Dictionary } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { NodeType } from '@intlayer/types/nodeType';\nimport { type FC, memo, type ReactNode, useMemo } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { BooleanWrapper } from './BooleanWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { HtmlWrapper } from './HtmlWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { NumberWrapper } from './NumberWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  section: ContentNode;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locale;\n  editedContent: ContentNode;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n  renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = memo((props) => {\n  const currentLocale = useEditorLocale();\n  const section = useMemo(() => {\n    const editedContentValue = getContentNodeByKeyPath(\n      props.editedContent,\n      props.keyPath,\n      currentLocale\n    );\n    return editedContentValue ?? props.section;\n  }, [props.editedContent, props.keyPath, props.section]);\n\n  const nodeType = useMemo(() => getNodeType(section), [section]);\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <span className=\"text-neutral text-xs\">React node not editable</span>\n      );\n    }\n\n    if (nodeType === NodeType.Nested) {\n      return (\n        <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n          [Nested] Dictionary\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Markdown) {\n      return (\n        <MarkdownWrapper\n          {...props}\n          section={section as MarkdownContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.HTML) {\n      return (\n        <HtmlWrapper {...props} section={section as HTMLContent<ContentNode>} />\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Condition) {\n      return (\n        <ConditionWrapper\n          {...props}\n          section={section as ConditionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Insertion) {\n      return (\n        <InsertionWrapper\n          {...props}\n          section={section as InsertionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayWrapper\n          {...props}\n          section={section as unknown as ContentNode[]}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.File) {\n      return <FileWrapper {...props} section={section as FileContent} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as unknown as Record<string, ContentNode>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n\n  if (typeof section === 'number') {\n    return <NumberWrapper {...props} section={section} />;\n  }\n\n  if (typeof section === 'boolean') {\n    return <BooleanWrapper {...props} section={section} />;\n  }\n});\n"],"mappings":"o8BAkCA,MAAa,EAAsB,CAAC,WAAY,KAAM,WAAW,CAepD,EAAoC,EAAM,GAAU,CAC/D,IAAM,EAAgB,GAAiB,CACjC,EAAU,MACa,EACzB,EAAM,cACN,EAAM,QACN,EACD,EAC4B,EAAM,QAClC,CAAC,EAAM,cAAe,EAAM,QAAS,EAAM,QAAQ,CAAC,CAEjD,EAAW,MAAc,EAAY,EAAQ,CAAE,CAAC,EAAQ,CAAC,CAE/D,GAAI,OAAO,GAAY,SA+ErB,OA9EI,IAAa,EAAS,UAEtB,EAAC,OAAD,CAAM,UAAU,gCAAuB,0BAA8B,CAAA,CAIrE,IAAa,EAAS,OAEtB,EAAC,MAAD,CAAK,UAAU,gDAAuC,sBAEhD,CAAA,CAIN,IAAa,EAAS,SAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,KAEtB,EAAC,EAAD,CAAa,GAAI,EAAgB,UAAuC,CAAA,CAIxE,IAAa,EAAS,YAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,YAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,UAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,UAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,MAEtB,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIF,IAAa,EAAS,KACjB,EAAC,EAAD,CAAa,GAAI,EAAgB,UAA0B,CAAA,CAIlE,EAAC,EAAD,CACE,GAAI,EACK,UACT,CAAA,CAIN,GAAI,OAAO,GAAY,SACrB,OAAO,EAAC,EAAD,CAAe,GAAI,EAAgB,UAAW,CAAA,CAGvD,GAAI,OAAO,GAAY,SACrB,OAAO,EAAC,EAAD,CAAe,GAAI,EAAgB,UAAW,CAAA,CAGvD,GAAI,OAAO,GAAY,UACrB,OAAO,EAAC,EAAD,CAAgB,GAAI,EAAgB,UAAW,CAAA,EAExD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getContentNodeByKeyPath,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport type {\n  ConditionContent,\n  EnumerationContent,\n  FileContent,\n  HTMLContent,\n  InsertionContent,\n  MarkdownContent,\n  TranslationContent,\n} from '@intlayer/core/transpiler';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { ContentNode, Dictionary } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { type FC, memo, type ReactNode, useMemo } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { BooleanWrapper } from './BooleanWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { HtmlWrapper } from './HtmlWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { NumberWrapper } from './NumberWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  section: ContentNode;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locale;\n  editedContent: ContentNode;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n  renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = memo((props) => {\n  const currentLocale = useEditorLocale();\n  const section = useMemo(() => {\n    const editedContentValue = getContentNodeByKeyPath(\n      props.editedContent,\n      props.keyPath,\n      currentLocale\n    );\n    return editedContentValue ?? props.section;\n  }, [props.editedContent, props.keyPath, props.section]);\n\n  const nodeType = useMemo(() => getNodeType(section), [section]);\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeTypes.REACT_NODE) {\n      return (\n        <span className=\"text-neutral text-xs\">React node not editable</span>\n      );\n    }\n\n    if (nodeType === NodeTypes.NESTED) {\n      return (\n        <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n          [Nested] Dictionary\n        </div>\n      );\n    }\n\n    if (nodeType === NodeTypes.MARKDOWN) {\n      return (\n        <MarkdownWrapper\n          {...props}\n          section={section as MarkdownContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.HTML) {\n      return (\n        <HtmlWrapper {...props} section={section as HTMLContent<ContentNode>} />\n      );\n    }\n\n    if (nodeType === NodeTypes.TRANSLATION) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.ENUMERATION) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.CONDITION) {\n      return (\n        <ConditionWrapper\n          {...props}\n          section={section as ConditionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.INSERTION) {\n      return (\n        <InsertionWrapper\n          {...props}\n          section={section as InsertionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.ARRAY) {\n      return (\n        <ArrayWrapper\n          {...props}\n          section={section as unknown as ContentNode[]}\n        />\n      );\n    }\n\n    if (nodeType === NodeTypes.FILE) {\n      return <FileWrapper {...props} section={section as FileContent} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as unknown as Record<string, ContentNode>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n\n  if (typeof section === 'number') {\n    return <NumberWrapper {...props} section={section} />;\n  }\n\n  if (typeof section === 'boolean') {\n    return <BooleanWrapper {...props} section={section} />;\n  }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,MAAa,cAAoC,MAAM,UAAU;CAC/D,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,UAAU,cAAc;AAM5B,SAL2B,wBACzB,MAAM,eACN,MAAM,SACN,cACD,IAC4B,MAAM;IAClC;EAAC,MAAM;EAAe,MAAM;EAAS,MAAM;EAAQ,CAAC;CAEvD,MAAM,WAAW,cAAc,YAAY,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAE/D,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,UAAU,WACzB,QACE,oBAAC,QAAD;GAAM,WAAU;aAAuB;GAA8B;AAIzE,MAAI,aAAa,UAAU,OACzB,QACE,oBAAC,OAAD;GAAK,WAAU;aAAuC;GAEhD;AAIV,MAAI,aAAa,UAAU,SACzB,QACE,oBAAC,iBAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,KACzB,QACE,oBAAC,aAAD;GAAa,GAAI;GAAgB;GAAuC;AAI5E,MAAI,aAAa,UAAU,YACzB,QACE,oBAAC,oBAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,YACzB,QACE,oBAAC,oBAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,UACzB,QACE,oBAAC,kBAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,UACzB,QACE,oBAAC,kBAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,MACzB,QACE,oBAAC,cAAD;GACE,GAAI;GACK;GACT;AAIN,MAAI,aAAa,UAAU,KACzB,QAAO,oBAAC,aAAD;GAAa,GAAI;GAAgB;GAA0B;AAGpE,SACE,oBAAC,qBAAD;GACE,GAAI;GACK;GACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC,eAAD;EAAe,GAAI;EAAgB;EAAW;AAGvD,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC,eAAD;EAAe,GAAI;EAAgB;EAAW;AAGvD,KAAI,OAAO,YAAY,UACrB,QAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAgB;EAAW;EAExD"}

package/dist/esm/components/DictionaryEditor/index.mjs

@@ -1 +1,3 @@
-import{DictionaryEditor as e}from"./DictionaryEditor.mjs";export{e as DictionaryEditor};
+import { DictionaryEditor } from "./DictionaryEditor.mjs";
+
+export { DictionaryEditor };

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs

@@ -1,2 +1,62 @@
-"use client";import{Container as e}from"../Container/index.mjs";import{LocaleSwitcherContent as t}from"../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";import{TextEditorContainer as n}from"./ContentEditorView/TextEditor.mjs";import{getIsEditableSection as r}from"./getIsEditableSection.mjs";import{KeyPathBreadcrumb as i}from"./KeyPathBreadcrumb.mjs";import{NavigationViewNode as a}from"./NavigationView/NavigationViewNode.mjs";import{useEffect as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useEditedContent as l,useEditorLocale as u,useFocusUnmergedDictionary as d}from"@intlayer/editor-react";import{getContentNodeByKeyPath as f}from"@intlayer/core/dictionaryManipulator";const p=({dictionary:p,isDarkMode:m})=>{let{content:h,key:g,localId:_}=p,{editedContent:v}=l(),{focusedContent:y,setFocusedContentKeyPath:b}=d(),x=y?.keyPath,S=v?.[_]?.content===void 0?h:v?.[_]?.content,C=u(),w=f(S,x??[],C),T=r(S),E=r(w);return o(()=>{w===void 0&&b(y?.keyPath?.slice(0,-1)??[])},[]),c(`div`,{children:[c(`div`,{className:`mb-6 flex items-center justify-between gap-2`,children:[s(i,{dictionaryKey:g,keyPath:x??[],onClickKeyPath:b}),s(`div`,{className:`flex items-center gap-2`,children:s(t,{})})]}),c(`div`,{className:`flex flex-1 gap-2 overflow-visible max-md:flex-col`,children:[typeof S==`object`&&S&&!T&&Object.keys(S).length>0&&s(e,{border:!0,background:`none`,className:`top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]`,roundedSize:`xl`,transparency:`xs`,children:s(a,{keyPath:[],section:S,dictionary:p})}),(E||(x??[]).length>0)&&s(n,{keyPath:x??[],section:w,dictionary:p,isDarkMode:m})]})]})};export{p as ContentEditor};
+'use client';
+
+import { Container } from "../Container/index.mjs";
+import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
+import { getIsEditableSection } from "./getIsEditableSection.mjs";
+import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
+import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
+
+//#region src/components/DictionaryFieldEditor/ContentEditor.tsx
+const ContentEditor = ({ dictionary, isDarkMode }) => {
+	const { content, key, localId } = dictionary;
+	const { editedContent } = useEditedContent();
+	const { focusedContent, setFocusedContentKeyPath } = useFocusUnmergedDictionary();
+	const focusedKeyPath = focusedContent?.keyPath;
+	const section = typeof editedContent?.[localId]?.content === "undefined" ? content : editedContent?.[localId]?.content;
+	const currentLocale = useEditorLocale();
+	const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? [], currentLocale);
+	const isEditableBaseSection = getIsEditableSection(section);
+	const isEditableFocusedSection = getIsEditableSection(focusedSection);
+	useEffect(() => {
+		if (typeof focusedSection === "undefined") setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-6 flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx(KeyPathBreadcrumb, {
+			dictionaryKey: key,
+			keyPath: focusedKeyPath ?? [],
+			onClickKeyPath: setFocusedContentKeyPath
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ jsx(LocaleSwitcherContent, {})
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 gap-2 overflow-visible max-md:flex-col",
+		children: [typeof section === "object" && section && !isEditableBaseSection && Object.keys(section).length > 0 && /* @__PURE__ */ jsx(Container, {
+			border: true,
+			background: "none",
+			className: "top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]",
+			roundedSize: "xl",
+			transparency: "xs",
+			children: /* @__PURE__ */ jsx(NavigationViewNode, {
+				keyPath: [],
+				section,
+				dictionary
+			})
+		}), (isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && /* @__PURE__ */ jsx(TextEditorContainer, {
+			keyPath: focusedKeyPath ?? [],
+			section: focusedSection,
+			dictionary,
+			isDarkMode
+		})]
+	})] });
+};
+
+//#endregion
+export { ContentEditor };
 //# sourceMappingURL=ContentEditor.mjs.map

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core/dictionaryManipulator';\nimport {\n  useEditedContent,\n  useEditorLocale,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport { type FC, useEffect } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n  dictionary,\n  isDarkMode,\n}) => {\n  const { content, key, localId } = dictionary;\n  const { editedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } =\n    useFocusUnmergedDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n  const section =\n    typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n    'undefined'\n      ? content\n      : editedContent?.[localId as LocalDictionaryId]?.content;\n\n  const currentLocale = useEditorLocale();\n  const focusedSection = getContentNodeByKeyPath(\n    section,\n    focusedKeyPath ?? [],\n    currentLocale\n  );\n  const isEditableBaseSection = getIsEditableSection(section);\n  const isEditableFocusedSection = getIsEditableSection(focusedSection);\n\n  useEffect(() => {\n    if (typeof focusedSection === 'undefined') {\n      setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n    }\n  }, []);\n\n  return (\n    <div>\n      <div className=\"mb-6 flex items-center justify-between gap-2\">\n        <KeyPathBreadcrumb\n          dictionaryKey={key}\n          keyPath={focusedKeyPath ?? []}\n          onClickKeyPath={setFocusedContentKeyPath}\n        />\n        <div className=\"flex items-center gap-2\">\n          <LocaleSwitcherContent />\n        </div>\n      </div>\n      <div className=\"flex flex-1 gap-2 overflow-visible max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          !isEditableBaseSection &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n              roundedSize=\"xl\"\n              transparency=\"xs\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionary={dictionary}\n              />\n            </Container>\n          )}\n        {(isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && (\n          <TextEditorContainer\n            keyPath={focusedKeyPath ?? []}\n            section={focusedSection}\n            dictionary={dictionary}\n            isDarkMode={isDarkMode}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"ysBAsBA,MAAa,GAAsC,CACjD,aACA,gBACI,CACJ,GAAM,CAAE,UAAS,MAAK,WAAY,EAC5B,CAAE,iBAAkB,GAAkB,CACtC,CAAE,iBAAgB,4BACtB,GAA4B,CAExB,EAAiB,GAAgB,QACjC,EACG,IAAgB,IAA+B,UACtD,OACI,EACA,IAAgB,IAA+B,QAE/C,EAAgB,GAAiB,CACjC,EAAiB,EACrB,EACA,GAAkB,EAAE,CACpB,EACD,CACK,EAAwB,EAAqB,EAAQ,CACrD,EAA2B,EAAqB,EAAe,CAQrE,OANA,MAAgB,CACH,IAAmB,QAC5B,EAAyB,GAAgB,SAAS,MAAM,EAAG,GAAG,EAAI,EAAE,CAAC,EAEtE,EAAE,CAAC,CAGJ,EAAC,MAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,wDAAf,CACE,EAAC,EAAD,CACE,cAAe,EACf,QAAS,GAAkB,EAAE,CAC7B,eAAgB,EAChB,CAAA,CACF,EAAC,MAAD,CAAK,UAAU,mCACb,EAAC,EAAD,EAAyB,CAAA,CACrB,CAAA,CACF,GACN,EAAC,MAAD,CAAK,UAAU,8DAAf,CACG,OAAO,GAAY,UAClB,GACA,CAAC,GACD,OAAO,KAAK,EAAQ,CAAC,OAAS,GAC5B,EAAC,EAAD,CACE,OAAA,GACA,WAAW,OACX,UAAU,6FACV,YAAY,KACZ,aAAa,cAEb,EAAC,EAAD,CACE,QAAS,EAAE,CACF,UACG,aACZ,CAAA,CACQ,CAAA,EAEd,IAA6B,GAAkB,EAAE,EAAE,OAAS,IAC5D,EAAC,EAAD,CACE,QAAS,GAAkB,EAAE,CAC7B,QAAS,EACG,aACA,aACZ,CAAA,CAEA,GACF,CAAA,CAAA"}
+{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core/dictionaryManipulator';\nimport {\n  useEditedContent,\n  useEditorLocale,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport { type FC, useEffect } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n  dictionary,\n  isDarkMode,\n}) => {\n  const { content, key, localId } = dictionary;\n  const { editedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } =\n    useFocusUnmergedDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n  const section =\n    typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n    'undefined'\n      ? content\n      : editedContent?.[localId as LocalDictionaryId]?.content;\n\n  const currentLocale = useEditorLocale();\n  const focusedSection = getContentNodeByKeyPath(\n    section,\n    focusedKeyPath ?? [],\n    currentLocale\n  );\n  const isEditableBaseSection = getIsEditableSection(section);\n  const isEditableFocusedSection = getIsEditableSection(focusedSection);\n\n  useEffect(() => {\n    if (typeof focusedSection === 'undefined') {\n      setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n    }\n  }, []);\n\n  return (\n    <div>\n      <div className=\"mb-6 flex items-center justify-between gap-2\">\n        <KeyPathBreadcrumb\n          dictionaryKey={key}\n          keyPath={focusedKeyPath ?? []}\n          onClickKeyPath={setFocusedContentKeyPath}\n        />\n        <div className=\"flex items-center gap-2\">\n          <LocaleSwitcherContent />\n        </div>\n      </div>\n      <div className=\"flex flex-1 gap-2 overflow-visible max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          !isEditableBaseSection &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n              roundedSize=\"xl\"\n              transparency=\"xs\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionary={dictionary}\n              />\n            </Container>\n          )}\n        {(isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && (\n          <TextEditorContainer\n            keyPath={focusedKeyPath ?? []}\n            section={focusedSection}\n            dictionary={dictionary}\n            isDarkMode={isDarkMode}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAa,iBAAsC,EACjD,YACA,iBACI;CACJ,MAAM,EAAE,SAAS,KAAK,YAAY;CAClC,MAAM,EAAE,kBAAkB,kBAAkB;CAC5C,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;CAE9B,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,UACJ,OAAO,gBAAgB,UAA+B,YACtD,cACI,UACA,gBAAgB,UAA+B;CAErD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,iBAAiB,wBACrB,SACA,kBAAkB,EAAE,EACpB,cACD;CACD,MAAM,wBAAwB,qBAAqB,QAAQ;CAC3D,MAAM,2BAA2B,qBAAqB,eAAe;AAErE,iBAAgB;AACd,MAAI,OAAO,mBAAmB,YAC5B,0BAAyB,gBAAgB,SAAS,MAAM,GAAG,GAAG,IAAI,EAAE,CAAC;IAEtE,EAAE,CAAC;AAEN,QACE,qBAAC,OAAD,aACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,mBAAD;GACE,eAAe;GACf,SAAS,kBAAkB,EAAE;GAC7B,gBAAgB;GAChB,GACF,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,uBAAD,EAAyB;GACrB,EACF;KACN,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,OAAO,YAAY,YAClB,WACA,CAAC,yBACD,OAAO,KAAK,QAAQ,CAAC,SAAS,KAC5B,oBAAC,WAAD;GACE;GACA,YAAW;GACX,WAAU;GACV,aAAY;GACZ,cAAa;aAEb,oBAAC,oBAAD;IACE,SAAS,EAAE;IACF;IACG;IACZ;GACQ,IAEd,6BAA6B,kBAAkB,EAAE,EAAE,SAAS,MAC5D,oBAAC,qBAAD;GACE,SAAS,kBAAkB,EAAE;GAC7B,SAAS;GACG;GACA;GACZ,EAEA;IACF"}