@evfrenkel/decap-cms-core 3.13.0-image-conversions.2 → 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.1" === 'string') {
-    console.log(`decap-cms-core ${"3.13.0-image-conversions.1"}`);
+  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.1" === 'string') {
-    version = `decap-cms-app@${"3.12.2-image-conversions.1"}`;
+  } 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/lib/imageTransformations.js

@@ -98,11 +98,23 @@ function getImageBytes(image, format, quality = 75) {
   }
   return image.get_bytes();
 }
+async function getFileBytes(file) {
+  if (typeof file.arrayBuffer === 'function') {
+    return new Uint8Array(await file.arrayBuffer());
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(new Uint8Array(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
 export async function transformImage(file, originalPath, config) {
   const photon = await import('@silvia-odwyer/photon');
   const initPhoton = photon.default;
   await initPhoton();
-  const originalImage = photon.PhotonImage.new_from_blob(file);
+  const imageBytes = await getFileBytes(file);
+  const originalImage = photon.PhotonImage.new_from_byteslice(imageBytes);
   try {
     const transformedFiles = config.variants.map(variant => {
       const {

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.2",
+  "version": "3.13.0-image-conversions.6",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-core.js",
   "files": [

package/src/lib/__tests__/imageTransformations.spec.ts

@@ -4,9 +4,41 @@ import {
   getImageTransformationsConfig,
   shouldTransformImage,
   sortTransformationFilesForSelection,
+  transformImage,
 } from '../imageTransformations';
 
+const mockPhotonImage = {
+  get_width: jest.fn(() => 100),
+  get_height: jest.fn(() => 50),
+  get_bytes_webp: jest.fn(() => new Uint8Array([1, 2, 3])),
+  get_bytes_jpeg: jest.fn(() => new Uint8Array([4, 5, 6])),
+  get_bytes: jest.fn(() => new Uint8Array([7, 8, 9])),
+  free: jest.fn(),
+};
+
+const mockNewFromByteslice = jest.fn(() => mockPhotonImage);
+const mockNewFromBlob = jest.fn();
+
+jest.mock(
+  '@silvia-odwyer/photon',
+  () => ({
+    __esModule: true,
+    default: jest.fn(() => Promise.resolve()),
+    PhotonImage: {
+      new_from_byteslice: mockNewFromByteslice,
+      new_from_blob: mockNewFromBlob,
+    },
+    resize: jest.fn(),
+    SamplingFilter: { Lanczos3: 'Lanczos3' },
+  }),
+  { virtual: true },
+);
+
 describe('imageTransformations', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('getImageTransformationsConfig', () => {
     it('normalizes array shorthand and keeps the original by default', () => {
       expect(
@@ -105,4 +137,25 @@ describe('imageTransformations', () => {
       expect(sortTransformationFilesForSelection([original, small])).toEqual([small, original]);
     });
   });
+
+  describe('transformImage', () => {
+    it('creates the Photon image from file bytes instead of blob', async () => {
+      const file = new File([new Uint8Array([255, 216, 255])], 'image.jpg', {
+        type: 'image/jpeg',
+      });
+
+      const files = await transformImage(file, 'uploads/image.jpg', {
+        keepOriginal: false,
+        variants: [{ name: 'webp', format: 'webp', keep_original_size: true }],
+      });
+
+      expect(mockNewFromByteslice).toHaveBeenCalledTimes(1);
+      expect(mockNewFromByteslice.mock.calls[0][0]).toEqual(new Uint8Array([255, 216, 255]));
+      expect(mockNewFromBlob).not.toHaveBeenCalled();
+      expect(files).toHaveLength(1);
+      expect(files[0].file.name).toBe('image.webp');
+      expect(files[0].path).toBe('uploads/_transformations/webp/image.webp');
+      expect(mockPhotonImage.free).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/lib/imageTransformations.ts

@@ -174,6 +174,19 @@ function getImageBytes(image: PhotonImage, format: string, quality = 75) {
   return image.get_bytes();
 }
 
+async function getFileBytes(file: File) {
+  if (typeof file.arrayBuffer === 'function') {
+    return new Uint8Array(await file.arrayBuffer());
+  }
+
+  return new Promise<Uint8Array>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
 export async function transformImage(
   file: File,
   originalPath: string,
@@ -183,7 +196,8 @@ export async function transformImage(
   const initPhoton = (photon as unknown as { default: () => Promise<unknown> }).default;
   await initPhoton();
 
-  const originalImage = photon.PhotonImage.new_from_blob(file);
+  const imageBytes = await getFileBytes(file);
+  const originalImage = photon.PhotonImage.new_from_byteslice(imageBytes);
 
   try {
     const transformedFiles = config.variants.map(variant => {

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') || [];