@intlayer/design-system 5.0.5 → 5.1.0

package/dist/components/DictionaryFieldEditor/ContentEditor.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
+import { Container } from "../Container/index.mjs";
+import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { EditorView } from "./ContentEditorView/EditorView.mjs";
+import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
+import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
+const ContentEditor = ({ dictionary }) => {
+  const { content: dictionaryContent, 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: [
+      /* @__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 gap-2 max-md:flex-col", children: [
+      /* @__PURE__ */ jsx(
+        Container,
+        {
+          border: true,
+          background: "none",
+          className: "top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]",
+          roundedSize: "xl",
+          transparency: "sm",
+          children: /* @__PURE__ */ jsx(
+            NavigationViewNode,
+            {
+              keyPath: [],
+              section,
+              dictionaryKey: key
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: (focusedKeyPath?.length ?? 0) > 0 && /* @__PURE__ */ jsx(EditorView, { dictionary, dictionaryKey: key }) })
+    ] })
+  ] });
+};
+export {
+  ContentEditor
+};
+//# sourceMappingURL=ContentEditor.mjs.map

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

@@ -0,0 +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};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {\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        <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        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          {(focusedKeyPath?.length ?? 0) > 0 && (\n            <EditorView dictionary={dictionary} dictionaryKey={key} />\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAeO,MAAM,gBAAqC,CAAC,EAAE,iBAAiB;AACpE,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,8BACb,UAAA;AAAA,MAAA;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,MACC,oBAAA,OAAA,EAAI,WAAU,qDACX,WAAgB,gBAAA,UAAU,KAAK,KAC9B,oBAAA,YAAA,EAAW,YAAwB,eAAe,KAAK,EAE5D,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const core = require("@intlayer/core");
+const editorReact = require("@intlayer/editor-react");
+const components_Container_index = require("../../Container/index.cjs");
+const components_DictionaryFieldEditor_getIsEditableSection = require("../getIsEditableSection.cjs");
+const components_DictionaryFieldEditor_ContentEditorView_TextEditor = require("./TextEditor.cjs");
+const EditorView = ({
+  dictionaryKey,
+  dictionary
+}) => {
+  const { focusedContent } = editorReact.useFocusDictionary();
+  const keyPath = focusedContent?.keyPath ?? [];
+  const { editedContent } = editorReact.useEditedContent();
+  const editedSection = editedContent?.[dictionaryKey]?.content ? core.getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath) : void 0;
+  const dictionarySection = core.getContentNodeByKeyPath(
+    dictionary.content,
+    keyPath
+  );
+  const section = editedSection ?? dictionarySection;
+  const isEditableSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(section);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isEditableSection && /* @__PURE__ */ jsxRuntime.jsx(
+    components_Container_index.Container,
+    {
+      border: true,
+      background: "none",
+      className: "h-full flex-1 overflow-hidden",
+      roundedSize: "xl",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_ContentEditorView_TextEditor.TextEditor,
+        {
+          keyPath,
+          section,
+          dictionary
+        },
+        keyPath.join(".")
+      )
+    }
+  ) });
+};
+exports.EditorView = EditorView;
+//# sourceMappingURL=EditorView.cjs.map

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n}) => {\n  const { focusedContent } = useFocusDictionary();\n  const keyPath = focusedContent?.keyPath ?? [];\n\n  const { editedContent } = useEditedContent();\n\n  const editedSection = editedContent?.[dictionaryKey]?.content\n    ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getContentNodeByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n  const section = editedSection ?? dictionarySection;\n  const isEditableSection = getIsEditableSection(section);\n\n  return (\n    <>\n      {isEditableSection && (\n        <Container\n          border\n          background=\"none\"\n          className=\"h-full flex-1 overflow-hidden\"\n          roundedSize=\"xl\"\n        >\n          <TextEditor\n            key={keyPath.join('.')}\n            keyPath={keyPath}\n            section={section}\n            dictionary={dictionary}\n          />\n        </Container>\n      )}\n    </>\n  );\n};\n"],"names":["useFocusDictionary","useEditedContent","getContentNodeByKeyPath","getIsEditableSection","jsx","Container","TextEditor"],"mappings":";;;;;;;;;AAcO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAIA,+BAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAIC,6BAAiB;AAErC,QAAA,gBAAgB,gBAAgB,aAAa,GAAG,UAClDC,KAAAA,wBAAwB,gBAAgB,aAAa,EAAE,SAAS,OAAO,IACvE;AAEJ,QAAM,oBAAoBA,KAAA;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,UAAU,iBAAiB;AAC3B,QAAA,oBAAoBC,2EAAqB,OAAO;AAEtD,+DAEK,UACC,qBAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAAD,2BAAA;AAAA,QAACE,8DAAA;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAHK,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,IAIvB;AAAA,EAAA,GAGN;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/{EditorView → ContentEditorView}/EditorView.d.ts

@@ -1,10 +1,8 @@
-import { Locales } from '@intlayer/config';
 import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
 type EditorViewProps = {
     dictionaryKey: string;
     dictionary: Dictionary;
-    locales: Locales[];
 };
 export declare const EditorView: FC<EditorViewProps>;
 export {};

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAuC1C,CAAC"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getContentNodeByKeyPath } from "@intlayer/core";
+import { useFocusDictionary, useEditedContent } from "@intlayer/editor-react";
+import { Container } from "../../Container/index.mjs";
+import { getIsEditableSection } from "../getIsEditableSection.mjs";
+import { TextEditor } from "./TextEditor.mjs";
+const EditorView = ({
+  dictionaryKey,
+  dictionary
+}) => {
+  const { focusedContent } = useFocusDictionary();
+  const keyPath = focusedContent?.keyPath ?? [];
+  const { editedContent } = useEditedContent();
+  const editedSection = editedContent?.[dictionaryKey]?.content ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath) : void 0;
+  const dictionarySection = getContentNodeByKeyPath(
+    dictionary.content,
+    keyPath
+  );
+  const section = editedSection ?? dictionarySection;
+  const isEditableSection = getIsEditableSection(section);
+  return /* @__PURE__ */ jsx(Fragment, { children: isEditableSection && /* @__PURE__ */ jsx(
+    Container,
+    {
+      border: true,
+      background: "none",
+      className: "h-full flex-1 overflow-hidden",
+      roundedSize: "xl",
+      children: /* @__PURE__ */ jsx(
+        TextEditor,
+        {
+          keyPath,
+          section,
+          dictionary
+        },
+        keyPath.join(".")
+      )
+    }
+  ) });
+};
+export {
+  EditorView
+};
+//# sourceMappingURL=EditorView.mjs.map

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n}) => {\n  const { focusedContent } = useFocusDictionary();\n  const keyPath = focusedContent?.keyPath ?? [];\n\n  const { editedContent } = useEditedContent();\n\n  const editedSection = editedContent?.[dictionaryKey]?.content\n    ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getContentNodeByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n  const section = editedSection ?? dictionarySection;\n  const isEditableSection = getIsEditableSection(section);\n\n  return (\n    <>\n      {isEditableSection && (\n        <Container\n          border\n          background=\"none\"\n          className=\"h-full flex-1 overflow-hidden\"\n          roundedSize=\"xl\"\n        >\n          <TextEditor\n            key={keyPath.join('.')}\n            keyPath={keyPath}\n            section={section}\n            dictionary={dictionary}\n          />\n        </Container>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAcO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAI,mBAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAErC,QAAA,gBAAgB,gBAAgB,aAAa,GAAG,UAClD,wBAAwB,gBAAgB,aAAa,EAAE,SAAS,OAAO,IACvE;AAEJ,QAAM,oBAAoB;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,UAAU,iBAAiB;AAC3B,QAAA,oBAAoB,qBAAqB,OAAO;AAEtD,yCAEK,UACC,qBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAHK,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,IAIvB;AAAA,EAAA,GAGN;AAEJ;"}