apostrophe 3.45.0 → 3.46.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 3.46.0 (2023-05-03)
+
+### Fixes
+
+* Adding or editing a piece no longer immediately refreshes the main content area if a widget editor is open. This prevents interruption of the widget editing process
+when working with the `@apostrophecms/ai-helper` module, and also helps in other situations.
+* Check that `e.doc` exists when handling `content-changed` event.
+* Require updated `uploadfs` version with no dependency warnings.
+
+### Adds
+
+* Allow sub-schema fields (array and object) to follow parent schema fields using the newly introduced `following: '<parentField'` syntax, where the starting `<` indicates the parent level. For example `<parentField` follows a field in the parent level, `<<grandParentField` follows a field in the grandparent level, etc. The change is fully backward compatible with the current syntax for following fields from the same schema level.
+
+### Changes
+
+* Debounce search to prevent calling search on every key stroke in the manager modal.
+* Various size and spacing adjustments in the expanded Add Content modal UI
+
+## 3.45.1 (2023-04-28)
+
+### Fixes
+
+* Added missing styles to ensure consistent presentation of the rich text insert menu.
+* Fixed a bug in which clicking on an image in the media manager would close the "insert
+image" dialog box.
+* Update `html-to-text` package to the latest major version.
+
 ## 3.45.0 (2023-04-27)
 
 ### Adds

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

