apostrophe 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.5.0 - 2021-09-23
+
+### Fixes
+
+* Pinned dependency on `vue-material-design-icons` to fix `apos-build.js` build error in production.
+* The file size of uploaded media is visible again when selected in the editor, and media information such as upload date, dimensions and file size is now properly localized.
+* Fixes moog error messages to reflect the recommended pattern of customization functions only taking `self` as an argument.
+* Rich Text widgets now instantiate with a valid element from the `styles` option rather than always starting with an unclassed `<p>` tag.
+* Since version 3.2.0, apostrophe modules to be loaded via npm must appear as explicit npm dependencies of the project. This is a necessary security and stability improvement, but it was slightly too strict. Starting with this release, if the project has no `package.json` in its root directory, the `package.json` in the closest ancestor directory is consulted.
+* Fixes a bug where having no project modules directory would throw an error. This is primarily a concern for module unit tests where there are no additional modules involved.
+* `css-loader` now ignores `url()` in css files inside `assets` so that paths are left intact, i.e. `url(/images/file.svg)` will now find a static file at `/public/images/file.svg` (static assets in `/public` are served by `express.static`). Thanks to Matic Tersek.
+* Restored support for clicking on a "foreign" area, i.e. an area displayed on the page whose content comes from a piece, in order to edit it in an appropriate way.
+* Apostrophe module aliases and the data attached to them are now visible immediately to `ui/src/index.js` JavaScript code, i.e. you can write `apos.alias` where `alias` matches the `alias` option configured for that module. Previously one had to write `apos.modules['module-name']` or wait until next tick. However, note that most modules do not push any data to the browser when a user is not logged in. You can do so in a custom module by calling `self.enableBrowserData('public')` from `init` and implementing or extending the `getBrowserData(req)` method (note that page, piece and widget types already have one, so it is important to extend in those cases).
+* `options.testModule` works properly when implementing unit tests for an npm module that is namespaced.
+
+### Changes
+
+* Cascade grouping (e.g., grouping fields) will now concatenate a group's field name array with the field name array of an existing group of the same name. Put simply, if a new piece module adds their custom fields to a `basics` group, that field will be added to the default `basics` group fields. Previously the new group would have replaced the old, leaving inherited fields in the "Ungrouped" section.
+
+### Adds
+
+* Rich Text widget's styles support a `def` property for specifying the default style the editor should instantiate with.
+* A more helpful error message if a field of type `area` is missing its `options` property.
+
 ## 3.4.1 - 2021-09-13
 
 No changes. Publishing to correctly mark the latest 3.x release as "latest" in npm.
@@ -8,6 +32,7 @@ No changes. Publishing to correctly mark the latest 3.x release as "latest" in n
 
 ### Security
 
+* Changing a user's password or marking their account as disabled now immediately terminates any active sessions or bearer tokens for that user. Thanks to Daniel Elkabes for pointing out the issue. To ensure all sessions have the necessary data for this, all users logged in via sessions at the time of this upgrade will need to log in again.
 * Users with permission to upload SVG files were previously able to do so even if they contained XSS attacks. In Apostrophe 3.x, the general public so far never has access to upload SVG files, so the risk is minor but could be used to phish access from an admin user by encouraging them to upload a specially crafted SVG file. While Apostrophe typically displays SVG files using the `img` tag, which ignores XSS vectors, an XSS attack might still be possible if the image were opened directly via the Apostrophe media library's convenience link for doing so. All SVG uploads are now sanitized via DOMPurify to remove XSS attack vectors. In addition, all existing SVG attachments not already validated are passed through DOMPurify during a one-time migration.
 
 ### Fixes
@@ -34,12 +59,14 @@ No changes. Publishing to correctly mark the latest 3.x release as "latest" in n
 * Lints module names for `apostrophe-` prefixes even if they don't have a module directory (e.g., only in `app.js`).
 * Starts all `warnDev` messages with a line break and warning symbol (⚠️) to stand out in the console.
 * `apos.util.onReady` aliases `apos.util.onReadyAndRefresh` for brevity. The `apos.util.onReadyAndRefresh` method name will be deprecated in the next major version.
