@intlayer/design-system 5.1.3 → 5.1.4

package/dist/.vite/manifest.json

@@ -794,22 +794,12 @@
       "src/components/Container/index.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx",
-      "src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx",
+      "src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx",
+      "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
       "src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx",
       "src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"
     ]
   },
-  "src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx": {
-    "file": "components/DictionaryFieldEditor/ContentEditorView/EditorView.cjs",
-    "name": "components/DictionaryFieldEditor/ContentEditorView/EditorView",
-    "src": "src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx",
-    "isEntry": true,
-    "imports": [
-      "src/components/Container/index.tsx",
-      "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
-      "src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"
-    ]
-  },
   "src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx": {
     "file": "components/DictionaryFieldEditor/ContentEditorView/TextEditor.cjs",
     "name": "components/DictionaryFieldEditor/ContentEditorView/TextEditor",
@@ -821,10 +811,10 @@
       "src/hooks/intlayerAPIHooks.ts",
       "src/utils/object.ts",
       "src/components/Button/Button.tsx",
+      "src/components/Container/index.tsx",
       "src/components/ContentEditor/ContentEditorInput.tsx",
       "src/components/ContentEditor/ContentEditorTextArea.tsx",
       "src/components/Label/index.tsx",
-      "src/components/Container/index.tsx",
       "src/components/DropDown/index.tsx",
       "src/components/Input/Input.tsx",
       "src/components/Input/Checkbox.tsx",
@@ -833,7 +823,6 @@
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx",
       "src/components/MarkDownRender/index.tsx",
       "src/components/DictionaryFieldEditor/EnumKeyInput.tsx",
-      "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
       "src/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.ts"
     ]
   },

package/dist/components/Container/index.cjs

@@ -61,7 +61,7 @@ const containerVariants = classVarianceAuthority.cva(
         success: "border-success dark:border-success-dark"
       },
       background: {
-        none: "bg-inherit",
+        none: "bg-inherit dark:bg-inherit",
         hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
         with: ""
       },

package/dist/components/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'dark:bg-opacity-90',\n        md: 'dark:bg-opacity-70',\n        lg: 'dark:bg-opacity-40',\n        xl: 'dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'dark:bg-opacity-90',\n        md: 'dark:bg-opacity-70',\n        lg: 'dark:bg-opacity-40',\n        xl: 'dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit dark:bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;;"}

package/dist/components/Container/index.mjs

@@ -59,7 +59,7 @@ const containerVariants = cva(
         success: "border-success dark:border-success-dark"
       },
       background: {
-        none: "bg-inherit",
+        none: "bg-inherit dark:bg-inherit",
         hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
         with: ""
       },

package/dist/components/Container/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'dark:bg-opacity-90',\n        md: 'dark:bg-opacity-70',\n        lg: 'dark:bg-opacity-40',\n        xl: 'dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'dark:bg-opacity-90',\n        md: 'dark:bg-opacity-70',\n        lg: 'dark:bg-opacity-40',\n        xl: 'dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit dark:bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;"}

package/dist/components/DictionaryFieldEditor/ContentEditor.cjs

