@evfrenkel/decap-cms-core 3.13.0-image-conversions.5 → 3.13.0-image-conversions.6

package/dist/esm/bootstrap.js

@@ -49,8 +49,8 @@ function bootstrap(opts = {}) {
   /**
    * Log the version number.
    */
-  if (typeof "3.13.0-image-conversions.4" === 'string') {
-    console.log(`decap-cms-core ${"3.13.0-image-conversions.4"}`);
+  if (typeof "3.13.0-image-conversions.5" === 'string') {
+    console.log(`decap-cms-core ${"3.13.0-image-conversions.5"}`);
   }
 
   /**

package/dist/esm/components/UI/ErrorBoundary.js

@@ -42,8 +42,8 @@ function buildIssueTemplate({
   let version = '';
   if (typeof DECAP_CMS_VERSION === 'string') {
     version = `decap-cms@${DECAP_CMS_VERSION}`;
-  } else if (typeof "3.12.2-image-conversions.4" === 'string') {
-    version = `decap-cms-app@${"3.12.2-image-conversions.4"}`;
+  } else if (typeof "3.12.2-image-conversions.5" === 'string') {
+    version = `decap-cms-app@${"3.12.2-image-conversions.5"}`;
   }
   const template = getIssueTemplate({
     version,

package/dist/esm/reducers/entries.js

@@ -439,6 +439,14 @@ function getFileField(collectionFiles, slug) {
   const file = collectionFiles.find(f => f?.get('name') === slug);
   return file;
 }
+function getMediaPublicPathSegment(mediaPath) {
+  const normalizedPath = trim(mediaPath, '/');
+  const transformationIndex = normalizedPath.indexOf('_transformations/');
+  if (transformationIndex >= 0) {
+    return normalizedPath.slice(transformationIndex);
+  }
+  return basename(mediaPath);
+}
 function hasCustomFolder(folderKey, collection, slug, field) {
   if (!collection) {
     return false;
@@ -556,9 +564,9 @@ export function selectMediaFilePublicPath(config, collection, mediaPath, entryMa
     publicFolder = normalizeDoubleSlashes(evaluateFolder(name, config, collection, entryMap, field));
   }
   if (isAbsolutePath(publicFolder)) {
-    return joinUrlPath(publicFolder, basename(mediaPath));
+    return joinUrlPath(publicFolder, getMediaPublicPathSegment(mediaPath));
   }
-  return join(publicFolder, basename(mediaPath));
+  return join(publicFolder, getMediaPublicPathSegment(mediaPath));
 }
 export function selectEditingDraft(state) {
   const entry = state.get('entry');

package/dist/esm/reducers/mediaLibrary.js

@@ -4,6 +4,10 @@ import { dirname } from 'path';
 import { MEDIA_LIBRARY_OPEN, MEDIA_LIBRARY_CLOSE, MEDIA_LIBRARY_CREATE, MEDIA_INSERT, MEDIA_REMOVE_INSERTED, MEDIA_LOAD_REQUEST, MEDIA_LOAD_SUCCESS, MEDIA_LOAD_FAILURE, MEDIA_PERSIST_REQUEST, MEDIA_PERSIST_SUCCESS, MEDIA_PERSIST_FAILURE, MEDIA_DELETE_REQUEST, MEDIA_DELETE_SUCCESS, MEDIA_DELETE_FAILURE, MEDIA_DISPLAY_URL_REQUEST, MEDIA_DISPLAY_URL_SUCCESS, MEDIA_DISPLAY_URL_FAILURE } from '../actions/mediaLibrary';
 import { selectEditingDraft, selectMediaFolder } from './entries';
 import { selectIntegration } from './';
+function isMediaFileInFolder(filePath, mediaFolder) {
+  const fileFolder = dirname(filePath);
+  return fileFolder === mediaFolder || fileFolder.startsWith(`${mediaFolder}/_transformations/`);
+}
 const defaultState = {
   isVisible: false,
   showMediaButton: true,
@@ -231,7 +235,7 @@ export function selectMediaFiles(state, field) {
     const entry = entryDraft.get('entry');
     const collection = state.collections.get(entry?.get('collection'));
     const mediaFolder = selectMediaFolder(state.config, collection, entry, field);
-    files = entryFiles.filter(f => dirname(f.path) === mediaFolder).map(file => ({
+    files = entryFiles.filter(f => isMediaFileInFolder(f.path, mediaFolder)).map(file => ({
       key: file.id,
       ...file
     }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evfrenkel/decap-cms-core",
   "description": "Decap CMS core application, see decap-cms package for the main distribution.",
-  "version": "3.13.0-image-conversions.5",
+  "version": "3.13.0-image-conversions.6",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-core.js",
   "files": [

package/src/reducers/__tests__/entries.spec.js

@@ -549,6 +549,18 @@ describe('entries', () => {
       ).toEqual('/static/media/hosting-and-deployment/deployment-with-nanobox/image.png');
     });
 
+    it('should preserve generated transformation paths', () => {
+      expect(
+        selectMediaFilePublicPath(
+          { public_folder: '/uploads' },
+          null,
+          'public/uploads/_transformations/webp/kittens.webp',
+          undefined,
+          undefined,
+        ),
+      ).toBe('/uploads/_transformations/webp/kittens.webp');
+    });
+
     it('should handle file public_folder', () => {
       const entry = fromJS({
         path: 'src/posts/index.md',

package/src/reducers/__tests__/mediaLibrary.spec.js

@@ -108,6 +108,35 @@ describe('mediaLibrary', () => {
     expect(selectMediaFolder).toHaveBeenCalledWith(state.config, collection, entry, imageField);
   });
 
+  it('should select draft transformation media files from collection when editing a draft', () => {
+    const { selectEditingDraft, selectMediaFolder } = require('../../reducers/entries');
+
+    selectEditingDraft.mockReturnValue(true);
+    selectMediaFolder.mockReturnValue('static/images/posts');
+
+    const imageField = fromJS({ name: 'image' });
+    const collection = fromJS({ fields: [imageField] });
+    const entry = fromJS({
+      collection: 'posts',
+      mediaFiles: [
+        { id: 1, path: 'static/images/posts/_transformations/webp/logo.webp' },
+        { id: 2, path: 'static/images/other/_transformations/webp/image.webp' },
+      ],
+      data: {},
+    });
+    const state = {
+      config: {},
+      collections: fromJS({ posts: collection }),
+      entryDraft: fromJS({
+        entry,
+      }),
+    };
+
+    expect(selectMediaFiles(state, imageField)).toEqual([
+      { id: 1, key: 1, path: 'static/images/posts/_transformations/webp/logo.webp' },
+    ]);
+  });
+
   it('should select global media files when not editing a draft', () => {
     const { selectEditingDraft } = require('../../reducers/entries');
 

package/src/reducers/entries.ts

@@ -545,6 +545,17 @@ function getFileField(collectionFiles: CollectionFiles, slug: string | undefined
   return file;
 }
 
+function getMediaPublicPathSegment(mediaPath: string) {
+  const normalizedPath = trim(mediaPath, '/');
+  const transformationIndex = normalizedPath.indexOf('_transformations/');
+
+  if (transformationIndex >= 0) {
+    return normalizedPath.slice(transformationIndex);
+  }
+
+  return basename(mediaPath);
+}
+
 function hasCustomFolder(
   folderKey: 'media_folder' | 'public_folder',
   collection: Collection | null,
@@ -804,10 +815,10 @@ export function selectMediaFilePublicPath(
   }
 
   if (isAbsolutePath(publicFolder)) {
-    return joinUrlPath(publicFolder, basename(mediaPath));
+    return joinUrlPath(publicFolder, getMediaPublicPathSegment(mediaPath));
   }
 
-  return join(publicFolder, basename(mediaPath));
+  return join(publicFolder, getMediaPublicPathSegment(mediaPath));
 }
 
 export function selectEditingDraft(state: EntryDraft) {

package/src/reducers/mediaLibrary.ts

@@ -34,6 +34,11 @@ import type {
   EntryField,
 } from '../types/redux';
 
+function isMediaFileInFolder(filePath: string, mediaFolder: string) {
+  const fileFolder = dirname(filePath);
+  return fileFolder === mediaFolder || fileFolder.startsWith(`${mediaFolder}/_transformations/`);
+}
+
 const defaultState: {
   isVisible: boolean;
   showMediaButton: boolean;
@@ -270,7 +275,7 @@ export function selectMediaFiles(state: State, field?: EntryField) {
     const collection = state.collections.get(entry?.get('collection'));
     const mediaFolder = selectMediaFolder(state.config, collection, entry, field);
     files = entryFiles
-      .filter(f => dirname(f.path) === mediaFolder)
+      .filter(f => isMediaFileInFolder(f.path, mediaFolder))
       .map(file => ({ key: file.id, ...file }));
   } else {
     files = mediaLibrary.get('files') || [];