@intlayer/design-system 5.1.3 → 5.1.5

package/dist/components/DictionaryFieldEditor/ContentEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAqD7C,CAAC"}
+{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAa,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3C,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAgE7C,CAAC"}

package/dist/components/DictionaryFieldEditor/ContentEditor.mjs

@@ -1,23 +1,33 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getContentNodeByKeyPath } from "@intlayer/core";
 import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
+import { useEffect } from "react";
 import { Container } from "../Container/index.mjs";
 import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
-import { EditorView } from "./ContentEditorView/EditorView.mjs";
+import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
+import { getIsEditableSection } from "./getIsEditableSection.mjs";
 import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 const ContentEditor = ({
   dictionary,
   isDarkMode
 }) => {
-  const { content: dictionaryContent, key } = dictionary;
+  const { content, key } = dictionary;
   const { editedContent } = useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
-  const section = editedContent?.[key]?.content ?? dictionaryContent;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+  const section = typeof editedContent?.[dictionary.key]?.content === "undefined" ? content : editedContent?.[key]?.content;
+  const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? []);
+  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,
         {
@@ -47,14 +57,15 @@ const ContentEditor = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: /* @__PURE__ */ jsx(
-        EditorView,
+      (isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && /* @__PURE__ */ jsx(
+        TextEditorContainer,
         {
+          keyPath: focusedKeyPath ?? [],
+          section: focusedSection,
           dictionary,
-          dictionaryKey: key,
           isDarkMode
         }
-      ) })
+      )
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { EditorView } from './ContentEditorView/EditorView';\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: dictionaryContent, key } = dictionary;\n  const { editedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  const section = editedContent?.[key]?.content ?? dictionaryContent;\n\n  return (\n    <>\n      <div className=\"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\n      <div className=\"flex gap-2 max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-6 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=\"sm\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionaryKey={key}\n              />\n            </Container>\n          )}\n        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          <EditorView\n            dictionary={dictionary}\n            dictionaryKey={key}\n            isDarkMode={isDarkMode}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,0BACC,OAAI,EAAA,WAAU,2BACb,UAAA,oBAAC,yBAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEA,qBAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,MAEJ,oBAAC,OAAI,EAAA,WAAU,qDACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,EAEJ,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath, type Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { useEffect, type FC } 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 } = dictionary;\n  const { editedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n  const section =\n    typeof editedContent?.[dictionary.key]?.content === 'undefined'\n      ? content\n      : editedContent?.[key]?.content;\n\n  const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? []);\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 gap-2 max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-6 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=\"sm\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionaryKey={key}\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"],"names":[],"mappings":";;;;;;;;;;;;AAiBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,SAAS,IAAA,IAAQ;AACnB,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AACjC,QAAA,UACJ,OAAO,gBAAgB,WAAW,GAAG,GAAG,YAAY,cAChD,UACA,gBAAgB,GAAG,GAAG;AAE5B,QAAM,iBAAiB,wBAAwB,SAAS,kBAAkB,CAAA,CAAE;AACtE,QAAA,2BAA2B,qBAAqB,cAAc;AAEpE,YAAU,MAAM;AACV,QAAA,OAAO,mBAAmB,aAAa;AACzC,+BAAyB,gBAAgB,SAAS,MAAM,GAAG,EAAE,KAAK,EAAE;AAAA,IAAA;AAAA,EAExE,GAAG,EAAE;AAEL,8BACG,OACC,EAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,0BACC,OAAI,EAAA,WAAU,2BACb,UAAA,oBAAC,yBAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IACA,qBAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,OAEF,6BAA6B,kBAAkB,CAAC,GAAG,SAAS,MAC5D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,kBAAkB,CAAC;AAAA,UAC5B,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;"}