+* Adds a developer setting that applies a margin between parent and child areas, allowing developers to change the default spacing in nested areas.
 
 ### Changes
 
 * Removes the temporary `trace` method from the `@apostrophecms/db` module.
 * Beginning with this release, the `apostrophe:modulesReady` event has been renamed `apostrophe:modulesRegistered`, and the `apostrophe:afterInit` event has been renamed `apostrophe:ready`. This better reflects their actual roles. The old event names are accepted for backwards compatibility. See the documentation for more information.
 * Only autofocuses rich text editors when they are empty.
+* Nested areas now have a vertical margin applied when editing, allowing easier access to the parent area's controls.
 
 ## 3.3.1 - 2021-09-01
 

package/deploy-test-count

@@ -1 +1 @@
-2
+6

package/index.js

@@ -254,6 +254,8 @@ module.exports = async function(options) {
   // when options.testModule is true. There must be a
   // test/ or tests/ subdir of the module containing
   // a test.js file that runs under mocha via devDependencies.
+  // If `options.testModule` is a string it will be used as a
+  // namespace for the test module.
 
   function testModule() {
     if (!options.testModule) {
@@ -277,9 +279,17 @@ module.exports = async function(options) {
     if (testDir === moduleDir) {
       throw new Error('Test file must be in test/ or tests/ subdirectory of module');
     }
+
+    const pkgName = require(`${moduleDir}/package.json`).name;
+    let pkgNamespace = '';
+    if (pkgName.includes('/')) {
+      const parts = pkgName.split('/');
+      pkgNamespace = '/' + parts.slice(0, parts.length - 1).join('/');
+    }
+
     if (!fs.existsSync(testDir + '/node_modules')) {
-      fs.mkdirSync(testDir + '/node_modules');
-      fs.symlinkSync(moduleDir, testDir + '/node_modules/' + require('path').basename(moduleDir), 'dir');
+      fs.mkdirSync(testDir + '/node_modules' + pkgNamespace, { recursive: true });
+      fs.symlinkSync(moduleDir, testDir + '/node_modules/' + pkgName, 'dir');
     }
 
     // Not quite superfluous: it'll return self.root, but
@@ -349,6 +359,11 @@ module.exports = async function(options) {
         validSteps.push(step.name);
       }
     }
+
+    if (!fs.existsSync(self.localModules)) {
+      return;
+    }
+
     const dirs = fs.readdirSync(self.localModules);
     for (const dir of dirs) {
       if (dir.match(/^@/)) {

package/lib/moog-require.js

@@ -166,10 +166,25 @@ module.exports = function(options) {
     // Even if the package exists in node_modules it might just be a
     // sub-dependency due to npm/yarn flattening, which means we could be
     // confused by an unrelated npm module with the same name as an Apostrophe
-    // module unless we verify it is a real project-level dependency
+    // module unless we verify it is a real project-level dependency. However
+    // if no package.json at all exists at project level we do search up the
+    // tree until we find one to accommodate patterns like `src/app.js`
     if (!self.validPackages) {
-      const info = JSON.parse(fs.readFileSync(`${path.dirname(self.root.filename)}/package.json`, 'utf8'));
-      self.validPackages = new Set([ ...Object.keys(info.dependencies || {}), ...Object.keys(info.devDependencies || {}) ]);
+      const initialFolder = path.dirname(self.root.filename);
+      let folder = initialFolder;
+      while (true) {
+        const file = `${folder}/package.json`;
+        if (fs.existsSync(file)) {
+          const info = JSON.parse(fs.readFileSync(file, 'utf8'));
+          self.validPackages = new Set([ ...Object.keys(info.dependencies || {}), ...Object.keys(info.devDependencies || {}) ]);
+          break;
+        } else {
+          folder = path.dirname(folder);
+          if (!folder.length) {
+            throw new Error(`package.json was not found in ${initialFolder} or any of its parent folders.`);
+          }
+        }
+      }
     }
     if (!self.validPackages.has(type)) {
       return null;

package/lib/moog.js

@@ -142,8 +142,8 @@ module.exports = function(options) {
 
     const upgradeHints = {
       construct: 'in Apostrophe 3.x, "construct" has been replaced with "methods", "routes", "apiRoutes", etc.',
-      beforeConstruct: 'in Apostrophe 3.x, "beforeConstruct" has been replaced with "beforeSuperClass". It takes (self, options) and should be solely concerned with modifying the options before the base class sees them. It must be synchronous. Check out the new fields section, you might not need beforeSuperClass.',
-      afterConstruct: 'in Apostrophe 3.x, "afterConstruct" has been replaced with "init". It takes (self, options) and may be an async function.'
+      beforeConstruct: 'in Apostrophe 3.x, "beforeConstruct" has been replaced with "beforeSuperClass". It takes (self) and should be solely concerned with modifying the options before the base class sees them. It must be synchronous. Check out the new fields section, you might not need beforeSuperClass.',
+      afterConstruct: 'in Apostrophe 3.x, "afterConstruct" has been replaced with "init". It takes (self) and may be an async function.'
     };
 
     for (const step of steps) {
@@ -194,15 +194,26 @@ module.exports = function(options) {
             const groups = klona(that[`${cascade}Groups`]);
             for (const value of Object.values(properties.group)) {
               for (const field of value.fields || []) {
-                for (const value of Object.values(groups)) {
-                  if (value.fields) {
-                    if (value.fields.includes(field)) {
-                      value.fields = value.fields.filter(_field => _field !== field);
+                // Remove fields from existing groups if they're added to a new
+                // group.
+                for (const val of Object.values(groups)) {
+                  if (val.fields) {
+                    if (val.fields.includes(field)) {
+                      val.fields = val.fields.filter(_field => _field !== field);
                     }
                   }
                 }
               }
             }
+
+            // Combine groups of the same name now that inherited groups are
+            // filtered
+            for (const [ key, value ] of Object.entries(properties.group)) {
+              if (groups[key] && Array.isArray(groups[key].fields)) {
+                value.fields = groups[key].fields.concat(value.fields);
+              }
+            }
+
             that[`${cascade}Groups`] = {
               ...groups,
               ...klona(properties.group)
@@ -289,14 +300,14 @@ module.exports = function(options) {
             };
           }
           if ((typeof step[keyword]) !== 'function') {
-            throw stepError(step, `${keyword} must be a function that takes (self, options) and returns an object`);
+            throw stepError(step, `${keyword} must be a function that takes (self) and returns an object`);
           }
           _.merge(context, step[keyword](that, options));
         }
         const extend = getExtendKey(keyword);
         if (step[extend]) {
           if ((typeof step[extend]) !== 'function') {
-            throw stepError(step, `${extend} must be a function that takes (self, options) and returns an object`);
+            throw stepError(step, `${extend} must be a function that takes (self) and returns an object`);
           }
           const extensions = step[extend](that, options);
           wrap(context, extensions);

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

@@ -25,13 +25,18 @@
           @click="switchLocale(locale)"
         >
           <span class="apos-locale">
-            <CheckIcon
+            <AposIndicator
               v-if="isActive(locale)"
+              icon="check-bold-icon"
+              fill-color="var(--a-primary)"
               class="apos-check"
-              title="$t('apostrophe:currentLocale')"
-              :size="12"
+              :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) }"
@@ -43,24 +48,23 @@
         <p class="apos-available-description">
           {{ $t('apostrophe:documentExistsInLocales') }}
         </p>
-        <span
+        <AposButton
           v-for="locale in availableLocales"
           :key="locale.name"
           class="apos-available-locale"
-        >
-          {{ locale.label }}
-        </span>
+          :label="locale.label"
+          type="quiet"
+          :modifiers="['no-motion']"
+          @click="switchLocale(locale)"
+        />
       </div>
     </div>
   </AposContextMenu>
 </template>
 
 <script>
-import CheckIcon from 'vue-material-design-icons/Check.vue';
-
 export default {
   name: 'TheAposAdminBarLocale',
-  components: { CheckIcon },
   data() {
     return {
       search: '',
@@ -79,11 +83,11 @@ export default {
     button() {
       return {
         label: {
-          key: window.apos.i18n.locale,
+          key: apos.i18n.locale,
           localize: false
         },
         icon: 'chevron-down-icon',
-        modifiers: [ 'icon-right', 'no-motion' ],
+        modifiers: [ 'icon-right', 'no-motion', 'uppercase' ],
         type: 'quiet'
       };
     },
@@ -149,7 +153,7 @@ export default {
         }
       } else {
         const currentLocale = apos.i18n.locales[apos.locale];
-
+        this.$refs.menu.hide();
         const toLocalize = await apos.confirm(
           {
             icon: false,
@@ -207,6 +211,13 @@ export default {
   &::after {
     right: 0;
   }
+
+  &::v-deep .apos-button__label {
+    @include type-small;
+    color: var(--a-primary);
+    font-weight: var(--a-weight-bold);
+    letter-spacing: 1px;
+  }
 }
 
 .apos-locales-picker {
@@ -214,15 +225,14 @@ export default {
 }
 
 .apos-locales-filter {
+  @include type-large;
   box-sizing: border-box;
   width: 100%;
-  padding: 25px 45px 20px 20px;
-  font-size: 14px;
+  padding: 20px 45px 20px 20px;
   border-top: 0;
   border-right: 0;
   border-bottom: 1px solid var(--a-base-9);
   border-left: 0;
-  color: var(--a-text-primary);
   border-top-right-radius: var(--a-border-radius);
   border-top-left-radius: var(--a-border-radius);
 
@@ -242,8 +252,7 @@ export default {
   max-height: 350px;
   overflow-y: scroll;
   padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: $spacing-base 0;
   font-weight: var(--a-weight-base);
 }
 
@@ -264,7 +273,7 @@ export default {
   .apos-check {
     position: absolute;
     top: 50%;
-    left: 20px;
+    left: 18px;
     transform: translateY(-50%);
     color: var(--a-primary);
     stroke: var(--a-primary);
@@ -279,11 +288,12 @@ export default {
   .apos-locale-localized {
     position: relative;
     top: -1px;
+    left: 5px;
     display: inline-block;
-    height: 5px;
-    width: 5px;
+    width: 3px;
+    height: 3px;
     border: 1px solid var(--a-base-5);
-    border-radius: 3px;
+    border-radius: 50%;
 
     &.apos-state-is-localized {
       background-color: var(--a-success);
@@ -293,7 +303,7 @@ export default {
 }
 
 .apos-available-locales {
-  padding: 20px;
+  padding: $spacing-double;
   border-top: 1px solid var(--a-base-9);
 }
 
@@ -307,4 +317,13 @@ export default {
   margin-right: 10px;
   margin-bottom: 5px;
 }
+
+.apos-available-description {
+  margin-top: 0;
+}
+
+.apos-locale-name {
+  text-transform: uppercase;
+}
+
 </style>

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

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const deep = require('deep-get-set');
+const { stripIndent } = require('common-tags');
 
 // An area is a series of zero or more widgets, in which users can add
 // and remove widgets and drag them to reorder them. This module implements
@@ -131,6 +132,14 @@ module.exports = {
         const field = self.apos.schema.getFieldById(area._fieldId);
 
         const options = field.options;
+        if (!options) {
+          throw new Error(stripIndent`
+            The area field ${field.name} has no options property.
+
+            You probably forgot to nest the widgets property
+            in an options property.
+          `);
+        }
         _.each(options.widgets, function (options, name) {
           const manager = self.widgetManagers[name];
           if (manager) {

package/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -6,6 +6,9 @@ export default function() {
   createWidgetClipboardApp();
 
   prepareAreas();
+
+  document.documentElement.style.setProperty('--a-widget-margin', apos.ui.widgetMargin);
+
   apos.bus.$on('widget-rendered', function() {
     prepareAreas();
   });

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

@@ -384,9 +384,9 @@ export default {
       }
       if (!this.focused) {
         this.state.labels.show = false;
+        this.state.add.top.show = false;
+        this.state.add.bottom.show = false;
       }
-      this.state.add.top.show = false;
-      this.state.add.bottom.show = false;
     },
 
     focus(e) {
@@ -396,8 +396,8 @@ export default {
       this.focused = true;
       this.state.container.focus = true;
       this.state.controls.show = true;
-      this.state.add.top.show = false;
-      this.state.add.bottom.show = false;
+      this.state.add.top.show = true;
+      this.state.add.bottom.show = true;
       this.state.labels.show = true;
       document.addEventListener('click', this.unfocus);
     },

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

@@ -580,7 +580,14 @@ module.exports = {
             if (data) {
               document.body.removeAttribute('data-apos');
             }
-          })();
+            if (window.apos.modules) {
+              for (const module of Object.values(window.apos.modules)) {
+                if (module.alias) {
+                  window.apos[module.alias] = module;
+                }
+              }
+            }
+        })();
         `;
         self.builds = {
           src: {
@@ -632,13 +639,6 @@ module.exports = {
             prologue: stripIndent`
               import 'Modules/@apostrophecms/ui/scss/global/import-all.scss';
               import Vue from 'Modules/@apostrophecms/ui/lib/vue';
-              if (window.apos.modules) {
-                for (const module of Object.values(window.apos.modules)) {
-                  if (module.alias) {
-                    window.apos[module.alias] = module;
-                  }
-                }
-              }
               window.apos.bus = new Vue();
             `,
             // Load only in browsers that support ES6 modules

package/modules/@apostrophecms/asset/lib/globalIcons.js

@@ -56,9 +56,11 @@ module.exports = {
   'play-box-icon': 'PlayBox',
   'instagram-icon': 'Instagram',
   'label-icon': 'Label',
+  'lightbulb-on-icon': 'LightbulbOn',
   'link-icon': 'Link',
   'list-status-icon': 'ListStatus',
   'lock-icon': 'Lock',
+  'map-marker-icon': 'MapMarker',
   'magnify-icon': 'Magnify',
   'menu-down-icon': 'MenuDown',
   'minus-icon': 'Minus',

package/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js

@@ -9,8 +9,11 @@ module.exports = (options, apos) => {
           use: [
             // Instead of style-loader, to avoid FOUC
             MiniCssExtractPlugin.loader,
-            // Parses CSS imports
-            'css-loader',
+            // Parses CSS imports and make css-loader ignore urls. Urls will still be handled by webpack
+            {
+              loader: 'css-loader',
+              options: { url: false }
+            },
             // Provides autoprefixing
             {
               loader: 'postcss-loader',

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

@@ -38,11 +38,19 @@ module.exports = {
   restApiRoutes(self) {
     return {
       // GET /api/v1/@apostrophecms/doc/_id supports only the universal query
-      // features, but works for any document type, Simplifies browser-side
-      // logic for redirects to foreign documents; the frontend only has to
+      // features, but works for any document type. Simplifies browser-side
+      // logic for redirects to foreign documents. The frontend only has to
       // know the doc _id.
+      //
+      // Since this API is solely for editing purposes you will receive
+      // a 404 if you request a document you cannot edit.
       async getOne(req, _id) {
-        return self.find(req, { _id }).toObject();
+        _id = self.apos.i18n.inferIdLocaleAndMode(req, _id);
+        const doc = await self.find(req, { _id }).permission('edit').toObject();
+        if (!doc) {
+          throw self.apos.error('notfound');
+        }
+        return doc;
       }
     };
   },

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -58,6 +58,7 @@
   "dayjsRelativeTimeFormat": "apostrophe",
   "dayjsTitleDateFormat": "ddd MMMM D [at] H:mma",
   "dayjsCellDateFormat": "apostrophe",
+  "dayjsMediaCreatedDateFormat": "MMM Do, YYYY",
   "deduplicateSlugReserved": "The deduplicate- slug is reserved.",
   "delete": "Delete",
   "deleteDraft": "Delete Draft",
@@ -172,6 +173,11 @@
   "manageDocType": "Manage {{ type }}",
   "manageDraftSubmissions": "Manage Draft Submissions",
   "managePages": "Manage Pages",
+  "mediaCreatedDate": "Uploaded: {{ createdDate }}",
+  "mediaDimensions": "Dimensions: {{ width }} 𝗑 {{ height }}",
+  "mediaFileSize": "File Size: {{ fileSize }}",
+  "mediaKB": "{{ size }}KB",
+  "mediaMB": "{{ size }}MB",
   "mediaUploadViaDrop": "Drop ’em when you’re ready",
   "mediaUploadViaExplorer": "Or click to open the file explorer",
   "moreOptions": "More Options",
@@ -299,6 +305,7 @@
   "select": "Select",
   "selectedMenuItem": "✓ {{ label }}",
   "selectAll": "Select All",
+  "deselectAll": "Deselect All",
   "selectContent": "Select Content",
   "selectContentToLocalize": "What content do you want to localize?",
   "selectPage": "Select Page",