apostrophe 4.27.1 → 4.28.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 4.28.0
+
+### Adds
+
+- Adds support for static URLs and static external frontend builds.
+- Adds widget graph store, accessible in Admin UI.
+- Support for the new `prettyUrls: true` option for @apostrophecms/file, which enables "pretty URLs" for PDFs and other items in the file library, in exchange for a small performance impact. Edit the slug field to adjust the pretty URL
+
+
+### Fixes
+
+- Fix a bug when rich text link open in new tab checkbox can't be cleared
+- Ensures the `getOne` API can correctly retrieve documents that are not localized. Thanks to [Eduardo Correal](https://github.com/ecb34).
+- Clicking a choice should dismiss the relationship suggestions dropdown. This regression was caused by part of the patch in release 4.27.1.
+- lint on main
+- Adds inner wrapper to area widget that creates a separate z-index context for the user, fixing widget/apostrophe UI conflicts
+- Fixes a bug where Layout's mode erroneously switches state
+- Fixes a bug where Layouts synthetic column styles were not reaching their children
+- Fixes styles being sanitized as html (breaks quotes) and resolves duplicate styles on the page.
+- Fix subtle bug in AposPermissionGrid that caused unrelated clicks to be "swallowed" due to a race condition at low network speeds
+- Fixes two conditions where slow internet speed could cause input to lose focus before a selection can be registered.
+
+### Changes
+
+- Improve re-rendering UX while keeping the performance optimization
+- raise the user's widget z-index context only when focused
+- Hide add content buttons on rich text editing, like widget controls
+-  Refine in-context focus states for calmer UX
+- Simplifies some in-context UI rendering checks
+- Updated dependencies
+
+### Security
+
+- This previously undisclosed security vulnerability allowed users who had compromised a password to perform actions in the CMS without 2FA. For sites not using 2FA (e.g. our @apostrophecms/login-totp module), this changes nothing. But for those using our TOTP module or similar, upgrading to this release is urgent. Thanks to 0xkakashi for reporting the issue and recommending a fix.
+
 ## 4.27.1 (2026-03-03)
 
 ### Fixes

package/index.js

@@ -479,6 +479,9 @@ async function apostrophe(options, telemetry, rootSpan) {
     // Environment variable override
     self.options.baseUrl = process.env.APOS_BASE_URL || self.options.baseUrl;
     self.baseUrl = self.options.baseUrl;
+    self.options.staticBaseUrl = process.env.APOS_STATIC_BASE_URL ||
+      self.options.staticBaseUrl;
+    self.staticBaseUrl = self.options.staticBaseUrl;
     self.prefix = self.options.prefix || '';
   }
 

package/lib/stream-proxy.js

@@ -0,0 +1,49 @@
+// Make a request for url and stream it to req.res,
+// passing through relevant headers, without downloading
+// the whole thing to disk. Site-relative URLs are
+// resolved via req.baseUrl. Server-side errors are logged to
+// error() which should accept multiple arguments
+
+module.exports = async function(req, url, { error }) {
+  const res = req.res;
+  if (url.startsWith('/')) {
+    // Can't make a self-request without an absolute URL
+    url = `${req.baseUrl}${url}`;
+  }
+  let response;
+  try {
+    response = await fetch(url);
+  } catch (e) {
+    return send502(e);
+  }
+  for (const header of [ 'content-type', 'etag', 'last-modified', 'content-disposition', 'cache-control' ]) {
+    const result = response.headers.get(header);
+    if (result != null) {
+      res.header(header, result);
+    }
+  }
+  res.status(response.status);
+  if (response.body == null) {
+    return res.end();
+  }
+  response.body.pipeTo(new WritableStream({
+    write(chunk) {
+      res.write(chunk);
+    },
+    close() {
+      res.end();
+    },
+    abort(reason) {
+      if (!res.headersSent) {
+        return send502(reason);
+      } else {
+        // Only way to signal failure after headers are sent
+        res.destroy();
+      }
+    }
+  }));
+  function send502(e) {
+    error(`Error fetching "ugly URL" ${url} to resolve pretty URL ${req.url}:`, e);
+    return res.status(502).send('upstream media error fetching data for pretty URL');
+  }
+};

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

@@ -166,22 +166,13 @@ export default {
     color: var(--a-text-primary);
   }
 
-  &__document-title {
-    margin-top: 1px;
-  }
-
   &__separator {
     align-items: center;
-    margin-top: 1px;
     padding: 0 7px;
   }
 
-  &__document {
-    margin-top: 3.5px;
-
-    :deep(.apos-context-menu__items) {
-      min-width: 150px;
-    }
+  &__document :deep(.apos-context-menu__items) {
+    min-width: 150px;
   }
 }
 

package/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -1,5 +1,6 @@
 
-import createApp from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp, { pinia } from 'Modules/@apostrophecms/ui/lib/vue';
+import { useWidgetGraphStore } from 'Modules/@apostrophecms/ui/stores/widgetGraph.js';
 import { nextTick } from 'vue';
 
 export default function() {
@@ -24,6 +25,12 @@ export default function() {
   });
 
   apos.bus.$on('refreshed', function() {
+    // Re-instantiate the on-page widget graph before remounting areas.
+    // The normal mounted hooks will rebuild it from fresh data.
+    const graphStore = useWidgetGraphStore(pinia);
+    if (apos.adminBar?.contextId) {
+      graphStore.resetGraph(apos.adminBar.contextId);
+    }
     createAreaAppsAndRunPlayersIfDone();
   });
 
@@ -117,10 +124,18 @@ export default function() {
 
       el.parentNode.replaceChild(apos.area.activeEditor.$el, el);
     } else {
-      observer = new IntersectionObserver(observed, {
-        rootMargin: '600px'
-      });
-      observer.observe(el);
+      const rect = el.getBoundingClientRect();
+      const isInViewport = rect.bottom >= 0 &&
+        rect.top <= window.innerHeight;
+
+      if (isInViewport) {
+        mountApp();
+      } else {
+        observer = new IntersectionObserver(observed, {
+          rootMargin: '600px'
+        });
+        observer.observe(el);
+      }
     }
 
     function observed(entries) {
@@ -129,8 +144,14 @@ export default function() {
         return;
       }
       if (created) {
+        observer.disconnect();
         return;
       }
+      mountApp();
+      observer.disconnect();
+    }
+
+    function mountApp() {
       const app = createApp(component, {
         options,
         id: data._id,
@@ -142,10 +163,21 @@ export default function() {
         parentOptions,
         renderings
       });
+
+      // Resolve graphKey: if this area is inside a modal that owns a
+      // graph (data-apos-graph-key), use that key.  Otherwise fall back
+      // to the on-page contextId.  This single DOM lookup bridges the
+      // provide/inject gap created by createApp.
+      const graphKey = el.closest('[data-apos-graph-key]')
+        ?.getAttribute('data-apos-graph-key') || apos.adminBar?.contextId || null;
+      // Provide the resolved graphKey so every descendant component
+      // can simply inject('aposGraphKey') and get the correct value.
+      if (graphKey) {
+        app.provide('aposGraphKey', graphKey);
+      }
       app.mount(el);
       mountedApps.set(el, app);
       created = true;
-      observer.disconnect();
     }
   }
 

package/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -3,7 +3,12 @@
     v-click-outside-element="resetFocusedArea"
     :data-apos-area="areaId"
     class="apos-area"
-    :class="themeClass"
+    :class="[
+      themeClass,
+      {
+        'apos-area--empty': next.length === 0
+      }
+    ]"
     @click="setFocusedArea(areaId, $event)"
   >
     <div
