apostrophe 4.5.3 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 4.6.0 (2024-08-08)
+
+### Adds
+
+* Add a locale switcher in pieces and pages editor modals. This is available for localized documents only, and allows you to switch between locales for the same document.
+  The locale can be switche at only one level, meaning that sub documents of a document that already switched locale will not be able to switch locale itself.
+* Adds visual focus states and keyboard handlers for engaging with areas and widgets in-context
+
+### Changes
+
+* Add `title` and `_url` to select all projection.
+* Display `Select all` message on all pages in the manager modal.
+* Refresh `checked` in manager modal after archive action.
+* Update `@apostrophecms/emulate-mongo-3-driver` dependency to keep supporting `mongodb@3.x` queries while using `mongodb@6.x`.
+* Updates rich text link tool's keyboard key detection strategy.
+* Buttons that appear on slats (preview, edit crop/relationship, remove) are visually focusable and keyboard accessible.
+* Added tooltip for update button. Thanks to [gkumar9891](https://github.com/gkumar9891) for this addition.
+
+### Fixes
+
+* Fixes the rich text link tool's detection and display of the Remove Link button for removing existing links
+* Fixes the rich text link tool's detection and display of Apostrophe Page relationship field.
+* Overriding standard Vue.js components with `editorModal` and `managerModal` are now applied all the time.
+* Accommodate old-style replica set URIs with comma-separated servers by passing any MongoDB URIs that Node.js cannot parse directly to the MongoDB driver, and avoiding unnecessary parsing of the URI in general.
+* Bump `oembetter` dependency to guarantee compatibility with YouTube. YouTube recently deployed broken `link rel="undefined"` tags on some of their video pages.
+* It is now possible to see the right filename and line number when debugging the admin UI build in the browser. This is automatically disabled when `@apostrophecms/security-headers` is installed, because its defaults are incompatible by design.
+
+## 4.5.4 (2024-07-22)
+
+### Fixes
+
+* Add a default projection to ancestors of search results in order to load a reasonable amount of data and avoid request timeouts.
+
 ## 4.5.3 (2024-07-17)
 
 ### Fixes

package/lib/mongodb-connect.js

@@ -16,8 +16,15 @@ module.exports = async (uri, options) => {
     useNewUrlParser: true,
     ...options
   };
-  const parsed = new URL(uri);
-  if ((parsed.protocol !== 'mongodb:') || (parsed.hostname !== 'localhost')) {
+  let parsed;
+  try {
+    parsed = new URL(uri);
+  } catch (e) {
+    // Parse failed, e.g. old school replica set URI
+    // with commas, just let the mongo driver handle it
+    return mongo.MongoClient.connect(uri, connectOptions);
+  }
+  if (!parsed || (parsed.protocol !== 'mongodb:') || (parsed.hostname !== 'localhost')) {
     return mongo.MongoClient.connect(parsed.toString(), connectOptions);
   }
   const records = await dns.promises.lookup('localhost', { all: true });

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

@@ -5,7 +5,12 @@
     :class="themeClass"
   >
     <div ref="spacer" class="apos-admin-bar-spacer" />
-    <nav ref="adminBar" class="apos-admin-bar">
+    <nav
+      ref="adminBar"
+      class="apos-admin-bar"
+      role="menubar"
+      aria-label="Apostrophe Admin Bar"
+    >
       <div class="apos-admin-bar__row">
         <AposLogoPadless class="apos-admin-bar__logo" />
         <TheAposAdminBarMenu :items="menuItems" />

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

@@ -2,63 +2,19 @@
   <AposContextMenu
     ref="menu"
     class="apos-admin-locales"
+    identifier="localePickerTrigger"
     :button="button"
     :unpadded="true"
     menu-placement="bottom-end"
     @open="open"
+    @close="isOpen = false"
   >
-    <div class="apos-locales-picker">
-      <div class="apos-input-wrapper">
-        <input
-          v-model="search"
-          type="text"
-          class="apos-locales-filter"
-          :placeholder="$t('apostrophe:searchLocalesPlaceholder')"
-        >
-      </div>
-      <ul class="apos-locales">
-        <li
-          v-for="locale in filteredLocales"
-          :key="locale.name"
-          class="apos-locale-item"
-          :class="localeClasses(locale)"
-          @click="switchLocale(locale)"
-        >
-          <span class="apos-locale">
-            <AposIndicator
-              v-if="isActive(locale)"
-              icon="check-bold-icon"
-              fill-color="var(--a-primary)"
-              class="apos-check"
-              :icon-size="12"
-              :title="$t('apostrophe:currentLocale')"
-            />
-            {{ locale.label }}
-            <span class="apos-locale-name">
-              ({{ locale.name }})
-            </span>
-            <span
-              class="apos-locale-localized"
-              :class="{ 'apos-state-is-localized': isLocalized(locale) }"
-            />
-          </span>
-        </li>
-      </ul>
-      <div class="apos-available-locales">
-        <p class="apos-available-description">
-          {{ $t('apostrophe:documentExistsInLocales') }}
-        </p>
-        <AposButton
-          v-for="locale in availableLocales"
-          :key="locale.name"
-          class="apos-available-locale"
-          :label="locale.label"
-          type="quiet"
-          :modifiers="['no-motion']"
-          @click="switchLocale(locale)"
-        />
-      </div>
-    </div>
+    <AposLocalePicker
+      :current-locale="locale"
+      :localized="localized"
+      :is-open="isOpen"
+      @switch-locale="switchLocale"
+    />
   </AposContextMenu>
 </template>
 
@@ -76,10 +32,14 @@ export default {
           };
         }
       ),
