apostrophe 4.17.1 → 4.19.0

package/.eslintignore

@@ -3,3 +3,4 @@
 **/node_modules
 test/public
 test/apos-build
+coverage

package/.stylelintignore

@@ -0,0 +1,4 @@
+**/node_modules
+test/public
+test/apos-build
+coverage

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 4.19.0 (2025-07-09)
+
+### Adds
+
+* Implemented GET /api/v1/@apostrophecms/login/whoami route such that it returns the details of the currently logged in user; added the route to the login module.
+  Thanks to [sombitganguly](https://github.com/sombitganguly) for this contribution.
+* Adds keyboard shortcuts for manipulating widgets in areas. Includes Cut, Copy, Paste, Delete, and Duplicate.
+* Automatic translation now supports a disclaimer and an help text for the checkbox. You can now set the disclaimer by setting `automaticTranslationDisclaimer` `i18n` key and the help text by setting `automaticTranslationCheckboxHelp` `i18n` key.
+* Adds dynamic choices working with piece manager filters. 
+* Allow `import.imageTags` (array of image tag IDs) to be passed to the rich text widget when importing (see https://docs.apostrophecms.org/reference/api/rich-text.html#importing-inline-images).
+* Adds a new way to make `GET` requests with a large query string. It can become a `POST` request containing the key `__aposGetWithQuery` in its body.
+A middleware checks for this key and converts the request back to a `GET` request with the right `req.query` property.
+* Adds a new batch operation to tag images.
+
+### Changes
+
+### Fixes
+
+* Add missing Pages manager shortcuts list helper.
+* Improve the `isEmpty` method of the rich text widget to take into account the HTML blocks (`<figure>` and `<table>`) that are not empty but do not contain any plain text.
+* (Backward compatibility break) Conditional field that depends on already hidden field is also hidden, again.
+
+## 4.18.0 (2025-06-11)
+
+### Adds
+
+* Adds MongoDB-style support (comparison operators) for conditional fields and all systems that use conditions. Conditional fields now have access to the `following` values from the parent schema fields.
+* Add `followingIgnore` option to the `string` field schema. A boolean `true` results in all `following` values being ignored (not attempted to be used as a value for the field). When array of strings, the UI will ignore every item that matches a `following` field name.
+* Adds link configuration to the `@apostrophecms/image-widget` UI and a new option `linkWithType` to control what document types can be linked to. Opt-out of the widget inline styles (reset) by setting `inlineStyles: false` in the widget configuration or contextual options (area). 
+* Use the link configuration of the Rich Text widget for image links too. It respects the existing `linkWithType` Rich Text option and uses the same schema (`linkFields`) used for text links. The fields from that schema can opt-in for specific tiptap extension now via a field property `extensions` (array) with possible array values `Link` and/or `Image`. You still need to specify the `htmlAttribute` property (the name of the attribute to be added to the link tag) in the schema when adding more fields. If the `extensions` property is not set, the field will be applied for both tiptap extensions.
+* Adds body style support for breakpoint preview mode. Created new `[data-apos-refreshable-body]` div inside the container during breapoint preview.
+Switch body attributes to this new div to keep supporting body styles in breakpoint preview mode.
+
+### Changes
+
+* Set the `Cache-Control` header to `no-store` for error pages in order to prevent the risk of serving stale error pages to users.
+* Updates rich-text default configuration.
+
+### Fixes
+
+* The Download links in the media library now immediately download the file as expected, rather than navigating to the image in the current tab. `AposButton` now supports the `:download="true"` prop as expected.
+* Using an API key with the editor, contributor or guest role now have a `req` object with the corresponding rights. The old behavior gave non-admin API keys less access than expected.
+
 ## 4.17.1 (2025-05-16)
 
 ### Fixes

package/lib/universal/check-if-conditions.mjs

@@ -0,0 +1,209 @@
+
+// NOTE: This is a universal library for evaluating MongoDB-style conditions
+// against a document or sub-document. Do not use any browser or node specific
+// APIs here.
+//
+//
+// Evaluate a field conditions against current schema values (doc or sub-doc).
+// Expects a `conditions` object containing MongoDB-style conditions.
+// Operators `$or` and `$and` are supported as top-level keys to allow
+// for complex logical conditions. All comparison MongoDB operators are supported
+// as object values.
+// The condition object properties are field paths (dot notation is supported
+// for objects), and the values are the conditions to evaluate against the
+// document values.
+// The `voterFn` function can be provided for evaluating
+// conditions - return `false` to stop further evaluation.
+// The function is called with three arguments:
+// `voterFn(propName, condition, docValue)` where `propName` is the condition field path,
+// `condition` is the condition value, and `docValue` is the field value extracted
+// from the document.
+// Example usage:
+// ```js
+// doc = {
+//   assignee: 'john',
+//   status: 'active',
+//   stats: { count: 15 },
+//   category: 'news'
+// };
+// const conditions = {
+//   assignee: { '$exists': true },
+//   status: { '$in': ['active', 'pending'] },
+//   'stats.count': { '$gte': 10 },
+//   $or: [
+//     { 'category': 'news' },
+//     { 'category': 'blog' }
+//   ]
+// };
+// function voterFn(propName, condition, docValue) {
+//   if (propName === 'status' && docValue === 'inactive') {
+//     return false; // Reject the condition for 'status' if it's 'inactive'
+//   }
+//   // Non-boolean return values are ignored
+// }
+// const result = checkIfConditions(doc, conditions, voterFn);
+// ```
+export default function checkIfConditions(doc, conditions, voterFn = () => null) {
+  return Object.entries(conditions).every(([ key, condition ]) => {
+    if (key === '$or') {
+      return checkOrConditions(doc, condition, voterFn);
+    }
+
+    if (key === '$and') {
+      return checkAndConditions(doc, condition, voterFn);
+    }
+
+    const docValue = getNestedPropValue(doc, key);
+
+    // If the custom voter rejects the condition, we stop evaluating
+    // and return false immediately.
+    if (voterFn(key, condition, docValue) === false) {
+      return false;
+    }
+
+    // External conditions should be handled outside of this function,
+    // so we skip them here. Use the `voterFn` to gather external condition
+    // entries and evaluate them separately.
+    if (isExternalCondition(key)) {
+      return true;
+    }
+
+    // Otherwise, we evaluate the condition against the document value.
+    return evaluate(docValue, condition);
+  });
+}
+
+export function isExternalCondition(conditionKey) {
+  return conditionKey.endsWith(')');
+}
+
+function checkOrConditions(doc, conditions, voterFn) {
+  return conditions.some((condition) => {
+    return checkIfConditions(doc, condition, voterFn);
+  });
+}
+
+function checkAndConditions(doc, conditions, voterFn) {
+  return conditions.every((condition) => {
+    return checkIfConditions(doc, condition, voterFn);
+  });
+}
+
+function getNestedPropValue(doc, key) {
+  if (!key.includes('.')) {
+    return doc?.[key];
+  }
+
+  const keys = key.split('.');
+  let currentValue = doc;
+  while (keys.length > 0) {
+    if (
+      // The `==` comparison is intentionally used here to match
+      // both `null` and `undefined`
+      currentValue == null ||
+      // Support i.e. `stringField.length`
+      // eslint-disable-next-line valid-typeof
+      typeof currentValue?.[keys[0]] == null
+    ) {
+      return undefined;
+    }
+    if (Array.isArray(currentValue)) {
+      // Support i.e. `arrayField.length` or `arrayField.0`
+      if (!Object.hasOwn(currentValue, keys[0])) {
+        return currentValue.flatMap(item => {
+          return getNestedPropValue(item, keys.join('.'));
+        });
+      }
+    }
+    const prop = keys.shift();
+    currentValue = currentValue[prop];
+  }
+
+  return currentValue;
+}
+
+// Comparison operators registry for MongoDB-style conditions.
+// https://www.mongodb.com/docs/manual/reference/operator/query-comparison/
+const opRegistry = {};
+opRegistry.$eq = (docValue, conditionValue) => {
+  if (Array.isArray(docValue)) {
+    if (Array.isArray(conditionValue)) {
+      // Unlike MongoDB, we don't match the index order of the arrays.
+      return docValue.length === conditionValue.length &&
+        conditionValue.every(value => docValue.includes(value));
+    }
+    return docValue.includes(conditionValue);
+  }
+  return docValue === conditionValue;
+};
+opRegistry.$ne = (docValue, conditionValue) => (
+  opRegistry.$eq(docValue, conditionValue) === false
+);
+opRegistry.$exists = (docValue, conditionValue) => {
+  // Per MongoDB documentation, $exists should treat null and undefined the same.
+  // == null and != null are documented to match or reject null, undefined
+  // and nothing else.
+  return (conditionValue ? docValue != null : docValue == null);
+};
+opRegistry.$in = (docValue, conditionValue) => {
+  if (!Array.isArray(conditionValue)) {
+    throw new Error('$in and $nin operators require an array as condition value');
+  }
+  if (Array.isArray(docValue)) {
+    return conditionValue.some(value => docValue.includes(value));
+  }
+  return conditionValue.includes(docValue);
+};
+opRegistry.$nin = (docValue, conditionValue) => (
+  opRegistry.$in(docValue, conditionValue) === false
+);
+opRegistry.$gt = (docValue, conditionValue) => (
+  docValue > conditionValue
+);
+opRegistry.$lt = (docValue, conditionValue) => (
+  docValue < conditionValue
+);
+opRegistry.$gte = (docValue, conditionValue) => (
+  docValue >= conditionValue
+);
+opRegistry.$lte = (docValue, conditionValue) => (
+  docValue <= conditionValue
+);
+
+export function evaluate(docValue, conditionValue) {
+  if (
+    typeof conditionValue === 'object' &&
+      conditionValue !== null
+  ) {
+    // Empty objects are not valid conditions
+    if (Object.keys(conditionValue).length === 0) {
+      return false;
+    }
+    // Evaluate every operator in the conditionValue object.
+    // A MongoDB-style condition object is expected.
+    // We check for the presence of known comparison operators and
+    // evaluate them accordingly.
+    return Object.entries(conditionValue).every(([ operator, operand ]) => {
+      switch (operator) {
+        // BC, support the min and max properties because they were already supported
+        // in a different routine.
+        case 'min':
+          return docValue >= operand;
+        case 'max':
+          return docValue <= operand;
+        default: {
+          if (opRegistry[operator]) {
+            return opRegistry[operator](docValue, operand);
+          }
+          throw new Error(`Unsupported operator: ${operator}`);
+        }
+      }
+    });
+  }
+
+  if (Array.isArray(docValue)) {
+    return docValue.includes(conditionValue);
+  }
+
+  return conditionValue === docValue;
+}

package/modules/@apostrophecms/admin-bar/index.js

@@ -116,7 +116,7 @@ module.exports = {
           action: {
             type: 'command-menu-admin-bar-toggle-publish-draft'
           },
-          shortcut: 'Ctrl+Shift+D Meta+Shift+D'
+          shortcut: 'Ctrl+Shift+M Meta+Shift+M'
         },
         ...breakpointPreviewModeCommands
       },

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -551,7 +551,9 @@ export default {
       }
     },
     async refresh(options = {}) {
-      const refreshable = document.querySelector('[data-apos-refreshable]');
+      // In breakpoint preview mode, uses the fake body.
+      const refreshable = document.querySelector('[data-apos-refreshable-body]') ||
+        document.querySelector('[data-apos-refreshable]');
       if (options.scrollcheck) {
         window.apos.adminBar.scrollPosition = {
           x: window.scrollX,
@@ -613,7 +615,8 @@ export default {
         // "@ notation" PATCH feature. Sort the areas by DOM depth
         // to ensure parents patch before children
         this.original = {};
-        const els = Array.from(document.querySelectorAll('[data-apos-area-newly-editable]')).filter(el => el.getAttribute('data-doc-id') === this.context._id);
+        const els = Array.from(document.querySelectorAll('[data-apos-area-newly-editable]'))
+          .filter(el => el.getAttribute('data-doc-id') === this.context._id);
         els.sort((a, b) => {
           const da = depth(a);
           const db = depth(b);

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBreakpointPreviewMode.vue

@@ -56,7 +56,6 @@
   </div>
 </template>
 <script>
-
 export default {
   name: 'TheAposContextBreakpointPreviewMode',
   props: {
@@ -88,7 +87,10 @@ export default {
       originalBodyBackground: null,
       shortcuts: this.getShortcuts(),
       breakpoints: this.getBreakpointItems(),
-      showDropdown: false
+      showDropdown: false,
+      bodyEl: null,
+      refreshableBodyEl: null,
+      observer: new MutationObserver(this.observerCallback)
     };
   },
   computed: {
@@ -130,6 +132,7 @@ export default {
     }
   },
   mounted() {
+    this.bodyEl = document.querySelector('body');
     this.setShowDropdown();
     apos.bus.$on(
       'command-menu-admin-bar-toggle-breakpoint-preview-mode',
@@ -151,18 +154,56 @@ export default {
     );
   },
   methods: {
+    observerCallback(mutationList, observer) {
+      for (const mutation of mutationList) {
+        if (
+          mutation.type !== 'attributes' ||
+          mutation.attributeName.startsWith('data-apos') ||
+          mutation.attributeName === 'data-breakpoint-preview-mode'
+        ) {
+          continue;
+        }
+        const bodyAttribute = mutation.target
+          .getAttribute(mutation.attributeName);
+        this.refreshableBodyEl.setAttribute(mutation.attributeName, bodyAttribute);
+      }
+    },
+
+    createFakeBody(refreshableEl) {
+      this.refreshableBodyEl = document.createElement('div');
+      this.refreshableBodyEl.setAttribute('data-apos-refreshable-body', '');
+      Array.from(refreshableEl.childNodes).forEach(child => {
+        this.refreshableBodyEl.append(child);
+      });
+
+      Array.from(this.bodyEl.attributes || {})
+        .filter(({ name }) => !name.startsWith('data-apos'))
+        .forEach(({ name, value }) => {
+          this.refreshableBodyEl.setAttribute(name, value);
+        });
+
+      refreshableEl.append(this.refreshableBodyEl);
+    },
+
     switchBreakpointPreviewMode({
       mode,
       label,
       width,
       height
     }) {
-      document.querySelector('body').setAttribute('data-breakpoint-preview-mode', mode);
-      document.querySelector('[data-apos-refreshable]').setAttribute('data-resizable', this.resizable);
-      document.querySelector('[data-apos-refreshable]').setAttribute('data-label', this.$t(label));
-      document.querySelector('[data-apos-refreshable]').style.width = width;
-      document.querySelector('[data-apos-refreshable]').style.height = height;
-      document.querySelector('[data-apos-refreshable]').style.background = this.originalBodyBackground;
+      const refreshableEl = document.querySelector('[data-apos-refreshable]');
+
+      // Only when switching to mobile preview from the normal state
+      if (!this.mode) {
+        this.createFakeBody(refreshableEl);
+        this.observer.observe(this.bodyEl, { attributes: true });
+      }
+
+      this.bodyEl.setAttribute('data-breakpoint-preview-mode', mode);
+      refreshableEl.setAttribute('data-resizable', this.resizable);
+      refreshableEl.setAttribute('data-label', this.$t(label));
+      refreshableEl.style.width = width;
+      refreshableEl.style.height = height;
 
       this.mode = mode;
       this.$emit('switch-breakpoint-preview-mode', {
@@ -178,33 +219,39 @@ export default {
         height
       });
     },
-    toggleBreakpointPreviewMode({
-      mode,
-      label,
-      width,
-      height
-    }) {
-      if (this.mode === mode || mode === null) {
-        document.querySelector('body').removeAttribute('data-breakpoint-preview-mode');
-        document.querySelector('[data-apos-refreshable]').removeAttribute('data-resizable');
-        document.querySelector('[data-apos-refreshable]').removeAttribute('data-label');
-        document.querySelector('[data-apos-refreshable]').style.removeProperty('width');
-        document.querySelector('[data-apos-refreshable]').style.removeProperty('height');
-        document.querySelector('[data-apos-refreshable]').style.removeProperty('background');
-
-        this.mode = null;
-        this.$emit('reset-breakpoint-preview-mode');
-        this.saveState({ mode: this.mode });
+    toggleBreakpointPreviewMode(state) {
+      if (this.mode === state.mode || state.mode === null) {
+        this.resetBreakpointPreview();
+        return;
+      }
+
+      this.switchBreakpointPreviewMode(state);
+    },
+    resetBreakpointPreview() {
+      const refreshableEl = document.querySelector('[data-apos-refreshable]');
 
+      this.observer.disconnect();
+      if (!this.refreshableBodyEl) {
         return;
       }
 
-      this.switchBreakpointPreviewMode({
-        mode,
-        label,
-        width,
-        height
+      Array.from(this.refreshableBodyEl.childNodes).forEach(child => {
+        if (child.nodeType !== Node.TEXT_NODE || child.nodeValue.trim()) {
+          refreshableEl.append(child);
+        }
       });
+      this.refreshableBodyEl.remove();
+      this.refreshableBodyEl = null;
+
+      this.bodyEl.removeAttribute('data-breakpoint-preview-mode');
+      refreshableEl.removeAttribute('data-resizable');
+      refreshableEl.removeAttribute('data-label');
+      refreshableEl.style.removeProperty('width');
+      refreshableEl.style.removeProperty('height');
+
+      this.mode = null;
+      this.$emit('reset-breakpoint-preview-mode');
+      this.saveState({ mode: this.mode });
     },
     loadState() {
       return JSON.parse(sessionStorage.getItem('aposBreakpointPreviewMode') || '{}');

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

@@ -9,6 +9,66 @@ const { stripIndent } = require('common-tags');
 
 module.exports = {
   options: { alias: 'area' },
+  commands(self) {
+    return {
+      add: {
+        [`${self.__meta.name}:cut-widget`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuWidgetCut',
+          action: {
+            type: 'command-menu-area-cut-widget'
+          },
+          shortcut: 'Ctrl+X Meta+X'
+        },
+        [`${self.__meta.name}:copy-widget`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuWidgetCopy',
+          action: {
+            type: 'command-menu-area-copy-widget'
+          },
+          shortcut: 'Ctrl+C Meta+C'
+        },
+        [`${self.__meta.name}:paste-widget`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuWidgetPaste',
+          action: {
+            type: 'command-menu-area-paste-widget'
+          },
+          shortcut: 'Ctrl+V Meta+V'
+        },
+        [`${self.__meta.name}:duplicate-widget`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuWidgetDuplicate',
+          action: {
+            type: 'command-menu-area-duplicate-widget'
+          },
+          shortcut: 'Ctrl+Shift+D Meta+Shift+D'
+        },
+        [`${self.__meta.name}:remove-widget`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuWidgetRemove',
+          action: {
+            type: 'command-menu-area-remove-widget'
+          },
+          shortcut: 'Backspace'
+        }
+      },
+      modal: {
+        default: {
+          '@apostrophecms/command-menu:content': {
+            label: 'apostrophe:commandMenuContent',
+            commands: [
+              `${self.__meta.name}:cut-widget`,
+              `${self.__meta.name}:copy-widget`,
+              `${self.__meta.name}:paste-widget`,
+              `${self.__meta.name}:duplicate-widget`,
+              `${self.__meta.name}:remove-widget`
+            ]
+          }
+        }
+      }
+    };
+  },
   init(self) {
     // These properties have special meaning in Apostrophe docs and are not
     // acceptable for use as top-level area names
@@ -544,7 +604,7 @@ module.exports = {
           return {};
         }
         const schema = manager.schema;
-        const field = _.find(schema, 'name', name);
+        const field = schema?.find(field => field.name === name);
         if (!(field && field.options)) {
           return {};
         }