@@ -61,6 +66,12 @@
         :disabled="field && field.readOnly"
         :max-reached="maxReached"
         :rendering="rendering(widget)"
+        :raised="raisedWidgets.has(widget._id)"
+        :style="{
+          'z-index': raisedWidgets.has(widget._id)
+            ? next.length + 1
+            : null
+        }"
         @up="up"
         @down="down"
         @remove="remove"

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -23,14 +23,13 @@
       @keyup.enter="onKeyup"
     >
       <div
-        v-if="!breadcrumbDisabled"
         ref="label"
         class="apos-area-widget-controls apos-area-widget__label"
         :class="labelsClasses"
       >
         <ol
           class="apos-area-widget__breadcrumbs"
-          @click="isSuppressingWidgetControls = false"
+          @click="clearSuppressionFlags"
         >
           <li
             class="
@@ -92,7 +91,7 @@
         />
       </div>
       <div
-        v-if="!controlsDisabled"
+        v-if="!controlsDisabled && !maxReached && !isSuppressingAddContentButtons"
         class="
           apos-area-widget-controls
           apos-area-widget-controls--add--top
@@ -143,43 +142,52 @@
           @operation="onOperation"
         />
       </div>
-
-      <!-- Still used for contextual editing components -->
-      <component
-        :is="widgetEditorComponent(widget.type)"
-        v-if="isContextual && !foreign"
-        :key="generation"
-        :class="adminContentDirectionClass"
-        :options="widgetOptions"
-        :type="widget.type"
-        :model-value="widget"
-        :meta="meta"
-        :doc-id="docId"
-        :focused="isFocused"
-        @update="$emit('update', $event)"
-        @suppress-widget-controls="isSuppressingWidgetControls = true"
-      />
-      <component
-        :is="widgetComponent(widget.type)"
-        v-else
-        :id="widget._id"
-        :key="`${generation}-preview`"
-        :class="adminContentDirectionClass"
-        :options="widgetOptions"
-        :type="widget.type"
-        :area-field-id="fieldId"
-        :following-values="followingValuesWithParent"
-        :model-value="widget"
-        :value="widget"
-        :meta="meta"
-        :foreign="foreign"
-        :doc-id="docId"
-        :rendering="rendering"
-        @edit="$emit('edit', i);"
-        @update="$emit('update', $event);"
-      />
       <div
