fix: absolute media urls leading slash being trimmed

cypress.config.ts

@@ -4,7 +4,7 @@ import setupNodeEvents from "./cypress/plugins";
 export default defineConfig({
   projectId: "wvw3x3",
   retries: {
-    runMode: 0,
+    runMode: 2,
     openMode: 0,
   },
   chromeWebSecurity: false,

packages/core/dev-test/backends/bitbucket/config.yml

@@ -3,7 +3,7 @@ backend:
   branch: main
   repo: staticcms/static-cms-bitbucket
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/backends/git-gateway/config.yml

@@ -2,7 +2,7 @@ backend:
   name: git-gateway
   branch: main
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/backends/github/config.yml

@@ -3,7 +3,7 @@ backend:
   branch: main
   repo: staticjscms/static-cms-github
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/backends/gitlab/config.yml

@@ -5,7 +5,7 @@ backend:
   auth_type: pkce
   app_id: 589ccb30ce31da8ba08e0b1e10b681a10be108e144508c2712573c6e4d60707e
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/backends/gitlab/index.js

@@ -24,27 +24,6 @@ const PostDateFieldPreview = ({ value }) => {
   );
 };
 
-const PostDraftFieldPreview = ({ value }) => {
-  return h(
-    'div',
-    {
-      style: {
-        backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
-        color: 'white',
-        border: 'none',
-        padding: '2px 6px',
-        textAlign: 'center',
-        textDecoration: 'none',
-        display: 'inline-block',
-        cursor: 'pointer',
-        borderRadius: '4px',
-        fontSize: '14px',
-      },
-    },
-    value === true ? 'Draft' : 'Published',
-  );
-};
-
 const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;

packages/core/dev-test/backends/test/config.yml

@@ -1,7 +1,7 @@
 backend:
   name: test-repo
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/config.yml

@@ -1,7 +1,7 @@
 backend:
   name: test-repo
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/core/dev-test/index.js

@@ -24,29 +24,6 @@ const PostDateFieldPreview = ({ value }) => {
   );
 };
 
-const PostDraftFieldPreview = ({ value }) => {
-  return h(
-    'div',
-    {
-      style: {
-        backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
-        color: 'white',
-        border: 'none',
-        padding: '2px 6px',
-        textAlign: 'center',
-        textDecoration: 'none',
-        display: 'inline-block',
-        cursor: 'pointer',
-        borderRadius: '4px',
-        fontSize: '14px',
-        lineHeight: '16px',
-        height: '20px',
-      },
-    },
-    value === true ? 'Draft' : 'Published',
-  );
-};
-
 const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;

packages/core/src/components/common/card/CardContent.tsx

@@ -9,7 +9,7 @@ interface CardContentProps {
 }
 
 const CardContent: FC<CardContentProps> = ({ children }) => {
-  return <p className={cardClasses.content}>{children}</p>;
+  return <div className={cardClasses.content}>{children}</div>;
 };
 
 export default CardContent;

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

@@ -245,7 +245,7 @@ describe('media.util', () => {
             .fields[3] as FileOrImageField;
 
           expect(selectMediaFolder(mockConfig, mockCollection, mockBaseEntry, mockImageField)).toBe(
-            'path/to/some/other/media/folder',
+            '/path/to/some/other/media/folder',
           );
         });
 
@@ -273,7 +273,7 @@ describe('media.util', () => {
 
             expect(
               selectMediaFolder(mockConfig, mockCollection, mockBaseEntry, mockImageField),
-            ).toBe('path/to/some/other/media/i-am-a-title');
+            ).toBe('/path/to/some/other/media/i-am-a-title');
           });
 
           it('should substitute slug', () => {
@@ -309,7 +309,7 @@ describe('media.util', () => {
             });
 
             expect(selectMediaFolder(mockConfig, mockCollection, mockEntry, mockImageField)).toBe(
-              'path/to/some/other/media/i-am-a-title-fish',
+              '/path/to/some/other/media/i-am-a-title-fish',
             );
           });
 
