apostrophe 3.4.0 → 3.7.0

package/CHANGELOG.md

@@ -1,9 +1,92 @@
 # Changelog
 
+## 3.7.0 - 2021-10-28
+
+### Adds
+
+* Schema select field choices can now be populated by a server side function, like an API call. Set the `choices` property to a method name of the calling module. That function should take a single argument of `req`, and return an array of objects with `label` and `value` properties. The function can be async and will be awaited.
+
+* Apostrophe now has built-in support for the Node.js cluster module. If the `APOS_CLUSTER_PROCESSES` environment variable is set to a number, that number of child processes are forked, sharing the same listening port. If the variable is set to `0`, one process is forked for each CPU core, with a minimum of `2` to provide availability during restarts. If the variable is set to a negative number, that number is added to the number of CPU cores, e.g. `-1` is a good way to reserve one core for MongoDB if it is running on the same server. This is for production use only (`NODE_ENV=production`). If a child process fails it is restarted automatically.
+
+### Fixes
+
+* Prevents double-escaping interpolated localization strings in the UI.
+* Rich text editor style labels are now run through a localization method to get the translated strings from their l10n keys.
+* Fixes README Node version requirement (Node 12+).
+* The text alignment buttons now work immediately in a new rich text widget. Previously they worked only after manually setting a style or refreshing the page. Thanks to Michelin for their support of this fix.
+* Users can now activate the built-in date and time editing popups of modern browsers when using the `date` and `time` schema field types.
+* Developers can now `require` their project `app.js` file in the Node.js REPL for debugging and inspection. Thanks to [Matthew Francis Brunetti](https://github.com/zenflow).
+* If a static text phrase is unavailable in both the current locale and the default locale, Apostrophe will always fall back to the `en` locale as a last resort, which ensures the admin UI works if it has not been translated.
+* Developers can now `require` their project `app.js` in the Node.js REPL for debugging and inspection
+* Ensure array field items have valid _id prop before storing. Thanks to Thanks to [Matthew Francis Brunetti](https://github.com/zenflow).
+
+### Changes
+
+* In 3.x, `relationship` fields have an optional `builders` property, which replaces `filters` from 2.x, and within that an optional `project` property, which replaces `projection` from 2.x (to match MongoDB's `cursor.project`). Prior to this release leaving the old syntax in place could lead to severe performance problems due to a lack of projections. Starting with this release the 2.x syntax results in an error at startup to help the developer correct their code.
+* The `className` option from the widget options in a rich text area field is now also applied to the rich text editor itself, for a consistently WYSIWYG appearance when editing and when viewing. Thanks to [Max Mulatz](https://github.com/klappradla) for this contribution.
+* Adds deprecation notes to doc module `afterLoad` events, which are deprecated.
+* Removes unused `afterLogin` method in the login module.
+
+## 3.6.0 - 2021-10-13
+
+### Adds
+
+* The `context-editing` apostrophe admin UI bus event can now take a boolean parameter, explicitly indicating whether the user is actively typing or performing a similar active manipulation of controls right now. If a boolean parameter is not passed, the existing 1100-millisecond debounced timeout is used.
+* Adds 'no-search' modifier to relationship fields as a UI simplification option.
+* Fields can now have their own `modifiers` array. This is combined with the schema modifiers, allowing for finer grained control of field rendering.
+* Adds a Slovak localization file. Activate the `sk` locale to use this. Many thanks to [Michael Huna](https://github.com/Miselrkba) for the contribution.
+* Adds a Spanish localization file. Activate the `es` locale to use this. Many thanks to [Eugenio Gonzalez](https://github.com/egonzalezg9) for the contribution.
+* Adds a Brazilian Portuguese localization file. Activate the `pt-BR` locale to use this. Many thanks to [Pietro Rutzen](https://github.com/pietro-rutzen) for the contribution.
+
+### Fixes
+
+* Fixed missing translation for "New Piece" option on the "more" menu of the piece manager, seen when using it as a chooser.
+* Piece types with relationships to multiple other piece types may now be configured in any order, relative to the other piece types. This sometimes appeared to be a bug in reverse relationships.
+* Code at the project level now overrides code found in modules that use `improve` for the same module name. For example, options set by the `@apostrophecms/seo-global` improvement that ships with `@apostrophecms/seo` can now be overridden at project level by `/modules/@apostrophecms/global/index.js` in the way one would expect.
+* Array input component edit button label is now propertly localized.
+* A memory leak on each request has been fixed, and performance improved, by avoiding the use of new Nunjucks environments for each request. Thanks to Miro Yovchev for pointing out the leak.
+* Fragments now have access to `__t()`, `getOptions` and other features passed to regular templates.
+* Fixes field group cascade merging, using the original group label if none is given in the new field group configuration.
+* If a field is conditional (using an `if` option), is required, but the condition has not been met, it no longer throws a validation error.
+* Passing `busy: true` to `apos.http.post` and related methods no longer produces an error if invoked when logged out, however note that there will likely never be a UI for this when logged out, so indicate busy state in your own way.
+* Bugs in document modification detection have been fixed. These bugs caused edge cases where modifications were not detected and the "Update" button did not appear, and could cause false positives as well.
+
+### Changes
+
+* No longer logs a warning about no users if `testModule` is true on the app.
+
+## 3.5.0 - 2021-09-23
+
+* 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.
+* AposButton's `block` modifier now less login-specific
+
+### 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.
+
 ## 3.4.0 - 2021-09-13
 
 ### 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
@@ -30,12 +113,14 @@
 * 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/README.md

@@ -43,7 +43,7 @@ We recommend installing the following with [Homebrew](https://brew.sh/) on macOS
 
 | Software | Minimum Version | Notes
 | ------------- | ------------- | -----
-| Node.js | 10.x | Or better
+| Node.js | 12.x | Or better
 | npm  | 6.x  | Or better
 | MongoDB  | 3.6  | Or better
 | Imagemagick  | Any | Faster image uploads, GIF support (optional)

package/deploy-test-count

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

package/index.js

@@ -2,11 +2,43 @@ const path = require('path');
 const _ = require('lodash');
 const argv = require('boring')({ end: true });
 const fs = require('fs');
+const { stripIndent } = require('common-tags');
+const cluster = require('cluster');
+const { cpus } = require('os');
+const process = require('process');
 const npmResolve = require('resolve');
+
 let defaults = require('./defaults.js');
-const { stripIndent } = require('common-tags');
 
-// **Awaiting the Apostrophe function is optional**
+// ## Top-level options
+//
+// `cluster`
+//
+// If set to `true`, Apostrophe will spawn as many processes as
+// there are CPU cores on the server, or a minimum of 2, and balance
+// incoming connections among them. This ensures availability while one
+// process is restarting due to a crash and also increases scalability if
+// the server has multiple CPU cores.
+//
+// If set to an object with a `processes` property, that many
+// processes are started. If `processes` is 0 or a negative number,
+// it is added to the number of CPU cores reported by the server.
+// Notably, `-1` can be a good way to reserve one CPU core for MongoDB
+// in a single-server deployment.
+//
+// However when in cluster mode no fewer than 2 processes will be
+// started as there is no availability benefit without at least 2.
+//
+// If a child process exits with a failure status code it will be
+// restarted. However, if it exits in less than 20 seconds after
+// startup there will be a 20 second delay to avoid flooding logs
+// and pinning the CPU.
+//
+// Alternatively the `APOS_CLUSTER_PROCESSES` environment variable
+// can be set to a number, which will effectively set the cluster
+// option to `cluster: { processes: n }`.
+//
+// ## Awaiting the Apostrophe function
 //
 // The apos function is async, but in typical cases you do not
 // need to await it. If you simply call it, Apostrophe will
@@ -21,8 +53,63 @@ const { stripIndent } = require('common-tags');
 // To avoid exiting on errors, pass the `exit: false` option.
 // This can option also can be used to allow awaiting a command line
 // task, as they also normally exit on completion.
+//
+// If `options.cluster` is truthy, the function quickly resolves to
+// `null` in the primary process. In the child process it resolves as
+// documented above.
 
 module.exports = async function(options) {
+  const guardTime = 20000;
+  if (process.env.APOS_CLUSTER_PROCESSES) {
+    options.cluster = {
+      processes: parseInt(process.env.APOS_CLUSTER_PROCESSES)
+    };
+  }
+  if (options.cluster && (process.env.NODE_ENV !== 'production')) {
+    console.log('NODE_ENV is not set to production, disabling cluster mode');
+    options.cluster = false;
+  }
+  if (options.cluster && !argv._.length) {
+    // For bc with node 14 and below we need to check both
+    if (cluster.isPrimary || cluster.isMaster) {
+      let processes = options.cluster.processes || cpus().length;
+      if (processes <= 0) {
+        processes = cpus().length + processes;
+      }
+      let capped = '';
+      if (processes > cpus().length) {
+        processes = cpus().length;
+        capped = ' (capped to number of CPU cores)';
+      }
+      if (processes < 2) {
+        processes = 2;
+        if (capped) {
+          capped = ' (less than 2 cores, capped to minimum of 2)';
+        } else {
+          capped = ' (using minimum of 2)';
+        }
+      }
+      console.log(`Starting ${processes} cluster child processes${capped}`);
+      for (let i = 0; i < processes; i++) {
+        clusterFork();
+      }
+      cluster.on('exit', (worker, code, signal) => {
+        if (code !== 0) {
+          if ((Date.now() - worker.bornAt) < guardTime) {
+            console.error(`Worker process ${worker.process.pid} failed in ${seconds(Date.now() - worker.bornAt)}, waiting ${seconds(guardTime)} before restart`);
+            setTimeout(() => {
+              respawn(worker);
+            }, guardTime);
+          } else {
+            respawn(worker);
+          }
+        }
+      });
+      return null;
+    } else {
+      console.log(`Cluster worker ${process.pid} started`);
+    }
+  }
 
   // The core is not a true moog object but it must look enough like one
   // to participate as an async event emitter
@@ -174,7 +261,7 @@ module.exports = async function(options) {
   function getRoot() {
     let _module = module;
     let m = _module;
-    while (m.parent) {
+    while (m.parent && m.parent.filename) {
       // The test file is the root as far as we are concerned,
       // not mocha itself
       if (m.parent.filename.match(/\/node_modules\/mocha\//)) {
@@ -254,6 +341,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 +366,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
@@ -324,6 +421,10 @@ module.exports = async function(options) {
       synth.define(name, options);
     });
 
+    // Apostrophe prefers that any improvements to @apostrophecms/global
+    // be applied before any project level version of @apostrophecms/global
+    synth.applyImprovementsBeforeProjectLevel();
+
     return synth;
   }
 
@@ -349,6 +450,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(/^@/)) {
@@ -499,3 +605,17 @@ module.exports.bundle = {
   modules: abstractClasses.concat(_.keys(defaults.modules)),
   directory: 'modules'
 };
+
+function seconds(msec) {
+  return (Math.round(msec / 100) / 10) + ' seconds';
+}
+
+function clusterFork() {
+  const worker = cluster.fork();
+  worker.bornAt = Date.now();
+}
+
+function respawn(worker) {
+  console.error(`Respawning worker process ${worker.process.pid}`);
+  clusterFork();
+}

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;
@@ -187,5 +202,28 @@ module.exports = function(options) {
     return _.has(self.improvements, name);
   };
 
+  self.applyImprovementsBeforeProjectLevel = () => {
+    for (const [ name, definition ] of Object.entries(self.definitions)) {
+      // At this stage the complete definition of a type is a linked list of `extend`
+      // properties starting from what should be project level, unless there
+      // are improvements. Shuffle project level to be the first in the
+      // linked list
+      if (definition.__meta.name !== self.originalToMy(name)) {
+        let candidate = definition;
+        let predecessor = null;
+        while (candidate.extend && ((typeof candidate.extend) === 'object')) {
+          predecessor = candidate;
+          candidate = candidate.extend;
+          if (candidate.__meta.name === self.originalToMy(name)) {
+            predecessor.extend = candidate.extend;
+            candidate.extend = definition;
+            self.definitions[name] = candidate;
+            break;
+          }
+        }
+      }
+    }
+  };
+
   return self;
 };

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,27 @@ 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);
+                value.label = value.label || groups[key].label;
+              }
+            }
+
             that[`${cascade}Groups`] = {
               ...groups,
               ...klona(properties.group)
@@ -289,14 +301,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/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -259,20 +259,32 @@ export default {
       // So that areas revert to being editable
       await this.refresh();
     },
-    async onContextEditing() {
-      // Accept a hint that someone is actively typing in a
-      // rich text editor and a context-edited event is likely
-      // coming; allows continuity of the "Saving..." indicator
-      // so it doesn't flicker once a second as you type
-      this.editing = true;
-      if (this.editingTimeout) {
-        clearTimeout(this.editingTimeout);
+    // Accept a hint that a user is actively typing and/or manipulating controls
+    // and it would best not to enable a save button or a "...Saved" indication yet
+    // to avoid a frenetic display and/or a situation where not everything is ready
+    // to be saved yet.
+    //
+    // If the event is emitted with a boolean value of `true`, the emitter takes
+    // responsibility for later emitting `false` to indicate active typing/manipulating
+    // is no longer in progress. If the event is emitted with no value then there is a
+    // 1100-millisecond, debounced timeout.
+
+    async onContextEditing(state) {
+      if ((typeof state) === 'boolean') {
+        this.editing = state;
+      } else {
+        if (!this.editing) {
+          this.editing = true;
+        }
+        if (this.editingTimeout) {
+          clearTimeout(this.editingTimeout);
+        }
+        this.editingTimeout = setTimeout(() => {
+          this.editing = false;
+          // Wait slightly longer than the rich text editor does
+          // before sending us a context-edited event
+        }, 1100);
       }
-      this.editingTimeout = setTimeout(() => {
-        this.editing = false;
-        // Wait slightly longer than the rich text editor does
-        // before sending us a context-edited event
-      }, 1100);
     },
     async onPublish(e) {
       if (!this.canPublish) {

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) {