-        v-if="!controlsDisabled"
+        class="apos-area-widget-rendered-widget"
+        :style="{
+          'z-index': raised
+            ? 0
+            : null
+        }"
+      >
+        <!-- Still used for contextual editing components -->
+        <component
+          :is="widgetEditorComponent(widget.type)"
+          v-if="isContextual && !foreign"
+          :key="generation"
+          :class="adminContentDirectionClass"
+          :options="widgetOptions"
+          :type="widget.type"
+          :model-value="widget"
+          :meta="meta"
+          :doc-id="docId"
+          :focused="isFocused"
+          @update="$emit('update', $event)"
+          @suppress-widget-controls="doSuppressWidgetControls"
+          @suppress-add-content-buttons="doSuppressAddContentButtons"
+        />
+        <component
+          :is="widgetComponent(widget.type)"
+          v-else
+          :id="widget._id"
+          :key="`${generation}-preview`"
+          :class="adminContentDirectionClass"
+          :options="widgetOptions"
+          :type="widget.type"
+          :area-field-id="fieldId"
+          :following-values="followingValuesWithParent"
+          :model-value="widget"
+          :value="widget"
+          :meta="meta"
+          :foreign="foreign"
+          :doc-id="docId"
+          :rendering="rendering"
+          @edit="$emit('edit', i);"
+          @update="$emit('update', $event);"
+        />
+      </div>
+      <div
+        v-if="!controlsDisabled && !maxReached && !isSuppressingAddContentButtons"
         class="
           apos-area-widget-controls
           apos-area-widget-controls--add
@@ -209,13 +217,25 @@
 
 <script>
 import { mapState, mapActions } from 'pinia';
+import { unref } from 'vue';
 import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
 import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal.js';