@@ -345,7 +345,7 @@ describe('media.util', () => {
             });
 
             expect(selectMediaFolder(mockConfig, mockCollection, mockEntry, mockImageField)).toBe(
-              'path/to/media/folder/i-am-a-title-fish',
+              '/path/to/media/folder/i-am-a-title-fish',
             );
           });
 
@@ -383,7 +383,7 @@ describe('media.util', () => {
             });
 
             expect(selectMediaFolder(mockConfig, mockCollection, mockEntry, mockImageField)).toBe(
-              'path/to/some/other/media',
+              '/path/to/some/other/media/',
             );
           });
         });

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

@@ -1,4 +1,3 @@
-import trim from 'lodash/trim';
 import { dirname } from 'path';
 
 import { basename, isAbsolutePath } from '.';
@@ -246,7 +245,7 @@
   } else if (hasCustomFolder('media_folder', collection, entryMap?.slug, field)) {
     const folder = evaluateFolder('media_folder', config, collection!, entryMap, field);
     if (folder.startsWith('/')) {
-      mediaFolder = folder.replace(/^[/]*/g, '');
+      mediaFolder = folder;
     } else {
       const entryPath = entryMap?.path;
       mediaFolder = entryPath
@@ -259,7 +258,7 @@
     }
   }
 
-  return trim(mediaFolder, '/');
+  return mediaFolder;
 }
 
 export function selectMediaFilePublicPath<EF extends BaseField>(
@@ -297,7 +296,7 @@
     const mediaFolder = customMediaFolder
       ? evaluateFolder('media_folder', config, collection!, entryMap, field)
       : config['media_folder'];
-    selectedPublicFolder = trim(currentFolder, '/').replace(trim(mediaFolder!, '/'), publicFolder);
+    selectedPublicFolder = currentFolder.replace(mediaFolder!, publicFolder);
   }
 
   const finalPublicPath = joinUrlPath(selectedPublicFolder, basename(mediaPath));
@@ -322,17 +321,14 @@
 
   let mediaFolder = selectMediaFolder(config, collection, entryMap, field, currentFolder);
   if (!currentFolder) {
-    let publicFolder = trim(config['public_folder'] ?? mediaFolder, '/');
-    let mediaPathDir = trim(dirname(mediaPath), '/');
+    let publicFolder = config['public_folder'] ?? mediaFolder;
+    let mediaPathDir = dirname(mediaPath);
     if (mediaPathDir === '.') {
       mediaPathDir = '';
     }
 
     if (hasCustomFolder('public_folder', collection, entryMap?.slug, field)) {
-      publicFolder = trim(
-        evaluateFolder('public_folder', config, collection!, entryMap, field),
-        '/',
-      );
+      publicFolder = evaluateFolder('public_folder', config, collection!, entryMap, field);
     }
 
     if (mediaPathDir.includes(publicFolder) && mediaPathDir != mediaFolder) {

packages/demo/public/editorial/config.yml

@@ -1,7 +1,7 @@
 backend:
   name: test-repo
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/demo/public/simple/config.yml

@@ -1,7 +1,7 @@
 backend:
   name: test-repo
 site_url: 'https://example.com'
-media_folder: assets/uploads
+media_folder: /assets/uploads
 media_library:
   folder_support: true
 locale: en

packages/demo/src/cms.js

@@ -30,29 +30,6 @@ const PostDateFieldPreview = ({ value }) => {
   );
 };
 
-const PostDraftFieldPreview = ({ value }) => {
-  return h(
-    'div',
-    {
-      style: {
-        backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
-        color: 'white',
-        border: 'none',
-        padding: '2px 6px',
-        textAlign: 'center',
-        textDecoration: 'none',
-        display: 'inline-block',
-        cursor: 'pointer',
-        borderRadius: '4px',
-        fontSize: '14px',
-        lineHeight: '16px',
-        height: '20px',
-      },
-    },
-    value === true ? 'Draft' : 'Published',
-  );
-};
-
 const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;