@@ -363,6 +363,7 @@ export default {
       if (!this.widgetIsContextual(widget.type)) {
         const componentName = this.widgetEditorComponent(widget.type);
         apos.area.activeEditor = this;
+        apos.bus.$on('apos-refreshing', cancelRefresh);
         const result = await apos.modal.execute(componentName, {
           value: widget,
           options: this.widgetOptionsByType(widget.type),
@@ -370,6 +371,7 @@ export default {
           docId: this.docId
         });
         apos.area.activeEditor = null;
+        apos.bus.$off('apos-refreshing', cancelRefresh);
         if (result) {
           return this.update(result);
         }
@@ -593,6 +595,9 @@ export default {
   }
 };
 
+function cancelRefresh(refreshOptions) {
+  refreshOptions.refresh = false;
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -198,7 +198,7 @@ export default {
 
 .apos-widget-group {
   &:not(:last-of-type) {
-    margin-bottom: 30px;
+    margin-bottom: 20px;
   }
 
   .apos-widget__preview {
@@ -206,8 +206,9 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
     height: 135px;
-    border: 1px solid var(--a-base-7);
+    outline: 1px solid var(--a-base-7);
     border-radius: var(--a-border-radius);
     background-color: var(--a-base-10);
   }
@@ -221,7 +222,7 @@ export default {
   &--3-columns {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
+    gap: 15px 10px;
     .apos-widget__preview {
       height: 89px;
     }
@@ -230,7 +231,7 @@ export default {
   &--4-columns {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 5px;
+    gap: 15px 5px;
     .apos-widget__preview {
       height: 66px;
     }
@@ -289,8 +290,18 @@ export default {
 .apos-widget-group__label,
 .apos-widget__help {
   @include type-base;
+  margin-top: 0;
   line-height: var(--a-line-tall);
-  color: var(--a-base-4);
   text-align: left;
 }
+
+.apos-widget__help {
+  color: var(--a-base-2);
+  font-size: var(--a-type-smaller);
+}
+
+.apos-widget__label {
+  line-height: 1.2;
+  margin-bottom: 5px;
+}
 </style>

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

@@ -775,7 +775,7 @@ export default {
       window.localStorage.setItem(this.savePreferenceName, pref);
     },
     onContentChanged(e) {
-      if (this.original?._id !== e.doc._id) {
+      if (!e.doc || this.original?._id !== e.doc._id) {
         return;
       }
       if (e.doc.type !== this.docType) {

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

@@ -1,5 +1,5 @@
 const nodemailer = require('nodemailer');
-const htmlToText = require('html-to-text');
+const { htmlToText } = require('html-to-text');
 const _ = require('lodash');
 
 // ## Options
@@ -26,18 +26,61 @@ module.exports = {
       async emailForModule(req, templateName, data, options, module) {
         const transport = self.getTransport();
         const html = await module.render(req, templateName, data);
-        const text = htmlToText.fromString(html, {
-          format: {
-            heading: function (elem, fn, options) {
-              const h = fn(elem.children, options);
-              const split = h.split(/(\[.*?\])/);
-              return split.map(function (s) {
-                if (s.match(/^\[.*\]$/)) {
-                  return s;
-                } else {
-                  return s.toUpperCase();
-                }
-              }).join('') + '\n';
+        const text = htmlToText(html, {
+          selectors: [
+            {
+              selector: 'a',
+              options: { hideLinkHrefIfSameAsText: true }
+            },
+            {
+              selector: 'h1',
+              format: 'customHeading'
+            },
+            {
+              selector: 'h2',
+              format: 'customHeading'
+            },
+            {
+              selector: 'h3',
+              format: 'customHeading'
+            },
+            {
+              selector: 'h4',
+              format: 'customHeading'
+            },
+            {
+              selector: 'h5',
+              format: 'customHeading'
+            },
+            {
+              selector: 'h6',
+              format: 'customHeading'
+            }
+          ],
+          formatters: {
+            // Custom heading formatter, based on the core heading but
+            // no uppercase inside "[ ]" blocks.
+            customHeading: function (elem, walk, builder, formatOptions) {
+              builder.openBlock({ leadingLineBreaks: formatOptions.leadingLineBreaks || 2 });
+              if (formatOptions.uppercase !== false) {
+                // Keep track of [ and ] (no nested support)
+                let ignoreUpper = false;
+                builder.pushWordTransform(str => {
+                  if (str.trim().startsWith('[')) {
+                    ignoreUpper = true;
+                  }
+                  const word = ignoreUpper ? str : str.toUpperCase();
+                  if (str.trim().endsWith(']')) {
+                    ignoreUpper = false;
+                  }
+                  return word;
+                });
+                walk(elem.children, builder);
+                builder.popWordTransform();
+              } else {
+                walk(elem.children, builder);
+              }
+              builder.closeBlock({ trailingLineBreaks: formatOptions.trailingLineBreaks || 2 });
             }
           }
         });

package/modules/@apostrophecms/modal/ui/apos/apps/AposModals.js

@@ -41,7 +41,20 @@ export default function() {
       // or el2 is not a modal, it is treated as its DOM
       // parent modal, or as `document`. If el1 has no
       // parent modal this method always returns false.
+      //
+      // If el1 is no longer connected to the DOM then it
+      // is also considered to be "on top" e.g. not something
+      // that should concern `v-click-outside-element` and
+      // similar functionality. This is necessary because
+      // sometimes Vue removes elements from the DOM before
+      // we can examine their relationships.
       onTopOf(el1, el2) {
+        if (!el1.isConnected) {
+          // If el1 is no longer in the DOM we can't make a proper determination,
+          // returning true prevents unwanted things like click-outside-element
+          // events from firing
+          return true;
+        }
         if (!el1.matches('[data-apos-modal]')) {
           el1 = el1.closest('[data-apos-modal]') || document;
         }

package/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js

@@ -140,13 +140,21 @@ export default {
       const fields = this.getFieldsByCategory(followedByCategory);
 
       const followingValues = {};
+      const parentFollowing = {};
+      for (const [ key, val ] of Object.entries(this.parentFollowingValues || {})) {
+        parentFollowing[`<${key}`] = val;
+      }
 
       for (const field of fields) {
         if (field.following) {
           const following = Array.isArray(field.following) ? field.following : [ field.following ];
           followingValues[field.name] = {};
           for (const name of following) {
-            followingValues[field.name][name] = this.getFieldValue(name);
+            if (name.startsWith('<')) {
+              followingValues[field.name][name] = parentFollowing[name];
+            } else {
+              followingValues[field.name][name] = this.getFieldValue(name);
+            }
           }
         }
       }

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

@@ -73,7 +73,7 @@
             :checked-count="checked.length"
             :batch-operations="moduleOptions.batchOperations"
             @select-click="selectAll"
-            @search="search"
+            @search="onSearch"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
@@ -119,6 +119,7 @@
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
+import { debounce } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposDocsManager',
@@ -209,6 +210,9 @@ export default {
     }
   },
   created() {
+    const DEBOUNCE_TIMEOUT = 500;
+    this.onSearch = debounce(this.search, DEBOUNCE_TIMEOUT);
+
     this.moduleOptions.filters.forEach(filter => {
       this.filterValues[filter.name] = filter.def;
       if (!filter.choices) {

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

@@ -678,6 +678,7 @@ function traverseNextNode(node) {
     border: 1px solid var(--a-base-8);
     color: var(--a-base-1);
     font-family: var(--a-family-default);
+    font-size: var(--a-type-base);
   }
 
   .apos-rich-text-insert-menu-item {
@@ -694,6 +695,11 @@ function traverseNextNode(node) {
     flex-direction: column;
     h4, p {
       margin: 4px;
+      font-family: var(--a-family-default);
+      font-size: var(--a-type-base);
+    }
+    h4 {
+      font-weight: bold;
     }
   }
   .apos-rich-text-insert-menu-icon {

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

@@ -1241,6 +1241,9 @@ module.exports = {
         if (fieldType.validate) {
           fieldType.validate(field, options, warn, fail);
         }
+        // Ancestors hoisting should happen AFTER the validation recursion,
+        // so that ancestors are processed as well.
+        self.hoistFollowingFieldsToParent(field, parent);
         function fail(s) {
           throw new Error(format(s));
         }
@@ -1261,6 +1264,28 @@ module.exports = {
         }
       },
 
+      // If a field has a following property and a parent,
+      // hoist that property values to the parent,
+      // if they start with `<`.
+      hoistFollowingFieldsToParent(field, parent) {
+        if (!parent || !field.following) {
+          return;
+        }
+        const following = typeof field.following === 'string'
+          ? [ field.following ]
+          : field.following;
+        const parentFollowing = typeof parent.following === 'string'
+          ? [ parent.following ]
+          : parent.following;
+        const hoistFollowing = following
+          .filter(f => f.startsWith('<'))
+          .map(f => f.slice(1));
+        parent.following = _.uniq([
+          ...(parentFollowing || []),
+          ...hoistFollowing
+        ]);
+      },
+
       // Recursively register the given schema, giving each field an _id and making provision to be able to
       // fetch its definition via apos.schema.getFieldById().
       //

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

@@ -114,6 +114,10 @@ export default {
     docId: {
       type: String,
       default: null
+    },
+    parentFollowingValues: {
+      type: Object,
+      default: null
     }
   },
   emits: [ 'modal-result', 'safe-close' ],

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

@@ -141,6 +141,7 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposInputFollowingMixin.js';
 import cuid from 'cuid';
 import { klona } from 'klona';
 import { get } from 'lodash';
@@ -149,7 +150,7 @@ import draggable from 'vuedraggable';
 export default {
   name: 'AposInputArray',
   components: { draggable },
-  mixins: [ AposInputMixin ],
+  mixins: [ AposInputMixin, AposInputFollowingMixin ],
   props: {
     generation: {
       type: Number,
@@ -288,7 +289,8 @@ export default {
         field: this.field,
         items: this.next,
         serverError: this.serverError,
-        docId: this.docId
+        docId: this.docId,
+        parentFollowingValues: this.followingValues
       });
       if (result) {
         this.next = result;
@@ -341,18 +343,7 @@ export default {
       });
     },
     getFollowingValues(item) {
-      const followingValues = {};
-      for (const field of this.field.schema) {
-        if (field.following) {
-          const following = Array.isArray(field.following) ? field.following : [ field.following ];
-          followingValues[field.name] = {};
-          for (const name of following) {
-            followingValues[field.name][name] = item.schemaInput.data[name];
-          }
-        }
-      }
-
-      return followingValues;
+      return this.computeFollowingValues(item.schemaInput.data);
     }
   }
 };

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

@@ -17,6 +17,7 @@
             :generation="generation"
             :doc-id="docId"
             v-model="schemaInput"
+            :following-values="followingValuesWithParent"
             ref="schema"
           />
         </div>
@@ -27,10 +28,11 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposInputFollowingMixin.js';
 
 export default {
   name: 'AposInputObject',
-  mixins: [ AposInputMixin ],
+  mixins: [ AposInputMixin, AposInputFollowingMixin ],
   props: {
     generation: {
       type: Number,
@@ -56,6 +58,11 @@ export default {
       next
     };
   },
+  computed: {
+    followingValuesWithParent() {
+      return this.computeFollowingValues(this.schemaInput.data);
+    }
+  },
   watch: {
     schemaInput: {
       deep: true,

package/modules/@apostrophecms/schema/ui/apos/mixins/AposInputFollowingMixin.js

@@ -0,0 +1,34 @@
+/**
+ * Provides followingValues computation for fields having
+ * sub-schema (array, object).
+ */
+
+export default {
+  methods: {
+    // Accept a `data` object with field values and return an object
+    // of the following values for each field of the underlying schema.
+    computeFollowingValues(data) {
+      const followingValues = {};
+      const parentFollowing = {};
+      for (const [ key, val ] of Object.entries(this.followingValues || {})) {
+        parentFollowing[`<${key}`] = val;
+      }
+
+      for (const field of this.field.schema) {
+        if (field.following) {
+          const following = Array.isArray(field.following) ? field.following : [ field.following ];
+          followingValues[field.name] = {};
+          for (const name of following) {
+            if (name.startsWith('<')) {
+              followingValues[field.name][name] = parentFollowing[name];
+            } else {
+              followingValues[field.name][name] = data[name];
+            }
+          }
+        }
+      }
+
+      return followingValues;
+    }
+  }
+};

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -64,6 +64,7 @@
   // Type Sizes
   --a-type-tiny: 9px;
   --a-type-small: 10px;
+  --a-type-smaller: 11px;
   --a-type-base: 12px;
   --a-type-label: 13px;
   --a-type-large: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.45.0",
+  "version": "3.46.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -75,7 +75,7 @@
     "fs-extra": "^7.0.1",
     "glob": "^5.0.15",
     "he": "^0.5.0",
-    "html-to-text": "^5.1.1",
+    "html-to-text": "^9.0.5",
     "i18next": "^20.3.2",
     "i18next-http-middleware": "^3.1.5",
     "import-fresh": "^3.3.0",
@@ -113,7 +113,7 @@
     "tinycolor2": "^1.4.2",
     "tough-cookie": "^4.0.0",
     "underscore.string": "^3.3.4",
-    "uploadfs": "^1.17.1",
+    "uploadfs": "^1.22.1",
     "v-tooltip": "^2.0.3",
     "vue": "^2.6.14",
     "vue-advanced-cropper": "^1.10.1",

package/test/data/fpw_email_mock.js

@@ -0,0 +1,30 @@
+module.exports = {
+  html: '<h4>[test string] Resetting your [ another test string ] password on localhost</h4>\n' +
+    '<p>Hello cy_admin,</p>\n' +
+    '<p>You are receiving this email because a request to reset your password was made on localhost.</p>\n' +
+    '<p>If that is your wish, please follow this link to complete the password reset process:</p>\n' +
+    '<p><a href="http://localhost:3000/login?reset=clh0f780t0009ezh97wtu03d0&amp;email=admin%40example.com">http://localhost:3000/login?reset=clh0f780t0009ezh97wtu03d0&amp;email=admin%40example.com</a></p>\n' +
+    '<p>\n' +
+    '  If you did not request to reset your password, please delete and ignore this email. Someone else may have entered\n' +
+    '  your email address in error.\n' +
+    '</p>\n',
+  text: '[test string] RESETTING YOUR [ another test string ] PASSWORD ON LOCALHOST\n' +
+    '\n' +
+    'Hello cy_admin,\n' +
+    '\n' +
+    'You are receiving this email because a request to reset your password was made\n' +
+    'on localhost.\n' +
+    '\n' +
+    'If that is your wish, please follow this link to complete the password reset\n' +
+    'process:\n' +
+    '\n' +
+    'http://localhost:3000/login?reset=clh0f780t0009ezh97wtu03d0&email=admin%40example.com\n' +
+    // Improved link formatting via hideLinkHrefIfSameAsText option
+    // '[http://localhost:3000/login?reset=clh0f780t0009ezh97wtu03d0&email=admin%40example.com]\n' +
+    '\n' +
+    'If you did not request to reset your password, please delete and ignore this\n' +
+    'email. Someone else may have entered your email address in error.',
+  from: 'noreply@example.com',
+  to: 'admin@example.com',
+  subject: 'Your request to reset your password on localhost'
+};

package/test/email.js

@@ -1,5 +1,5 @@
 const t = require('../test-lib/test.js');
-const assert = require('assert');
+const assert = require('assert').strict;
 let apos;
 
 describe('Email', function() {
@@ -52,4 +52,35 @@ describe('Email', function() {
     assert(message.match(/To: recipient@example\.com/));
     assert(message.match(/\[http:\/\/example\.com\/\]/));
   });
+
+  it('should convert html to text', async function () {
+    await t.destroy(apos);
+    apos = await t.create({
+      root: module
+    });
+
+    const mockEmail = require('./data/fpw_email_mock.js');
+    const mockTransport = () => ({
+      sendMail: function (args) {
+        return Promise.resolve(args);
+      }
+    });
+    const mockModule = {
+      options: { email: { from: mockEmail.from } },
+      render: async () => mockEmail.html
+    };
+    apos.modules['@apostrophecms/email'].getTransport = mockTransport;
+
+    const result = await apos.modules['@apostrophecms/email'].emailForModule(
+      apos.task.getReq(), // req
+      'anyTemplate', // templateName
+      {}, // data
+      {
+        to: mockEmail.to,
+        subject: mockEmail.subject
+      }, // options
+      mockModule // module
+    );
+    assert.equal(result.text, mockEmail.text);
+  });
 });

package/test/follow-ancestors.js

@@ -0,0 +1,165 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert');
+
+describe('Schema - follow ancestor fields', function() {
+
+  let apos;
+  this.timeout(t.timeout);
+  this.slow(2000);
+
+  beforeEach(async function() {
+    return t.destroy(apos);
+  });
+
+  after(async function() {
+    return t.destroy(apos);
+  });
+
+  it('should follow a parent field in array and object', async function() {
+    apos = await t.create({
+      root: module,
+      modules: {
+        household: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'household'
+          },
+          fields: {
+            add: {
+              petPreference: {
+                type: 'select',
+                label: 'Pet Preference',
+                choices: [
+                  {
+                    value: 'cats',
+                    label: 'Cats'
+                  },
+                  {
+                    value: 'dogs',
+                    label: 'Dogs'
+                  }
+                ],
+                required: true
+              },
+              pets: {
+                type: 'array',
+                label: 'Pets',
+                fields: {
+                  add: {
+                    name: {
+                      type: 'string',
+                      label: 'Name',
+                      // Follow one level up
+                      following: [ '<petPreference' ]
+                    }
+                  }
+                }
+              },
+              favoritePet: {
+                type: 'object',
+                label: 'Favorite Pet',
+                fields: {
+                  add: {
+                    name: {
+                      type: 'string',
+                      label: 'Name',
+                      // Follow one level up
+                      following: [ '<petPreference' ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    const schema = apos.modules.household.schema;
+    const petField = schema.find(field => field.name === 'pets');
+    const favPetField = schema.find(field => field.name === 'favoritePet');
+    assert(petField);
+    assert.deepEqual(petField.following, [ 'petPreference' ]);
+    assert(favPetField);
+    assert.deepEqual(favPetField.following, [ 'petPreference' ]);
+  });
+
+  it('should follow a grand parent field in array and object', async function() {
+    apos = await t.create({
+      root: module,
+      modules: {
+        household: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'household'
+          },
+          fields: {
+            add: {
+              petPreference: {
+                type: 'select',
+                label: 'Pet Preference',
+                choices: [
+                  {
+                    value: 'cats',
+                    label: 'Cats'
+                  },
+                  {
+                    value: 'dogs',
+                    label: 'Dogs'
+                  }
+                ],
+                required: true
+              },
+              rooms: {
+                type: 'array',
+                label: 'Rooms',
+                fields: {
+                  add: {
+                    pets: {
+                      type: 'array',
+                      label: 'Pets',
+                      fields: {
+                        add: {
+                          name: {
+                            type: 'string',
+                            label: 'Name',
+                            // Follow two levels up
+                            following: [ '<<petPreference' ]
+                          }
+                        }
+                      }
+                    },
+                    favoritePet: {
+                      type: 'object',
+                      label: 'Favorite Pet',
+                      fields: {
+                        add: {
+                          name: {
+                            type: 'string',
+                            label: 'Name',
+                            // Follow two levels up
+                            following: [ '<<petPreference' ]
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    const schema = apos.modules.household.schema;
+    const rooms = schema.find(field => field.name === 'rooms');
+    assert(rooms);
+    assert.deepEqual(rooms.following, [ 'petPreference' ]);
+
+    const petField = rooms.schema.find(field => field.name === 'pets');
+    const favPetField = rooms.schema.find(field => field.name === 'favoritePet');
+    assert(petField);
+    assert.deepEqual(petField.following, [ '<petPreference' ]);
+    assert(favPetField);
+    assert.deepEqual(favPetField.following, [ '<petPreference' ]);
+  });
+});