apostrophe 3.3.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # 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.
+
+## 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
+
+* The `apos.attachment.each` method, intended for migrations, now respects its `criteria` argument. This was necessary to the above security fix.
+* Removes a lodash wrapper around `@apostrophecms/express` `bodyParser.json` options that prevented adding custom options to the body parser.
+* Uses `req.clone` consistently when creating a new `req` object with a different mode or locale for localization purposes, etc.
+* Fixes bug in the "select all" relationship chooser UI where it selected unpublished items.
+* Fixes bug in "next" and "previous" query builders.
+* Cutting and pasting widgets now works between locales that do not share a hostname, provided that you switch locales after cutting (it does not work between tabs that are already open on separate hostnames).
+* The `req.session` object now exists in task `req` objects, for better compatibility. It has no actual persistence.
+* Unlocalized piece types, such as users, may now be selected as part of a relationship when browsing.
+* Unpublished localized piece types may not be selected via the autocomplete feature of the relationship input field, which formerly ignored this requirement, although the browse button enforced it.
+* The server-side JavaScript and REST APIs to delete pieces now work properly for pieces that are not subject to either localization or draft/published workflow at all the (`localize: false` option). UI for this is under discussion, this is just a bug fix for the back end feature which already existed.
+* Starting in version 3.3.1, a newly added image widget did not display its image until the page was refreshed. This has been fixed.
+* A bug that prevented Undo operations from working properly and resulted in duplicate widget _id properties has been fixed.
+* A bug that caused problems for Undo operations in nested widgets, i.e. layout or multicolumn widgets, has been fixed.
+* Duplicate widget _id properties within the same document are now prevented on the server side at save time.
+* Existing duplicate widget _id properties are corrected by a one-time migration.
+
+### Adds
+
+* Adds a linter to warn in dev mode when a module name include a period.
+* 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
+
+### Fixes
+
+* In some situations it was possible for a relationship with just one selected document to list that document several times in the returned result, resulting in very large responses.
+* Permissions roles UI localized correctly.
+* Do not crash on startup if users have a relationship to another type. This was caused by the code that checks whether any users exist to present a warning to developers. That code was running too early for relationships to work due to event timing issues.
+
 ## 3.3.0 - 2021-08-30
 
 ### Fixes

package/deploy-test-count

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

package/index.js

@@ -4,6 +4,7 @@ const argv = require('boring')({ end: true });
 const fs = require('fs');
 const npmResolve = require('resolve');
 let defaults = require('./defaults.js');
+const { stripIndent } = require('common-tags');
 
 // **Awaiting the Apostrophe function is optional**
 //
@@ -102,13 +103,25 @@ module.exports = async function(options) {
     // are out there and what icons they need without
     // actually instantiating them
     self.modulesToBeInstantiated = modulesToBeInstantiated;
+    self.eventAliases = {};
+    self.aliasEvent('modulesReady', 'modulesRegistered');
+    self.aliasEvent('afterInit', 'ready');
 
     defineModules();
 
     await instantiateModules();
     lintModules();
-    await self.emit('modulesReady');
-    await self.emit('afterInit');
+    await self.emit('modulesRegistered'); // formerly modulesReady
+    self.apos.schema.validateAllSchemas();
+    self.apos.schema.registerAllSchemas();
+    await self.apos.migration.migrate(); // emits before and after events, inside the lock
+    await self.apos.global.insertIfMissing();
+    await self.apos.page.implementParkAllInDefaultLocale();
+    await self.apos.doc.replicate(); // emits beforeReplicate and afterReplicate events
+    // Replicate will have created the parked pages across locales if needed, but we may
+    // still need to reset parked properties
+    await self.apos.page.implementParkAllInOtherLocales();
+    await self.emit('ready'); // formerly afterInit
     if (self.taskRan) {
       process.exit(0);
     } else {
@@ -241,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) {
@@ -264,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
@@ -336,19 +359,24 @@ 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(/^@/)) {
         const nsDirs = fs.readdirSync(`${self.localModules}/${dir}`);
         for (let nsDir of nsDirs) {
           nsDir = `${dir}/${nsDir}`;
-          test(nsDir);
+          testDir(nsDir);
         }
       } else {
-        test(dir);
+        testDir(dir);
       }
     }
