apostrophe 3.64.0 → 3.66.0

package/CHANGELOG.md

@@ -1,8 +1,21 @@
 # Changelog
 
-## 3.64.0 (2024-04-18)
+## 3.66.0 (2024-05-15)
 
-### Adds
+### Fixes
+
+* Autocrop image attachments for referenced documents when replacing an image in the Media Manager.
+* Backports some internal A4 UI logic for metadata to make the new `document-versions` comparison feature compatible with A3.
+
+# Changelog
+
+## 3.65.0 (2024-05-06)
+
+* Adds a `publicBundle` option to `@apostrophecms/asset`. When set to `false`, the `ui/src` public asset bundle is not built at all in most cases
+except as part of the admin UI bundle which depends on it. For use with external front ends such as [apostrophe-astro](https://github.com/apostrophecms/apostrophe-astro).
+Thanks to Michelin for contributing this feature.
+
+## 3.64.0 (2024-04-18)
 
 ### Fixes
 
@@ -34,8 +47,6 @@ that these keys would be present.
 * `field.help` and `field.htmlHelp` are now correctly translated when displayed in a tooltip.
 This was also an expectation for the multisite module.
 
-## UNRELEASED
-
 ### Adds
 
 * Add side by side comparison support in AposSchema component.

package/modules/@apostrophecms/asset/index.js

@@ -42,7 +42,10 @@ module.exports = {
     watchDebounceMs: 1000,
     // Object containing instructions for remapping existing bundles.
     // See the modulre reference documentation for more information.
-    rebundleModules: undefined
+    rebundleModules: undefined,
+    // In case of external front end like Astro, this option allows to
+    // disable the build of the public UI assets.
+    publicBundle: true
   },
 
   async init(self) {
@@ -169,7 +172,9 @@ module.exports = {
           // to the same relative path `/public/apos-frontend/namespace/modules/modulename`.
           // Inherited files are also copied, with the deepest subclass overriding in the
           // event of a conflict
-          await moduleOverrides(`${bundleDir}/modules`, 'public');
+          if (self.options.publicBundle) {
+            await moduleOverrides(`${bundleDir}/modules`, 'public');
+          }
 
           for (const [ name, options ] of Object.entries(self.builds)) {
             // If the option is not present always rebuild everything...
@@ -180,11 +185,12 @@ module.exports = {
             } else if (!rebuild) {
               let checkTimestamp = false;
 
-              // Only builds contributing to the apos admin UI (currently just "apos")
+              // If options.publicBundle, only builds contributing to the apos admin UI (currently just "apos")
               // are candidates to skip the build simply because package-lock.json is
               // older than the bundle. All other builds frequently contain
               // project level code
-              if (options.apos) {
+              // Else we can skip also for the src bundle
+              if (options.apos || !self.options.publicBundle) {
                 const bundleExists = await fs.pathExists(bundleDir);
 
                 if (!bundleExists) {
@@ -437,7 +443,7 @@ module.exports = {
                   modulesPrefix: `${self.getAssetBaseUrl()}/modules`
                 }));
               }
-              if (options.apos) {
+              if (options.apos || !self.options.publicBundle) {
                 const now = Date.now().toString();
                 fs.writeFileSync(`${bundleDir}/${name}-build-timestamp.txt`, now);
               }
@@ -1300,7 +1306,7 @@ module.exports = {
         `;
         self.builds = {
           src: {
-            scenes: [ 'public', 'apos' ],
+            scenes: [ 'apos' ],
             webpack: true,
             outputs: [ 'css', 'js' ],
             label: 'apostrophe:modernBuild',
@@ -1310,13 +1316,6 @@ module.exports = {
             condition: 'module',
             prologue: self.srcPrologue
           },
-          public: {
-            scenes: [ 'public', 'apos' ],
-            outputs: [ 'css', 'js' ],
-            label: 'apostrophe:rawCssAndJs',
-            // Just concatenates
-            webpack: false
-          },
           apos: {
             scenes: [ 'apos' ],
             outputs: [ 'js' ],
@@ -1337,6 +1336,16 @@ module.exports = {
           // We could add an apos-ie11 bundle that just pushes a "sorry charlie" prologue,
           // if we chose
         };
+        if (self.options.publicBundle) {
+          self.builds.public = {
+            scenes: [ 'public', 'apos' ],
+            outputs: [ 'css', 'js' ],
+            label: 'apostrophe:rawCssAndJs',
+            // Just concatenates
+            webpack: false
+          };
+          self.builds.src.scenes.push('public');
+        }
       },
       // Filter the given css performing any necessary transformations,
       // such as support for the /modules path regardless of where

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -194,6 +194,8 @@
   "hideInNavigation": "Hide in Navigation",
   "home": "Home",
   "image": "Image",
+  "imageOnReplaceAutocropMessage": "The replaced image has been autocropped for \"{{ title }}\".",
+  "imageOnReplaceAutocropError": "An error occurred while autocropping the replaced image for {{ title }}",
   "imageDescription": "Add an inline image",
   "imageFile": "Image File",
   "imagePlaceholder": "Image placeholder",

package/modules/@apostrophecms/image/index.js

@@ -122,6 +122,19 @@ module.exports = {
       }
     }
   },
+  handlers(self) {
+    return {
+      beforeUpdate: {
+        // Ensure the crop fields are updated on publishing an image
+        async autoCropRelations(req, piece, options) {
+          if (piece.aposMode !== 'published') {
+            return;
+          }
+          await self.updateImageCropRelationships(req, piece);
+        }
+      }
+    };
+  },
   commands(self) {
     return {
       remove: [
@@ -254,26 +267,7 @@ module.exports = {
           return withinOnePercent(testRatio, configuredRatio);
         }
         async function autocrop(image, widgetOptions) {
-          const nativeRatio = image.attachment.width / image.attachment.height;
-          const configuredRatio = widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1];
-          let crop;
-          if (configuredRatio >= nativeRatio) {
-            const height = image.attachment.width / configuredRatio;
-            crop = {
-              top: Math.floor((image.attachment.height - height) / 2),
-              left: 0,
-              width: image.attachment.width,
-              height: Math.floor(height)
-            };
-          } else {
-            const width = image.attachment.height * configuredRatio;
-            crop = {
-              top: 0,
-              left: Math.floor((image.attachment.width - width) / 2),
-              width: Math.floor(width),
-              height: image.attachment.height
-            };
-          }
+          const crop = self.calculateAutocrop(image, widgetOptions.aspectRatio);
           await self.apos.attachment.crop(req, image.attachment._id, crop);
           image._fields = crop;
           // For ease of testing send back the cropped image URLs now
@@ -457,7 +451,169 @@ module.exports = {
           name: 'dummy',
           width: 0
         }).name;
+      },
+      // Given an image piece and a aspect ratio array, calculate the crop
+      // that would be applied to the image when autocropping it to the
+      // given aspect ratio.
+      calculateAutocrop(image, aspecRatio) {
+        let crop;
+        const configuredRatio = aspecRatio[0] / aspecRatio[1];
+        const nativeRatio = image.attachment.width / image.attachment.height;
+
+        if (configuredRatio >= nativeRatio) {
+          const height = image.attachment.width / configuredRatio;
+          crop = {
+            top: Math.floor((image.attachment.height - height) / 2),
+            left: 0,
+            width: image.attachment.width,
+            height: Math.floor(height)
+          };
+        } else {
+          const width = image.attachment.height * configuredRatio;
+          crop = {
+            top: 0,
+            left: Math.floor((image.attachment.width - width) / 2),
+            width: Math.floor(width),
+            height: image.attachment.height
+          };
+        }
+
+        return crop;
+      },
+      async updateImageCropRelationships(req, piece) {
+        if (!piece.relatedReverseIds?.length) {
+          return;
+        }
+        if (
+          !piece._prevAttachmentId ||
+          !piece.attachment ||
+          piece._prevAttachmentId === piece.attachment._id
+        ) {
+          return;
+        }
+        const croppedIndex = {};
+        for (const docId of piece.relatedReverseIds) {
+          await self.updateImageCropsForRelationship(req, docId, piece, croppedIndex);
+        }
+      },
+      // This handler operates on all documents of a given aposDocId. The `piece`
+      // argument is the image piece that has been updated.
+      // - Auto re-crop the image, using the same width/height ratio if the
+      // image has been cropped.
+      // - Remove any existing focal point data.
+      //
+      // `croppedIndex` is used to avoid re-cropping the same image when updating multiple
+      // documents. It's internally mutated by the handler.
+      async updateImageCropsForRelationship(req, aposDocId, piece, croppedIndex = {}) {
+        const dbDocs = await self.apos.doc.db.find({
+          aposDocId
+        }).toArray();
+        const changeSets = dbDocs.flatMap(doc => getDocRelations(doc, piece));
+        for (const changeSet of changeSets) {
+          try {
+            const cropFields = await autocrop(changeSet.image, changeSet.cropFields, croppedIndex);
+            const $set = {
+              [changeSet.docDotPath]: cropFields
+            };
+            self.logDebug(req, 'replace-autocrop', {
+              docId: changeSet.docId,
+              docTitle: changeSet.doc.title,
+              imageId: piece._id,
+              imageTitle: piece.title,
+              $set
+            });
+            await self.apos.doc.db.updateOne({
+              _id: changeSet.docId
+            }, {
+              $set
+            });
+          } catch (e) {
+            self.apos.util.error(e);
+            await self.apos.notify(
+              req,
+              req.t(
+                'apostrophe:imageOnReplaceAutocropError',
+                {
+                  title: changeSet.doc.title
+                }
+              ),
+              {
+                type: 'danger',
+                dismiss: true
+              }
+            );
+          }
+        }
+
+        if (changeSets.length) {
+          return self.apos.notify(
+            req,
+            req.t(
+              'apostrophe:imageOnReplaceAutocropMessage',
+              {
+                title: changeSets[0].doc.title
+              }
+            ),
+            {
+              type: 'success',
+              dismiss: true
+            }
+          );
+        }
+
+        function getDocRelations(doc, imagePiece) {
+          const results = [];
+          self.apos.doc.walk(doc, function (o, key, value, dotPath, ancestors) {
+            if (!value || typeof value !== 'object' || !Array.isArray(value.imageIds)) {
+              return;
+            }
+            if (!value.imageIds.includes(imagePiece.aposDocId)) {
+              return;
+            }
+            if (!value.imageFields?.[imagePiece.aposDocId]) {
+              return;
+            }
+            const cropFields = value.imageFields[imagePiece.aposDocId];
+            // We check for crop OR focal point data (because
+            // focal point has to be reset when the image is replaced).
+            if (!cropFields.width && typeof cropFields.x !== 'number') {
+              return;
+            }
+            results.push({
+              docId: doc._id,
+              docDotPath: `${dotPath}.imageFields.${imagePiece.aposDocId}`,
+              doc,
+              cropFields,
+              image: imagePiece,
+              value
+            });
+          });
+          return results;
+        }
+
+        async function autocrop(image, oldFields, croppedIndex) {
+          let crop = { ...oldFields };
+          if (crop.width) {
+            crop = self.calculateAutocrop(image, [ crop.width, crop.height ]);
+          }
+
+          const hash = cropHash(image, crop);
+          if (crop.width && !croppedIndex[hash]) {
+            await self.apos.attachment.crop(req, image.attachment._id, crop);
+            croppedIndex[hash] = true;
+          }
+          return {
+            ...crop,
+            x: null,
+            y: null
+          };
+        }
+
+        function cropHash(image, crop) {
+          return `${image.attachment._id}-${crop.top}-${crop.left}-${crop.width}-${crop.height}`;
+        }
       }
+
     };
   },
   extendMethods(self) {
@@ -515,6 +671,15 @@ module.exports = {
             }
             return [ self.apos.launder.integer(a[0]), self.apos.launder.integer(a[1]) ];
           }
+        },
+        prevAttachment: {
+          after(results) {
+            for (const result of results) {
+              if (result.attachment) {
+                result._prevAttachmentId = result.attachment._id;
+              }
+            }
+          }
         }
       }
     };

package/modules/@apostrophecms/page/index.js

@@ -2300,7 +2300,7 @@ database.`);
       // Apostrophe queries used to fetch Apostrophe pages
       // consult this method.
       getBaseUrl(req) {
-        const hostname = self.apos.i18n.locales[req.locale].hostname;
+        const hostname = self.apos.i18n.locales[req.locale]?.hostname;
 
         return hostname
           ? `${req.protocol}://${hostname}`

package/modules/@apostrophecms/schema/index.js

@@ -441,6 +441,13 @@ module.exports = {
         });
       },
 
+      // Wrapper around isEqual method to get modified fields between two documents
+      // instead of just getting a boolean, it will return an array of the modified fields
+
+      getChanges(req, schema, one, two) {
+        return self.isEqual(req, schema, one, two, { getChanges: true });
+      },
+
       // Compare two objects and return true only if their schema fields are equal.
       //
       // Note that for relationship fields this comparison is based on the idsStorage
@@ -451,22 +458,40 @@ module.exports = {
       // This method is invoked by the doc module to compare draft and published
       // documents and set the modified property of the draft, just before updating the
       // published version.
+      //
+      // When passing the option `getChange: true` it'll return an array of changed fields
+      // in this case the method won't short circuit by directly returning false
+      // when finding a changed field
 
-      isEqual(req, schema, one, two) {
+      isEqual(req, schema, one, two, options = {}) {
+        const changedFields = [];
         for (const field of schema) {
           const fieldType = self.fieldTypes[field.type];
-          if (!fieldType.isEqual) {
-            if ((!_.isEqual(one[field.name], two[field.name])) &&
-              !((one[field.name] == null) && (two[field.name] == null))) {
-              return false;
-            }
-          } else {
+
+          if (fieldType.isEqual) {
             if (!fieldType.isEqual(req, field, one, two)) {
+              if (options.getChanges) {
+                changedFields.push(field.name);
+              } else {
+                return false;
+              }
+            }
+            continue;
+          }
+
+          if (
+            !_.isEqual(one[field.name], two[field.name]) &&
+            !((one[field.name] == null) && (two[field.name] == null))
+          ) {
+            if (options.getChanges) {
+              changedFields.push(field.name);
+            } else {
               return false;
             }
           }
         }
-        return true;
+
+        return options.getChanges ? changedFields : true;
       },
 
       // Index the object's fields for participation in Apostrophe search unless

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -40,6 +40,7 @@
       <component
         v-show="displayComponent(field)"
         v-model="fieldState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :is="fieldComponentMap[field.type]"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
@@ -59,6 +60,7 @@
         v-if="hasCompareMeta"
         v-show="displayComponent(field)"
         v-model="compareMetaState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :is="fieldComponentMap[field.type]"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
@@ -139,4 +141,9 @@ export default {
       }
     }
   }
+
+  :deep(.apos-field__wrapper--highlight > .apos-field) {
+    padding: 10px;
+    background: var(--a-highlight);
+  }
 </style>

package/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js

@@ -328,6 +328,9 @@ export default {
     },
     onUpdateDocData(data) {
       this.$emit('update-doc-data', data);
+    },
+    highlight(fieldName) {
+      return this.meta[fieldName]?.['@apostrophecms/schema:highlight'];
     }
   }
 };

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -8,6 +8,7 @@
   --a-warning-dark: #a75c07;
   --a-warning-fade: #ffce0030;
   --a-progress-bg: #2c354d;
+  --a-highlight: #fff6e8;
 
   --a-danger-button-hover: #c00717;
   --a-danger-button-active: #a10000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.64.0",
+  "version": "3.66.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/images.js

@@ -1,9 +1,12 @@
 const t = require('../test-lib/test.js');
-const assert = require('assert');
+const assert = require('assert/strict');
 const fs = require('fs');
+const fsp = require('fs/promises');
 const path = require('path');
 const FormData = require('form-data');
 
+const publicFolderPath = path.join(process.cwd(), 'test/public');
+
 describe('Images', function() {
 
   let apos;
@@ -73,7 +76,8 @@ describe('Images', function() {
   // Test pieces.list()
   it('should clean up any existing images for testing', async function() {
     try {
-      const response = await apos.doc.db.deleteMany({ type: '@apostrophecms/image' }
+      const response = await apos.doc.db.deleteMany(
+        { type: '@apostrophecms/image' }
       );
       assert(response.result.ok === 1);
     } catch (e) {
@@ -263,6 +267,140 @@ describe('Images', function() {
     assert.strictEqual(fields.height, 225);
   });
 
+  it('should update crop fields when replacing an image attachment', async function () {
+    await t.destroy(apos);
+    await fsp.rm(path.join(publicFolderPath, 'uploads'), {
+      recursive: true,
+      force: true
+    });
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-piece': {
+          extend: '@apostrophecms/piece-type',
+          fields: {
+            add: {
+              main: {
+                type: 'area',
+                options: {
+                  widgets: {
+                    '@apostrophecms/image': {
+                      aspectRatio: [ 3, 2 ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    await insertUser({
+      title: 'admin',
+      username: 'admin',
+      password: 'admin',
+      email: 'ad@min.com',
+      role: 'admin'
+    });
+
+    // Upload an image (landscape), crop it, insert a piece with the cropped image
+    jar = await login('admin');
+    const formData = new FormData();
+    const stream = fs.createReadStream(
+      path.join(apos.rootDir, '/public/test-image-landscape.jpg')
+    );
+    formData.append('file', stream);
+    const attachment = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formData,
+      jar
+    });
+    stream.close();
+    image = await apos.http.post('/api/v1/@apostrophecms/image', {
+      body: {
+        title: 'Test Image Landscape',
+        attachment
+      },
+      jar
+    });
+    assert.equal(image._prevAttachmentId, attachment._id);
+    const crop = await apos.http.post('/api/v1/@apostrophecms/image/autocrop', {
+      body: {
+        relationship: [ image ],
+        widgetOptions: {
+          aspectRatio: [ 3, 2 ]
+        }
+      },
+      jar
+    });
+    let piece = await apos.http.post('/api/v1/test-piece', {
+      jar,
+      body: {
+        title: 'Test Piece',
+        slug: 'test-piece',
+        type: 'test-piece',
+        main: {
+          metaType: 'area',
+          items: [
+            {
+              type: '@apostrophecms/image',
+              metaType: 'widget',
+              imageIds: [ image.aposDocId ],
+              imageFields: {
+                [image.aposDocId]: crop.relationship[0]._fields
+              },
+              _image: [ crop.relationship[0] ]
+            }
+          ]
+        }
+      }
+    });
+
+    let imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present when creating the piece');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachment._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+
+    // Replace the image with portrait orientation, verify that the aspect ratio is preserved
+    const formDataPortrait = new FormData();
+    const streamPortrait = fs.createReadStream(path.join(apos.rootDir, '/public/test-image.jpg'));
+    formDataPortrait.append('file', streamPortrait);
+    const attachmentPortrait = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formDataPortrait,
+      jar
+    });
+    image = await apos.http.put(`/api/v1/@apostrophecms/image/${image._id}`, {
+      body: {
+        title: 'Test Image Portrait',
+        attachment: attachmentPortrait
+      },
+      jar
+    });
+    streamPortrait.close();
+    piece = await apos.http.get(`/api/v1/test-piece/${piece._id}`, {
+      jar
+    });
+    imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present after replacing the image attachment');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachmentPortrait._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+  });
+
   async function insertUser(info) {
     const user = apos.user.newInstance();
     assert(user);