apostrophe 3.63.1 → 4.0.0

package/.eslintrc

@@ -34,8 +34,7 @@
     "vue/max-attributes-per-line": [
       "warn",
       {
-        "singleline": 2,
-        "multiline": 2
+        "singleline": 2
       }
     ],
     "vue/singleline-html-element-content-newline": [
@@ -51,10 +50,20 @@
           "textarea"
         ]
       }
-    ],
-    "vue/attributes-order": 0
+    ]
   },
   "overrides": [
+    {
+      "files": "*.vue",
+      "globals": {
+        "defineProps": "readable",
+        "defineEmits": "readable",
+        "defineExpose": "readable",
+        "defineOptions": "readable",
+        "defineModel": "readable",
+        "defineSlots": "readable"
+      }
+    },
     {
       "files": [
         "**/ui/**/*.js"

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 4.0.0 (2024-03-12)
+
+### Adds
+
+* Add translation keys used by the multisite assembly module.
+* Add side by side comparison support in AposSchema component.
+* Add the possibility to make widget modals wider, which can be useful for widgets that contain areas taking significant space. See [documentation](https://v3.docs.apostrophecms.org/reference/modules/widget-type.html#options).
+
+### Changes
+
+* Migrate to Vue 3. This entails changes to some admin UI code, as detailed in our public announcement.
+There are no other backwards incompatible changes in apostrophe version 4.0.0.
+Certain other modules containing custom admin UI have also been updated in a new major version to be compatible,
+as noted in our announcement and on the migration page of our website.
+
+### Fixes
+
+* Adds `textStyle` to Tiptap types so that spans are rendered on RT initialization
+* `field.help` and `field.htmlHelp` are now correctly translated when displayed in a tooltip.
+* Notification REST APIs should not directly return the result of MongoDB operations.
+
+## 3.63.2 (2024-03-01)
+
+### Security
+
+* Always validate that method names passed to the `external-condition` API actually appear in `if` or `requiredIf`
+clauses for the field in question. This fix addresses a serious security risk in which arbitrary methods of
+Apostrophe modules could be called over the network, without arguments, and the results returned to the caller.
+While the lack of arguments mitigates the data exfiltration risk, it is possible to cause data loss by
+invoking the right method. Therefore this is an urgent upgrade for all Apostrophe 3.x users. Our thanks to the Michelin
+penetration test red team for disclosing this vulnerability. All are welcome to disclose security vulnerabilities
+in ApostropheCMS code via [security@apostrophecms.com](mailto:security@apostrophecms.com).
+* Disable the `alwaysIframe` query parameter of the oembed proxy. This feature was never used in Apostrophe core, and could be misused to carry out arbitrary GET requests in the context of an iframe, although it could not be used to exfiltrate any information other than the success or failure of the request, and the request was still performed by the user's browser only. Thanks to the Michelin team.
+* Remove vestigial A2 code relating to polymorphic relationship fields. The code in question had no relevance to the way such a feature would be implemented in A3, and could be used to cause a denial of service by crashing and restarting the process. Thanks to the Michelin team.
+
 ## 3.63.1 (2024-02-22)
 
 ### Security

package/defaults.js

@@ -4,6 +4,7 @@ module.exports = {
     '@apostrophecms/error': {},
     '@apostrophecms/util': {},
     '@apostrophecms/i18n': {},
+    '@apostrophecms/multisite-i18n': {},
     '@apostrophecms/task': {},
     '@apostrophecms/schema': {},
     '@apostrophecms/uploadfs': {},

package/modules/@apostrophecms/admin-bar/ui/apos/apps/AposAdminBar.js

@@ -1,22 +1,12 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
+  const component = apos.vueComponents.TheAposAdminBar;
   // Careful, login page is in user scene but has no admin bar
-  if (apos.adminBar) {
-    return new Vue({
-      el: '#apos-admin-bar',
-      computed: {
-        apos () {
-          return window.apos;
-        }
-      },
-      render: function (h) {
-        return h('TheAposAdminBar', {
-          props: {
-            items: apos.adminBar.items
-          }
-        });
-      }
-    });
+  const el = document.querySelector('#apos-admin-bar');
+  if (!apos.adminBar || !el) {
+    return;
   }
+  const app = createApp(component, { items: apos.adminBar.items || [] });
+  app.mount(el);
 };

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

@@ -4,8 +4,8 @@
     class="apos-admin-bar-wrapper"
     :class="themeClass"
   >
-    <div class="apos-admin-bar-spacer" ref="spacer" />
-    <nav class="apos-admin-bar" ref="adminBar">
+    <div ref="spacer" class="apos-admin-bar-spacer" />
+    <nav ref="adminBar" class="apos-admin-bar">
       <div class="apos-admin-bar__row">
         <AposLogoPadless class="apos-admin-bar__logo" />
         <TheAposAdminBarMenu :items="menuItems" />
@@ -18,10 +18,10 @@
       </div>
       <TheAposContextBar @visibility-changed="setSpacer" />
       <component
-        v-for="bar in bars"
         v-bind="bar.props || {}"
-        :key="bar.id"
         :is="bar.componentName"
+        v-for="bar in bars"
+        :key="bar.id"
       />
     </nav>
   </div>
@@ -36,9 +36,7 @@ export default {
   props: {
     items: {
       type: Array,
-      default: function () {
-        return [];
-      }
+      required: true
     }
   },
   computed: {
@@ -55,7 +53,7 @@ export default {
       return this.moduleOptions.bars;
     }
   },
-  async mounted() {
+  mounted() {
     this.setSpacer();
   },
   methods: {
@@ -86,7 +84,7 @@ export default {
   background: var(--a-background-primary);
 }
 
-::v-deep .apos-admin-bar__row {
+:deep(.apos-admin-bar__row) {
   display: flex;
   align-items: center;
   height: 35px;
@@ -100,7 +98,7 @@ export default {
   margin-right: 10px;
 }
 
-::v-deep .apos-admin-bar__control-set {
+:deep(.apos-admin-bar__control-set) {
   @include type-base;
   display: flex;
   width: 100%;
@@ -111,27 +109,27 @@ export default {
   margin-left: auto;
 }
 
-::v-deep .apos-context-menu__pane {
+:deep(.apos-context-menu__pane) {
   min-width: 150px;
 }
-::v-deep .flip-enter { // to the ground
+:deep(.flip-enter) { // to the ground
   transform: translateY(-20%);
   opacity: 0;
 }
-::v-deep .flip-leave { // in the frame
+:deep(.flip-leave) { // in the frame
   transform: translateY(0);
   opacity: 1;
 }
-::v-deep .flip-enter-to { // from the ground
+:deep(.flip-enter-to) { // from the ground
   transform: translateY(0);
   opacity: 1;
 }
-::v-deep .flip-leave-to { // to the sky
+:deep(.flip-leave-to) { // to the sky
   transform: translateY(20%);
   opacity: 0;
 }
 
-::v-deep .flip-enter-active, ::v-deep .flip-leave-active {
+:deep(.flip-enter-active), :deep(.flip-leave-active) {
   transition: all 150ms;
   &.apos-admin-bar__control-set__group {
     position: absolute;

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

@@ -212,7 +212,7 @@ export default {
     right: 0;
   }
 
-  &::v-deep .apos-button__label {
+  &:deep(.apos-button__label) {
     @include type-small;
     color: var(--a-primary);
     font-weight: var(--a-weight-bold);

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

@@ -1,20 +1,24 @@
 <template>
   <ul class="apos-admin-bar__items">
-    <li class="apos-admin-bar__item" v-if="pageTree">
+    <li v-if="pageTree" class="apos-admin-bar__item">
       <AposButton
-        type="subtle" label="apostrophe:pages"
+        type="subtle"
+        label="apostrophe:pages"
         class="apos-admin-bar__btn"
         :modifiers="['no-motion']"
         @click="emitEvent('@apostrophecms/page:manager')"
       />
     </li>
     <li
-      v-for="item in menuItems" :key="item.name"
+      v-for="item in menuItems"
+      :key="item.name"
       class="apos-admin-bar__item"
     >
       <AposContextMenu
-        v-if="item.items" class="apos-admin-bar__sub"
-        :menu="item.items" :button="{
+        v-if="item.items"
+        class="apos-admin-bar__sub"
+        :menu="item.items"
+        :button="{
           label: item.label,
           modifiers: ['no-motion'],
           class: 'apos-admin-bar__btn',
@@ -23,16 +27,16 @@
         @item-clicked="emitEvent"
       />
       <Component
-        v-else
         :is="item.options && item.options.component || 'AposButton'"
+        v-else
         type="subtle"
-        @click="emitEvent(item.action)"
         :label="item.label"
         :modifiers="['no-motion']"
         class="apos-admin-bar__btn"
+        @click="emitEvent(item.action)"
       />
     </li>
-    <li class="apos-admin-bar__item" v-if="createMenu.length > 0">
+    <li v-if="createMenu.length > 0" class="apos-admin-bar__item">
       <AposContextMenu
         class="apos-admin-bar__create"
         :menu="createMenu"
@@ -52,16 +56,19 @@
     >
       <template v-for="item in trayItems">
         <Component
-          v-if="item.options.component"
           :is="item.options.component"
+          v-if="item.options.component"
           :key="`${item.name}.component`"
         />
         <AposButton
           v-else
           :key="`${item.name}.fallback`"
-          type="subtle" :modifiers="['small', 'no-motion']"
-          :tooltip="trayItemTooltip(item)" class="apos-admin-bar__context-button"
-          :icon="item.options.icon" :icon-only="true"
+          type="subtle"
+          :modifiers="['small', 'no-motion']"
+          :tooltip="trayItemTooltip(item)"
+          class="apos-admin-bar__context-button"
+          :icon="item.options.icon"
+          :icon-only="true"
           :label="item.label"
           :state="trayItemState[item.name] ? [ 'active' ] : []"
           @click="emitEvent(item.action)"
@@ -177,15 +184,15 @@ export default {
   align-items: center;
 }
 
-.apos-admin-bar__sub ::v-deep .apos-context-menu__btn {
+.apos-admin-bar__sub :deep(.apos-context-menu__btn) {
   border-radius: 0;
 }
 
-.apos-admin-bar__sub ::v-deep .apos-context-menu__popup {
+.apos-admin-bar__sub :deep(.apos-context-menu__popup) {
   top: calc(100% + 5px);
 }
 
-::v-deep .apos-admin-bar__create {
+:deep(.apos-admin-bar__create) {
   margin-left: 10px;
 
   .apos-context-menu__btn {

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

@@ -54,12 +54,12 @@ export default {
   display: inline-flex;
   align-items: center;
 
-  ::v-deep .apos-button {
+  :deep(.apos-button) {
     @include type-base;
     color: var(--a-text-primary);
   }
 
-  ::v-deep .apos-context-menu__popup {
+  :deep(.apos-context-menu__popup) {
     right: 0;
     transform: translatex(10px);
   }

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

@@ -5,12 +5,12 @@
         :v-if="editMode"
         :can-undo="canUndo"
         :can-redo="canRedo"
-        @undo="undo"
-        @redo="redo"
         :retrying="retrying"
         :editing="editing"
         :saving="saving"
         :saved="saved"
+        @undo="undo"
+        @redo="redo"
       />
       <TheAposContextTitle
         v-if="!hasCustomUi"
@@ -531,12 +531,17 @@ export default {
       }
 
       const { action } = window.apos.modules[this.context.type];
-      const doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
-        qs: {
-          aposMode: this.draftMode,
-          project: { _url: 1 }
-        }
-      });
+      let doc;
+      try {
+        doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
+          qs: {
+            aposMode: this.draftMode,
+            project: { _url: 1 }
+          }
+        });
+      } catch (err) {
+        return;
+      }
 
       if (this.urlDiffers(doc._url)) {
         // Slug changed, change browser URL to reflect the actual url of the doc

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

@@ -11,12 +11,14 @@
       further illustrate this concept.
     -->
     <div
-      v-if="!editMode" :key="'switchToEditMode'"
+      v-if="!editMode"
+      :key="'switchToEditMode'"
       class="apos-admin-bar__control-set__group"
     >
       <AposButton
         class="apos-admin-bar__context-button"
-        label="apostrophe:edit" type="subtle"
+        label="apostrophe:edit"
+        type="subtle"
         :modifiers="['small', 'no-motion']"
         :tooltip="{
           content: 'apostrophe:toggleEditMode',
@@ -38,20 +40,23 @@
       <AposButton
         v-if="canSwitchToPreviewMode && !isAutopublished"
         class="apos-admin-bar__context-button"
-        label="apostrophe:preview" :tooltip="{
+        label="apostrophe:preview"
+        :tooltip="{
           content: 'apostrophe:previewTooltip',
           placement: 'bottom'
         }"
-        type="subtle" :modifiers="['small', 'no-motion']"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
         @click="switchEditMode(false)"
       />
       <AposButton
         v-if="editMode && !isAutopublished"
-        type="primary" :label="publishLabel"
+        type="primary"
+        :label="publishLabel"
         :disabled="!readyToPublish"
         class="apos-admin-bar__btn apos-admin-bar__context-button"
-        @click="onPublish"
         :modifiers="['no-motion']"
+        @click="onPublish"
       />
     </div>
   </transition-group>
@@ -66,7 +71,10 @@ export default {
         return null;
       }
     },
-    hasCustomUi: Boolean,
+    hasCustomUi: {
+      type: Boolean,
+      required: true
+    },
     context: {
       type: Object,
       required: true
@@ -135,7 +143,7 @@ export default {
       return !this.editMode;
     },
     canSwitchToPreviewMode() {
-      return this.editMode && !this.hasCustomUI;
+      return this.editMode && !this.hasCustomUi;
     }
   },
   mounted() {
@@ -143,7 +151,7 @@ export default {
     apos.bus.$on('command-menu-admin-bar-toggle-edit-preview', this.toggleEditPreviewMode);
     apos.bus.$on('command-menu-admin-bar-publish-draft', this.onPublish);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-toggle-edit-preview', this.toggleEditPreviewMode);
     apos.bus.$off('command-menu-admin-bar-publish-draft', this.onPublish);
   },
@@ -179,7 +187,7 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--mode-and-settings {
   justify-content: flex-end;
-  & ::v-deep .apos-button {
+  &:deep(.apos-button) {
     margin-left: 4px;
   }
 }

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

@@ -6,8 +6,8 @@
   >
     <span
       v-show="true"
-      class="apos-admin-bar__title"
       :key="'title'"
+      class="apos-admin-bar__title"
     >
       <AposIndicator
         icon="information-outline-icon"
@@ -31,9 +31,9 @@
           :button="draftButton"
           :menu="draftMenu"
           :disabled="hasCustomUi || isUnpublished"
-          @item-clicked="switchDraftMode"
           menu-offset="13, 10"
           menu-placement="bottom-end"
+          @item-clicked="switchDraftMode"
         />
         <AposLabel
           v-else
@@ -43,9 +43,9 @@
         />
       </div>
       <AposLabel
-        class="apos-admin-bar__title-context-label"
         v-for="{id, label, tooltip = '', modifiers = []} in moduleOptions.contextLabels"
         :key="id"
+        class="apos-admin-bar__title-context-label"
         :label="label"
         :tooltip="tooltip"
         :modifiers="modifiers"
@@ -130,7 +130,7 @@ export default {
   mounted() {
     apos.bus.$on('command-menu-admin-bar-toggle-publish-draft', this.togglePublishDraftMode);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-toggle-publish-draft', this.togglePublishDraftMode);
   },
   methods: {

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

@@ -11,9 +11,12 @@
     >
       <AposButton
         :disabled="!canUndo"
-        type="subtle" :modifiers="['small', 'no-motion']"
-        label="apostrophe:undo" class="apos-admin-bar__context-button"
-        icon="undo-icon" :icon-only="true"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
+        label="apostrophe:undo"
+        class="apos-admin-bar__context-button"
+        icon="undo-icon"
+        :icon-only="true"
         @click="undo"
       />
     </div>
@@ -23,9 +26,12 @@
     >
       <AposButton
         :disabled="!canRedo"
-        type="subtle" :modifiers="['small', 'no-motion']"
-        label="apostrophe:redo" class="apos-admin-bar__context-button"
-        icon="redo-icon" :icon-only="true"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
+        label="apostrophe:redo"
+        class="apos-admin-bar__context-button"
+        icon="redo-icon"
+        :icon-only="true"
         @click="redo"
       />
     </div>
@@ -74,7 +80,7 @@ export default {
     apos.bus.$on('command-menu-admin-bar-undo', this.undo);
     apos.bus.$on('command-menu-admin-bar-redo', this.redo);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-undo', this.undo);
     apos.bus.$off('command-menu-admin-bar-redo', this.redo);
   },
@@ -93,7 +99,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  ::v-deep .apos-admin-bar__context-button.apos-button__wrapper {
+  :deep(.apos-admin-bar__context-button.apos-button__wrapper) {
     display: flex;
   }
 </style>

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

@@ -6,10 +6,11 @@
     <span class="apos-admin-bar__status__inner">
       <component
         :is="savingIndicator.componentName"
+        v-if="savingIndicator?.componentName"
         v-bind="savingIndicator.options"
         class="apos-admin-bar__status__icon"
       />
-      <div class="apos-admin-bar__status__label" ref="statusLabel">
+      <div ref="statusLabel" class="apos-admin-bar__status__label">
         {{ $t(savingLabel) }}
       </div>
     </span>

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

@@ -1,8 +1,11 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+/* eslint-disable vue/one-component-per-file */
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 import { klona } from 'klona';
 
 export default function() {
 
+  const component = apos.vueComponents.AposAreaEditor;
+
   let widgetsRendering = 0;
 
   apos.area.widgetOptions = [];
@@ -90,8 +93,6 @@ export default function() {
     }
     el.removeAttribute('data-apos-area-newly-editable');
 
-    const component = window.apos.area.components.editor;
-
     if (apos.area.activeEditor && (apos.area.activeEditor.id === data._id)) {
     // Editing a piece causes a refresh of the main content area,
     // but this may contain the area we originally intended to add
@@ -101,68 +102,49 @@ export default function() {
 
       el.parentNode.replaceChild(apos.area.activeEditor.$el, el);
     } else {
-      return new Vue({
-        el,
-        data: function() {
-          return {
-            options,
-            id: data._id,
-            items: data.items,
-            choices,
-            docId: _docId,
-            fieldId,
-            renderings
-          };
-        },
-        render(h) {
-          return h(component, {
-            props: {
-              options: this.options,
-              items: this.items,
-              choices: this.choices,
-              id: this.id,
-              docId: this.docId,
-              fieldId: this.fieldId,
-              renderings: this.renderings
-            }
-          });
-        }
+      const app = createApp(component, {
+        options,
+        id: data._id,
+        items: data.items,
+        choices,
+        docId: _docId,
+        fieldId,
+        renderings
       });
+
+      app.mount(el);
     }
   }
 
   function createWidgetClipboardApp() {
-  // Headless app to provide simple reactivity for the clipboard state
-    apos.area.widgetClipboard = new Vue({
-      el: null,
-      data: () => {
+    class Clipboard {
+      constructor() {
         const existing = window.localStorage.getItem('aposWidgetClipboard');
-        return {
-          widgetClipboard: existing ? JSON.parse(existing) : null
-        };
-      },
-      mounted() {
+        this.widgetClipboard = existing ? JSON.parse(existing) : null;
+
         window.addEventListener('storage', this.onStorage);
-      },
-      methods: {
-        set(widget) {
-          this.widgetClipboard = widget;
-          localStorage.setItem('aposWidgetClipboard', JSON.stringify(this.widgetClipboard));
-        },
-        get() {
+      }
+
+      set(widget) {
+        this.widgetClipboard = widget;
+        localStorage.setItem('aposWidgetClipboard', JSON.stringify(this.widgetClipboard));
+      }
+
+      get() {
         // If we don't clone, the second paste will be a duplicate key error
-          return klona(this.widgetClipboard);
-        },
-        onStorage() {
+        return klona(this.widgetClipboard);
+      }
+
+      onStorage() {
         // When local storage changes, dump the list to
         // the console.
-          const contents = window.localStorage.getItem('aposWidgetClipboard');
-          if (contents) {
-            this.widgetClipboard = JSON.parse(contents);
-          }
+        const contents = window.localStorage.getItem('aposWidgetClipboard');
+        if (contents) {
+          this.widgetClipboard = JSON.parse(contents);
         }
       }
-    });
-  }
+    }
 
+    apos.area.widgetClipboard = new Clipboard();
+  }
 }