-      localized: {}
+      localized: {},
+      isOpen: false
     };
   },
   computed: {
+    locale() {
+      return window.apos.i18n.locale;
+    },
     button() {
       return {
         label: {
@@ -91,21 +51,14 @@ export default {
         type: 'quiet'
       };
     },
-    filteredLocales(input) {
-      return this.locales.filter(({ name, label }) => {
-        const matches = term =>
-          term.toLowerCase().includes(this.search.toLowerCase());
-        return matches(name) || matches(label);
-      });
-    },
-    availableLocales() {
-      return this.locales.filter(locale => !!this.localized[locale.name]);
-    },
     action() {
       return apos.modules[apos.adminBar.context.type]?.action;
     }
   },
   methods: {
+    close() {
+      this.isOpen = false;
+    },
     async open() {
       if (apos.adminBar.context) {
         const docs = await apos.http.get(
@@ -120,20 +73,13 @@ export default {
             .map(doc => [ doc.aposLocale.split(':')[0], doc ])
         );
       }
+      this.isOpen = true;
     },
     isActive(locale) {
       return window.apos.i18n.locale === locale.name;
     },
     isLocalized(locale) {
-      return !!this.localized[locale.name];
-    },
-    localeClasses(locale) {
-      const classes = {};
-      if (this.isActive(locale)) {
-        classes['apos-active'] = true;
-      }
-      classes['apos-exists'] = this.localized[locale.name];
-      return classes;
+      return Boolean(this.localized[locale.name]);
     },
     async switchLocale(locale) {
       const { name } = locale;
@@ -221,112 +167,4 @@ export default {
     letter-spacing: 1px;
   }
 }
-
-.apos-locales-picker {
-  width: 315px;
-}
-
-.apos-locales-filter {
-  @include type-large;
-
-  box-sizing: border-box;
-  width: 100%;
-  padding: 20px 45px 20px 20px;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid var(--a-base-9);
-  border-left: 0;
-  border-top-right-radius: var(--a-border-radius);
-  border-top-left-radius: var(--a-border-radius);
-
-  &::placeholder {
-    color: var(--a-base-4);
-    font-style: italic;
-  }
-
-  &:focus {
-    outline: none;
-    background-color: var(--a-base-10);
-  }
-}
-
-.apos-locales {
-  margin: $spacing-base 0;
-  padding-left: 0;
-  list-style-type: none;
-  max-height: 350px;
-  overflow-y: scroll;
-  font-weight: var(--a-weight-base);
-}
-
-.apos-locale-item {
-  position: relative;
-  padding: 12px 35px;
-  line-height: 1;
-  cursor: pointer;
-
-  .state {
-    opacity: 0;
-  }
-
-  &:hover {
-    background-color: var(--a-base-10);
-  }
-
-  .apos-check {
-    position: absolute;
-    top: 50%;
-    left: 18px;
-    transform: translateY(-50%);
-    color: var(--a-primary);
-    stroke: var(--a-primary);
-  }
-
-  &.apos-active {
-    .active {
-      opacity: 1;
-    }
-  }
-
-  .apos-locale-localized {
-    position: relative;
-    top: -1px;
-    left: 5px;
-    display: inline-block;
-    width: 3px;
-    height: 3px;
-    border: 1px solid var(--a-base-5);
-    border-radius: 50%;
-
-    &.apos-state-is-localized {
-      background-color: var(--a-success);
-      border-color: var(--a-success);
-    }
-  }
-}
-
-.apos-available-locales {
-  padding: $spacing-double;
-  border-top: 1px solid var(--a-base-9);
-}
-
-.apos-available-locale {
-  display: inline-block;
-  color: var(--a-primary);
-  font-size: var(--a-type-small);
-}
-
-.apos-available-locale:not(:last-of-type) {
-  margin-right: 10px;
-  margin-bottom: 5px;
-}
-
-.apos-available-description {
-  margin-top: 0;
-}
-
-.apos-locale-name {
-  text-transform: uppercase;
-}
-
 </style>

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

@@ -1,11 +1,12 @@
 <template>
-  <ul class="apos-admin-bar__items">
+  <ol class="apos-admin-bar__items" role="menu">
     <li v-if="pageTree" class="apos-admin-bar__item">
       <AposButton
         type="subtle"
         label="apostrophe:pages"
         class="apos-admin-bar__btn"
         :modifiers="['no-motion']"
+        role="menuitem"
         @click="emitEvent('@apostrophecms/page:manager')"
       />
     </li>
@@ -24,6 +25,7 @@
           class: 'apos-admin-bar__btn',
           type: 'subtle'
         }"
+        role="menuitem"
         @item-clicked="emitEvent"
       />
       <Component
@@ -33,6 +35,7 @@
         :label="item.label"
         :modifiers="['no-motion']"
         class="apos-admin-bar__btn"
+        role="menuitem"
         @click="emitEvent(item.action)"
       />
     </li>
@@ -47,6 +50,7 @@
           type: 'primary',
           modifiers: ['round', 'no-motion']
         }"
+        role="menuitem"
         @item-clicked="emitEvent"
       />
     </li>
@@ -76,7 +80,7 @@
         />
       </template>
     </li>
-  </ul>
+  </ol>
 </template>
 
 <script>

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

@@ -498,7 +498,7 @@ export default {
       const contextOptions = this.context
         ? apos.modules[this.context.type]
         : { contentChangedRefresh: true };
-      if (contextOptions.contentChangedRefresh) {
+      if (!e.localeSwitched && contextOptions.contentChangedRefresh) {
         await this.refresh({
           scrollcheck: e.action === 'history'
         });

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

@@ -53,6 +53,7 @@
         v-if="editMode && !isAutopublished"
         type="primary"
         :label="publishLabel"
+        :tooltip="publishTooltip"
         :disabled="!readyToPublish"
         class="apos-admin-bar__btn apos-admin-bar__context-button"
         :modifiers="['no-motion']"
@@ -133,6 +134,16 @@ export default {
         }
       }
     },
+    publishTooltip() {
+      if (this.canPublish && this.context.lastPublishedAt && !this.hasBeenPublishedThisPageload) {
+        return {
+          content: 'apostrophe:updateTooltip',
+          placement: 'bottom'
+        };
+      }
+
+      return false;
+    },
     isAutopublished() {
       return this.context._aposAutopublish ?? (window.apos.modules[this.context.type].autopublish || false);
     },

package/modules/@apostrophecms/any-page-type/index.js

@@ -120,6 +120,11 @@ module.exports = {
                 continue;
               }
               const subquery = self.apos.page.find(req);
+
+              if (req.aposAncestors === true && req.aposAncestorsApiProjection) {
+                subquery.project(req.aposAncestorsApiProjection);
+              }
+
               subquery.ancestorPerformanceRestrictions();
               const parameters = applySubqueryOptions(subquery, options, [ 'depth' ]);
               const components = page.path.split('/');
@@ -145,7 +150,7 @@ module.exports = {
               }
               if (!paths.length) {
                 page._ancestors = [];
-                return;
+                continue;
               }
               subquery.and({
                 path: { $in: paths }

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

@@ -15,6 +15,7 @@
             label: $t(contextMenuOptions.menu[0].label)
           }"
           :disabled="field && field.readOnly"
+          :disable-focus="false"
           type="primary"
           :icon="icon"
           @click="add({ index: 0, name: contextMenuOptions.menu[0].name })"
@@ -29,6 +30,7 @@
           :max-reached="maxReached"
           :disabled="field && field.readOnly"
           :widget-options="options.widgets"
+          :tabbable="true"
           @add="add"
         />
       </template>

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

@@ -54,6 +54,10 @@ export default {
       default: function() {
         return {};
       }
+    },
+    tabbable: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [ 'add' ],
@@ -64,7 +68,8 @@ export default {
         icon: 'plus-icon',
         type: 'primary',
         modifiers: this.empty ? [] : [ 'round', 'tiny' ],
-        iconSize: this.empty ? 20 : 11
+        iconSize: this.empty ? 20 : 11,
+        disableFocus: !this.tabbable
       };
     }
   },

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

@@ -10,11 +10,15 @@
     :data-apos-widget-id="widget._id"
   >
     <div
+      ref="wrapper"
       class="apos-area-widget-inner"
       :class="containerClasses"
+      tabindex="0"
       @mouseover="mouseover($event)"
       @mouseleave="mouseleave"
-      @click="getFocus($event, widget._id)"
+      @click="getFocus($event, widget._id);"
+      @focus="attachKeyboardFocusHandler"
+      @blur="removeKeyboardFocusHandler"
     >
       <div
         ref="label"
@@ -37,6 +41,7 @@
               icon="chevron-right-icon"
               :icon-size="9"
               :modifiers="['icon-right', 'no-motion']"
+              :disable-focus="!(isHovered || isFocused)"
               @click="getFocus($event, item.id)"
             />
           </li>
@@ -50,6 +55,7 @@
               :tooltip="!isContextual && 'apostrophe:editWidgetForeignTooltip'"
               :icon-size="11"
               :modifiers="['no-motion']"
+              :disable-focus="!(isHovered || isFocused)"
               @click="foreign ? $emit('edit', i) : null"
               @dblclick="(!foreign && !isContextual) ? $emit('edit', i) : null"
             />
@@ -68,9 +74,14 @@
           :widget-options="widgets"
           :options="options"
           :disabled="disabled"
+          :tabbable="isHovered || isFocused"
           @add="$emit('add', $event);"
         />
       </div>
+      <div
+        class="apos-area-widget-guard"
+        :class="{'apos-is-disabled': isFocused}"
+      />
       <div
         class="apos-area-widget-controls apos-area-widget-controls--modify"
         :class="controlsClasses"
@@ -83,6 +94,7 @@
           :foreign="foreign"
           :disabled="disabled"
           :max-reached="maxReached"
+          :tabbable="isFocused"
           @up="$emit('up', i);"
           @remove="$emit('remove', i);"
           @edit="$emit('edit', i);"
@@ -92,14 +104,6 @@
           @down="$emit('down', i);"
         />
       </div>
-      <!--
-        Note: we will not need this guard layer when we implement widget controls outside of the widget DOM
-        because we will be drawing and fitting a new layer ontop of the widget, which we can use to proxy event handling.
-      -->
-      <div
-        class="apos-area-widget-guard"
-        :class="{'apos-is-disabled': isFocused}"
-      />
       <!-- Still used for contextual editing components -->
       <component
         :is="widgetEditorComponent(widget.type)"
@@ -143,6 +147,7 @@
           :widget-options="widgets"
           :options="options"
           :disabled="disabled"
+          :tabbable="isHovered || isFocused"
           @add="$emit('add', $event)"
         />
       </div>
@@ -348,6 +353,15 @@ export default {
       return !!(this.docId && (window.apos.adminBar.contextId !== this.docId));
     }
   },
+  watch: {
+    isFocused(newVal) {
+      if (newVal) {
+        this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardUnfocus);
+      } else {
+        this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardUnfocus);
+      }
+    }
+  },
   created() {
     if (this.options.groups) {
       for (const group of Object.keys(this.options.groups)) {
@@ -390,6 +404,14 @@ export default {
       return offsetTop - labelHeight < adminBarHeight;
     },
 
+    attachKeyboardFocusHandler() {
+      this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardFocus);
+    },
+
+    removeKeyboardFocusHandler() {
+      this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardFocus);
+    },
+
     // Focus parent, useful for obtrusive UI
     focusParent() {
       // Something above us asked the focused widget to try and focus its parent
@@ -439,6 +461,22 @@ export default {
       }
     },
 
+    handleKeyboardFocus($event) {
+      if ($event.key === 'Enter' || $event.code === 'Space') {
+        $event.preventDefault();
+        this.getFocus($event, this.widget._id);
+        this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardFocus);
+      }
+    },
+
+    handleKeyboardUnfocus($event) {
+      if ($event.key === 'Escape') {
+        this.getFocus($event, null);
+        document.activeElement.blur();
+        this.$refs.wrapper.focus();
+      }
+    },
+
     getParent() {
       if (!this.mounted) {
         return false;
@@ -500,6 +538,12 @@ export default {
     outline: 1px solid transparent;
     transition: outline 200ms ease;
 
+    &:focus {
+      box-shadow: 0 0 11px 1px var(--a-primary-transparent-25);
+      outline: 1px dashed var(--a-primary-transparent-50);
+      outline-offset: 2px;
+    }
+
     &.apos-is-highlighted {
       outline: 1px dashed var(--a-primary-transparent-50);
     }
@@ -514,6 +558,7 @@ export default {
 
     &.apos-is-ui-adjusted {
       .apos-area-widget-controls--modify {
+        top: 0;
         transform: translate3d(-10px, 50px, 0);
       }
 
@@ -571,8 +616,9 @@ export default {
   }
 
   .apos-area-widget-controls--modify {
+    top: 50%;
     right: 0;
-    transform: translate3d(-10px, 30px, 0);
+    transform: translate3d(-10px, -50%, 0);
 
     :deep(.apos-button-group__inner) {
       border: 1px solid var(--a-primary-transparent-25);
@@ -597,6 +643,10 @@ export default {
         color: var(--a-primary);
       }
 
+      &:focus:not([disabled])::after {
+        background-color: transparent;
+      }
+
       &[disabled] {
         color: var(--a-base-6);
       }
@@ -735,7 +785,9 @@ export default {
     color: var(--a-primary-dark-10);
 
     &:hover, &:active, &:focus {
-      text-decoration: none;
+      .apos-button__content {
+        color: var(--a-primary);
+      }
     }
   }