@@ -2,22 +2,32 @@
 "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 ReactExports = require("react");
 const components_Container_index = require("../Container/index.cjs");
 const components_LocaleSwitcherContentDropDown_LocaleSwitcherContent = require("../LocaleSwitcherContentDropDown/LocaleSwitcherContent.cjs");
 require("../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
-const components_DictionaryFieldEditor_ContentEditorView_EditorView = require("./ContentEditorView/EditorView.cjs");
+const components_DictionaryFieldEditor_ContentEditorView_TextEditor = require("./ContentEditorView/TextEditor.cjs");
+const components_DictionaryFieldEditor_getIsEditableSection = require("./getIsEditableSection.cjs");
 const components_DictionaryFieldEditor_KeyPathBreadcrumb = require("./KeyPathBreadcrumb.cjs");
 const components_DictionaryFieldEditor_NavigationView_NavigationViewNode = require("./NavigationView/NavigationViewNode.cjs");
 const ContentEditor = ({
   dictionary,
   isDarkMode
 }) => {
-  const { content: dictionaryContent, key } = dictionary;
+  const { content, key } = dictionary;
   const { editedContent } = editorReact.useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = editorReact.useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
-  const section = editedContent?.[key]?.content ?? dictionaryContent;
+  const section = typeof editedContent?.[dictionary.key]?.content === "undefined" ? content : editedContent?.[key]?.content;
+  const focusedSection = core.getContentNodeByKeyPath(section, focusedKeyPath ?? []);
+  const isEditableFocusedSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(focusedSection);
+  ReactExports.useEffect(() => {
+    if (typeof focusedSection === "undefined") {
+      setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -49,14 +59,15 @@ const ContentEditor = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: /* @__PURE__ */ jsxRuntime.jsx(
-        components_DictionaryFieldEditor_ContentEditorView_EditorView.EditorView,
+      (isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_ContentEditorView_TextEditor.TextEditorContainer,
         {
+          keyPath: focusedKeyPath ?? [],
+          section: focusedSection,
           dictionary,
-          dictionaryKey: key,
           isDarkMode
         }
-      ) })
+      )
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.cjs","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":["useEditedContent","useFocusDictionary","jsxs","Fragment","jsx","KeyPathBreadcrumb","LocaleSwitcherContent","Container","NavigationViewNode","EditorView"],"mappings":";;;;;;;;;;;AAgBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAIA,6BAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACD,2BAAAA,KAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAAE,2BAAA;AAAA,QAACC,mDAAA;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,qCACC,OAAI,EAAA,WAAU,2BACb,UAAAD,2BAAA,IAACE,wFAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEAJ,2BAAAA,KAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5BE,2BAAA;AAAA,QAACG,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAAH,2BAAA;AAAA,YAACI,mEAAA;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,MAEJJ,2BAAAA,IAAC,OAAI,EAAA,WAAU,qDACb,UAAAA,2BAAA;AAAA,QAACK,8DAAA;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.cjs","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    <>\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      <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    </>\n  );\n};\n"],"names":["useEditedContent","useFocusDictionary","getContentNodeByKeyPath","getIsEditableSection","useEffect","jsxs","Fragment","jsx","KeyPathBreadcrumb","LocaleSwitcherContent","Container","NavigationViewNode","TextEditorContainer"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,SAAS,IAAA,IAAQ;AACnB,QAAA,EAAE,cAAc,IAAIA,6BAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AACjC,QAAA,UACJ,OAAO,gBAAgB,WAAW,GAAG,GAAG,YAAY,cAChD,UACA,gBAAgB,GAAG,GAAG;AAE5B,QAAM,iBAAiBC,KAAA,wBAAwB,SAAS,kBAAkB,CAAA,CAAE;AACtE,QAAA,2BAA2BC,2EAAqB,cAAc;AAEpEC,eAAAA,UAAU,MAAM;AACV,QAAA,OAAO,mBAAmB,aAAa;AACzC,+BAAyB,gBAAgB,SAAS,MAAM,GAAG,EAAE,KAAK,EAAE;AAAA,IAAA;AAAA,EAExE,GAAG,EAAE;AAEL,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACD,2BAAAA,KAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAAE,2BAAA;AAAA,QAACC,mDAAA;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,qCACC,OAAI,EAAA,WAAU,2BACb,UAAAD,2BAAA,IAACE,wFAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IACAJ,2BAAAA,KAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5BE,2BAAA;AAAA,QAACG,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAAH,2BAAA;AAAA,YAACI,mEAAA;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,MAC5DJ,2BAAA;AAAA,QAACK,8DAAA;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;;"}

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,21 +1,31 @@
 "use client";
 import { jsxs, Fragment, 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;
+  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(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsx(
@@ -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    <>\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      <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    </>\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,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,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;"}