-    function test(name) {
+    function testDir(name) {
       // Projects that have different theme modules activated at different times
       // are a frequent source of false positives for this warning, so ignore
       // seemingly unused modules with "theme" in the name
@@ -362,14 +390,25 @@ module.exports = async function(options) {
           // index.js might not exist, that's fine for our purposes
         }
         if (name.match(/^apostrophe-/)) {
-          warn('namespace-apostrophe-modules', `You have a ${self.localModules}/${name} folder. You are probably trying to configure an official Apostrophe module, but those are namespaced now. Your directory should be renamed ${self.localModules}/${name.replace(/^apostrophe-/, '@apostrophecms/')}\n\nIf you get this warning for your own, original module, do not use the apostrophe- prefix. It is reserved.`);
+          warn(
+            'namespace-apostrophe-modules',
+            stripIndent`
+              You have a ${self.localModules}/${name} folder.
+              You are probably trying to configure an official Apostrophe module, but those
+              are namespaced now. Your directory should be renamed
+              ${self.localModules}/${name.replace(/^apostrophe-/, '@apostrophecms/')}
+
+              If you get this warning for your own, original module, do not use the
+              "apostrophe-" prefix. It is reserved.
+            `
+          );
         } else {
           warn('orphan-modules', `You have a ${self.localModules}/${name} folder, but that module is not activated in app.js and it is not a base class of any other active module. Right now that code doesn't do anything.`);
         }
       }
       function warn(name, message) {
-        if (self.utils) {
-          self.utils.warnDevOnce(name, message);
+        if (self.util) {
+          self.util.warnDevOnce(name, message);
         } else {
           // apos.util not in play, this can be the case in our bootstrap tests
           if (self.argv[`ignore-${name}`]) {
@@ -382,6 +421,30 @@ module.exports = async function(options) {
     }
 
     for (const [ name, module ] of Object.entries(self.modules)) {
+      if (name.match(/^apostrophe-/)) {
+        self.util.warnDevOnce(
+          'namespace-apostrophe-modules',
+          stripIndent`
+            You have configured an ${name} module.
+            You are probably trying to configure an official Apostrophe module, but those
+            are namespaced now. Your module should be renamed ${name.replace(/^apostrophe-/, '@apostrophecms/')}
+
+            If you get this warning for your own original module, do not use the
+            "apostrophe-" prefix. It is reserved.
+          `
+        );
+      }
+      const moduleNameRegex = /\./;
+      if (name.match(moduleNameRegex)) {
+        self.util.warnDevOnce(
+          'module-name-periods',
+          stripIndent`
+            You have configured a module named ${name}.
+            Modules names may not include periods. Please change this to avoid bugs.
+          `
+        );
+      }
+
       if (module.options.extends && ((typeof module.options.extends) === 'string')) {
         lint(`The module ${name} contains an "extends" option. This is probably a\nmistake. In Apostrophe "extend" is used to extend other modules.`);
       }
@@ -437,7 +500,9 @@ module.exports = async function(options) {
     }
 
     function lint(s) {
-      self.util.warnDev('\n⚠️  It looks like you may have made a mistake in your code:\n\n' + s + '\n');
+      self.util.warnDev(stripIndent`
+        It looks like you may have made a mistake in your code:\n${s}
+      `);
     }
   }
 

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/index.js

@@ -21,7 +21,7 @@ module.exports = {
   },
   handlers(self) {
     return {
-      'apostrophe:afterInit': {
+      'apostrophe:ready': {
         orderAndGroupItems() {
           self.orderItems();
           self.groupItems();

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'
       };
     },
@@ -136,7 +140,8 @@ export default {
       const result = await apos.http.post(`${apos.i18n.action}/locale`, {
         body: {
           contextDocId: apos.adminBar.context && apos.adminBar.context._id,
-          locale: name
+          locale: name,
+          clipboard: localStorage.getItem('aposWidgetClipboard')
         }
       });
 
@@ -148,7 +153,7 @@ export default {
         }
       } else {
         const currentLocale = apos.i18n.locales[apos.locale];
-
+        this.$refs.menu.hide();
         const toLocalize = await apos.confirm(
           {
             icon: false,
@@ -206,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 {
@@ -213,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);
 
@@ -241,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);
 }
 
@@ -263,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);
@@ -278,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);
@@ -292,7 +303,7 @@ export default {
 }
 
 .apos-available-locales {
-  padding: 20px;
+  padding: $spacing-double;
   border-top: 1px solid var(--a-base-9);
 }
 
@@ -306,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

@@ -48,7 +48,7 @@ export default {
     // If the URL references a draft, go into draft mode but then clean up the URL
     const draftMode = query.aposMode || 'published';
     if (draftMode === 'draft') {
-      const newQuery = { ... query };
+      const newQuery = { ...query };
       delete newQuery.aposMode;
       history.replaceState(null, '', apos.http.addQueryToUrl(location.href, newQuery));
     }
@@ -442,6 +442,7 @@ export default {
       this.rememberLastBaseContext();
     },
     onContextEdited(patch) {
+      patch = klona(patch);
       this.patchesSinceLoaded.push(patch);
       this.patchesSinceSave.push(patch);
       this.undone = [];
@@ -512,7 +513,7 @@ export default {
 
       if (refreshable) {
         refreshable.innerHTML = content;
-        if (!this.original) {
+        if (this.editMode && (!this.original)) {
           // the first time we enter edit mode on the page, we need to
           // establish a baseline for undo/redo. Use our
           // "@ notation" PATCH feature. Sort the areas by DOM depth

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
@@ -26,6 +27,7 @@ module.exports = {
     self.richTextWidgetTypes = [];
     self.widgetManagers = {};
     self.enableBrowserData();
+    self.addDeduplicateWidgetIdsMigration();
   },
   apiRoutes(self) {
     return {
@@ -52,6 +54,9 @@ module.exports = {
           widget = await sanitize(widget);
           widget._edit = true;
           widget._docId = _docId;
+          // So that carrying out relationship loading again can yield results
+          // (the idsStorage must be populated as if we were saving)
+          self.apos.schema.prepareForStorage(req, widget);
           await load();
           return render();
           async function sanitize(widget) {
@@ -71,7 +76,7 @@ module.exports = {
   },
   handlers(self) {
     return {
-      'apostrophe:modulesReady': {
+      'apostrophe:modulesRegistered': {
         getRichTextWidgetTypes() {
           _.each(self.widgetManagers, function (manager, name) {
             if (manager.getRichText) {
@@ -127,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) {
@@ -564,6 +577,30 @@ module.exports = {
           widgetManagers,
           action: self.action
         };
+      },
+      async addDeduplicateWidgetIdsMigration() {
+        self.apos.migration.add('deduplicate-widget-ids', () => {
+          // Make them globally unique because that is easiest to
+          // definitely get correct for this one-time migration, although
+          // there is no guarantee that widget ids are unique between
+          // separate documents going forward. The guarantee is that they
+          // will be unique within documents
+          const seen = new Set();
+          return self.apos.migration.eachWidget({}, async (doc, widget, dotPath) => {
+            if ((!widget._id) || seen.has(widget._id)) {
+              const _id = self.apos.util.generateId();
+              return self.apos.doc.db.updateOne({
+                _id: doc._id
+              }, {
+                $set: {
+                  [`${dotPath}._id`]: _id
+                }
+              });
+            } else {
+              seen.add(widget._id);
+            }
+          });
+        });
       }
     };
   },

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);
     },