apostrophe 4.5.4 → 4.6.1

package/CHANGELOG.md

@@ -1,10 +1,39 @@
 # Changelog
 
-## UNRELEASED
+## 4.6.1 (2024-08-26)
 
 ### Fixes
 
+* Registering duplicate icon is no longer breaking the build.
+* Fix widget focus state so that the in-context Add Content menu stays visible during animation.
+* Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI.
+
+## 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)
 

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/area/ui/apos/components/AposAreaContextualMenu.vue

@@ -6,6 +6,7 @@
       :disabled="isDisabled"
       :button="buttonOptions"
       :popover-modifiers="inContext ? ['z-index-in-context'] : []"
+      :menu-id="menuId"
     >
       <ul class="apos-area-menu__wrapper">
         <li
@@ -117,6 +118,12 @@ export default {
       default: function() {
         return {};
       }
+    },
+    menuId: {
+      type: String,
+      default() {
+        return `areaMenu-${createId()}`;
+      }
     }
   },
   emits: [ 'add' ],
@@ -182,9 +189,6 @@ export default {
       } else {
         return menu;
       }
-    },
-    menuId() {
-      return `areaMenu-${createId()}`;
     }
   },
   mounted() {

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

@@ -16,6 +16,7 @@
     :options="options"
     :max-reached="maxReached"
     :disabled="disabled"
+    :menu-id="menuId"
     @add="$emit('add', $event);"
   />
 </template>
@@ -54,6 +55,14 @@ export default {
       default: function() {
         return {};
       }
+    },
+    tabbable: {
+      type: Boolean,
+      default: false
+    },
+    menuId: {
+      type: String,
+      default: null
     }
   },
   emits: [ 'add' ],
@@ -64,7 +73,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
       };
     }
   },