diff --git a/packages/core/src/components/entry-editor/EditorInterface.tsx b/packages/core/src/components/entry-editor/EditorInterface.tsx index 1c5ffd11..a6eca6ce 100644 --- a/packages/core/src/components/entry-editor/EditorInterface.tsx +++ b/packages/core/src/components/entry-editor/EditorInterface.tsx @@ -96,14 +96,23 @@ const EditorInterface = ({ slug, }: TranslatedProps) => { const { locales, defaultLocale } = useMemo(() => getI18nInfo(collection), [collection]) ?? {}; - const [selectedLocale, setSelectedLocale] = useState(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( + (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 = ( -
( +
- -
+ (finalPreviewActive || i18nActive) && + ` + overflow-y-auto + styled-scrollbars + h-main + `, + )} + > + +
+ ), + [ + 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 = ( diff --git a/packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx b/packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx index 990e978b..afd589cb 100644 --- a/packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx +++ b/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) => { const pathField = useMemo( @@ -117,6 +119,7 @@ const EditorControlPane = ({ })} canChangeLocale={canChangeLocale} onLocaleChange={onLocaleChange} + excludeLocales={context === 'i18nSplit' ? [i18n.defaultLocale] : []} /> ) : null} diff --git a/packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx b/packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx index 14984ac5..c54f2531 100644 --- a/packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx +++ b/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 = ({ {locales - .filter(locale => locale !== defaultLocale) + .filter(locale => !excludeLocales.includes(locale)) .map(locale => ( onLocaleChange?.(locale)}> {locale}