apostrophe 3.4.1 → 3.8.0

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Default.js

@@ -0,0 +1,64 @@
+// If a style has been marked `def`, we need to make sure it
+// and it's attributes are prioritized in our editor.
+// It's easier to create a new Node with our specifications and put it
+// at the front of the line than try to infer between editor instantiation
+// and the editor-user setting styles via the toolbar to know when its needed.
+
+import { Node } from '@tiptap/core';
+import Heading from '@tiptap/extension-heading';
+import Paragraph from '@tiptap/extension-paragraph';
+
+const nodeMap = {
+  heading: Heading,
+  paragraph: Paragraph
+};
+
+export default (options) => {
+  const def = options.styles.filter(style => style.def)[0];
+
+  // Configuration has a default style
+  if (def) {
+    const nodeName = 'defaultNode';
+    const attrs = {
+      class: def.options.class || null
+    };
+
+    if (def.type === 'heading' || def.type === 'paragraph') {
+      return nodeMap[def.type].extend({
+        name: nodeName,
+        defaultOptions: {
+          HTMLAttributes: attrs,
+          levels: def.options.level ? [ def.options.level ] : null
+        }
+      });
+    }
+
+    if (def.type === 'textStyle') {
+      return Node.create({
+        group: 'block',
+        content: 'text*',
+        name: nodeName,
+        defaultOptions: {
+          HTMLAttributes: attrs
+        },
+        renderHTML: () => {
+          return [ 'span', attrs, 0 ];
+        },
+        parseHTML() {
+          return [
+            {
+              tag: 'span',
+              getAttrs: element => {
+                const hasStyles = element.hasAttribute('style');
+                if (!hasStyles) {
+                  return false;
+                }
+                return {};
+              }
+            }
+          ];
+        }
+      });
+    }
+  }
+};

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Document.js

@@ -0,0 +1,15 @@
+// Acts as a custom Document extension
+import { Node } from '@tiptap/core';
+export default (options) => {
+  const def = options.styles.filter(style => style.def)[0];
+  let content = 'block+'; // one or more block nodes (default Document setting)
+  if (def) {
+    // one/more defaultNodes (created in ./Default) or one/more other block nodes
+    content = '(defaultNode|block)+';
+  }
+  return Node.create({
+    name: 'doc',
+    topNode: true,
+    content
+  });
+};

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Heading.js

@@ -0,0 +1,23 @@
+// Lock Heading levels down to just those provided via configuration
+import Heading from '@tiptap/extension-heading';
+
+export default (options) => {
+  const headings = options.styles.filter(style => style.type === 'heading');
+  const levels = headings.map(heading => heading.options.level);
+  const defaultLevel = headings.filter(heading => heading.def).length
+    ? headings.filter(heading => heading.def)[0].options.level
+    : levels[0];
+  return Heading.extend({
+    defaultOptions: {
+      levels
+    },
+    addAttributes() {
+      return {
+        level: {
+          default: defaultLevel,
+          rendered: false
+        }
+      };
+    }
+  });
+};

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

@@ -18,6 +18,7 @@ const _ = require('lodash');
 const dayjs = require('dayjs');
 const tinycolor = require('tinycolor2');
 const { klona } = require('klona');
