apostrophe 4.6.1 → 4.7.0

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

@@ -16,7 +16,8 @@
       line-height: var(--a-line-tall);
     }
 
-    ul, ol {
+    ul,
+    ol {
       padding-left: $spacing-base;
     }
 
@@ -30,7 +31,7 @@
     }
 
     ul li::before {
-      content: '-';
+      content: "-";
       position: relative;
       left: -$spacing-half;
     }
@@ -39,13 +40,15 @@
   .apos-tooltip__inner {
     @include type-small;
 
-    z-index: $z-index-default;
-    position: relative;
-    padding: 8px 10px;
-    border-radius: 3px;
-    border-width: 0;
-    color: var(--a-text-inverted);
-    background: var(--a-background-inverted);
+    & {
+      z-index: $z-index-default;
+      position: relative;
+      padding: 8px 10px;
+      border-radius: 3px;
+      border-width: 0;
+      color: var(--a-text-inverted);
+      background: var(--a-background-inverted);
+    }
   }
 
   .apos-tooltip__arrow {
@@ -61,31 +64,31 @@
     transform: rotate(45deg);
   }
 
-  &[x-placement^='top'] {
+  &[x-placement^="top"] {
     .apos-tooltip__arrow {
       bottom: -4px;
     }
   }
 
-  &[x-placement^='bottom'] {
+  &[x-placement^="bottom"] {
     .apos-tooltip__arrow {
       top: -3px;
     }
   }
 
-  &[x-placement^='right'] {
+  &[x-placement^="right"] {
     .apos-tooltip__arrow {
       left: -3px;
     }
   }
 
-  &[x-placement^='left'] {
+  &[x-placement^="left"] {
     .apos-tooltip__arrow {
       right: -3px;
     }
   }
 
-  &[aria-hidden='true'] {
+  &[aria-hidden="true"] {
     display: none;
     visibility: hidden;
     opacity: 0;
@@ -96,7 +99,7 @@
     }
   }
 
-  &[aria-hidden='false'] {
+  &[aria-hidden="false"] {
     display: initial;
     visibility: visible;
     opacity: 1;

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_input_mixins.scss

@@ -5,12 +5,14 @@ $box-width: 12px;
   @include type-base;
   @include apos-transition(all);
 
-  box-sizing: border-box;
-  width: 100%;
-  border: 1px solid var(--a-base-8);
-  color: var(--a-text-primary);
-  border-radius: var(--a-border-radius);
-  background-color: var(--a-base-9);
+  & {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid var(--a-base-8);
+    color: var(--a-text-primary);
+    border-radius: var(--a-border-radius);
+    background-color: var(--a-base-9);
+  }
 
   &::placeholder {
     color: var(--a-base-4);

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_mixins.scss

@@ -2,7 +2,9 @@
 // until used
 
 @mixin apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out) {
-  transition: $what $duration $ease;
+  & {
+    transition: $what $duration $ease;
+  }
 }
 
 @mixin apos-p-reset() {

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_theme_mixins.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 $brand-red: #ea433a;
 $brand-gold: #cc9300;
@@ -27,57 +27,72 @@ $input-color-disabled: var(--a-base-4);
   --a-primary-transparent-10: #{transparentize($color, 0.9)};
   --a-primary-dark-10: #{mix(#000, $color, 10%)};
   --a-primary-dark-15: #{mix(#000, $color, 15%)};
-  --a-primary-light-40: #{mix(#FFF, $color, 40%)};
+  --a-primary-light-40: #{mix(#fff, $color, 40%)};
 }
 
 //Application Styles
 
 @mixin type-base {
-  color: var(--a-text-primary);
-  font-family: var(--a-family-default);
-  font-size: var(--a-type-base);
-  font-weight: var(--a-weight-base);
-  letter-spacing: var(--a-letter-base);
-  line-height: var(--a-line-base);
+  & {
+    color: var(--a-text-primary);
+    font-family: var(--a-family-default);
+    font-size: var(--a-type-base);
+    font-weight: var(--a-weight-base);
+    letter-spacing: var(--a-letter-base);
+    line-height: var(--a-line-base);
+  }
 }
 
 @mixin type-help {
   @include type-base;
 
-  font-size: var(--a-type-small);
-  text-transform: uppercase;
+  & {
+    font-size: var(--a-type-small);
+    text-transform: uppercase;
+  }
 }
 
 @mixin type-small {
   @include type-base;
 
-  font-size: var(--a-type-small);
-  line-height: var(--a-line-tall);
+  & {
+    font-size: var(--a-type-small);
+    line-height: var(--a-line-tall);
+  }
 }
 
 @mixin type-label {
   @include type-base;
 
-  font-size: var(--a-type-label);
-  line-height: var(--a-line-tall);
+  & {
+    font-size: var(--a-type-label);
+    line-height: var(--a-line-tall);
+  }
 }
 
 @mixin type-large {
   @include type-base;
 
-  font-size: var(--a-type-large);
-  line-height: var(--a-line-tall);
+  & {
+    font-size: var(--a-type-large);
+    line-height: var(--a-line-tall);
+  }
+
 }
 
 @mixin type-title {
   @include type-base;
 
-  font-size: var(--a-type-heading);
-  line-height: var(--a-line-tall);
+  & {
+    font-size: var(--a-type-heading);
+    line-height: var(--a-line-tall);
+  }
 }
 
 @mixin type-display {
   @include type-base;
 
-  font-size: var(--a-type-display);
+  & {
+    font-size: var(--a-type-display);
+  }
 }

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_type_mixins.scss

@@ -1,5 +1,7 @@
 @mixin link-primary {
-  color: var(--a-primary);
+  & {
+    color: var(--a-primary);
+  }
 
   &:hover,
   &:focus {

package/modules/@apostrophecms/ui/ui/apos/utils/index.js

@@ -1,53 +1,142 @@
 module.exports = {
-  debounce(fn, delay) {
-    let timer;
-    let previousDone = true;
-
-    const setTimer = (res, rej, args, delay) => {
-      return setTimeout(() => {
-        if (!previousDone) {
-          clearTimeout(timer);
-          timer = setTimer(res, rej, args, delay);
-          return;
-        }
-
-        previousDone = false;
-        const returned = fn.apply(this, args);
-        if (returned instanceof Promise) {
-          return returned
-            .then(res)
-            .catch(rej)
-            .finally(() => {
-              previousDone = true;
-            });
-        }
-
-        previousDone = true;
-        res(returned);
-      }, delay);
-    };
-
-    return (...args) => {
-      return new Promise((resolve, reject) => {
-        clearTimeout(timer);
-        timer = setTimer(resolve, reject, args, delay);
-      });
-    };
-  },
-
-  throttle(fn, delay) {
-    let inThrottle;
-
-    return (...args) => {
-      return new Promise((resolve) => {
-        if (!inThrottle) {
-          inThrottle = true;
-          setTimeout(() => {
-            inThrottle = false;
-            resolve(fn.apply(this, args));
-          }, delay);
-        }
-      });
-    };
-  }
+  debounceAsync,
+  // BC alias
+  debounce: debounceAsync,
+  throttle
 };
+
+// Debounce the async function "fn". For synchronous functions, use "lodash/debounce", not this function.
+//
+// Returns a debounced function that invokes "fn", but no more frequently than every "delay"
+// milliseconds and never while "fn" is already in progress.
+//
+// As always when debouncing, extra calls are discarded, however the most recent call
+// is guaranteed to result in a final invocation if not preempted by a new call, so you may
+// trust that the user's most recent input will eventually be sent etc.
+//
+// ### Avoiding race conditions with onSuccess
+//
+// Race conditions are a challenge. To avoid them, "fn" should have no side effects, and you should
+// pass a synchronous function that accepts the return value of "fn" as the "onSuccess" option.
+// The "onSuccess" function should then implement all needed side effects (e.g. changes to component
+// state, etc) when invoked. The debounced function has no return value when "onSuccess" is used.
+//
+// You can cancel the debounced function and cause all ongoing and any further invocations to be rejected by
+// calling the "cancel()" method attached to it.
+//
+// You can skip the initial delay for a particular invocation by calling the "skipDelay()" method
+// attached to the debounced function, passing any appropriate arguments for "fn" to "skipDelay" instead.
+// This is useful when immediate action is sometimes needed but you still want to use "onSuccess" in
+// a consistent manner and prevent race conditions.
+//
+// ### Detecting Cancellations
+//
+// If "onSuccess" is not provided, then after cancellation any invocations will be rejected
+// with an error such that "e.name === 'debounce.canceled'". Any other errors are passed through
+// as errors in the debounced function.
+//
+// If "onSuccess" is provided then all invocations of the debounced function resolve with "null".
+// If a rejection due to cancelation is detected ("e.name === 'debounce.canceled'") then
+// it will be "muted" internally. Howeever, if any other type of error occurs, it will be passed through,
+// resulting in a rejection of the debounced function.
+
+function debounceAsync(fn, delay, options = {}) {
+  const canceledRejection = new Error('debounce:canceled');
+  canceledRejection.name = 'debounce.canceled';
+  let timer;
+  let canceled = false;
+  let previousDone = true;
+  let skipNextDelay = false;
+
+  const setTimer = (res, rej, args, delay) => {
+    function body() {
+      if (canceled) {
+        return rej(canceledRejection);
+      }
+      if (!previousDone) {
+        clearTimeout(timer);
+        // At least 100ms delay to let current invocation finish
+        timer = setTimer(res, rej, args, delay || 100);
+        return;
+      }
+
+      previousDone = false;
+      const returned = fn.apply(this, args);
+      if (returned instanceof Promise) {
+        return returned
+          .then((result) => {
+            if (canceled) {
+              return rej(canceledRejection);
+            }
+            res(result);
+          })
+          .catch(rej)
+          .finally(() => {
+            previousDone = true;
+          });
+      }
+
+      previousDone = true;
+      res(returned);
+    }
+    return setTimeout(body, delay);
+  };
+
+  const wrapper = async (...args) => {
+    const promise = new Promise((resolve, reject) => {
+      if (canceled) {
+        return reject(canceledRejection);
+      }
+      if (skipNextDelay) {
+        skipNextDelay = false;
+        timer = setTimer(resolve, reject, args, 0);
+        return;
+      }
+      clearTimeout(timer);
+      timer = setTimer(resolve, reject, args, delay);
+    });
+
+    try {
+      const result = await promise;
+      if (options.onSuccess) {
+        await options.onSuccess(result);
+        return null;
+      }
+      return promise;
+    } catch (e) {
+      if (e.name !== 'debounce.canceled' || !options.onSuccess) {
+        throw e;
+      }
+      return null;
+    }
+  };
+
+  wrapper.cancel = () => {
+    canceled = true;
+    clearTimeout(timer);
+    timer = null;
+  };
+
+  wrapper.skipDelay = (...args) => {
+    skipNextDelay = true;
+    return wrapper(...args);
+  };
+
+  return wrapper;
+}
+
+function throttle(fn, delay) {
+  let inThrottle;
+
+  return (...args) => {
+    return new Promise((resolve) => {
+      if (!inThrottle) {
+        inThrottle = true;
+        setTimeout(() => {
+          inThrottle = false;
+          resolve(fn.apply(this, args));
+        }, delay);
+      }
+    });
+  };
+}

package/modules/@apostrophecms/widget-type/index.js

@@ -311,7 +311,8 @@ module.exports = {
       //
       // Returns a new, sanitized widget object.
 
-      async sanitize(req, input, options) {
+      async sanitize(req, input, options, { fetchRelationships = true } = {}) {
+        const convertOptions = { fetchRelationships };
         if (!input || typeof input !== 'object') {
           // Do not crash
           input = {};
@@ -325,7 +326,7 @@ module.exports = {
         output.aposPlaceholder = self.apos.launder.boolean(input.aposPlaceholder);
         if (!output.aposPlaceholder) {
           const schema = self.allowedSchema(req);
-          await self.apos.schema.convert(req, schema, input, output);
+          await self.apos.schema.convert(req, schema, input, output, convertOptions);
         }
         return output;
       },

package/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js

@@ -7,6 +7,10 @@ export default {
     type: String,
     areaFieldId: String,
     modelValue: Object,
+    mode: {
+      type: String,
+      default: 'draft'
+    },
     meta: {
       type: Object,
       default() {
@@ -59,7 +63,7 @@ export default {
           this.rendered = this.rendering.html;
         } else {
           this.rendered = '...';
-          this.rendered = await apos.http.post(`${apos.area.action}/render-widget?aposEdit=1&aposMode=draft`, {
+          this.rendered = await apos.http.post(`${apos.area.action}/render-widget?aposEdit=1&aposMode=${this.mode}`, {
             busy: true,
             body: parameters
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -69,7 +69,6 @@
     "cors": "^2.8.5",
     "css-loader": "^5.2.4",
     "dayjs": "^1.9.8",
-    "debounce-async": "0.0.2",
     "dompurify": "^2.3.1",
     "express": "^4.16.4",
     "express-bearer-token": "^2.4.0",
@@ -77,7 +76,7 @@
     "express-session": "^1.17.1",
     "form-data": "^4.0.0",
     "fs-extra": "^7.0.1",
-    "glob": "^10.4.1",
+    "glob": "^10.0.0",
     "he": "^1.2.0",
     "html-to-text": "^9.0.5",
     "i18next": "^20.3.2",
@@ -110,8 +109,8 @@
     "resolve": "^1.19.0",
     "resolve-from": "^5.0.0",
     "sanitize-html": "^2.12.1",
-    "sass": "^1.52.3",
-    "sass-loader": "^10.1.1",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.0",
     "server-destroy": "^1.0.1",
     "sluggo": "^1.0.0",
     "sortablejs": "^1.15.0",
@@ -120,7 +119,7 @@
     "tinycolor2": "^1.4.2",
     "tough-cookie": "^4.0.0",
     "underscore.string": "^3.3.4",
-    "uploadfs": "^1.22.4",
+    "uploadfs": "^1.22.6",
     "vue": "^3.3.8",
     "vue-advanced-cropper": "^2.8.8",
     "vue-loader": "^17.1.0",

package/test/big-upload.js

@@ -0,0 +1,111 @@
+const assert = require('assert');
+const path = require('path');
+const fs = require('fs');
+const qs = require('qs');
+
+const t = require('../test-lib/test.js');
+const bigUpload = require('../lib/big-upload-client.js');
+
+const buffer = fs.readFileSync(path.resolve(__dirname, 'data/upload_tests/crop_image.png'));
+
+describe('Big Upload', function() {
+
+  let apos;
+  let received = false;
+
+  after(async function () {
+    return t.destroy(apos);
+  });
+
+  this.timeout(t.timeout);
+
+  it('init apos', async function() {
+    apos = await t.create({
+      root: module,
+      modules: {
+        test: {
+          apiRoutes: (self) => ({
+            post: {
+              'big-upload-test': [
+                self.apos.http.bigUploadMiddleware(),
+                (req) => {
+                  try {
+                    received = true;
+                    assert(req.files);
+                    assert(req.files.file);
+                    assert.strictEqual(req.files.file.name, 'crop_image.png');
+                    const buffer2 = fs.readFileSync(req.files.file.path);
+                    assert(buffer.equals(buffer2));
+                    return {
+                      ok: true
+                    };
+                  } finally {
+                    fs.unlinkSync(req.files.file.path);
+                  }
+                }
+              ]
+            }
+          })
+        }
+      }
+    });
+
+    assert(apos.http);
+  });
+
+  it('should be able to make a big upload request', async function() {
+
+    // Must have the same shape as a browser-side File object and be sliceable,
+    // returning a Blob
+
+    const file = {
+      size: buffer.byteLength,
+      name: 'crop_image.png',
+      slice(from, to) {
+        return new Blob([ buffer.subarray(from, to) ]);
+      }
+    };
+
+    // Emulate the browser-side apos.http object just barely well enough to test
+    // big-upload-client server-side.
+    //
+    // self.apos.http won't work for this task because it is based on node-fetch 2
+    // which doesn't have a 100% browser-compatible API for blobs
+
+    const http = {
+      async post(url, options) {
+        if (options.qs) {
+          url += '?' + qs.stringify(options.qs);
+        }
+        const isFormData = options.body instanceof FormData;
+        const body = isFormData ? options.body : JSON.stringify(options.body);
+        const headers = {};
+        headers.cookie = `${apos.csrfCookieName}=csrf`;
+        if (!isFormData) {
+          headers['content-type'] = 'application/json';
+        }
+        const base = apos.http.getBase();
+        const result = await fetch(`${base}${url}`, {
+          method: 'POST',
+          headers,
+          body
+        });
+        if (result.status >= 400) {
+          throw new Error(result.status);
+        }
+        return result.json();
+      }
+    };
+
+    const result = await bigUpload('/api/v1/test/big-upload-test', {
+      files: {
+        file
+      },
+      http,
+      chunkSize: 1024
+    });
+
+    assert(received);
+    assert.strictEqual(result.ok, true);
+  });
+});

package/test/change-doc-ids.js

@@ -104,6 +104,61 @@ describe('change-doc-ids', function() {
     await sanityCheck(newPageId, newCategoryId);
   });
 
+  it('changeDocIds should skipReplace', async function() {
+
+    await sanityCheck();
+    const req = apos.task.getReq();
+    const pages = await apos.page.find(req, {}).toArray();
+    const categories = await apos.category.find(req, {}).toArray();
+    const category = categories.find(category => category._id.startsWith('new-test-category-id'));
+    const articles = await await apos.article.find(req, {}).toArray();
+    const test = pages.find(page => page.slug === '/test');
+    const existingPageId = `new-test-page-id:${test.aposLocale}`;
+    const oldPageId = `old-test-page-id:${test.aposLocale}`;
+    const existingCategoryId = `new-test-category-id:${category.aposLocale}`;
+    const oldCategoryId = `old-test-category-id:${category.aposLocale}`;
+
+    // Update articles to include the OLD category
+    for (const article of articles) {
+      if (article.categoriesIds.includes('new-test-category-id')) {
+        const newIds = article.categoriesIds
+          .filter(id => id !== 'new-test-category-id')
+          .concat('old-test-category-id');
+        await apos.doc.db.updateMany({
+          aposDocId: article.aposDocId
+        }, {
+          $set: {
+            categoriesIds: newIds
+          }
+        });
+      }
+    }
+    // Sanity check - existingCategoryId should not be present in articles
+    const articlesBefore = await apos.article.find(req, {}).toArray();
+    assert.strictEqual(
+      articlesBefore.every(article => !article.categoriesIds.includes('new-test-category-id')),
+      true,
+      'new-test-category-id should not be present in any articles'
+    );
+    assert.strictEqual(test._id, existingPageId);
+    assert.strictEqual(category._id, existingCategoryId);
+    const pairs = [
+      [ oldPageId, existingPageId ],
+      [ oldCategoryId, existingCategoryId ]
+    ];
+
+    await apos.doc.changeDocIds(pairs, { skipReplace: true });
+
+    const articlesAfter = await apos.article.find(req, {}).toArray();
+    assert.strictEqual(
+      articlesAfter.every(article => !article.categoriesIds.includes('old-test-category-id')),
+      true,
+      'old-test-category-id should not be present in any articles'
+    );
+
+    await sanityCheck(existingPageId, existingCategoryId);
+  });
+
   async function sanityCheck(newPageId, newCategoryId) {
     const pages = await apos.page.find(apos.task.getReq(), {}).children(true).toArray();
     const test = pages.find(page => page.slug === '/test');
@@ -125,7 +180,11 @@ describe('change-doc-ids', function() {
     assert(articles[0]._categories.find(category => category.slug === 'category-0'));
     assert(articles[0]._categories.find(category => category.slug === 'category-1'));
     if (newCategoryId) {
-      assert.strictEqual(articles[0]._categories[0]._id, newCategoryId);
+      assert.strictEqual(
+        articles[0]._categories.some(obj => obj._id === newCategoryId),
+        true,
+        'newCategoryId not found'
+      );
       const newCategory = articles[0]._categories.find(category => category._id === newCategoryId);
       assert(newCategory);
       assert.strictEqual(newCategory._id, newCategoryId);