Merge branch 'main' into next

packages/core/src/backend.ts

@@ -4,6 +4,7 @@ import flatten from 'lodash/flatten';
 import get from 'lodash/get';
 import isError from 'lodash/isError';
 import uniq from 'lodash/uniq';
+import { dirname } from 'path';
 
 import { resolveFormat } from './formats/formats';
 import { commitMessageFormatter, slugFormatter } from './lib/formatters';
@@ -40,12 +41,9 @@ import {
   selectMediaFolders,
 } from './lib/util/collection.util';
 import filterEntries from './lib/util/filter.util';
-import {
+import { DRAFT_MEDIA_FILES, selectMediaFilePublicPath } from './lib/util/media.util';
-  DRAFT_MEDIA_FILES,
-  selectMediaFilePath,
-  selectMediaFilePublicPath,
-} from './lib/util/media.util';
 import { selectCustomPath, slugFromCustomPath } from './lib/util/nested.util';
+import { isNullish } from './lib/util/null.util';
 import { set } from './lib/util/object.util';
 import { dateParsers, expandPath, extractTemplateVars } from './lib/widgets/stringTemplate';
 import createEntry from './valueObjects/createEntry';
@@ -63,46 +61,70 @@ import type {
   DisplayURL,
   Entry,
   EntryData,
-  EntryDraft,
   EventData,
   FilterRule,
   ImplementationEntry,
   MediaField,
+  ObjectValue,
   PersistArgs,
   SearchQueryResponse,
   SearchResponse,
   UnknownField,
   User,
+  ValueOrNestedValue,
 } from './interface';
 import type { AsyncLock } from './lib/util';
 import type { RootState } from './store';
 import type AssetProxy from './valueObjects/AssetProxy';
 