+const { stripIndent } = require('common-tags');
 
 module.exports = {
   options: {
@@ -323,7 +324,13 @@ module.exports = {
     self.addFieldType({
       name: 'select',
       async convert(req, field, data, destination) {
-        destination[field.name] = self.apos.launder.select(data[field.name], field.choices, field.def);
+        let choices;
+        if ((typeof field.choices) === 'string') {
+          choices = await self.apos.modules[field.moduleName][field.choices](req);
+        } else {
+          choices = field.choices;
+        }
+        destination[field.name] = self.apos.launder.select(data[field.name], choices, field.def);
       },
       index: function (value, field, texts) {
         const silent = field.silent === undefined ? true : field.silent;
@@ -354,7 +361,9 @@ module.exports = {
                 return self.apos.launder.select(v, field.choices, null);
               });
             } else {
-              value = self.apos.launder.select(value, field.choices, null);
+              value = (typeof field.choices) === 'string'
+                ? self.apos.launder.string(value)
+                : self.apos.launder.select(value, field.choices, null);
               if (value === null) {
                 return null;
               }
@@ -362,9 +371,16 @@ module.exports = {
             }
           },
           choices: async function () {
+            let allChoices;
             const values = await query.toDistinct(field.name);
+            if ((typeof field.choices) === 'string') {
+              const req = self.apos.task.getReq();
+              allChoices = await self.apos.modules[field.moduleName][field.choices](req);
+            } else {
+              allChoices = field.choices;
+            }
             const choices = _.map(values, function (value) {
-              const choice = _.find(field.choices, { value: value });
+              const choice = _.find(allChoices, { value: value });
               return {
                 value: value,
                 label: choice && (choice.label || value)
@@ -980,6 +996,12 @@ module.exports = {
         if (field.schema && !Array.isArray(field.schema)) {
           fail('schema property should be an array if present at this stage');
         }
+        if (field.filters) {
+          fail('"filters" property should be changed to "builders" for 3.x');
+        }
+        if (field.builders && field.builders.projection) {
+          fail('"projection" sub-property should be changed to "project" for 3.x');
+        }
         function lintType(type) {
           type = self.apos.doc.normalizeType(type);
           if (!_.find(self.apos.doc.managers, { name: type })) {
@@ -988,11 +1010,15 @@ module.exports = {
         }
       },
       isEqual(req, field, one, two) {
-        if (!_.isEqual(one[field.idsStorage], two[field.idsStorage])) {
+        const ids1 = one[field.idsStorage] || [];
+        const ids2 = two[field.idsStorage] || [];
+        if (!_.isEqual(ids1, ids2)) {
           return false;
         }
         if (field.fieldsStorage) {
-          if (!_.isEqual(one[field.fieldsStorage], two[field.fieldsStorage])) {
+          const fields1 = one[field.fieldsStorage] || {};
+          const fields2 = two[field.fieldsStorage] || {};
+          if (!_.isEqual(fields1, fields2)) {
             return false;
           }
         }
@@ -1098,7 +1124,7 @@ module.exports = {
       // alterFields option should be avoided if your needs can be met
       // via another option.
 
-      compose(options) {
+      compose(options, module) {
         let schema = [];
 
         // Useful for finding good unit test cases
@@ -1288,9 +1314,29 @@ module.exports = {
         // like workflow to patch schema fields of various modules
         // without inadvertently impacting other apos instances
         // when running with @apostrophecms/multisite
-        return _.map(schema, function (field) {
+        schema = _.map(schema, function (field) {
           return _.clone(field);
         });
+
+        _.each(schema, function(field) {
+          // For use in resolving options like "choices" when they
+          // contain a method name. For bc don't mess with possible
+          // existing usages in custom schema field types predating
+          // this feature
+          self.setModuleName(field, module);
+        });
+        return schema;
+      },
+
+      // Recursively set moduleName property of the field and any subfields,
+      // as might be found in array or object fields. `module` is an actual module
+      setModuleName(field, module) {
+        field.moduleName = field.moduleName || (module && module.__meta.name);
+        if ((field.type === 'array') || (field.type === 'object')) {
+          _.each(field.schema || [], function(subfield) {
+            self.setModuleName(subfield, module);
+          });
+        }
       },
 
       // refine is like compose, but it starts with an existing schema array
@@ -1473,10 +1519,8 @@ module.exports = {
         for (const field of schema) {
           const fieldType = self.fieldTypes[field.type];
           if (!fieldType.isEqual) {
-            if ((one[field.name] == null) && (two[field.name] == null)) {
-              return true;
-            }
-            if (!_.isEqual(one[field.name], two[field.name])) {
+            if ((!_.isEqual(one[field.name], two[field.name])) &&
+              !((one[field.name] == null) && (two[field.name] == null))) {
               return false;
             }
           } else {
@@ -1928,6 +1972,7 @@ module.exports = {
             } else if (field.type === 'array') {
               if (doc[field.name]) {
                 doc[field.name].forEach(item => {
+                  item._id = item._id || self.apos.util.generateId();
                   item.metaType = 'arrayItem';
                   item.scopedArrayName = field.scopedArrayName;
                   forSchema(field.schema, item);
@@ -2179,13 +2224,14 @@ module.exports = {
       // of a `relationship` field, or the `label` property of anything.
 
       validate(schema, options) {
-        // Infinite recursion prevention
-        if (self.validatedSchemas[options.type + ':' + options.subtype]) {
-          return;
-        }
-        self.validatedSchemas[options.type + ':' + options.subtype] = true;
-
-        schema.forEach(field => self.validateField(field, options));
+        schema.forEach(field => {
+          // Infinite recursion prevention
+          const key = `${options.type}:${options.subtype}.${field.name}`;
+          if (!self.validatedSchemas[key]) {
+            self.validatedSchemas[key] = true;
+            self.validateField(field, options);
+          }
+        });
       },
 
       // Validates a single schema field. See `validate`.
@@ -2213,7 +2259,12 @@ module.exports = {
           self.apos.util.error(format(s));
         }
         function format(s) {
-          return '\n' + options.type + ' ' + options.subtype + ', field name ' + field.name + ':\n\n' + s + '\n';
+          return stripIndent`
+            ${options.type} ${options.subtype}, ${field.type} field "${field.name}":
+
+            ${s}
+
+          `;
         }
       },
 
@@ -2526,6 +2577,32 @@ module.exports = {
 
     };
   },
+  apiRoutes(self) {
+    return {
+      get: {
+        async choices(req) {
+          const id = self.apos.launder.string(req.query.fieldId);
+          const field = self.getFieldById(id);
+          let choices = [];
+          if (
+            !field ||
+            field.type !== 'select' ||
+            !(field.choices && typeof field.choices === 'string')
+          ) {
+            throw self.apos.error('invalid');
+          }
+          choices = await self.apos.modules[field.moduleName][field.choices](req);
+          if (Array.isArray(choices)) {
+            return {
+              choices
+            };
+          } else {
+            throw self.apos.error('invalid', `The method ${field.choices} from the module ${field.moduleName} did not return an array`);
+          }
+        }
+      }
+    };
+  },
   extendMethods(self) {
     return {
       getBrowserData(_super, req) {
@@ -2540,7 +2617,7 @@ module.exports = {
           }
           fields[name] = component;
         }
-
+        browserOptions.action = self.action;
         browserOptions.components = { fields: fields };
         return browserOptions;
       }

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

@@ -69,6 +69,7 @@
                     :conditional-fields="conditionalFields()"
                     :value="currentDoc"
                     @input="currentDocUpdate"
+                    @validate="triggerValidate"
                     :server-errors="currentDocServerErrors"
                     ref="schema"
                   />

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

@@ -40,7 +40,10 @@ export default {
   },
   computed: {
     editLabel () {
-      return `Edit ${this.field.label}`;
+      return {
+        key: 'apostrophe:editType',
+        type: this.$t(this.field.label)
+      };
     }
   },
   methods: {

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

@@ -6,44 +6,15 @@
   >
     <template #body>
       <div class="apos-attachment">
-        <label
-          class="apos-input-wrapper apos-attachment-dropzone"
-          :class="{
-            'apos-attachment-dropzone--dragover': dragging,
-            'apos-is-disabled': disabled || limitReached
-          }"
-          @drop.prevent="uploadMedia"
-          @dragover="dragHandler"
-          @dragleave="dragging = false"
-        >
-          <p class="apos-attachment-instructions">
-            <template v-if="dragging">
-              <cloud-upload-icon :size="38" />
-            </template>
-            <AposSpinner v-else-if="uploading" />
-            <template v-else>
-              <paperclip-icon :size="14" class="apos-attachment-icon" />
-              {{ messages.primary }}&nbsp;
-              <span class="apos-attachment-highlight" v-if="messages.highlighted">
-                {{ messages.highlighted }}
-              </span>
-            </template>
-          </p>
-          <input
-            type="file"
-            class="apos-sr-only"
-            :disabled="disabled || limitReached"
-            @input="uploadMedia"
-            :accept="field.accept"
-          >
-        </label>
-        <div v-if="next && next._id" class="apos-attachment-files">
-          <AposSlatList
-            :value="next ? [ next ] : []"
-            @input="updated"
-            :disabled="field.readOnly"
-          />
-        </div>
+        <AposFile
+          :allowed-extensions="field.accept"
+          :uploading="uploading"
+          :disabled="disabled"
+          :attachment="next"
+          :def="field.def"
+          @upload-file="uploadMedia"
+          @update="updated"
+        />
       </div>
     </template>
   </AposInputWrapper>
@@ -51,13 +22,9 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
-import AposSlatList from 'Modules/@apostrophecms/ui/components/AposSlatList';
 
 export default {
   name: 'AposInputAttachment',
-  components: {
-    AposSlatList
-  },
   mixins: [ AposInputMixin ],
   emits: [ 'upload-started', 'upload-complete' ],
   data () {
@@ -67,46 +34,13 @@ export default {
       next: (this.value && (typeof this.value.data === 'object'))
         ? this.value.data : (this.field.def || null),
       disabled: false,
-      dragging: false,
-      uploading: false,
-      allowedExtensions: [ '*' ]
+      uploading: false
     };
   },
-  computed: {
-    messages () {
-      const msgs = {
-        primary: 'Drop a file here or',
-        highlighted: 'click to open the file explorer'
-      };
-      if (this.disabled) {
-        msgs.primary = 'Field is disabled';
-        msgs.highlighted = '';
-      }
-      if (this.limitReached) {
-        msgs.primary = 'Attachment limit reached';
-        msgs.highlighted = '';
-      }
-      return msgs;
-    },
-    limitReached () {
-      return !!(this.value.data && this.value.data._id);
-    }
-  },
   async mounted () {
     this.disabled = this.field.readOnly;
-
-    const groups = apos.modules['@apostrophecms/attachment'].fileGroups;
-    const groupInfo = groups.find(group => {
-      return group.name === this.field.fileGroup;
-    });
-    if (groupInfo && groupInfo.extensions) {
-      this.allowedExtensions = groupInfo.extensions;
-    }
   },
   methods: {
-    watchNext () {
-      this.validateAndEmit();
-    },
     updated (items) {
       // NOTE: This is limited to a single item.
       this.next = items.length > 0 ? items[0] : null;
@@ -118,31 +52,12 @@ export default {
 
       return false;
     },
-    async uploadMedia (event) {
+    async uploadMedia (file) {
       if (!this.disabled || !this.limitReached) {
         try {
-          this.dragging = false;
           this.disabled = true;
           this.uploading = true;
 
-          const file = event.target.files ? event.target.files[0] : event.dataTransfer.files[0];
-
-          if (!this.checkFileGroup(file.name)) {
-            const joined = this.allowedExtensions.join(this.$t('apostrophe:listJoiner'));
-            await apos.notify('apostrophe:fileTypeNotAccepted', {
-              type: 'warning',
-              icon: 'alert-circle-icon',
-              interpolate: {
-                extensions: joined
-              }
-            });
-
-            this.disabled = false;
-            this.uploading = false;
-
-            return;
-          }
-
           await apos.notify('apostrophe:uploading', {
             dismiss: true,
             icon: 'cloud-upload-icon',
@@ -183,71 +98,7 @@ export default {
           this.uploading = false;
         }
       }
-    },
-    checkFileGroup(filename) {
-      const fileExt = filename.split('.').pop();
-      return this.allowedExtensions[0] === '*' ||
-        this.allowedExtensions.includes(fileExt);
-    },
-    dragHandler (event) {
-      event.preventDefault();
-      if (!this.disabled && !this.dragging) {
-        this.dragging = true;
-      }
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-  .apos-attachment-dropzone {
-    @include apos-button-reset();
-    @include type-base;
-    display: block;
-    margin: 10px 0;
-    padding: 20px;
-    border: 2px dashed var(--a-base-8);
-    border-radius: var(--a-border-radius);
-    transition: all 0.2s ease;
-    &:hover {
-      border-color: var(--a-primary);
-      background-color: var(--a-base-10);
-    }
-    &:active,
-    &:focus {
-      border: 2px solid var(--a-primary);
-    }
-    &.apos-is-disabled {
-      color: var(--a-base-4);
-      background-color: var(--a-base-7);
-      border-color: var(--a-base-4);
-
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .apos-attachment-dropzone--dragover {
-    border: 2px dashed var(--a-primary);
-    background-color: var(--a-base-10);
-  }
-
-  .apos-attachment-instructions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    // v-html goofiness
-    & ::v-deep .apos-attachment-highlight {
-      color: var(--a-primary);
-      font-weight: var(--a-weight-bold);
-    }
-  }
-
-  .apos-attachment-icon {
-    transform: rotate(45deg);
-    margin-right: 5px;
-  }
-</style>

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

@@ -26,11 +26,14 @@
             :size="8" v-if="next === choice.value"
           />
         </span>
-        <span class="apos-choice-label-text" v-apos-tooltip.top="choice.tooltip">
+        <span class="apos-choice-label-text">
           {{ $t(choice.label) }}
-          <InformationIcon
+          <AposIndicator
             v-if="choice.tooltip"
-            :size="14"
+            class="apos-choice-label-info"
+            :tooltip="choice.tooltip"
+            :icon-size="14"
+            icon="information-icon"
           />
         </span>
       </label>
@@ -75,8 +78,8 @@ export default {
       border-radius: 50%;
     }
   }
-  .information-icon {
+  .apos-choice-label-info {
     position: relative;
-    top: 2px;
+    top: 3px;
   }
 </style>

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

@@ -3,6 +3,7 @@
     :field="field" :error="effectiveError"
     :uid="uid" :items="next"
     :display-options="displayOptions"
+    :modifiers="modifiers"
   >
     <template #additional>
       <AposMinMaxCount
@@ -14,6 +15,7 @@
       <div class="apos-input-wrapper apos-input-relationship">
         <div class="apos-input-relationship__input-wrapper">
           <input
+            v-if="!modifiers.includes('no-search')"
             class="apos-input apos-input--text apos-input--relationship"
             v-model="searchTerm" type="text"
             :placeholder="$t(placeholder)"
@@ -28,7 +30,7 @@
             class="apos-input-relationship__button"
             :disabled="field.readOnly || limitReached"
             :label="browseLabel"
-            :modifiers="['small']"
+            :modifiers="buttonModifiers"
             type="input"
             @click="choose"
           />
@@ -106,6 +108,13 @@ export default {
     },
     disableUnpublished() {
       return apos.modules[this.field.withType].localized;
+    },
+    buttonModifiers() {
+      const modifiers = [ 'small' ];
+      if (this.modifiers.includes('no-search')) {
+        modifiers.push('block');
+      }
+      return modifiers;
     }
   },
   watch: {
@@ -225,6 +234,19 @@ export default {
 
   .apos-input-relationship__items {
     padding: relative;
-    margin-top: 10px;
+    margin-top: $spacing-base;
+  }
+
+  .apos-field--small {
+    .apos-input-relationship__button {
+      padding: $spacing-half;
+    }
+  }
+  .apos-field--no-search {
+    .apos-input-relationship__button {
+      position: relative;
+      width: 100%;
+      padding: 0;
+    }
   }
 </style>