apostrophe 4.9.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## 4.11.0 (2024-12-18)
+
+### Adds
+
+* When validating an `area` field, warn the developer if `widgets` is not nested in `options`.
+* Adds support for supplying CSS variable names to a color field's `presetColors` array as selectable values.
+* Adds support for dynamic focus trap in Context menus (prop `dynamicFocus`). When set to `true`, the focusable elements are recalculated on each cycle step.
+* Adds option to disable `tabindex` on `AposToggle` component. A new prop `disableFocus` can be set to `false` to disable the focus on the toggle button. It's enabled by default.
+* Adds support for event on `addContextOperation`, an option `type` can now be passed and can be `modal` (default) or `event`, in this case it does not try to open a modal but emit a bus event using the action as name.
+
+
+### Fixes
+
+* Focus properly Widget Editor modals when opened. Keep the previous active focus on the modal when closing the widget editor.
+* a11y improvements for context menus.
+* Fixes broken widget preview URL when the image is overridden (module improve) and external build module is registered.
+* Inject dynamic custom bundle CSS when using external build module with no CSS entry point.
+* Range field now correctly takes 0 into account.
+* Apos style does not go through `postcss-viewport-to-container-toggle` plugin anymore to avoid UI bugs.
+
+## 4.10.0 (2024-11-20)
+
+### Fixes
+
+* Extra bundle detection when using external build module works properly now.
+* Widget players are now properly invoked when they arrive later in the page load process.
+* Fix permission grid tooltip display.
+* Fixes a bug that crashes external frontend applications.
+* Fixes a false positive warning for module not in use for project level submodules (e.g. `widges/module.js`) and dot-folders (e.g. `.DS_Store`).
+* Bumped `express-bearer-token` dependency to address a low-severity `npm audit` warning regarding noncompliant cookie names and values. Apostrophe
+did not actually use any noncompliant cookie names or values, so there was no vulnerability in Apostrophe.
+* Rich text "Styles" toolbar now has visually focused state.
+* The `renderPermalinks` and `renderImages` methods of the `@apostrophecms/rich-text` module now correctly resolve the final URLs of page links and inline images in rich text widgets, even when the user has editing privileges. Formerly this was mistakenly prevented by logic intended to preserve the editing experience. The editing experience never actually relied on the
+rendered output.
+* Search bar will perform the search even if the bar is empty allowing to reset a search.
+* Fixes Color picker being hidden in an inline array schema field, also fixes rgba inputs going off the modal.
+
+### Adds
+
+* It's possible now to target the HMR build when registering via `template.append` and `template.prepend`. Use `when: 'hmr:public'` or `when: 'hmr:apos'` that will be evaluated against the current asset `options.hmr` configuration.
+* Adds asset module option `options.modulePreloadPolyfill` (default `true`) to allow disabling the polyfill preload for e.g. external front-ends. 
+* Adds `bundleMarkup` to the data sent to the external front-end, containing all markup for injecting Apostrophe UI in the front-end.
+* Warns users when two page types have the same field name, but a different field type. This may cause errors or other problems when an editor switches page types.
+* The piece and page `GET` REST APIs now support `?render-areas=inline`. When this parameter is used, an HTML rendering of each widget is added to that specific widget in each area's `items` array as a new `_rendered` property. The existing `?render-areas=1` parameter is still supported to render the entire area as a single `_rendered` property. Note that this older option also causes `items` to be omitted from the response.
+
+### Changes
+
+* Removes postcss plugin and webpack loader used for breakpoint preview mode. Uses instead the new `postcss-viewport-to-container-toggle` plugin in the webpack config.
+* Implement `vue-color` directly in Apostrophe rather than as a dependency
+* Switch color handling library from `tinycolor2` to `@ctrl/tinycolor`
+* Removes error messages in server console for hidden fields. These messages should not have been printed out in the server console in the first place.
+* Removes invalid error messages on select fields appearing while opening an existing valid document.
+
 ## 4.9.0 (2024-10-31)
 
 ### Adds

package/LICENSE.md

@@ -5,3 +5,27 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Portions derived from vue-color require the following statement:
+
+MIT License
+
+Copyright (c) 2021 chenkai0520
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/defaults.js