-function updateAssetProxies(
+function updatePath(entryPath: string, assetPath: string): string | null {
-  assetProxies: AssetProxy[],
+  const pathDir = dirname(entryPath);
-  config: Config,
+
-  collection: Collection,
+  const pathParts = assetPath.split(DRAFT_MEDIA_FILES);
-  entryDraft: EntryDraft,
+  const restOfPath = pathParts.length > 1 ? pathParts[1] : null;
-  path: string,
+  if (restOfPath === null) {
+    return null;
+  }
+
+  return joinUrlPath(pathDir, restOfPath).replace(/\/\//g, '');
+}
+
+function updateAssetFields(data: ValueOrNestedValue, path: string): ValueOrNestedValue {
+  if (
+    isNullish(data) ||
+    typeof data === 'number' ||
+    typeof data === 'boolean' ||
+    data instanceof Date
   ) {
-  assetProxies.map(asset => {
+    return data;
-    // update media files path based on entry path
+  }
-    const oldPath = asset.path;
-    entryDraft.entry.path = path;
 
-    const folderPath = joinUrlPath(
+  if (Array.isArray(data)) {
-      collection && 'folder' in collection ? collection.folder : '',
+    return data.map(child => updateAssetFields(child, path));
-      DRAFT_MEDIA_FILES,
+  }
-    );
 
-    const newPath = selectMediaFilePath(
+  if (typeof data === 'object') {
-      config,
+    return Object.keys(data).reduce((acc, key) => {
-      collection,
+      acc[key] = updateAssetFields(data[key], path);
-      entryDraft.entry,
+
-      oldPath.replace(folderPath, ''),
+      return acc;
-      asset.field,
+    }, {} as ObjectValue);
-    );
+  }
+
+  const newPath = updatePath(path, data);
+  if (!newPath) {
+    return data;
+  }
+
+  return newPath;
+}
+
+function updateAssetProxies(assetProxies: AssetProxy[], path: string) {
+  assetProxies.forEach(asset => {
+    const newPath = updatePath(path, asset.path);
+    if (newPath) {
       asset.path = newPath;
+    }
   });
 }
 
@@ -865,13 +887,16 @@ export class Backend<EF extends BaseField = UnknownField, BC extends BackendClas
         customPath,
       );
       const path = customPath || (selectEntryPath(collection, slug) ?? '');
+
+      entryDraft.entry.path = path;
+      entryDraft.entry.data = updateAssetFields(entryDraft.entry.data, path) as ObjectValue;
+      updateAssetProxies(assetProxies, path);
+
       dataFile = {
         path,
         slug,
         raw: this.entryToRaw(collection, entryDraft.entry),
       };
-
-      updateAssetProxies(assetProxies, config, collection, entryDraft, path);
     } else {
       const slug = entryDraft.entry.slug;
       dataFile = {

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 = useMemo(() => locales && locales.length > 0, [locales]);
+
   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);
@@ -174,7 +186,8 @@ const EditorInterface = ({
     setShowMobilePreview(old => !old);
   }, []);
 
-  const editor = (
+  const editor = useMemo(
+    () => (
       <div
         key={defaultLocale}
         id="control-pane"
@@ -201,13 +214,32 @@ const EditorInterface = ({
           entry={entry}
           fields={fields}
           fieldsErrors={fieldsErrors}
-        locale={defaultLocale}
+          locale={i18nActive ? defaultLocale : selectedLocale}
           submitted={submitted}
           hideBorder={!finalPreviewActive && !i18nActive}
+          canChangeLocale={i18nEnabled && !i18nActive}
+          onLocaleChange={handleLocaleChange}
           slug={slug}
           t={t}
         />
       </div>
+    ),
+    [
+      defaultLocale,
+      finalPreviewActive,
+      i18nActive,
+      showMobilePreview,
+      collection,
+      entry,
+      fields,
+      fieldsErrors,
+      selectedLocale,
+      submitted,
+      i18nEnabled,
+      handleLocaleChange,
+      slug,
+      t,
+    ],
   );
 
   const editorLocale = useMemo(
@@ -232,6 +264,7 @@ const EditorInterface = ({
           onLocaleChange={handleLocaleChange}
           submitted={submitted}
           canChangeLocale
+          context="i18nSplit"
           hideBorder
           t={t}
         />

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

@@ -31,6 +31,7 @@ export interface EditorControlPaneProps {
   slug?: string;
   onLocaleChange?: (locale: string) => void;
   allowDefaultLocale?: boolean;
+  context?: 'default' | 'i18nSplit';
 }
 
 const EditorControlPane = ({
@@ -45,6 +46,7 @@ const EditorControlPane = ({
   slug,
   onLocaleChange,
   allowDefaultLocale = false,
+  context = 'default',
   t,
 }: TranslatedProps<EditorControlPaneProps>) => {
   const pathField = useMemo(
@@ -120,7 +122,9 @@ const EditorControlPane = ({
             })}
             canChangeLocale={canChangeLocale}
             onLocaleChange={onLocaleChange}
-            allowDefaultLocale={allowDefaultLocale}
+            excludeLocales={
+              !allowDefaultLocale && context === 'i18nSplit' ? [i18n.defaultLocale] : []
+            }
           />
         </div>
       ) : null}

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

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

packages/core/src/components/login/Login.tsx

@@ -34,7 +34,7 @@ const Login = ({
     <div className="flex flex-col h-screen items-center justify-center bg-slate-50 dark:bg-slate-900">
       {config?.logo_url ? (
         <div
-          className="h-40 w-80 mb-4 bg-cover bg-no-repeat bg-center object-cover"
+          className="h-40 w-80 mb-4 bg-contain bg-no-repeat bg-center object-cover"
           style={{ backgroundImage: `url('${config.logo_url}')` }}
         />
       ) : (

packages/core/src/components/navbar/Navbar.tsx

@@ -87,7 +87,7 @@ const Navbar = ({
             >
               {config?.logo_url ? (
                 <div
-                  className="h-10 w-10 bg-cover bg-no-repeat bg-center object-cover"
+                  className="h-10 w-10 bg-contain bg-no-repeat bg-center object-cover"
                   style={{ backgroundImage: `url('${config.logo_url}')` }}
                 />
               ) : (

packages/core/src/lib/util/media.util.ts

@@ -320,7 +320,6 @@ export function selectMediaFilePath(
   }
 
   let mediaFolder = selectMediaFolder(config, collection, entryMap, field, currentFolder);
-
   if (!currentFolder) {
     let publicFolder = trim(config['public_folder'] ?? mediaFolder, '/');
     let mediaPathDir = trim(dirname(mediaPath), '/');
@@ -341,10 +340,14 @@ export function selectMediaFilePath(
         collection,
         entryMap,
         field,
-        mediaPathDir.replace(publicFolder, mediaFolder),
+        publicFolder === '' && mediaPathDir.startsWith(mediaFolder)
+          ? mediaPathDir
+          : mediaPathDir.replace(publicFolder, mediaFolder),
       );
     }
   }
 
-  return joinUrlPath(mediaFolder, basename(mediaPath));
+  return mediaPath.startsWith(mediaFolder)
+    ? mediaPath
+    : joinUrlPath(mediaFolder, basename(mediaPath));
 }

packages/core/src/reducers/mediaLibrary.ts

@@ -109,8 +109,17 @@ function mediaLibrary(
       return {
         ...state,
         isVisible: false,
-        insertOptions: undefined,
+        forImage: false,
+        forFolder: false,
+        controlID: undefined,
+        config: undefined,
+        collection: undefined,
+        collectionFile: undefined,
+        field: undefined,
+        value: undefined,
         alt: undefined,
+        replaceIndex: undefined,
+        insertOptions: undefined,
       };
 
     case MEDIA_INSERT: {

packages/docs/content/releases.json

@@ -1,5 +1,11 @@
 {
   "releases": [
+    {
+      "date": "2023-06-13T10:00:00.000Z",
+      "version": "v2.5.0",
+      "type": "minor",
+      "description": "Switch i18n locales while in preview mode"
+    },
     {
       "date": "2023-05-29T10:00:00.000Z",
       "version": "v2.4.4",