apostrophe 3.52.0 → 3.53.0

package/CHANGELOG.md

@@ -1,11 +1,68 @@
 # Changelog
 
+## 3.53.0 (2023-08-03)
+
+### Adds
+
+* Accessibility improved for navigation inside modals and various UI elements.
+Pages/Docs Manager and Doc Editor modal now have better keyboard accessibility.
+They keep the focus on elements inside modals and give it back to their parent modal when closed.
+This implementation is evolving and will likely switch to use the `dialog` HTML element soon.
+* Adds support for a new `if` property in `addContextOperation` in order to show or not a context operation based on the current document properties.
+* Add `update-doc-fields` event to call `AposDocEditor.updateDocFields` method
+* Add schema field `hidden` property to always hide a field
+* Hide empty schema tabs in `AposDocEditor` when all fields are hidden due to `if` conditions
+* The front end UI now respects the `_aposEditorModal` and `_aposAutopublish`
+properties of a document if present, and otherwise falls back to module
+configuration. This is a powerful addition to custom editor components
+for piece and page types, allowing "virtual piece types" on the back end that
+deal with many content types to give better hints to the UI.
+* Respect the `_aposAutopublish` property of a document if present, otherwise
+fall back to module configuration.
+* For convenience in custom editor components, pass the new prop `type`, the original type of the document being copied or edited.
+* For better results in custom editor components, pass the prop `copyOfId`, which implies
+the custom editor should fetch the original itself by its means of choice.
+For backwards compatibility `copyOf` is still passed, but it may be an
+incomplete projection and should not be used in new code.
+* Custom context operations now receive a `docId` prop, which should
+be used in preference to `doc` because `doc` may be an incomplete
+projection.
+* Those creating custom context operations for documents can now
+specify both a `props` object for additional properties to be passed to
+their modal and a `docProps` object to map properties from the document
+to props of their choosing.
+* Adds support to add context labels in admin bar.
+* Adds support for admin UI language configuration in the `@apostrophecms/i18n` module. The new options allow control over the default admin UI language and configures the list of languages, that any individual logged in user can choose from. See the [documentation](https://v3.docs.apostrophecms.org/reference/modules/i18n.html) for more details.
+* Adds `adminLocale` User field to allow users to set their preferred admin UI language, but only when the `@apostrophecms/i18n` is configured accordingly (see above). 
+* Adds `@apostrophecms/settings` module and a "Personal Settings" feature. See the [documentation](https://v3.docs.apostrophecms.org/reference/modules/settings.html) for more details.
+* Adds `$and` operator on `addContextOperation` `if` property in order to check multiple fields before showing or hiding a context operation.
+
+### Fixes
+
+* `AposDocEditor` `onSave` method signature. We now always expect an object when a parameter is passed to the function to check
+the value of `navigate` flag.
+* Fixes a problem in the rich text editor where the slash would not be deleted after item selectin from the insert menu.
+* Modules that have a `public` or `i18n` subdirectory no longer generate a
+warning if they export no code.
+* Clean up focus parent event handlers when components are destroyed. Prevents a slow degradation of performance while editing.
+Thanks to [Joshua N. Miller](https://github.com/jmiller-rise8).
+* Fixes a visual discrepancy in the rich text editor where empty paragraphs would appear smaller in preview mode compared to edit mode.
+
+### Changes
+
+* To make life easier for module developers, modules that are `npm link`ed to
+the project no longer have to be listed in `package.json` as
+dependencies. To prevent surprises this is still a requirement for modules
+that are not symlinked.
+
 ## 3.52.0 (2023-07-06)
 
 ### Changes
+
 * Foreign widget UI no longer uses inverted theme styles.
 
 ### Adds
+
 * Allows users to double-click a nested widget's breadcrumb entry and open its editor.
 * Adds support for a new `conditions` property in `addContextOperation` and validation of `addContextOperation` configuration.
 
@@ -17,6 +74,7 @@ by an `if` condition fails to satisfy a condition such as `min` or `max`
 or is otherwise invalid. Instead the invalid value is discarded for safety.
 Note that `required` has always been ignored when an `if` condition is not
 satisfied.
+* Errors thrown in `@apostrophecms/login:afterSessionLogin` event handlers are now properly passed back to Passport as such, avoiding a process restart.
 
 ## 3.51.1 (2023-06-23)
 
@@ -89,8 +147,8 @@ are made before the last `apostrophe:modulesRegistered` handler has fired.
 If you need to call Apostrophe's `find()` methods at startup,
 it is best to wait for the `@apostrophecms/doc:beforeReplicate` event.
 * Allow `@` when a piece is a template and `/@` for page templates (doc-template-library module).
-* Adds a `prefix` option to the http frontend util module.  
-If explicitly set to `false`, prevents the prefix from being automatically added to the URL,  
+* Adds a `prefix` option to the http frontend util module.
+If explicitly set to `false`, prevents the prefix from being automatically added to the URL,
 when making calls with already-prefixed URLs for instance.
 * Adds the `redirectToFirstLocale` option to the `i18n` module to prevent users from reaching a version of their site that would not match any locale when requesting the site without a locale prefix in the URL.
 * If just one instance of a piece type should always exist (per locale if localized), the

package/defaults.js

@@ -46,6 +46,7 @@ module.exports = {
     '@apostrophecms/video-widget': {},
     '@apostrophecms/ui': {},
     '@apostrophecms/user': {},
+    '@apostrophecms/settings': {},
     '@apostrophecms/image': {},
     '@apostrophecms/image-tag': {},
     '@apostrophecms/file': {},

package/index.js

@@ -728,8 +728,9 @@ async function apostrophe(options, telemetry, rootSpan) {
       if (code) {
         return true;
       }
-      if (d.__meta.dirname && (fs.existsSync(`${d.__meta.dirname}/ui/apos`) || fs.existsSync(`${d.__meta.dirname}/ui/src`) || fs.existsSync(`${d.__meta.dirname}/ui/public`))) {
-        // Assets that will be bundled, instead of server code
+      const subdirs = [ 'ui/apos', 'ui/src', 'ui/public', 'public', 'i18n' ];
+      if (d.__meta.dirname && subdirs.find(dir => fs.existsSync(`${d.__meta.dirname}/${dir}`))) {
+        // Assets that will be bundled, or localizations, instead of server code
         return true;
       }
       return false;

package/lib/check-if-conditions.js

@@ -0,0 +1,44 @@
+
+export default function checkIfConditions(doc, conditions) {
+  return Object.entries(conditions).every(([ key, value ]) => {
+    if (key === '$or') {
+      return checkOrConditions(doc, value);
+    }
+
+    if (key === '$and') {
+      return checkAndConditions(doc, value);
+    }
+
+    const isNotEqualCondition = typeof value === 'object' &&
+          !Array.isArray(value) &&
+          value !== null &&
+          Object.hasOwn(value, '$ne');
+
+    if (isNotEqualCondition) {
+      return getNestedPropValue(doc, key) !== value.$ne;
+    }
+
+    return getNestedPropValue(doc, key) === value;
+  });
+}
+
+function checkOrConditions(doc, conditions) {
+  return conditions.some((condition) => {
+    return checkIfConditions(doc, condition);
+  });
+}
+
+function checkAndConditions(doc, conditions) {
+  return conditions.every((condition) => {
+    return checkIfConditions(doc, condition);
+  });
+}
+
+function getNestedPropValue(doc, key) {
+  if (key.includes('.')) {
+    const keys = key.split('.');
+    return keys.reduce((acc, cur) => acc[cur], doc);
+  }
+
+  return doc[key];
+}

package/lib/moog-require.js

@@ -198,8 +198,9 @@ module.exports = function(options) {
           }
         }
       }
+      self.npmRoot = folder;
     }
-    if (!self.validPackages.has(type)) {
+    if (!self.validPackages.has(type) && !symlinked(type)) {
       return null;
     }
     try {
@@ -211,6 +212,27 @@ module.exports = function(options) {
     }
   }
 
+  function symlinked(type) {
+    self.symlinksCache ||= new Map();
+    if (self.symlinksCache.has(type)) {
+      return self.symlinksCache.get(type);
+    }
+    const symlink = `${self.npmRoot}/node_modules/${type}`;
+    let link;
+    try {
+      link = fs.lstatSync(symlink).isSymbolicLink();
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        // Just doesn't exist
+        link = false;
+      } else {
+        throw e;
+      }
+    }
+    self.symlinksCache.set(type, link);
+    return link;
+  };
+
   self.isImprovement = function(name) {
     return _.has(self.improvements, name);
   };

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

@@ -92,6 +92,7 @@ module.exports = {
     self.groups = [];
     self.groupLabels = {};
     self.bars = [];
+    self.contextLabels = [];
     self.enableBrowserData();
   },
   handlers(self) {
@@ -355,7 +356,8 @@ module.exports = {
           tabId: cuid(),
           contextEditorName,
           pageTree: self.options.pageTree && self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type', 'draft'),
-          bars: self.bars
+          bars: self.bars,
+          contextLabels: self.contextLabels
         };
       },
 
@@ -383,6 +385,33 @@ module.exports = {
           }
           return b.last === true ? -1 : 1;
         });
+      },
+
+      // Add custom context labels and place the ones
+      // that have `last: true` at the end
+      // of the list so that they will be
+      // displayed after the others.
+      //
+      // Example:
+      //
+      // ```js
+      // self.addContextLabel({
+      //   id: 'myLabel'
+      //   label: 'apos:myLabel',
+      //   tooltip: 'apos:myTooltip',
+      //   last: true,
+      //   modifiers: ['apos-is-warning', 'apos-is-filled']
+      // });
+      // ```
+      addContextLabel(label) {
+        self.contextLabels.push(label);
+
+        self.contextLabels.sort((a, b) => {
+          if (a.last === true && b.last === true) {
+            return 0;
+          }
+          return b.last === true ? -1 : 1;
+        });
       }
     };
   }

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