+import { useWidgetGraphStore } from 'Modules/@apostrophecms/ui/stores/widgetGraph.js';
 
 export default {
   name: 'AposAreaWidget',
+  inject: {
+    aposGraphKey: {
+      from: 'aposGraphKey',
+      default: null
+    }
+  },
   props: {
+    raised: {
+      type: Boolean,
+      default: false
+    },
     docId: {
       type: String,
       required: false,
@@ -316,6 +336,7 @@ export default {
       mounted: false, // hack around needing DOM to be rendered for computed classes
       menuOpen: null,
       isSuppressingWidgetControls: false,
+      isSuppressingAddContentButtons: false,
       hasClickOutsideListener: false,
       classes: {
         show: 'apos-is-visible',
@@ -447,7 +468,7 @@ export default {
     },
     labelsClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused || this.isEmphasized,
+        [this.classes.show]: (this.isHovered && !this.focusedWidget) || this.isFocused,
         // Force LTR for breadcrumbs for now so that nested AreaWidgets
         // behave properly.
         'apos-ltr': true
@@ -455,7 +476,7 @@ export default {
     },
     addClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused,
+        [this.classes.show]: (this.isHovered && !this.focusedWidget) || this.isFocused,
         [`${this.classes.open}--menu-${this.menuOpen}`]: !!this.menuOpen
       };
     },
@@ -493,6 +514,7 @@ export default {
       } else {
         this.menuOpen = null;
         this.isSuppressingWidgetControls = false;
+        this.isSuppressingAddContentButtons = false;
         this.removeClickOutsideListener();
       }
       // Helps get scroll tracking unstuck on new/modified widgets
@@ -515,11 +537,14 @@ export default {
     // a 'focus my parent' plea
     apos.bus.$on('widget-focus-parent', this.focusParent);
     apos.bus.$on('context-menu-toggled', this.getFocusForMenu);
+    apos.bus.$on('suppress-focused-widget-controls', this.doSuppressWidgetControls);
 
     this.breadcrumbs.$lastEl = this.$el;
 
     this.getBreadcrumbs();
 
+    this.registerInGraph();
+
     if (this.focusedWidget) {
       // If another widget was in focus (because the user clicked the "add"
       // menu, for example), and this widget was created, give the new widget
@@ -549,12 +574,50 @@ export default {
   unmounted() {
     // Remove the focus parent listener when unmounted
     apos.bus.$off('widget-focus-parent', this.focusParent);
+    apos.bus.$off('suppress-focused-widget-controls', this.doSuppressWidgetControls);
     window.removeEventListener('scroll', this.stickyControlsScroll);
     window.removeEventListener('resize', this.stickyControlsResize);
+    this.unregisterFromGraph();
   },
   methods: {
+    clearSuppressionFlags() {
+      this.isSuppressingWidgetControls = false;
+      this.isSuppressingAddContentButtons = false;
+    },
     ...mapActions(useWidgetStore, [ 'setFocusedWidget', 'setHoveredWidget' ]),
     ...mapActions(useModalStore, [ 'getAdminContentDirectionClass' ]),
+    ...mapActions(useWidgetGraphStore, {
+      storeRegisterWidget: 'registerWidget',
+      storeUnregisterWidget: 'unregisterWidget'
+    }),
+    registerInGraph() {
+      if (this.foreign) {
+        return;
+      }
+      const graphKey = unref(this.aposGraphKey);
+      if (!graphKey) {
+        return;
+      }
+      this.storeRegisterWidget(graphKey, this.widget, {
+        areaId: this.areaId
+      });
+    },
+    unregisterFromGraph() {
+      if (this.foreign) {
+        return;
+      }
+      const graphKey = unref(this.aposGraphKey);
+      if (!graphKey) {
+        return;
+      }
+      this.storeUnregisterWidget(graphKey, this.widget._id);
+    },
+    doSuppressWidgetControls() {
+      this.isSuppressingWidgetControls = true;
+    },
+    doSuppressAddContentButtons() {
+      this.isSuppressingAddContentButtons = true;
+    },
     // Emits same actions as the native operations,
     // e.g ('edit', { index }), ('remove', { index }), etc.
     onOperation({ name, payload }) {
@@ -716,6 +779,9 @@ export default {
       }
     },
     unfocus(event) {
+      if (event.target.closest('[data-apos-ignore-unfocus="true"]')) {
+        return;
+      }
       if (!this.$el.contains(event.target)) {
         this.removeClickOutsideListener();
 
@@ -925,6 +991,10 @@ export default {
   }
 }
 
+.apos-area-widget-rendered-widget {
+  position: relative;
+}
+
 .apos-area-widget-controls {
   z-index: $z-index-widget-controls;
   position: absolute;

package/modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

@@ -209,6 +209,7 @@ export default {
             ...this.operationButtonDefault,
             icon: operation.icon
           },
+          ignoreUnfocus: true,
           teleportContent: this.teleportModals,
           disabled,
           tooltip

package/modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

@@ -97,17 +97,29 @@ export default {
       };
     },
     widgetPrimaryControls() {
+      const removeForSingleWidget = [ 'nudgeUp', 'nudgeDown' ];
       // Custom widget operations displayed in the primary controls
-      return this.widgetPrimaryOperations.map(operation => {
-        const disabled = this.disabled || isOperationDisabled(operation, this.$props);
-        const tooltip = getOperationTooltip(operation, { disabled });
-        return {
-          ...this.widgetDefaultControl,
-          ...operation,
-          disabled,
-          tooltip
-        };
-      });
+      return this.widgetPrimaryOperations
+        .map(operation => {
+          const disabled = this.disabled || isOperationDisabled(operation, this.$props);
+          const tooltip = getOperationTooltip(operation, { disabled });
+          return {
+            ...this.widgetDefaultControl,
+            ...operation,
+            disabled,
+            tooltip
+          };
+        })
+        .filter(operation => {
+          if (
+            removeForSingleWidget.includes(operation.action) &&
+            this.first &&
+            this.last
+          ) {
+            return false;
+          }
+          return true;
+        });
     },
     widgetSecondaryControls() {
       const renderOperation = (operation) => {

package/modules/@apostrophecms/area/ui/apos/logic/AposAreaEditor.js

@@ -1,14 +1,22 @@
 import { createId } from '@paralleldrive/cuid2';
+import { unref } from 'vue';
 import { mapState, mapActions } from 'pinia';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
 import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
+import { useWidgetGraphStore } from 'Modules/@apostrophecms/ui/stores/widgetGraph';
 import cloneWidget from 'Modules/@apostrophecms/area/lib/clone-widget.js';
 import { klona } from 'klona';
 
 export default {
   mixins: [ AposThemeMixin ],
+  inject: {
+    aposGraphKey: {
+      from: 'aposGraphKey',
+      default: null
+    }
+  },
   props: {
     docId: {
       type: String,
@@ -130,6 +138,35 @@ export default {
       }
 
       return this.next.findIndex(widget => widget._id === this.focusedWidget);
+    },
+    /**
+     * Set of widget _ids (from `next`) that should have a raised z-index
+     * because they are, or contain, the currently focused widget.
+     * Computed once per focusedWidget / graph change; O(depth) ancestor
+     * walk + O(1) per-widget lookup in the template.
+     */
+    raisedWidgets() {
+      const raised = new Set();
+      if (!this.focusedWidget) {
+        return raised;
+      }
+      const graphKey = unref(this.aposGraphKey);
+      if (!graphKey) {
+        // No graph — fall back to exact match only
+        if (this.next.some(w => w._id === this.focusedWidget)) {
+          raised.add(this.focusedWidget);
+        }
+        return raised;
+      }
+      const ancestors = this.storeGetAncestors(graphKey, this.focusedWidget);
+      const chain = new Set([ this.focusedWidget, ...ancestors ]);
+
+      for (const widget of this.next) {
+        if (chain.has(widget._id)) {
+          raised.add(widget._id);
+        }
+      }
+      return raised;
     }
   },
   watch: {
@@ -176,6 +213,9 @@ export default {
   methods: {
     ...mapActions(useWidgetStore, [ 'setFocusedArea', 'setFocusedWidget' ]),
     ...mapActions(useModalStore, [ 'isOnTop' ]),
+    ...mapActions(useWidgetGraphStore, {
+      storeGetAncestors: 'getAncestors'
+    }),
     bindEventListeners() {
       apos.bus.$on('area-updated', this.areaUpdatedHandler);
       apos.bus.$on('command-menu-area-copy-widget', this.handleCopy);

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

@@ -1187,9 +1187,10 @@ module.exports = {
         if (!self.shouldRefreshOnRestart()) {
           return '';
         }
+        const prefix = self.apos.prefix || '';
         return self.apos.template.safe(
-          `<script data-apos-refresh-on-restart="${self.action}/restart-id" ` +
-          `src="${self.action}/refresh-on-restart"></script>`
+          `<script data-apos-refresh-on-restart="${prefix}${self.action}/restart-id" ` +
+          `src="${prefix}${self.action}/refresh-on-restart"></script>`
         );
       },
       // Return the URL of the release asset with the given path, taking into