fix: I18n improvements (#836)

packages/core/src/components/entry-editor/EditorInterface.tsx

@@ -96,14 +96,23 @@ const EditorInterface = ({
   slug,
 }: TranslatedProps<EditorInterfaceProps>) => {
   const { locales, defaultLocale } = useMemo(() => getI18nInfo(collection), [collection]) ?? {};
-  const [selectedLocale, setSelectedLocale] = useState<string>(locales?.[1] ?? 'en');
+  const translatedLocales = useMemo(
+    () => locales?.filter(locale => locale !== defaultLocale) ?? [],
+    [locales, defaultLocale],
+  );
 
   const [previewActive, setPreviewActive] = useState(
     localStorage.getItem(PREVIEW_VISIBLE) !== 'false',
   );
 
+  const i18nEnabled = locales && locales.length > 0;
+
   const [i18nActive, setI18nActive] = useState(
-    Boolean(localStorage.getItem(I18N_VISIBLE) !== 'false' && locales && locales.length > 0),
+    Boolean(localStorage.getItem(I18N_VISIBLE) !== 'false' && i18nEnabled),
+  );
+
+  const [selectedLocale, setSelectedLocale] = useState<string>(
+    (i18nActive ? translatedLocales?.[0] : defaultLocale) ?? 'en',
   );
 
   useEffect(() => {
@@ -132,8 +141,11 @@ const EditorInterface = ({
   const handleToggleI18n = useCallback(() => {
     const newI18nActive = !i18nActive;
     setI18nActive(newI18nActive);
+    setSelectedLocale(selectedLocale =>
+      newI18nActive && selectedLocale === defaultLocale ? translatedLocales?.[0] : selectedLocale,
+    );
     localStorage.setItem(I18N_VISIBLE, `${newI18nActive}`);
-  }, [i18nActive]);
+  }, [i18nActive, setSelectedLocale, translatedLocales, defaultLocale]);
 
   const handleLocaleChange = useCallback((locale: string) => {
     setSelectedLocale(locale);
@@ -169,34 +181,53 @@ const EditorInterface = ({
 
   const collectHasI18n = hasI18n(collection);
 
-  const editor = (
-    <div
-      key={defaultLocale}
-      id="control-pane"
-      className={classNames(
-        `
-          w-full
-        `,
-        (finalPreviewActive || i18nActive) &&
+  const editor = useMemo(
+    () => (
+      <div
+        key={defaultLocale}
+        id="control-pane"
+        className={classNames(
           `
-            overflow-y-auto
-            styled-scrollbars
-            h-main
+            w-full
           `,
-      )}
-    >
-      <EditorControlPane
-        collection={collection}
-        entry={entry}
-        fields={fields}
-        fieldsErrors={fieldsErrors}
-        locale={defaultLocale}
-        submitted={submitted}
-        hideBorder={!finalPreviewActive && !i18nActive}
-        slug={slug}
-        t={t}
-      />
-    </div>
+          (finalPreviewActive || i18nActive) &&
+            `
+              overflow-y-auto
+              styled-scrollbars
+              h-main
+            `,
+        )}
+      >
+        <EditorControlPane
+          collection={collection}
+          entry={entry}
+          fields={fields}
+          fieldsErrors={fieldsErrors}
+          locale={i18nActive ? defaultLocale : selectedLocale}
+          submitted={submitted}
+          hideBorder={!finalPreviewActive && !i18nActive}
+          canChangeLocale={i18nEnabled && !i18nActive}
+          onLocaleChange={handleLocaleChange}
+          slug={slug}
+          t={t}
+        />
+      </div>
+    ),
+    [
+      collection,
+      defaultLocale,
+      selectedLocale,
+      entry,
+      fields,
+      fieldsErrors,
+      finalPreviewActive,
+      i18nActive,
+      i18nEnabled,
+      handleLocaleChange,
+      slug,
+      submitted,
+      t,
+    ],
   );
 
   const editorLocale = useMemo(
@@ -219,6 +250,7 @@ const EditorInterface = ({
           onLocaleChange={handleLocaleChange}
           submitted={submitted}
           canChangeLocale
+          context="i18nSplit"
           hideBorder
           t={t}
         />
@@ -228,7 +260,7 @@ const EditorInterface = ({
   );
 
   const previewEntry = collectHasI18n
-    ? getPreviewEntry(entry, selectedLocale[0], defaultLocale)
+    ? getPreviewEntry(entry, selectedLocale, defaultLocale)
     : entry;
 
   const editorWithPreview = (

packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx

@@ -30,6 +30,7 @@ export interface EditorControlPaneProps {
   hideBorder: boolean;
   slug?: string;
   onLocaleChange?: (locale: string) => void;
+  context?: 'default' | 'i18nSplit';
 }
 
 const EditorControlPane = ({
@@ -43,6 +44,7 @@ const EditorControlPane = ({
   hideBorder,
   slug,
   onLocaleChange,
+  context = 'default',
   t,
 }: TranslatedProps<EditorControlPaneProps>) => {
   const pathField = useMemo(
@@ -117,6 +119,7 @@ const EditorControlPane = ({
             })}
             canChangeLocale={canChangeLocale}
             onLocaleChange={onLocaleChange}
+            excludeLocales={context === 'i18nSplit' ? [i18n.defaultLocale] : []}
           />
         </div>
       ) : null}

packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx

@@ -10,6 +10,7 @@ interface LocaleDropdownProps {
   dropdownText: string;
   canChangeLocale: boolean;
   onLocaleChange?: (locale: string) => void;
+  excludeLocales?: string[];
 }
 
 const LocaleDropdown = ({
@@ -18,6 +19,7 @@ const LocaleDropdown = ({
   dropdownText,
   canChangeLocale,
   onLocaleChange,
+  excludeLocales = [defaultLocale],
 }: LocaleDropdownProps) => {
   if (!canChangeLocale) {
     return (
@@ -39,7 +41,7 @@ const LocaleDropdown = ({
     <Menu label={dropdownText}>
       <MenuGroup>
         {locales
-          .filter(locale => locale !== defaultLocale)
+          .filter(locale => !excludeLocales.includes(locale))
           .map(locale => (
             <MenuItemButton key={locale} onClick={() => onLocaleChange?.(locale)}>
               {locale}