@@ -44,6 +44,7 @@ module.exports = {
     '@apostrophecms/rich-text-widget': {},
     '@apostrophecms/html-widget': {},
     '@apostrophecms/image-widget': {},
+    '@apostrophecms/color-field': {},
     '@apostrophecms/oembed-field': {},
     '@apostrophecms/video-widget': {},
     '@apostrophecms/ui': {},

package/index.js

@@ -699,11 +699,18 @@ async function apostrophe(options, telemetry, rootSpan) {
       }
     }
     async function testDir(name) {
+      if (name.startsWith('.')) {
+        return;
+      }
       // 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
       if (!validSteps.includes(name)) {
         try {
+          // It's a project level modules definition, skip it.
+          if (fs.existsSync(path.resolve(self.localModules, name, 'modules.js'))) {
+            return;
+          }
           const submodule = await self.root.import(path.resolve(self.localModules, name, 'index.js'));
           if (submodule && submodule.options && submodule.options.ignoreUnusedFolderWarning) {
             return;

package/lib/moog.js

@@ -433,7 +433,7 @@ module.exports = function(options) {
     if (!object.__meta.chain) {
       return false;
     }
-    return !!_.find(object.__meta.chain, { name: name });
+    return !!_.find(object.__meta.chain, { name });
   };
 
   // Given a moog class name like `my-foo` or `@namespace/my-foo`,

package/modules/@apostrophecms/admin-bar/index.js

@@ -212,8 +212,8 @@ module.exports = {
         const item = {
           name: name.indexOf(':') === -1 ? name : name.split(':')[0],
           action: name,
-          label: label,
-          permission: permission,
+          label,
+          permission,
           options: options || {}
         };
         if (options && options.after) {
@@ -294,7 +294,7 @@ module.exports = {
         self.items = self.items.concat(moving);
         // ... But then explicit order kicks in
         _.each(self.options.order || [], function (name) {
-          const item = _.find(self.items, { name: name });
+          const item = _.find(self.items, { name });
           if (item) {
             self.items = [ item ].concat(_.filter(self.items, function (item) {
               return item.name !== name;
@@ -323,7 +323,7 @@ module.exports = {
           self.groupLabels[group.items[0]] = group.label;
 
           group.items.forEach(function (name, groupIndex) {
-            const item = _.find(self.items, { name: name });
+            const item = _.find(self.items, { name });
             if (item) {
               item.menuLeader = group.items[0];
             } else {
@@ -336,7 +336,7 @@ module.exports = {
               if (indexLeader === -1) {
                 throw new Error('Admin bar grouping error: no match for ' + item.menuLeader + ' in menu item ' + item.name);
               }
-              let indexMe = _.findIndex(self.items, { name: name });
+              let indexMe = _.findIndex(self.items, { name });
               if (indexMe !== indexLeader + groupIndex) {
                 // Swap ourselves into the right position following our leader
                 if (indexLeader + groupIndex < indexMe) {
@@ -391,7 +391,7 @@ module.exports = {
           }
         }
         return {
-          items: items,
+          items,
           components: { the: 'TheAposAdminBar' },
           context: context && {
             _id: context._id,

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

@@ -126,6 +126,10 @@ module.exports = {
       setWidgetManager(name, manager) {
         self.widgetManagers[name] = manager;
       },
+      // Given the options passed to the area field, return the options passed
+      // to each widget type, indexed by widget name. This provides a consistent
+      // interface regardless of whether `options.widgets` or `options.groups`
+      // was used.
       getWidgets(options) {
         let widgets = options.widgets || {};
 
@@ -167,7 +171,11 @@ module.exports = {
       },
       // Render the given `area` object via `area.html`, with the given `context`
       // which may be omitted. Called for you by the `{% area %} custom tag.
-      async renderArea(req, area, _with) {
+      //
+      // If `inline` is true then the rendering of each widget is attached
+      // to the widget as a `_rendered` property, bypassing normal full-area
+      // HTML responses, and the return value of this method is `null`.
+      async renderArea(req, area, _with, { inline = false } = {}) {
         if (!area._id) {
           throw new Error('All areas must have an _id property in A3.x. Area details:\n\n' + JSON.stringify(area));
         }
@@ -193,7 +201,7 @@ module.exports = {
           const manager = self.widgetManagers[name];
           if (manager) {
             choices.push({
-              name: name,
+              name,
               icon: manager.options.icon,
               label: options.addLabel || manager.label || `No label for ${name}`
             });
@@ -212,6 +220,12 @@ module.exports = {
           // just use the helpers
           self.apos.attachment.all(area, { annotate: true });
         }
+        if (inline) {
+          for (const item of area.items) {
+            item._rendered = await self.renderWidget(req, item.type, item, widgets[item.type]);
+          }
+          return null;
+        }
         return self.render(req, 'area', {
           // TODO filter area to exclude big relationship objects, but
           // not so sloppy this time please
@@ -226,7 +240,13 @@ module.exports = {
       // Replace documents' area objects with rendered HTML for each area.
       // This is used by GET requests including the `render-areas` query
       // parameter. `within` is an array of Apostrophe documents.
-      async renderDocsAreas(req, within) {
+      //
+      // If `inline` is true a rendering of each individual widget is
+      // added as an extra `_rendered` property of that widget, alongside
+      // its normal properties. Otherwise a rendering of the entire area
+      // is supplied as the `_rendered` property of that area and the
+      // `items` array is suppressed from the response.
+      async renderDocsAreas(req, within, { inline = false } = {}) {
         within = Array.isArray(within) ? within : [];
         let index = 0;
         // Loop over the docs in the array passed in.
@@ -270,8 +290,10 @@ module.exports = {
         async function render(area, path, context, opts) {
           const preppedArea = self.prepForRender(area, context, path);
 
-          const areaRendered = await self.apos.area.renderArea(req, preppedArea, context);
-
+          const areaRendered = await self.apos.area.renderArea(req, preppedArea, context, { inline });
+          if (inline) {
+            return;
+          }
           _.set(context, [ path, '_rendered' ], areaRendered);
           _.set(context, [ path, '_fieldId' ], undefined);
           _.set(context, [ path, 'items' ], undefined);
@@ -412,7 +434,7 @@ module.exports = {
           }
           _.set(doc, dotPath, {
             metaType: 'area',
-            items: items
+            items
           });
           return self.apos.doc.update(req, doc);
         }
@@ -724,7 +746,7 @@ module.exports = {
         } else {
           area = doc[name];
         }
-        return self.isEmpty({ area: area });
+        return self.isEmpty({ area });
       }
     };
   },

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

@@ -429,11 +429,11 @@ export default {
     },
 
     attachKeyboardFocusHandler() {
-      this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.addEventListener('keydown', this.handleKeyboardFocus);
     },
 
     removeKeyboardFocusHandler() {
-      this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.removeEventListener('keydown', this.handleKeyboardFocus);
     },
 
     // Focus parent, useful for obtrusive UI

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

@@ -98,6 +98,10 @@ module.exports = {
     // Force the HMR WS port when it operates on the same process as Apostrophe.
     // Most of the time you won't need to change this.
     hmrPort: null,
+    // Let the external build module inject a pollyfill for the module preload,
+    // adding the `modulepreload` support for the browsers that don't support it.
+    // Can be disabled in e.g. external front-ends.
+    modulePreloadPolyfill: true,
     // Completely disable the asset runtime auto-build system.
     // When an external build module is registered, only manifest data
     // will be loaded and no build will be executed.
@@ -477,9 +481,11 @@ module.exports = {
       // - `devServer`: if `false`, the dev server is disabled. Otherwise, it's a string
       //   (enum) `public` or `apos`. Note that if `hmr` is disabled, the dev server will be always
       //   `false`.
+      // - `modulePreloadPolyfill`: if `true`, a module preload polyfill is injected.
       // - `types`: optional array, if present it represents the only entrypoint types (entrypoint.type)
       //   that should be built.
       // - `sourcemaps`: if `true`, the source maps are generated in production.
+      // - `postcssViewportToContainerToggle`: the configuration for the breakpoint preview plugin.
       //
       // Note that this getter depends on the current build task arguments. You shouldn't
       // use that directly.
@@ -494,15 +500,22 @@ module.exports = {
           isTask: !argv['check-apos-build'],
           hmr: self.hasHMR(),
           hmrPort: self.options.hmrPort,
-          sourcemaps: self.options.productionSourceMaps
+          modulePreloadPolyfill: self.options.modulePreloadPolyfill,
+          sourcemaps: self.options.productionSourceMaps,
+          postcssViewportToContainerToggle: {
+            enable: self.options.breakpointPreviewMode?.enable === true,
+            debug: self.options.breakpointPreviewMode?.debug === true,
+            modifierAttr: 'data-breakpoint-preview-mode',
+            transform: self.options.breakpointPreviewMode?.transform
+          }
         };
         options.devServer = !options.isTask && self.hasDevServer()
           ? self.options.hmr
           : false;
 
-        // Skip all public and keep only the apos scenes.
+        // Skip prebundled UI and keep only the apos scenes.
         if (!self.options.publicBundle) {
-          options.types = [ 'apos', 'bundled' ];
+          options.types = [ 'apos', 'index' ];
         }
 
         return options;
@@ -627,7 +640,7 @@ module.exports = {
           return;
         }
 
-        // Hidrate the entrypoints with the saved manifest data and
+        // Hydrate the entrypoints with the saved manifest data and
         // set the current build manifest data.
         const buildOptions = self.getBuildOptions();
         const entrypoints = await self.getBuildModule().entrypoints(buildOptions);

package/modules/@apostrophecms/asset/lib/build/external-module-api.js

@@ -69,13 +69,8 @@ module.exports = (self) => {
     // Returns an array of objects with the following properties:
     // - `name`: the entrypoint name. It's usually the relative to `ui` folder
     //   name(`src`, `apos`, `public`) or an extra bundle name.
+    // - `label`: the human-readable label for the entrypoint, used to print CLI messages.
     // - `type`: (enum) the entrypoint type. It can be `index`, `apos`, `custom` (e.g. extra bundles) or
-    //   `bundled` (e.g. `ui/public`). Every type has associated manager that provides handling for the entrypoint.
-    // - `useMeta`: if `true`, the entrypoint will be created based on the source metadata (see
-    //   `computeSourceMeta()` method).
-    // - `bundle`: if `true`, the entrypoint should be bundled by the build module.
-    // - `index`: if `true`, the entrypoint processes only `{name}/index.{js,scss}` module files.
-    // - `apos`: if `true`, the entrypoint processes components, icons and apps.
     // - `ignoreSources`: an array of sources that shouldn't be processed when creating the entrypoint.
     // - `sources`: an object with `js` and `scss` arrays of extra sources to be included in the entrypoint.
     //    These sources are not affected by the `ignoreSources` configuration.
@@ -84,10 +79,15 @@ module.exports = (self) => {
     // - `prologue`: a string with the prologue to be added to the entrypoint.
     // - `condition`: the JS `module` or `nomodule` condition. Undefined for no specific condition.
     // - `outputs`: an array of output extensions for the entrypoint (currently not fully utilized)
+    // - `inputs`: an array of input extensions for the entrypoint (currently not fully utilized)
     // - `scenes`: an array of scenes to be in the final post-bundle step. The scenes are instructions
     //   for the Apostrophe core to combine the builds and release them. Currently supported scenes are
     //   `apos` and `public` and custom scene names equal to extra bundle (only those who should be
     //   loaded separately in the browser).
+    //
+    // Additonal properties added after entrypoints are processed by the core and the external build module:
+    // - `manifest`: object, see the manifest section of `configureBuildModule()` docs for more information.
+    // - `bundles`: a `Set` containing the bundle names that this entrypoint is part of (both css and js).
     getBuildEntrypoints(types, recompute = false) {
       if (!self.hasBuildModule()) {
         return self.builds;
@@ -323,6 +323,7 @@ function invoke() {
             follow: false,
             absolute: false
           });
+          files.sort((a, b) => a.localeCompare(b, 'en'));
 
           if (stats) {
             // optimize fs calls

package/modules/@apostrophecms/asset/lib/build/internals.js

@@ -88,7 +88,7 @@ module.exports = (self) => {
               enhancedConfig.ignoreSources.push(...bundleConfig.scss);
             }
             // 2.3. Add the extra bundle configuration so that
-            // it only processes the configured `sources` (`useMeta: false`).
+            // it only processes the configured `sources`
             if (!bundleConfig.main) {
               entrypoints.push({
                 name: bundleName,
@@ -308,9 +308,6 @@ module.exports = (self) => {
         const {
           imports = [], assets = [], dynamicImports = []
         } = files;
-        if (!imports.length) {
-          continue;
-        }
 
         for (const file of [ ...imports, ...dynamicImports, ...assets ]) {
           if (seen[file]) {

package/modules/@apostrophecms/asset/lib/refresh-on-restart.js

@@ -17,7 +17,7 @@
     } else {
       apos.http.post(document.querySelector('[data-apos-refresh-on-restart]').getAttribute('data-apos-refresh-on-restart'), {
         qs: {
-          fast: fast
+          fast
         }
       }, function(err, result) {
         if (err) {

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

@@ -1,25 +1,8 @@
-const path = require('path');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
-
 module.exports = (options, apos) => {
   const postcssPlugins = [
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -28,15 +11,22 @@ module.exports = (options, apos) => {
           test: /\.css$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
-            'css-loader'
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                postcssOptions: {
+                  plugins: [ postcssPlugins ]
+                }
+              }
+            }
           ]
         },
         {
           test: /\.s[ac]ss$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
             'css-loader',
             {
               loader: 'postcss-loader',

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

@@ -1,26 +1,18 @@
-const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 
 module.exports = (options, apos, srcBuildNames) => {
   const postcssPlugins = [
+    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
+      postcssViewportToContainerToggle({
+        modifierAttr: 'data-breakpoint-preview-mode',
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      })
+    ] : [],
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -30,8 +22,8 @@ module.exports = (options, apos, srcBuildNames) => {
           use: [
             // Instead of style-loader, to avoid FOUC
             MiniCssExtractPlugin.loader,
-            mediaToContainerQueriesLoader,
-            // Parses CSS imports and make css-loader ignore urls. Urls will still be handled by webpack
+            // Parses CSS imports and make css-loader ignore urls.
+            // Urls will still be handled by webpack
             {
               loader: 'css-loader',
               options: { url: false }

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

@@ -298,7 +298,7 @@ module.exports = {
         texts.push({
           weight: field.weight || 15,
           text: (value && value.title) || '',
-          silent: silent
+          silent
         });
       },
       // When the field is registered in the schema,
@@ -414,7 +414,7 @@ module.exports = {
           createdAt: new Date(),
           name: self.apos.util.slugify(path.basename(file.name, path.extname(file.name))),
           title: self.apos.util.sortify(path.basename(file.name, path.extname(file.name))),
-          extension: extension,
+          extension,
           type: 'attachment',
           docIds: options.docIds ?? [],
           archivedDocIds: options.archivedDocIds ?? []
@@ -565,7 +565,7 @@ module.exports = {
 
         await Promise.promisify(self.uploadfs.copyOut)(originalFile, tempFile);
         await Promise.promisify(self.uploadfs.copyImageIn)(tempFile, croppedFile, {
-          crop: crop,
+          crop,
           sizes: self.imageSizes
         });
 
@@ -909,8 +909,8 @@ module.exports = {
         const x = attachment._focalPoint ? attachment._focalPoint.x : attachment.x;
         const y = attachment._focalPoint ? attachment._focalPoint.y : attachment.y;
         return {
-          x: x,
-          y: y
+          x,
+          y
         };
       },
       // Returns true if this type of attachment is croppable.
@@ -1140,7 +1140,7 @@ module.exports = {
               continue;
             }
             const path = self.url(attachment, {
-              crop: crop,
+              crop,
               uploadfsPath: true,
               size: size.name
             });

package/modules/@apostrophecms/attachment/lib/tasks/rescale.js

@@ -68,7 +68,7 @@ module.exports = function(self) {
         console.log('Cropping ' + tempFile + ' to ' + originalFile);
         try {
           await Promise.promisify(self.uploadfs.copyImageIn)(tempFile, originalFile, {
-            crop: crop,
+            crop,
             sizes: self.imageSizes
           });
         } catch (e) {

package/modules/@apostrophecms/color-field/index.js

@@ -0,0 +1,44 @@
+const { TinyColor } = require('@ctrl/tinycolor');
+const _ = require('lodash');
+
+module.exports = {
+  options: {
+    name: 'color',
+    alias: 'colorFields'
+  },
+  init(self) {
+    self.name = self.options.name;
+    self.addFieldType();
+    self.enableBrowserData();
+  },
+  methods(self) {
+    return {
+      addFieldType() {
+        self.apos.schema.addFieldType({
+          name: 'color',
+          async convert(req, field, data, destination) {
+            destination[field.name] = self.apos.launder.string(data[field.name]);
+
+            if (field.required && (_.isUndefined(destination[field.name]) || !destination[field.name].toString().length)) {
+              throw self.apos.error('required');
+            }
+
+            const test = new TinyColor(destination[field.name]);
+            if (!test.isValid && !destination[field.name].startsWith('--')) {
+              destination[field.name] = null;
+            }
+          },
+          isEmpty: function (field, value) {
+            return !value.length;
+          }
+        });
+      },
+      getBrowserData(req) {
+        return {
+          name: self.name,
+          action: self.action
+        };
+      }
+    };
+  }
+};