apostrophe 3.46.0 → 3.48.0

package/.github/workflows/main.yml

@@ -20,8 +20,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14, 16, 18]
-        mongodb-version: [4.2, 5.0]
+        node-version: [16, 18]
+        mongodb-version: [4.4, 5.0, 6.0]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 3.48.0 (2023-05-26)
+
+### Adds
+
+* For performance, add `apos.modules['piece-type']getManagerApiProjection` method to reduce the amount of data returned in the manager
+    modal. The projection will contain the fields returned in the method in addition to the existing manager modal
+    columns.
+* Add `apos.schema.getRelationshipQueryBuilderChoicesProjection` method to set the projection used in
+    `apos.schema.relationshipQueryBuilderChoices`.
+* Rich-text inline images now copies the `alt` attribute from the original image from the Media Library.
+
+### Changes
+
+* Remove `stripPlaceholderBrs` and `restorePlaceholderBrs` from `AposRichTextWidgetEditor.vue` component.
+* Change tiptap `Gapcursor` display to use a vertical blinking cursor instead of an horizontal cursor, which allow users to add text before and after inline images and tables.
+* You can set `max-width` on `.apos-rich-text-toolbar__inner` to define the width of the rich-text toolbar. It will now
+    flow on multiple lines if needed.
+* The `utilityRail` prop of `AposSchema` now defaults to `false`, removing
+the need to explicitly pass it in almost all contexts.
+* Mark `apos.modules['doc-type']` methods `getAutocompleteTitle`, `getAutocompleteProjection` and `autocomplete` as
+    deprecated. Our admin UI does not use them, it uses the `autocomplete('...')` query builder.
+    More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'.
+* Print a warning with a clear explanation if a module's `index.js` file contains
+no `module.exports` object (often due to a typo), or it is empty.
+
+### Fixes
+
+* Now errors and exits when a piece-type or widget-type module has a field object with the property `type`. Thanks to [NuktukDev](https://github.com/nuktukdev) for this contribution.
+* Add a default page type value to prevent the dropdown from containing an empty value.
+
+## 3.47.0 (2023-05-05)
+
+### Changes
+
+* Since Node 14 and MongoDB 4.2 have reached their own end-of-support dates,
+we are **no longer supporting them for A3.** Note that our dependency on
+`jsdom` 22 is incompatible with Node 14. Node 16 and Node 18 are both
+still supported. However, because Node 16 reaches its
+end-of-life date quite soon (September), testing and upgrading directly
+to Node 18 is strongly recommended.
+* Updated `sluggo` to version 1.0.0.
+* Updated `jsdom` to version `22.0.0` to address an installation warning about the `word-wrap` module.
+
+### Fixes
+
+* Fix `extendQueries` to use super pattern for every function in builders and methods (and override properties that are not functions).
+
 ## 3.46.0 (2023-05-03)
 
 ### Fixes
@@ -58,7 +105,11 @@ shouldn't close the link dialog etc.
 
 ### Fixes
 
+* Fix various issues on conditional fields that were occurring when adding new widgets with default values or selecting a falsy value in a field that has a conditional field relying on it.  
+Populate new or existing doc instances with default values and add an empty `null` choice to select fields that do not have a default value (required or not) and to the ones configured with dynamic choices.
 * Rich text widgets save more reliably when many actions are taken quickly just before save.
+* Fix an issue in the `oembed` field where the value was kept in memory after cancelling the widget editor, which resulted in saving the value if the widget was nested and the parent widget was saved.  
+Also improve the `oembed` field UX by setting the input as `readonly` rather than `disabled` when fetching the video metadata, in order to avoid losing its focus when typing.
 
 ## 3.44.0 (2023-04-13)
 
@@ -78,11 +129,6 @@ those writing mocha tests of Apostrophe modules.
 ### Fixes
 * Fix child page slug when title is deleted
 
-### Fixes
-
-* Fix various issues on conditional fields that were occurring when adding new widgets with default values or selecting a falsy value in a field that has a conditional field relying on it.  
-Populate new or existing doc instances with default values and add an empty `null` choice to select fields that do not have a default value (required or not) and to the ones configured with dynamic choices.
-
 ## 3.43.0 (2023-03-29)
 
 ### Adds

package/lib/moog-require.js

@@ -77,6 +77,10 @@ module.exports = function(options) {
     }
     if (fs.existsSync(projectLevelPath)) {
       projectLevelDefinition = importFresh(resolveFrom(path.dirname(self.root.filename), projectLevelPath));
+      if (Object.keys(projectLevelDefinition).length === 0) {
+        /* eslint-disable-next-line no-console */
+        console.warn(`⚠️ The file ${projectLevelPath}\ndoes not export anything, did you misspell or forget module.exports?\n`);
+      }
     }
 
     let relativeTo;

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

@@ -26,6 +26,11 @@ module.exports = {
       // titles from. The default behavior is to return the `title` property,
       // but since this is a page we are including the slug as well.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title + ' (' + doc.slug + ')';
       },
       getBrowserData(req) {

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

@@ -1,6 +1,7 @@
 const { SemanticAttributes } = require('@opentelemetry/semantic-conventions');
 const _ = require('lodash');
 const util = require('util');
+const extendQueries = require('./lib/extendQueries');
 
 module.exports = {
   options: {
@@ -472,8 +473,9 @@ module.exports = {
             }
           }
           if (self.extendQueries[name]) {
-            wrap(query.builders, self.extendQueries[name].builders || {});
-            wrap(query.methods, self.extendQueries[name].methods || {});
+            const extendedQueries = self.extendQueries[name](self, query);
+            extendQueries(query.builders, extendedQueries.builders || {});
+            extendQueries(query.methods, extendedQueries.methods || {});
           }
         }
         Object.assign(query, query.methods);
@@ -506,6 +508,26 @@ module.exports = {
       //
       // `query.field` will contain the schema field definition for
       // the relationship the user is attempting to match titles from.
+      getRelationshipQueryBuilderChoicesProjection(query) {
+        const projection = self.getAutocompleteProjection(query);
+
+        return {
+          ...projection,
+          title: 1,
+          type: 1,
+          _id: 1,
+          _url: 1,
+          slug: 1
+        };
+      },
+      // Returns a MongoDB projection object to be used when querying
+      // for this type if all that is needed is a title for display
+      // in an autocomplete menu. Default behavior is to
+      // return only the `title`, `_id` and `slug` properties.
+      // Removing any of these three is not recommended.
+      //
+      // `query.field` will contain the schema field definition for
+      // the relationship the user is attempting to match titles from.
       getAutocompleteProjection(query) {
         return {
           title: 1,
@@ -522,6 +544,11 @@ module.exports = {
       // event start dates and similar information that helps the
       // user distinguish between docs.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title;
       },
       // Used by `@apostrophecms/version` to label changes that
@@ -613,6 +640,12 @@ module.exports = {
       //
       // We don't launder the input here, see the 'autocomplete' route.
       async autocomplete(req, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-autocomplete',
+          'self.autocomplete() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
+
         const _query = query.find(req, {}).sort('search');
         if (query.extendAutocompleteQuery) {
           query.extendAutocompleteQuery(_query);
@@ -2322,8 +2355,14 @@ module.exports = {
               query.and({ $or });
             }
           }
-        }
+        },
 
+        viewContext: {
+          def: null,
+          launder(viewContext) {
+            return [ 'manage', 'relationship' ].includes(viewContext) ? viewContext : null;
+          }
+        }
       },
 
       methods: {
@@ -3073,17 +3112,3 @@ module.exports = {
     };
   }
 };
-
-function wrap(context, extensions) {
-  for (const [ name, fn ] of extensions) {
-    if ((typeof fn) !== 'function') {
-      // Nested structure is allowed
-      context[name] = context[name] || {};
-      return wrap(context[name], fn);
-    }
-    const superMethod = context[name];
-    context[name] = function(...args) {
-      return fn(superMethod, ...args);
-    };
-  }
-}

package/modules/@apostrophecms/doc-type/lib/extendQueries.js

@@ -0,0 +1,21 @@
+module.exports = extendQueries;
+
+function extendQueries(queries, extensions) {
+  for (const [ name, fn ] of Object.entries(extensions)) {
+    if (typeof fn === 'object' && !Array.isArray(fn) && fn !== null) {
+      // Nested structure is allowed
+      queries[name] = queries[name] || {};
+      return extendQueries(queries[name], fn);
+    }
+
+    if (typeof fn !== 'function' || typeof queries[name] !== 'function') {
+      queries[name] = fn;
+      continue;
+    }
+
+    const superMethod = queries[name];
+    queries[name] = function(...args) {
+      return fn(superMethod, ...args);
+    };
+  }
+};

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

@@ -462,6 +462,14 @@ module.exports = {
   },
   extendMethods(self) {
     return {
+      getRelationshipQueryBuilderChoicesProjection(_super, query) {
+        const projection = _super(query);
+
+        return {
+          ...projection,
+          attachment: 1
+        };
+      },
       getBrowserData(_super, req) {
         const data = _super(req);
         data.components.managerModal = 'AposMediaManager';

package/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue

@@ -8,10 +8,14 @@
       <div class="apos-input-wrapper">
         <input
           :class="classes"
-          v-model="next.url" type="url"
+          v-model="next.url"
+          type="url"
           :placeholder="$t(field.placeholder)"
-          :disabled="field.readOnly" :required="field.required"
-          :id="uid" :tabindex="tabindex"
+          :disabled="field.readOnly"
+          :readonly="tempReadOnly"
+          :required="field.required"
+          :id="uid"
+          :tabindex="tabindex"
         >
         <component
           v-if="icon"
@@ -43,10 +47,14 @@ export default {
   data () {
     return {
       next: (this.value && this.value.data)
-        ? this.value.data : {},
+        ? { ...this.value.data } : {},
       oembedResult: {},
       dynamicRatio: '',
-      oembedError: null
+      oembedError: null,
+
+      // This variable will set the input as readonly,
+      // not disabled, in order to avoid losing focus.
+      tempReadOnly: false
     };
   },
   computed: {
@@ -104,7 +112,7 @@ export default {
       this.validateAndEmit();
     },
     async loadOembed () {
-      this.field.readOnly = true;
+      this.tempReadOnly = true;
       this.oembedResult = {};
       this.oembedError = null;
       this.dynamicRatio = '';
@@ -132,7 +140,7 @@ export default {
         this.next.title = '';
         this.next.thumbnail = '';
       } finally {
-        this.field.readOnly = false;
+        this.tempReadOnly = false;
       }
     }
   }

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

@@ -22,6 +22,7 @@ module.exports = {
           type: 'select',
           label: 'apostrophe:type',
           required: true,
+          def: self.options.apos.page.typeChoices[0].name,
           choices: self.options.apos.page.typeChoices.map(function (type) {
             return {
               value: type.name,
@@ -297,6 +298,11 @@ module.exports = {
       // the `title` property, but since this is a page we are including
       // the slug as well.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title + ' (' + doc.slug + ')';
       },
       // `req` determines what the user is eligible to edit, `criteria`

package/modules/@apostrophecms/piece-type/index.js

@@ -26,6 +26,20 @@ module.exports = {
     // publicApiProjection: {
     //   title: 1,
     //   _url: 1,
+    // },
+    // By default the manager modal will get all the pieces fields below + all manager columns
+    // you can enable a projection using
+    // managerApiProjection: {
+    //   _id: 1,
+    //   _url: 1,
+    //   aposDocId: 1,
+    //   aposLocale: 1,
+    //   aposMode: 1,
+    //   docPermissions: 1,
+    //   slug: 1,
+    //   title: 1,
+    //   type: 1,
+    //   visibility: 1
     // }
   },
   fields: {
@@ -182,6 +196,10 @@ module.exports = {
     if (!self.options.name) {
       throw new Error('@apostrophecms/pieces require name option');
     }
+    const badFieldName = Object.keys(self.fields).indexOf('type') !== -1;
+    if (badFieldName) {
+      throw new Error(`The ${self.__meta.name} module contains a forbidden field property name: "type".`);
+    }
     if (!self.options.label) {
       // Englishify it
       self.options.label = _.startCase(self.options.name);
@@ -1063,7 +1081,24 @@ module.exports = {
             return self.apos.permission.can(req, batchOperation.permission, self.name);
           }
           return true;
+
+        });
+      },
+      getManagerApiProjection(req) {
+        if (!self.options.managerApiProjection) {
+          return null;
+        }
+
+        const projection = { ...self.options.managerApiProjection };
+        self.columns.forEach(({ name }) => {
+          const column = (name.startsWith('draft:') || name.startsWith('published:'))
+            ? name.replace(/^(draft|published):/, '')
+            : name;
+
+          projection[column] = 1;
         });
+
+        return projection;
       }
     };
   },
@@ -1092,6 +1127,7 @@ module.exports = {
           editorModal: 'AposDocEditor',
           managerModal: 'AposDocsManager'
         });
+        browserOptions.managerApiProjection = self.getManagerApiProjection(req);
 
         return browserOptions;
       },

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -146,7 +146,9 @@ export default {
       totalPages: 1,
       currentPage: 1,
       filterValues: {},
-      queryExtras: {},
+      queryExtras: {
+        viewContext: this.relationshipField ? 'relationship' : 'manage'
+      },
       holdQueries: false,
       filterChoices: {},
       allPiecesSelection: {
@@ -314,6 +316,10 @@ export default {
       const {
         currentPage, pages, results, choices
       } = await this.request({
+        ...(
+          this.moduleOptions.managerApiProjection &&
+          { project: this.moduleOptions.managerApiProjection }
+        ),
         page: this.currentPage
       });
 

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -435,7 +435,7 @@ module.exports = {
             },
             {
               tag: 'img',
-              attributes: [ 'src' ]
+              attributes: [ 'src', 'alt' ]
             }
           ]
         };

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue

@@ -16,7 +16,6 @@
         :schema="schema"
         :trigger-validation="triggerValidation"
         v-model="docFields"
-        :utility-rail="false"
         :modifiers="formModifiers"
         :key="lastSelectionTime"
         :generation="generation"
@@ -125,11 +124,13 @@ export default {
         }
         const image = this.docFields.data._image[0];
         this.docFields.data.imageId = image && image.aposDocId;
+        this.docFields.data.alt = image && image.alt;
         this.$emit('before-commands');
         this.editor.commands.setImage({
           imageId: this.docFields.data.imageId,
           caption: this.docFields.data.caption,
-          style: this.docFields.data.style
+          style: this.docFields.data.style,
+          alt: this.docFields.data.alt
         });
         this.close();
       });

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -2,7 +2,7 @@
   <div>
     <bubble-menu
       class="bubble-menu"
-      :tippy-options="{ duration: 100, zIndex: 2000 }"
+      :tippy-options="{ maxWidth: 'none', duration: 100, zIndex: 2000 }"
       :editor="editor"
       v-if="editor"
     >
@@ -27,7 +27,8 @@
     </bubble-menu>
     <floating-menu
       class="apos-rich-text-insert-menu" :should-show="showFloatingMenu"
-      :editor="editor" :tippy-options="{ duration: 100, zIndex: 2000 }"
+      :editor="editor"
+      :tippy-options="{ duration: 100, zIndex: 2000 }"
       v-if="editor"
     >
       <div class="apos-rich-text-insert-menu-heading">
@@ -178,10 +179,10 @@ export default {
     },
     autofocus() {
       // Only true for a new rich text widget
-      return !this.stripPlaceholderBrs(this.value.content).length;
+      return !this.value.content.length;
     },
     initialContent() {
-      const content = this.transformNamedAnchors(this.stripPlaceholderBrs(this.value.content));
+      const content = this.transformNamedAnchors(this.value.content);
       if (content.length) {
         return content;
       }
@@ -343,26 +344,12 @@ export default {
         clearTimeout(this.pending);
         this.pending = null;
       }
-      let content = this.editor.getHTML();
-      content = this.restorePlaceholderBrs(content);
+      const content = this.editor.getHTML();
       const widget = this.docFields.data;
       widget.content = content;
       // ... removes need for deep watching in parent
       this.$emit('update', { ...widget });
     },
-    // Restore placeholder BRs for empty paragraphs. ProseMirror adds these
-    // temporarily so the editing experience doesn't break due to contenteditable
-    // issues with empty paragraphs, but strips them on save; however
-    // seeing them while editing creates a WYSIWYG expectation
-    // on the user's part, so we must maintain them
-    restorePlaceholderBrs(html) {
-      return html.replace(/<(p[^>]*)>(\s*)<\/p>/gi, '<$1><br /></p>');
-    },
-    // Strip the placeholder BRs again when populating the editor.
-    // Otherwise they get doubled by ProseMirror
-    stripPlaceholderBrs(html) {
-      return html.replace(/<(p[^>]*)>\s*<br \/>\s*<\/p>/gi, '<$1></p>');
-    },
     // Legacy content may have `id` and `name` attributes on anchor tags
     // but our tiptap anchor extension needs them on a separate `span`, so nest
     // a span to migrate this content for each relevant anchor tag encountered
@@ -569,8 +556,10 @@ function traverseNextNode(node) {
 
   .apos-rich-text-toolbar__inner {
     display: flex;
+    flex-wrap: wrap;
     align-items: stretch;
-    height: 35px;
+    max-width: 100%;
+    height: auto;
     background-color: var(--a-background-primary);
     color: var(--a-text-primary);
     border-radius: var(--a-border-radius);
@@ -710,4 +699,27 @@ function traverseNextNode(node) {
   .apos-rich-text-insert-menu-heading {
     color: var(--a-base-5);
   }
+
+  ::v-deep .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+
+    > :last-child {
+      margin-bottom: 1.75em;
+    }
+  }
+
+  ::v-deep .ProseMirror-gapcursor {
+    position: relative;
+    display: block;
+    height: 20px;
+
+    &:after {
+      width: 1px;
+      height: 20px;
+      border-left: 1px solid #000;
+      border-top: 0 none;
+    }
+  }
 </style>

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue

@@ -33,7 +33,6 @@
           :schema="schema"
           :trigger-validation="triggerValidation"
           v-model="docFields"
-          :utility-rail="false"
           :modifiers="formModifiers"
           :key="lastSelectionTime"
           :generation="generation"

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue

@@ -33,7 +33,6 @@
           :schema="schema"
           :trigger-validation="triggerValidation"
           v-model="docFields"
-          :utility-rail="false"
           :modifiers="formModifiers"
           :key="lastSelectionTime"
           :generation="generation"

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Image.js

@@ -1,8 +1,10 @@
-import { Node } from '@tiptap/core';
+import {
+  mergeAttributes,
+  Node
+} from '@tiptap/core';
 
 export default options => {
   return Node.create({
-
     name: 'image',
 
     addOptions() {
@@ -12,22 +14,51 @@ export default options => {
       };
     },
 
-    inline: true,
+    allowGapCursor: true,
+    atom: true,
+    selectable: true,
+
+    group: 'block',
 
-    group: 'inline',
+    content: 'inline*',
 
     draggable: true,
 
+    isolating: false,
+
     addAttributes() {
       return {
         imageId: {
-          default: null
+          default: null,
+          parseHTML: element => {
+            const src = element.querySelector('img')?.getAttribute('src');
+
+            const components = src.split('/');
+            if (components.length < 2) {
+              return false;
+            }
+
+            const routeName = components.pop();
+            if (routeName !== 'src') {
+              return false;
+            }
+
+            const imageId = components.pop();
+
+            return imageId;
+          }
         },
         caption: {
-          default: ''
+          default: '',
+          parseHTML: element => element.querySelector('figcaption')?.innerText || ''
         },
         style: {
-          default: null
+          default: null,
+          parseHTML: element => element.getAttribute('class')
+        },
+        alt: {
+          default: null,
+          parseHTML: element => element.querySelector('img')?.getAttribute('alt')
         }
       };
     },
@@ -35,72 +66,63 @@ export default options => {
     parseHTML() {
       // <figure>
       //   <img src="/media/cc0-images/elephant-660-480.jpg"
-      //       alt="Elephant at sunset">
+      //     alt="Elephant at sunset">
       //   <figcaption>An elephant at sunset</figcaption>
       // </figure>
       return [
         {
           tag: 'figure',
-          getAttrs: el => {
-            const img = el.querySelector('img');
-            const src = img.getAttribute('src');
-            if (!img || !src) {
-              return false;
-            }
-            const caption = el.querySelector('figcaption');
-            const components = src.split('/');
-            if (components.length < 2) {
-              return false;
-            }
-            const routeName = components.pop();
-            if (routeName !== 'src') {
-              return false;
-            }
-            const imageId = components.pop();
-            const style = el.getAttribute('class');
-            if (!imageId) {
-              return false;
-            }
-            const result = {
-              imageId,
-              style,
-              caption: (caption && caption.innerText) || ''
-            };
-            return result;
-          }
+          contentElement: 'figcaption'
         }
       ];
     },
 
-    addCommands() {
-      return {
-        setImage: options => ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options
-          });
-        }
-      };
-    },
-
     renderHTML({ HTMLAttributes }) {
       return [
         'figure',
-        {
-          class: HTMLAttributes.style || this.options.HTMLAttributes.style
-        },
-        [
-          'img',
+        mergeAttributes(
+          this.options.HTMLAttributes,
           {
-            src: `${apos.modules['@apostrophecms/image'].action}/${HTMLAttributes.imageId}/src`
+            class: HTMLAttributes.style
           }
+        ),
+        [
+          'img',
+          mergeAttributes(
+            HTMLAttributes,
+            {
+              src: `${apos.modules['@apostrophecms/image'].action}/${HTMLAttributes.imageId}/src`,
+              alt: HTMLAttributes.alt,
+              draggable: false,
+              contenteditable: false
+            }
+          )
         ],
         [
           'figcaption',
-          {},
-          HTMLAttributes.caption
+          0
         ]
       ];
+    },
+
+    addCommands() {
+      return {
+        setImage: (attrs) => ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs,
+              content: attrs?.caption
+                ? [ {
+                  type: 'text',
+                  text: attrs.caption
+                } ]
+                : []
+            })
+            .createParagraphNear()
+            .run();
+        }
+      };
     }
   });
 };

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

@@ -1090,7 +1090,7 @@ module.exports = {
           const idsStorage = field.idsStorage;
           const ids = await query.toDistinct(idsStorage);
           const manager = self.apos.doc.getManager(field.withType);
-          const relationshipQuery = manager.find(query.req, { aposDocId: { $in: ids } }).project(manager.getAutocompleteProjection({ field: field }));
+          const relationshipQuery = manager.find(query.req, { aposDocId: { $in: ids } }).project(manager.getRelationshipQueryBuilderChoicesProjection({ field: field }));
           if (field.builders) {
             relationshipQuery.applyBuilders(field.builders);
           }

package/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue

@@ -64,7 +64,6 @@
                     v-if="currentId"
                     :schema="schema"
                     :trigger-validation="triggerValidation"
-                    :utility-rail="false"
                     :following-values="followingValues()"
                     :conditional-fields="conditionalFields()"
                     :value="currentDoc"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue

@@ -61,7 +61,6 @@
               :class="item.open && !alwaysExpand ? 'apos-input-array-inline-item--active' : null"
               v-model="item.schemaInput"
               :trigger-validation="triggerValidation"
-              :utility-rail="false"
               :generation="generation"
               :modifiers="['small', 'inverted']"
               :doc-id="docId"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -13,7 +13,6 @@
           <AposSchema
             :schema="field.schema"
             :trigger-validation="triggerValidation"
-            :utility-rail="false"
             :generation="generation"
             :doc-id="docId"
             v-model="schemaInput"

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -104,7 +104,12 @@ export default {
       }
     },
     triggerValidation: Boolean,
-    utilityRail: Boolean,
+    utilityRail: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
     docId: {
       type: String,
       default() {

package/modules/@apostrophecms/widget-type/index.js

@@ -103,6 +103,10 @@ module.exports = {
     placeholderClass: 'apos-placeholder'
   },
   init(self) {
+    const badFieldName = Object.keys(self.fields).indexOf('type') !== -1;
+    if (badFieldName) {
+      throw new Error(`The ${self.__meta.name} module contains a forbidden field property name: "type".`);
+    }
 
     self.enableBrowserData();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.46.0",
+  "version": "3.48.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "url": "git@github.com:apostrophecms/apostrophe.git"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=16.0.0"
   },
   "keywords": [
     "apostrophe",
@@ -80,7 +80,7 @@
     "i18next-http-middleware": "^3.1.5",
     "import-fresh": "^3.3.0",
     "is-wsl": "^2.2.0",
-    "jsdom": "^17.0.0",
+    "jsdom": "^22.0.0",
     "klona": "^2.0.4",
     "launder": "^1.4.0",
     "lodash": "^4.17.20",
@@ -109,7 +109,7 @@
     "sass": "^1.52.3",
     "sass-loader": "^10.1.1",
     "server-destroy": "^1.0.1",
-    "sluggo": "^0.3.0",
+    "sluggo": "^1.0.0",
     "tinycolor2": "^1.4.2",
     "tough-cookie": "^4.0.0",
     "underscore.string": "^3.3.4",

package/test/pieces-children/pieces-malformed-child.js

@@ -0,0 +1,32 @@
+const t = require('../../test-lib/test.js');
+
+const apiKey = 'this is a test api key';
+
+(async function () {
+  await t.create({
+    root: module,
+
+    modules: {
+      '@apostrophecms/express': {
+        options: {
+          apiKeys: {
+            [apiKey]: {
+              role: 'admin'
+            }
+          }
+        }
+      },
+      malformed: {
+        extend: '@apostrophecms/piece-type',
+        fields: {
+          add: {
+            type: {
+              label: 'Foo',
+              type: 'string'
+            }
+          }
+        }
+      }
+    }
+  });
+})();

package/test/pieces-malformed.js

@@ -0,0 +1,33 @@
+const t = require('../test-lib/test.js');
+const { spawn } = require('child_process');
+const assert = require('assert');
+
+describe('Malformed Pieces', function () {
+  this.timeout(t.timeout);
+  it('should fail to initialize with a schema containing a field named "type"', function (done) {
+    let throwsError = true;
+    const mochaProcess = spawn('node', [ './test/pieces-children/pieces-malformed-child.js' ]);
+
+    mochaProcess.stdout.on('data', (data) => {
+      console.log(`Mocha output: ${data}`);
+
+    });
+
+    mochaProcess.stderr.on('data', (data) => {
+      const errorMsg = data.toString();
+      const errorMatch = errorMsg.match(/(?<error>Error:.*\n)/);
+      if (errorMatch) {
+        throwsError = true;
+        assert.equal(errorMatch.groups.error, 'Error: The malformed module contains a forbidden field property name: "type".\n');
+      } else {
+        throwsError = false;
+      }
+    });
+
+    mochaProcess.on('close', (code) => {
+      assert.equal(code, 1, 'Mocha process exited with status code 0');
+      assert.ok(throwsError, 'Error message not found in stderr');
+      done();
+    });
+  });
+});

package/test/queryBuilders.js

@@ -0,0 +1,225 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert');
+
+describe('Query Builders', function() {
+  this.timeout(t.timeout);
+
+  let apos;
+  after(function() {
+    return t.destroy(apos);
+  });
+
+  before(async function () {
+    apos = await t.create({
+      root: module,
+      modules: {
+        young: {
+          options: {
+            alias: 'young'
+          },
+          extend: '@apostrophecms/piece-type',
+          fields: {
+            add: {
+              age: {
+                label: 'Age',
+                type: 'integer',
+                required: true
+              }
+            }
+          },
+          queries(self, query) {
+            return {
+              builders: {
+                age: {
+                  launder(str) {
+                    return [ 'children', 'adult' ].includes(str) ? str : null;
+                  },
+                  finalize() {
+                    const age = query.get('age');
+
+                    if ([ 'children', 'adults' ].includes(age)) {
+                      const ageCriteria = age === 'children' ? { $lte: 18 } : { $gt: 18 };
+                      query.and({ age: ageCriteria });
+                    }
+                  }
+                }
+              },
+              methods: {
+                async sortByAge() {
+                  await query.finalize();
+
+                  const pipeline = [
+                    { $match: query.get('criteria') },
+                    { $sort: { age: 1 } }
+                  ];
+
+                  const results = await self.apos.doc.db.aggregate(pipeline).toArray();
+
+                  return results;
+                }
+              }
+            };
+          }
+        },
+        person: {
+          extend: 'young',
+          options: {
+            alias: 'person'
+          },
+          extendQueries(self, query) {
+            return {
+              builders: {
+                age: {
+                  def: 'adult',
+                  launder(_super, val) {
+                    const laundered = _super();
+
+                    if (laundered !== null) {
+                      return laundered;
+                    }
+
+                    return val === 'senior' ? val : null;
+                  },
+                  async finalize(_super) {
+                    await _super();
+
+                    const age = query.get('age');
+
+                    if (age === 'seniors') {
+                      query.and({ age: { $gt: 60 } });
+                    }
+                  }
+                }
+              },
+              methods: {
+                async sortByAge(_super) {
+                  assert(typeof _super === 'function');
+
+                  await query.finalize();
+
+                  const pipeline = [
+                    { $match: query.get('criteria') },
+                    { $sort: { age: -1 } }
+                  ];
+
+                  const results = await self.apos.doc.db.aggregate(pipeline).toArray();
+
+                  return results;
+                }
+              }
+            };
+          }
+        }
+      }
+    });
+  });
+
+  it('should insert person pieces and verify age query builder is working', async function() {
+    const req = apos.task.getReq();
+    const persons = getPersons(apos.young);
+    const { insertedCount } = await apos.doc.db.insertMany(persons);
+
+    assert(insertedCount === 6);
+
+    const children = await apos.young.find(req).age('children').toArray();
+    const adults = await apos.young.find(req).age('adults').toArray();
+
+    assert(children.length === 2);
+    children.forEach((child) => {
+      assert(child.age <= 18);
+    });
+
+    assert(adults.length === 4);
+    adults.forEach((adult) => {
+      assert(adult.age > 18);
+    });
+  });
+
+  it('should insert seniors and verify the query builders have been properly extended', async function() {
+    const req = apos.task.getReq();
+    const persons = getPersons(apos.person, true);
+    const { insertedCount } = await apos.doc.db.insertMany(persons);
+
+    assert(insertedCount === 8);
+
+    const children = await apos.person.find(req).age('children').toArray();
+    const adults = await apos.person.find(req).age('adults').toArray();
+    const seniors = await apos.person.find(req).age('seniors').toArray();
+
+    assert(children.length === 2);
+    children.forEach((child) => {
+      assert(child.age <= 18);
+    });
+
+    assert(adults.length === 6);
+    adults.forEach((adult) => {
+      assert(adult.age > 18);
+    });
+
+    assert(seniors.length === 2);
+    seniors.forEach((senior) => {
+      assert(senior.age > 60);
+    });
+  });
+
+  it('should verify that query methods work and can be extende', async function() {
+    const req = apos.task.getReq();
+    const youngSorted = await apos.young.find(req).age('adults').sortByAge();
+    assert(youngSorted[0].age === 25);
+    assert(youngSorted[1].age === 32);
+    assert(youngSorted[2].age === 50);
+    assert(youngSorted[3].age === 58);
+
+    const personsSorted = await apos.person.find(req).age('adults').sortByAge();
+    assert(personsSorted[0].age === 80);
+    assert(personsSorted[1].age === 72);
+    assert(personsSorted[2].age === 58);
+    assert(personsSorted[3].age === 50);
+    assert(personsSorted[4].age === 32);
+  });
+});
+
+function getPersons(instance, withSeniors = false) {
+  const moduleName = instance.__meta.name;
+  return [
+    {
+      title: 'Jean',
+      age: 32
+    },
+    {
+      title: 'Julie',
+      age: 25
+    },
+    {
+      title: 'Victor',
+      age: 14
+    },
+    {
+      title: 'Marc',
+      age: 58
+    },
+    {
+      title: 'Hector',
+      age: 7
+    },
+    {
+      title: 'Marie',
+      age: 50
+    },
+    ...withSeniors ? [
+      {
+        title: 'Jules',
+        age: 72
+      },
+      {
+        title: 'Renée',
+        age: 80
+      }
+    ] : []
+  ].map((p, i) => ({
+    _id: `${moduleName}${i}`,
+    ...instance.newInstance(),
+    slug: `${moduleName}-${p.title.toLowerCase()}`,
+    ...p
+  }));
+}

package/test/widgets-children/widgets-malformed-child.js

@@ -0,0 +1,32 @@
+const t = require('../../test-lib/test.js');
+
+const apiKey = 'this is a test api key';
+
+(async function () {
+  await t.create({
+    root: module,
+
+    modules: {
+      '@apostrophecms/express': {
+        options: {
+          apiKeys: {
+            [apiKey]: {
+              role: 'admin'
+            }
+          }
+        }
+      },
+      malformed: {
+        extend: '@apostrophecms/widget-type',
+        fields: {
+          add: {
+            type: {
+              label: 'Foo',
+              type: 'string'
+            }
+          }
+        }
+      }
+    }
+  });
+})();

package/test/widgets-malformed.js

@@ -0,0 +1,34 @@
+const t = require('../test-lib/test.js');
+const { spawn } = require('child_process');
+const assert = require('assert');
+
+describe('Malformed Widgets', function () {
+  this.timeout(t.timeout);
+
+  it('should fail to initialize with a schema containing a field named "type"', function (done) {
+    let throwsError = true;
+    const mochaProcess = spawn('node', [ './test/widgets-children/widgets-malformed-child.js' ]);
+
+    mochaProcess.stdout.on('data', (data) => {
+      console.log(`Mocha output: ${data}`);
+
+    });
+
+    mochaProcess.stderr.on('data', (data) => {
+      const errorMsg = data.toString();
+      const errorMatch = errorMsg.match(/(?<error>Error:.*\n)/);
+      if (errorMatch) {
+        throwsError = true;
+        assert.equal(errorMatch.groups.error, 'Error: The malformed module contains a forbidden field property name: "type".\n');
+      } else {
+        throwsError = false;
+      }
+    });
+
+    mochaProcess.on('close', (code) => {
+      assert.equal(code, 1, 'Mocha process exited with status code 0');
+      assert.ok(throwsError, 'Error message not found in stderr');
+      done();
+    });
+  });
+});