@@ -129,6 +129,9 @@ export default {
     },
     canRedo() {
       return this.undone.length > 0;
+    },
+    autopublish() {
+      return this.context.autopublish ?? this.moduleOptions.autopublish;
     }
   },
   watch: {
@@ -715,7 +718,7 @@ export default {
     },
     async getPublished() {
       const moduleOptions = window.apos.modules[this.context.type];
-      const manuallyPublished = moduleOptions.localized && !moduleOptions.autopublish;
+      const manuallyPublished = moduleOptions.localized && !this.autopublish;
       if (manuallyPublished && this.context.lastPublishedAt) {
         const action = window.apos.modules[this.context.type].action;
         const doc = await apos.http.get(`${action}/${this.context._id}`, {

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

@@ -33,10 +33,18 @@
       />
       <AposLabel
         v-else
-        :label="unpublishedLabel"
-        :tooltip="unpublishedTooltip"
+        :label="'apostrophe:draft'"
+        :tooltip="'apostrophe:notYetPublished'"
         :modifiers="['apos-is-warning', 'apos-is-filled']"
       />
+      <AposLabel
+        class="apos-admin-bar__title-context-label"
+        v-for="{id, label, tooltip = '', modifiers = []} in moduleOptions.contextLabels"
+        :key="id"
+        :label="label"
+        :tooltip="tooltip"
+        :modifiers="modifiers"
+      />
     </span>
   </transition-group>
 </template>
@@ -109,12 +117,6 @@ export default {
     },
     moduleOptions() {
       return window.apos.adminBar;
-    },
-    unpublishedLabel() {
-      return this.moduleOptions.unpublishedLabel || 'apostrophe:draft';
-    },
-    unpublishedTooltip() {
-      return this.moduleOptions.unpublishedTooltip || 'apostrophe:notYetPublished';
     }
   },
   mounted() {
@@ -167,6 +169,10 @@ export default {
   }
 }
 
+.apos-admin-bar__title-context-label  {
+  margin-left: 5px;
+}
+
 .apos-admin-bar__title__indicator {
   margin-right: 5px;
   color: var(--a-text-primary);

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

@@ -24,7 +24,7 @@
                 }`
               ]"
             >
-              <div
+              <button
                 v-for="(item, itemIndex) in group.widgets"
                 :key="itemIndex"
                 class="apos-widget"
@@ -54,7 +54,7 @@
                 <p v-if="item.description" class="apos-widget__help">
                   {{ $t(item.description) }}
                 </p>
-              </div>
+              </button>
             </div>
           </div>
         </template>
@@ -239,6 +239,12 @@ export default {
 }
 
 .apos-widget {
+  @include type-base;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: inherit;
+
   .apos-widget__preview {
     transition: opacity 250ms ease-in-out;
     .apos-icon--add {

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

@@ -387,6 +387,10 @@ export default {
       apos.bus.$emit('widget-focus', this.widget._id);
     }
   },
+  destroyed() {
+    // Remove the focus parent listener when unmounted
+    apos.bus.$off('widget-focus-parent', this.focusParent);
+  },
   methods: {
     // Focus parent, useful for obtrusive UI
     focusParent() {

package/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue

@@ -62,6 +62,7 @@ export default {
       modal: {
         busy: false,
         active: false,
+        trapFocus: false,
         type: 'overlay',
         showModal: false,
         disableHeader: true

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

@@ -1184,7 +1184,7 @@ module.exports = {
         ];
 
         function validate ({
-          action, context, label, modal, conditions
+          action, context, label, modal, conditions, if: ifProps
         }) {
           const allowedConditions = [
             'canPublish',
@@ -1199,19 +1199,25 @@ module.exports = {
           ];
 
           if (!action || !context || !label || !modal) {
-            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal properties');
+            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal properties.');
           }
 
-          if (!conditions) {
-            return;
+          if (
+            conditions &&
+            (!Array.isArray(conditions) ||
+            conditions.some((perm) => !allowedConditions.includes(perm)))
+          ) {
+            throw self.apos.error(
+              'invalid', `The conditions property in addContextOperation must be an array containing one or multiple of these values:\n\t${allowedConditions.join('\n\t')}.`
+            );
           }
 
           if (
-            !Array.isArray(conditions) ||
-            conditions.some((perm) => !allowedConditions.includes(perm))
+            ifProps &&
+            (typeof ifProps !== 'object' || Array.isArray(ifProps))
           ) {
             throw self.apos.error(
-              'invalid', `The conditions property in addContextOperation must be an array containing one or multiple of these values:\n\t${allowedConditions.join('\n\t')}.`
+              'invalid', 'The if property in addContextOperation must be an object containing properties and values that will be checked against the current document in order to show or not the context operation.'
             );
           }
         }

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -23,6 +23,7 @@ import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange'
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import AposArchiveMixin from 'Modules/@apostrophecms/ui/mixins/AposArchiveMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
+import checkIfConditions from 'apostrophe/lib/check-if-conditions';
 
 export default {
   name: 'AposDocContextMenu',
@@ -196,7 +197,7 @@ export default {
     },
     customOperationsByContext() {
       return this.customOperations.filter(({
-        manuallyPublished, hasUrl, conditions, context
+        manuallyPublished, hasUrl, conditions, context, if: ifProps
       }) => {
         if (typeof manuallyPublished === 'boolean' && manuallyPublished !== this.manuallyPublished) {
           return false;
@@ -214,6 +215,14 @@ export default {
           }
         }
 
+        if (ifProps) {
+          const canSeeOperation = checkIfConditions(this.doc, ifProps);
+
+          if (!canSeeOperation) {
+            return false;
+          }
+        }
+
         return context === 'update' && this.isUpdateOperation;
       });
     },
@@ -306,7 +315,10 @@ export default {
       );
     },
     manuallyPublished() {
-      return this.moduleOptions.localized && !this.moduleOptions.autopublish;
+      return this.moduleOptions.localized && !this.autopublish;
+    },
+    autopublish() {
+      return this.context._aposAutopublish ?? this.moduleOptions.autopublish;
     },
     isModified() {
       if (!this.current) {
@@ -383,9 +395,10 @@ export default {
       this[action](this.context);
     },
     async edit(doc) {
-      await apos.modal.execute(this.moduleOptions.components.editorModal, {
+      await apos.modal.execute(doc._aposEditorModal || this.moduleOptions.components.editorModal, {
         moduleName: this.moduleName,
-        docId: doc._id
+        docId: doc._id,
+        type: doc.type
       });
     },
     preview(doc) {
@@ -401,28 +414,32 @@ export default {
           this.$emit('close', doc);
         }
       }
-      // Because the page or piece manager might give us just a projected,
-      // minimum number of properties otherwise
-      const complete = await apos.http.get(`${this.moduleOptions.action}/${doc._id}`, {
-        busy: true
-      });
-      Object.assign(doc, complete);
 
-      apos.bus.$emit('admin-menu-click', {
-        itemName: `${this.moduleName}:editor`,
-        props: {
-          copyOf: {
-            ...this.current || doc,
-            _id: doc._id
-          }
-        }
+      await apos.modal.execute(doc._aposEditorModal || this.moduleOptions.components.editorModal, {
+        moduleName: this.moduleName,
+        copyOfId: doc._id,
+        // Passed for bc
+        copyOf: {
+          ...this.current || doc,
+          _id: doc._id
+        },
+        type: doc.type
       });
+
     },
     async customAction(doc, operation) {
       await apos.modal.execute(operation.modal, {
         moduleName: operation.moduleName,
-        doc
+        // For backwards compatibility
+        doc,
+        ...docProps(doc),
+        ...operation.props
       });
+      function docProps(doc) {
+        return Object.fromEntries(Object.entries(operation.docProps || {}).map(([ key, value ]) => {
+          return [ key, doc[value] ];
+        }));
+      }
     },
     async localize(doc) {
       // If there are changes warn the user before discarding them before
@@ -447,6 +464,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-</style>

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -67,11 +67,12 @@
               :conditional-fields="conditionalFields('other')"
               :doc-id="docId"
               :value="docFields"
-              @input="updateDocFields"
-              @validate="triggerValidate"
               :server-errors="serverErrors"
               :ref="tab.name"
               :generation="generation"
+              @input="updateDocFields"
+              @validate="triggerValidate"
+              @update-doc-data="onUpdateDocFields"
             />
           </div>
         </template>
@@ -140,8 +141,12 @@ export default {
       type: String,
       default: null
     },
-    copyOf: {
-      type: Object,
+    type: {
+      type: String,
+      default: null
+    },
+    copyOfId: {
+      type: String,
       default: null
     }
   },
@@ -153,6 +158,7 @@ export default {
       fieldErrors: {},
       modal: {
         active: false,
+        triggerFocusRefresh: 0,
         type: 'overlay',
         showModal: false
       },
@@ -265,22 +271,12 @@ export default {
         };
       }
     },
-    currentFields() {
-      if (this.currentTab) {
-        const tabFields = this.tabs.find((item) => {
-          return item.name === this.currentTab;
-        });
-        return this.filterOutParkedFields(tabFields.fields);
-      } else {
-        return [];
-      }
-    },
     saveLabel() {
       if (this.restoreOnly) {
         return 'apostrophe:restore';
       } else if (this.manuallyPublished) {
         if (this.canPublish) {
-          if (this.copyOf) {
+          if (this.copyOfId) {
             return 'apostrophe:publish';
           } else if (this.original && this.original.lastPublishedAt) {
             return 'apostrophe:update';
@@ -288,7 +284,7 @@ export default {
             return 'apostrophe:publish';
           }
         } else {
-          if (this.copyOf) {
+          if (this.copyOfId) {
             return 'apostrophe:submit';
           } else if (this.original && this.original.lastPublishedAt) {
             return 'apostrophe:submitUpdate';
@@ -374,19 +370,25 @@ export default {
           });
         }
       }
-    } else if (this.copyOf) {
-      const newInstance = klona(this.copyOf);
+      this.modal.triggerFocusRefresh++;
+    } else if (this.copyOfId) {
+      // Because the page or piece manager might give us just a projected,
+      // minimum number of properties otherwise, and because we need to
+      // make sure we use our preferred module to fetch the content
+      const newInstance = await apos.http.get(`${this.moduleOptions.action}/${this.copyOfId}`, {
+        busy: true
+      });
       delete newInstance.parked;
-      newInstance.title = `Copy of ${this.copyOf.title}`;
-      if (this.copyOf.slug.startsWith('/')) {
-        const matches = this.copyOf.slug.match(/\/([^/]+)$/);
+      newInstance.title = `Copy of ${newInstance.title}`;
+      if (newInstance.slug.startsWith('/')) {
+        const matches = newInstance.slug.match(/\/([^/]+)$/);
         if (matches) {
           newInstance.slug = `${apos.page.page.slug}/copy-of-${matches[1]}`;
         } else {
           newInstance.slug = '/copy-of-home-page';
         }
       } else {
-        newInstance.slug = this.copyOf.slug.replace(/([^/]+)$/, 'copy-of-$1');
+        newInstance.slug = newInstance.slug.replace(/([^/]+)$/, 'copy-of-$1');
       }
       delete newInstance._id;
       delete newInstance._url;
@@ -399,9 +401,11 @@ export default {
       this.docFields.data = newInstance;
       this.prepErrors();
       this.docReady = true;
+      this.modal.triggerFocusRefresh++;
     } else {
-      this.$nextTick(() => {
-        this.loadNewInstance();
+      this.$nextTick(async () => {
+        await this.loadNewInstance();
+        this.modal.triggerFocusRefresh++;
       });
     }
     apos.bus.$on('content-changed', this.onContentChanged);
@@ -505,7 +509,7 @@ export default {
       await this.restore(this.original);
       await this.loadDoc();
     },
-    async onSave(navigate = false) {
+    async onSave({ navigate = false } = {}) {
       if (this.canPublish || !this.manuallyPublished) {
         await this.save({
           andPublish: this.manuallyPublished,
@@ -566,8 +570,8 @@ export default {
           body._targetId = apos.page.page._id.replace(':published', ':draft');
           body._position = 'lastChild';
         }
-        if (this.copyOf) {
-          body._copyingId = this.copyOf._id;
+        if (this.copyOfId) {
+          body._copyingId = this.copyOfId;
         }
       }
       let doc;
@@ -665,6 +669,10 @@ export default {
         itemName: `${this.moduleName}:editor`
       });
     },
+    onUpdateDocFields(value) {
+      this.updateDocFields(value);
+      this.generation++;
+    },
     updateDocFields(value) {
       this.updateFieldErrors(value.fieldState);
       this.docFields.data = {