apostrophe 4.4.3 → 4.5.1

package/modules/@apostrophecms/modal/ui/apos/mixins/AposDocsManagerMixin.js

@@ -96,6 +96,7 @@ export default {
       if (newValue.length) {
         this.generateUi();
       }
+
       if (this.selectPending.size > 0) {
         const newChecked = [ ...this.checked, ...this.selectPending ];
         this.checked = [ ...new Set(newChecked) ];
@@ -111,58 +112,31 @@ export default {
           doc._fields = this.subfields[doc._id];
         }
       }
+    },
+    checked() {
+      this.updateCheckedDocs();
     }
   },
   methods: {
-    addCheckedDoc(docOrId) {
-      this.concatCheckedDocs([ docOrId ]);
-    },
-    setCheckedDocs(docsOrIds) {
-      const docs = this.getDocs(docsOrIds);
-
-      this.checked = docs.map(item => item._id);
-      this.checkedDocs = docs;
-    },
-    concatCheckedDocs(docsOrIds) {
-      const docs = this.getDocs(docsOrIds);
-
-      this.checked = [ ...this.checked, ...docs.map(({ _id }) => _id) ];
-      this.checkedDocs = [ ...this.checkedDocs, ...docs ];
-    },
-    removeCheckedDoc(id) {
-      this.checked = this.checked.filter((checkedId) => checkedId !== id);
-      this.checkedDocs = this.checkedDocs.filter((doc) => doc.id !== id);
-    },
-    getDocs(docsOrIds) {
-      const items = this.moduleOptions.name === '@apostrophecms/page'
-        ? this.pagesFlat
-        : this.items;
-
-      return docsOrIds.map(docOrId => {
-        return docOrId._id
-          ? docOrId
-          : items.find(item => item._id === docOrId);
-      });
-    },
     // It would have been nice for this to be computed, however
     // AposMediaManagerDisplay does not re-render when it is
     // a computed prop rather than a method call in the template.
-    maxReached() {
+    maxReached(checkedCount = this.checked.length) {
       // Reaching max and exceeding it are different things
-      return this.relationshipField.max &&
-        this.checked.length >= this.relationshipField.max;
+      return this.relationshipField.max && checkedCount >= this.relationshipField.max;
     },
     selectAll() {
       if (!this.checked.length) {
+        const ids = [];
         this.items.forEach((item) => {
           const notPublished = this.manuallyPublished && !item.lastPublishedAt;
-          if (this.relationshipField && (this.maxReached() || notPublished)) {
+          if (this.relationshipField && (this.maxReached(ids.length) || notPublished)) {
             return;
           }
-
-          this.addCheckedDoc(item);
+          ids.push(item._id);
         });
 
+        this.checked = ids;
         return;
       }
 
@@ -170,7 +144,7 @@ export default {
         this.allPiecesSelection.isSelected = false;
       }
 
-      this.setCheckedDocs([]);
+      this.checked = [];
     },
     iconSize(header) {
       if (header.icon) {
@@ -231,7 +205,13 @@ export default {
           return true;
         }
         if (this.relationshipField.schema) {
-          if (detectDocChange(this.relationshipField.schema, this.chosen[i]._fields, this.checkedDocs[i]._fields)) {
+          if (
+            detectDocChange(
+              this.relationshipField.schema,
+              this.chosen[i]._fields,
+              this.checkedDocs[i]._fields
+            )
+          ) {
             return true;
           }
         }
@@ -243,7 +223,9 @@ export default {
     docsManagerRemoveEventHandlers() {
       apos.bus.$off('content-changed', this.docsManagerOnContentChanged);
     },
-    docsManagerOnContentChanged({ doc, select }) {
+    docsManagerOnContentChanged({
+      doc, select, action
+    }) {
       if (!select) {
         return;
       }
@@ -258,6 +240,29 @@ export default {
         // a published doc _id without a fuss
         this.selectPending.add(doc._id.replace(':published', ':draft'));
       }
+    },
+    // update this.checkedDocs based on this.checked. The default
+    // implementation is suitable for paginated lists. Can be overridden
+    // for other cases.
+    updateCheckedDocs() {
+      // Keep `checkedDocs` in sync with `checked`, first removing from
+      // `checkedDocs` if no longer in `checked`
+      this.checkedDocs = this.checkedDocs.filter(doc => {
+        return this.checked.includes(doc._id);
+      });
+      // then adding to `checkedDocs` if not there yet. These should be in
+      // `items` which is assumed to contain a flat list of items currently
+      // visible.
+      //
+      // TODO: Once we have the option to select all docs of a type even if not
+      // currently visible in the manager this will need to make calls to the
+      // database.
+      this.checked.forEach(id => {
+        if (this.checkedDocs.findIndex(doc => doc._id === id) === -1) {
+          const found = this.items.find(item => item._id === id);
+          found && this.checkedDocs.push(found);
+        }
+      });
     }
   }
 };

package/modules/@apostrophecms/modal/ui/apos/mixins/AposModalTabsMixin.js

@@ -1,4 +1,4 @@
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 
 // Provide basic bridging functionality between tabs
 // and the modal body.
@@ -6,7 +6,7 @@ import cuid from 'cuid';
 export default {
   data() {
     return {
-      tabKey: cuid(),
+      tabKey: createId(),
       currentTab: null
     };
   },

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

@@ -97,7 +97,7 @@ module.exports = {
         // Tolerant URL handling
         url = self.apos.launder.url(url, null, true);
         if (!url) {
-          throw self.apos.error('invalid', 'Video URL invalid');
+          throw self.apos.error('invalid', req.t('apostrophe:oembedVideoUrlInvalid'));
         }
         const key = url + ':' + JSON.stringify(options);
         let response = await self.apos.cache.get('@apostrophecms/oembed', key);
@@ -110,7 +110,7 @@ module.exports = {
           try {
             response = await require('util').promisify(self.oembetter.fetch)(url, options);
           } catch (err) {
-            throw self.apos.error('invalid', 'Video URL invalid');
+            throw self.apos.error('invalid', req.t('apostrophe:oembedVideoUrlInvalid'));
           }
         }
         // Make non-secure URLs protocol relative and

package/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue

@@ -94,7 +94,7 @@ export default {
         this.field.oembedType && this.oembedResult.type &&
         this.oembedResult.type !== this.field.oembedType
       ) {
-        return { message: 'Embed type not supported' };
+        return { message: this.$t('apostrophe:oembedTypeNotSupported') };
       } else if (this.oembedError) {
         return this.oembedError.message ? {
           message: this.oembedError.message
@@ -137,7 +137,7 @@ export default {
         if (error.body && error.body.message) {
           this.oembedError = error.body;
         } else {
-          this.oembedError = { message: 'Invalid embed URL' };
+          this.oembedError = { message: this.$t('apostrophe:oembedInvalidEmbedUrl') };
         }
         this.next.title = '';
         this.next.thumbnail = '';

package/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue

@@ -79,13 +79,12 @@
         </template>
         <template #bodyMain>
           <AposTree
-            :checked="checked"
+            v-model:checked="checked"
             :items="items"
             :headers="headers"
             :icons="icons"
             :options="treeOptions"
             :module-options="moduleOptions"
-            @update:checked="setCheckedDocs"
             @update="update"
           />
         </template>

package/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js

@@ -54,16 +54,16 @@ export default {
       },
       moreMenu: [
         {
-          label: 'New Page',
+          label: 'apostrophe:newPage',
           action: 'new'
         }
       ],
       moreMenuButton: {
         tooltip: {
-          content: 'More Options',
+          content: 'apostrophe:moreOptions',
           placement: 'bottom'
         },
-        label: 'More Options',
+        label: 'apostrophe:moreOptions',
         icon: 'dots-vertical-icon',
         iconOnly: true,
         type: 'subtle',
@@ -95,9 +95,9 @@ export default {
     },
     saveRelationshipLabel() {
       if (this.relationshipField && (this.relationshipField.max === 1)) {
-        return 'Select Page';
+        return 'apostrophe:selectPage';
       } else {
-        return 'Select Pages';
+        return 'apostrophe:selectPages';
       }
     },
     headers() {
@@ -253,11 +253,12 @@ export default {
     },
     toggleRowCheck(id) {
       if (this.checked.includes(id)) {
-        this.removeCheckedDoc(id);
+        this.checked = this.checked.filter(item => item !== id);
       } else {
-        this.addCheckedDoc(id);
+        this.checked = [ ...this.checked, id ];
       }
     },
+    // This is not used for now
     selectAll(event) {
       if (!this.checked.length) {
         this.pagesFlat.forEach((row) => {
@@ -288,6 +289,12 @@ export default {
         this.checkedDocs.push(doc);
         this.checked.push(doc._id);
       }
+    },
+    setCheckedDocs(checkedDocs) {
+      this.checked = checkedDocs.map(doc => doc._id);
+    },
+    updateCheckedDocs() {
+      this.checkedDocs = this.checked.map(_id => this.pagesFlat.find(page => page._id === _id));
     }
   }
 };

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -102,7 +102,7 @@
         <template #bodyMain>
           <AposDocsManagerDisplay
             v-if="items.length > 0"
-            :checked="checked"
+            v-model:checked="checked"
             :items="items"
             :headers="headers"
             :options="{
@@ -111,7 +111,6 @@
               disableUnpublished: disableUnpublished,
               manuallyPublished: manuallyPublished
             }"
-            @update:checked="setCheckedDocs"
             @open="edit"
           />
           <div v-else class="apos-pieces-manager__empty">
@@ -244,13 +243,13 @@ export default {
     await this.getAllPiecesTotal();
     this.modal.triggerFocusRefresh++;
 
-    apos.bus.$on('content-changed', this.getPieces);
+    apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
   unmounted() {
     this.destroyShortcuts();
-    apos.bus.$off('content-changed', this.getPieces);
+    apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-create-new', this.create);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -427,15 +426,17 @@ export default {
       const result = await apos.modal.execute('AposRelationshipEditor', {
         schema: this.relationshipField.schema,
         title: item.title,
-        value: item._fields
+        modelValue: item._fields
       });
       if (result) {
-        const index = this.checkedDocs.findIndex(_item => _item._id === item._id);
-        // TODO verify it's still reactive, should be based on the doc
-        // Or use a filter here
-        this.checkedDocs.splice(index, 1, {
-          ...this.checkedDocs[index],
-          _fields: result
+        this.checkedDocs = this.checkedDocs.map((doc) => {
+          if (doc._id !== item._id) {
+            return doc;
+          }
+          return {
+            ...doc,
+            _fields: result
+          };
         });
       }
     },
@@ -476,6 +477,17 @@ export default {
           console.error(error);
         }
       }
+    },
+    setCheckedDocs(checked) {
+      this.checkedDocs = checked;
+      this.checked = this.checkedDocs.map(item => {
+        return item._id;
+      });
+    },
+
+    async onContentChanged({ doc, action }) {
+      await this.getPieces();
+      this.getAllPiecesTotal();
     }
   }
 };

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue

@@ -52,7 +52,10 @@
             :field="{
               name: item._id,
               hideLabel: true,
-              label: `Toggle selection of ${item.title}`,
+              label: $t({
+                key: 'apostrophe:toggleSelectionOf',
+                title: item.title
+              }),
               readOnly:
                 (options.disableUnchecked && !checkProxy.includes(item._id)) ||
                 (options.disableUnpublished && !item.lastPublishedAt)

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -290,6 +290,11 @@ module.exports = {
         component: 'AposTiptapImage',
         label: 'apostrophe:image',
         icon: 'image-icon'
+      },
+      color: {
+        component: 'AposTiptapColor',
+        label: 'apostrophe:richTextColor',
+        command: 'setColor'
       }
     },
     editorInsertMenu: {
@@ -477,7 +482,8 @@ module.exports = {
           subscript: [ 'sub' ],
           table: [ 'table', 'tr', 'td', 'th' ],
           image: [ 'figure', 'img', 'figcaption' ],
-          div: [ 'div' ]
+          div: [ 'div' ],
+          color: [ 'span' ]
         };
         for (const item of self.combinedItems(options)) {
           if (simple[item]) {
@@ -547,7 +553,11 @@ module.exports = {
               tag: 'img',
               attributes: [ 'src', 'alt' ]
             }
-          ]
+          ],
+          color: {
+            tag: '*',
+            attributes: [ 'style' ]
+          }
         };
         for (const item of self.combinedItems(options)) {
           if (simple[item]) {
@@ -590,6 +600,23 @@ module.exports = {
             properties: {
               'text-align': [ /^justify$/ ]
             }
+          },
+          color: {
+            selector: '*',
+            properties: {
+              color: [
+                // Hexadecimal colors (3 or 6 digits, optionally with alpha)
+                /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{4})$/i,
+                // RGB colors
+                /^rgb\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)$/,
+                // RGBA colors
+                /^rgba\(\s*(?:\d{1,3}\s*,\s*){3}(?:0?\.\d+|1(?:\.0)?)\s*\)$/,
+                // HSL colors
+                /^hsl\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/,
+                // HSLA colors
+                /^hsla\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)$/
+              ]
+            }
           }
         };
         for (const item of self.combinedItems(options)) {
@@ -891,7 +918,8 @@ module.exports = {
           placeholderTextWithInsertMenu: self.options.placeholderTextWithInsertMenu,
           linkWithType: Array.isArray(self.options.linkWithType) ? self.options.linkWithType : [ self.options.linkWithType ],
           linkSchema: self.linkSchema,
-          imageStyles: self.options.imageStyles
+          imageStyles: self.options.imageStyles,
+          color: self.options.color
         };
         return finalData;
       }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -13,7 +13,7 @@
         animation: 'fade',
         inertia: true,
         placement: 'bottom',
-        hideOnClick: true
+        hideOnClick: false
       }"
       :editor="editor"
     >