apostrophe 3.44.0 → 3.45.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 3.45.0 (2023-04-27)
+
+### Adds
+
+* Rich text widgets now support the `insert` option, an array
+which currently may contain the strings `image` and `table` in order to add a
+convenient "insert menu" that pops up when the slash key is pressed.
+This provides a better user experience for rich text features that shouldn't
+require that the user select existing text before using them.
+* Auto expand inline array width if needed using `width: max-content` in the admin UI.
+* The "browse" button is now available when selecting pages and pieces
+to link to in the rich text editor.
+* The "browse" button is also available when selecting inline images
+in the rich text editor.
+* Images are now previewed in the relationship field's compact list view.
+* The new `apos-refreshing` Apostrophe bus event can be used to prevent
+Apostrophe from refreshing the main content zone of the page when images
+and pieces are edited, by clearing the `refresh` property of the object
+passed to the event.
+* To facilitate custom click handlers, an `apos.modal.onTopOf(el1, el2)` function is now
+available to check whether an element is considered to be "on top of" another element in
+the modal stack.
+
+### Changes
+
+* The `v-click-outside-element` Vue directive now understands that modals "on top of"
+an element should be considered to be "inside" the element, e.g. clicks on them
+shouldn't close the link dialog etc.
+
+### Fixes
+
+* Rich text widgets save more reliably when many actions are taken quickly just before save.
+
 ## 3.44.0 (2023-04-13)
 
 ### Adds
@@ -13,6 +46,15 @@ This is useful when the goal is to allow REST API access to "guest" users who ha
 project-specific reasons to fetch access content via REST APIs.
 * `test-lib/utils.js` has new `createUser` and `loginAs` methods for the convenience of
 those writing mocha tests of Apostrophe modules.
+* `batchOperations` permissions: if a `permission` property is added to any entry in the `batchOperations` cascade of a piece-type module, this permission will be checked for every user. See `batchOperations` configuration in `modules/@apostrophecms/piece-type/index.js`. The check function `checkBatchOperationsPermissions` can be extended. Please note that this permission is checked only to determine whether to offer the operation.
+
+### Fixes
+* Fix child page slug when title is deleted
+
+### Fixes
+
+* Fix various issues on conditional fields that were occurring when adding new widgets with default values or selecting a falsy value in a field that has a conditional field relying on it.  
+Populate new or existing doc instances with default values and add an empty `null` choice to select fields that do not have a default value (required or not) and to the ones configured with dynamic choices.
 
 ## 3.43.0 (2023-03-29)
 

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -469,7 +469,6 @@ export default {
       }
     },
     async onContentChanged(e) {
-
       if (
         (e.doc && (e.doc._id === this.context._id)) ||
         (e.docIds && e.docIds.includes(this.context._id))
@@ -485,9 +484,15 @@ export default {
           });
         }
       }
-      await this.refresh({
-        scrollcheck: e.action === 'history'
-      });
+      const refreshOptions = {
+        refresh: true
+      };
+      apos.bus.$emit('apos-refreshing', refreshOptions);
+      if (refreshOptions.refresh) {
+        await this.refresh({
+          scrollcheck: e.action === 'history'
+        });
+      }
     },
     async switchEditMode(editing) {
       this.editMode = editing;

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -464,7 +464,10 @@ export default {
             this.docType = docData.type;
           }
           this.original = klona(docData);
-          this.docFields.data = docData;
+          this.docFields.data = {
+            ...this.getDefault(),
+            ...docData
+          };
           if (this.published) {
             this.changed = detectDocChange(this.schema, this.original, this.published, { differences: true });
           }
@@ -473,6 +476,21 @@ export default {
         }
       }
     },
+    getDefault() {
+      const doc = {};
+      this.schema.forEach(field => {
+        if (field.name.startsWith('_')) {
+          return;
+        }
+        // Using `hasOwn` here, not simply checking if `field.def` is truthy
+        // so that `false`, `null`, `''` or `0` are taken into account:
+        const hasDefaultValue = Object.hasOwn(field, 'def');
+        doc[field.name] = hasDefaultValue
+          ? klona(field.def)
+          : null;
+      });
+      return doc;
+    },
     async preview() {
       if (!await this.confirmAndCancel()) {
         return;

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -193,6 +193,7 @@
   "hideInNavigation": "Hide in Navigation",
   "home": "Home",
   "image": "Image",
+  "imageDescription": "Add an inline image",
   "imageFile": "Image File",
   "imagePlaceholder": "Image placeholder",
   "imageTag": "Image Tag",
@@ -375,11 +376,13 @@
   "richTextH4": "Heading 4 (H4)",
   "richTextHighlight": "Mark",
   "richTextHorizontalRule": "Horizontal Rule",
+  "richTextInsertMenuHeading": "Insert...",
   "richTextItalic": "Italic",
   "richTextLink": "Link",
   "richTextOrderedList": "Ordered List",
   "richTextParagraph": "Paragraph (P)",
   "richTextPlaceholder": "Start Typing Here...",
+  "richTextPlaceholderWithInsertMenu": "Start Typing Here or Press /...",
   "richTextRedo": "Redo",
   "richTextStrikethrough": "Strike",
   "richTextStyleConfigWarning": "Misconfigured rich text style: label: {{ label }}, {{ tag }}",
@@ -438,6 +441,7 @@
   "superscript": "Superscript",
   "switchLocalesAndLocalizePage": "Switch locales and localize page to {{ label }}?",
   "table": "Table",
+  "tableDescription": "Add tabular content to your page",
   "tagYourImages": "Tag your images to make searching and filtering the media manager easier",
   "tags": "Tags",
   "takeActionAndCreateNew": "{{ saveLabel }} and Create New",

package/modules/@apostrophecms/modal/ui/apos/apps/AposModals.js

@@ -31,6 +31,38 @@ export default function() {
       },
       getProperties(id) {
         return this.$refs.modals.getProperties(id);
+      },
+      // Returns true if el1 is "on top of" el2 in the
+      // modal stack, as viewed by the user. If el1 is a
+      // modal that appears later in the stack than el2
+      // (visually stacked on top), this method returns true.
+      // If el2 is `document` and el1 is a modal, this
+      // method returns true. For convenenience, if el1
+      // or el2 is not a modal, it is treated as its DOM
+      // parent modal, or as `document`. If el1 has no
+      // parent modal this method always returns false.
+      onTopOf(el1, el2) {
+        if (!el1.matches('[data-apos-modal]')) {
+          el1 = el1.closest('[data-apos-modal]') || document;
+        }
+        if (!el2.matches('[data-apos-modal]')) {
+          el2 = el2.closest('[data-apos-modal]') || document;
+        }
+        if (el1 === document) {
+          return false;
+        }
+        if (el2 === document) {
+          return true;
+        }
+        const index1 = apos.modal.stack.findIndex(modal => modal.$el === el1);
+        const index2 = apos.modal.stack.findIndex(modal => modal.$el === el2);
+        if (index1 === -1) {
+          throw new Error('apos.modal.onTopOf: el1 is not in the modal stack');
+        }
+        if (index2 === -1) {
+          throw new Error('apos.modal.onTopOf: el2 is not in the modal stack');
+        }
+        return index1 > index2;
       }
     },
     render(h) {
@@ -45,6 +77,7 @@ export default function() {
   apos.modal.execute = theAposModals.execute;
   apos.modal.getAt = theAposModals.getAt;
   apos.modal.getProperties = theAposModals.getProperties;
+  apos.modal.onTopOf = theAposModals.onTopOf;
   apos.modal.stack = [];
   apos.confirm = theAposModals.confirm;
   apos.alert = theAposModals.alert;

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -12,6 +12,7 @@
       aria-modal="true"
       :aria-labelledby="id"
       ref="modalEl"
+      data-apos-modal
     >
       <transition :name="transitionType">
         <div

package/modules/@apostrophecms/modal/ui/apos/components/TheAposModals.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="apos-modals" :class="themeClass">
+  <div
+    id="apos-modals" :class="themeClass"
+  >
     <component
       v-for="modal in stack" :key="modal.id"
       :is="modal.componentName"

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

@@ -252,11 +252,14 @@ export default {
             result = false;
             break;
           }
-          if (Array.isArray(self.getFieldValue(key))) {
-            result = self.getFieldValue(key).includes(val);
+
+          const fieldValue = self.getFieldValue(key);
+
+          if (Array.isArray(fieldValue)) {
+            result = fieldValue.includes(val);
             break;
           }
-          if (val !== self.getFieldValue(key)) {
+          if (val !== fieldValue) {
             result = false;
             break;
           }

package/modules/@apostrophecms/piece-type/index.js

@@ -133,7 +133,8 @@ module.exports = {
           title: 'apostrophe:publishType',
           description: 'apostrophe:publishingBatchConfirmation',
           confirmationButton: 'apostrophe:publishingBatchConfirmationButton'
-        }
+        },
+        permission: 'edit'
       },
       archive: {
         label: 'apostrophe:archive',
@@ -149,7 +150,8 @@ module.exports = {
           title: 'apostrophe:archiveType',
           description: 'apostrophe:archivingBatchConfirmation',
           confirmationButton: 'apostrophe:archivingBatchConfirmationButton'
-        }
+        },
+        permission: 'edit'
       },
       restore: {
         label: 'apostrophe:restore',
@@ -165,7 +167,8 @@ module.exports = {
           title: 'apostrophe:restoreType',
           description: 'apostrophe:restoreBatchConfirmation',
           confirmationButton: 'apostrophe:restoreBatchConfirmationButton'
-        }
+        },
+        permission: 'edit'
       }
     },
     group: {
@@ -1053,6 +1056,14 @@ module.exports = {
           await self.apos.doc.db.deleteMany({ _id: { $in: deletes } });
           deletes.splice(0);
         }
+      },
+      checkBatchOperationsPermissions(req) {
+        return self.batchOperations.filter(batchOperation => {
+          if (batchOperation.permission) {
+            return self.apos.permission.can(req, batchOperation.permission, self.name);
+          }
+          return true;
+        });
       }
     };
   },
@@ -1063,7 +1074,7 @@ module.exports = {
         // Options specific to pieces and their manage modal
         browserOptions.filters = self.filters;
         browserOptions.columns = self.columns;
-        browserOptions.batchOperations = self.batchOperations;
+        browserOptions.batchOperations = self.checkBatchOperationsPermissions(req);
         browserOptions.utilityOperations = self.utilityOperations;
         browserOptions.insertViaUpload = self.options.insertViaUpload;
         browserOptions.quickCreate = !self.options.singleton && self.options.quickCreate && self.apos.permission.can(req, 'edit', self.name, 'draft');

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

@@ -12,6 +12,7 @@ module.exports = {
     contextual: true,
     placeholder: true,
     placeholderText: 'apostrophe:richTextPlaceholder',
+    placeholderTextWithInsertMenu: 'apostrophe:richTextPlaceholderWithInsertMenu',
     defaultData: { content: '' },
     className: false,
     linkWithType: [ '@apostrophecms/any-page-type' ],
@@ -203,6 +204,20 @@ module.exports = {
         icon: 'image-icon'
       }
     },
+    editorInsertMenu: {
+      table: {
+        icon: 'table-icon',
+        label: 'apostrophe:table',
+        action: 'insertTable',
+        description: 'apostrophe:tableDescription'
+      },
+      image: {
+        icon: 'image-icon',
+        label: 'apostrophe:image',
+        description: 'apostrophe:imageDescription',
+        component: 'AposImageControlDialog'
+      }
+    },
     // Additional properties used in executing tiptap commands
     // Will be mixed in automatically for developers
     tiptapTextCommands: {
@@ -243,7 +258,8 @@ module.exports = {
   },
   icons: {
     'format-text-icon': 'FormatText',
-    'format-color-highlight-icon': 'FormatColorHighlight'
+    'format-color-highlight-icon': 'FormatColorHighlight',
+    'table-icon': 'Table'
   },
   methods(self) {
     return {
@@ -355,7 +371,7 @@ module.exports = {
           image: [ 'figure', 'img', 'figcaption' ],
           div: [ 'div' ]
         };
-        for (const item of options.toolbar || []) {
+        for (const item of self.combinedItems(options)) {
           if (simple[item]) {
             for (const tag of simple[item]) {
               allowedTags[tag] = true;
@@ -423,7 +439,7 @@ module.exports = {
             }
           ]
         };
-        for (const item of options.toolbar || []) {
+        for (const item of self.combinedItems(options)) {
           if (simple[item]) {
             const entries = Array.isArray(simple[item]) ? simple[item] : [ simple[item] ];
             for (const entry of entries) {
@@ -466,7 +482,7 @@ module.exports = {
             }
           }
         };
-        for (const item of options.toolbar || []) {
+        for (const item of self.combinedItems(options)) {
           if (simple[item]) {
             if (!allowedStyles[simple[item].selector]) {
               allowedStyles[simple[item].selector] = {};
@@ -487,7 +503,7 @@ module.exports = {
 
       toolbarToAllowedClasses(options) {
         const allowedClasses = {};
-        if ((options.toolbar || []).includes('styles')) {
+        if (self.combinedItems(options).includes('styles')) {
           for (const style of options.styles || []) {
             const tag = style.tag;
             const classes = self.getStyleClasses(style);
@@ -503,6 +519,12 @@ module.exports = {
         return allowedClasses;
       },
 
+      // Returns a combined array of toolbar and insert menu items from the given
+      // set of rich text widget options
+      combinedItems(options) {
+        return [ ...(options.toolbar || []), ...(options.insert || []) ];
+      },
+
       getStyleClasses(heading) {
         if (!heading.class) {
           return [];
@@ -700,10 +722,13 @@ module.exports = {
         const finalData = {
           ...initialData,
           tools: self.options.editorTools,
+          insertMenu: self.options.editorInsertMenu,
           defaultOptions: self.options.defaultOptions,
           tiptapTextCommands: self.options.tiptapTextCommands,
           tiptapTypes: self.options.tiptapTypes,
           placeholderText: self.options.placeholder && self.options.placeholderText,
+          // Not optional in presence of an insert menu, it's not acceptable UX without it
+          placeholderTextWithInsertMenu: self.options.placeholderTextWithInsertMenu,
           linkWithType: Array.isArray(self.options.linkWithType) ? self.options.linkWithType : [ self.options.linkWithType ],
           imageStyles: self.options.imageStyles
         };

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

@@ -0,0 +1,237 @@
+<template>
+  <div
+    v-if="active"
+    v-click-outside-element="close"
+    class="apos-popover apos-image-control__dialog"
+    x-placement="bottom"
+    :class="{
+      'apos-is-triggered': active,
+      'apos-has-selection': true
+    }"
+  >
+    <AposContextMenuDialog
+      menu-placement="bottom-start"
+    >
+      <AposSchema
+        :schema="schema"
+        :trigger-validation="triggerValidation"
+        v-model="docFields"
+        :utility-rail="false"
+        :modifiers="formModifiers"
+        :key="lastSelectionTime"
+        :generation="generation"
+        :following-values="followingValues()"
+        :conditional-fields="conditionalFields()"
+      />
+      <footer class="apos-image-control__footer">
+        <AposButton
+          type="default" label="apostrophe:cancel"
+          @click="close"
+          :modifiers="formModifiers"
+        />
+        <AposButton
+          type="primary" label="apostrophe:save"
+          @click="save"
+          :modifiers="formModifiers"
+        />
+      </footer>
+    </AposContextMenuDialog>
+  </div>
+</template>
+
+<script>
+import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+
+export default {
+  name: 'AposImageControlDialog',
+  mixins: [ AposEditorMixin ],
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: [ 'before-commands', 'close' ],
+  data() {
+    return {
+      generation: 1,
+      triggerValidation: false,
+      docFields: {
+        data: {}
+      },
+      formModifiers: [ 'small', 'margin-micro' ],
+      originalSchema: [
+        {
+          name: '_image',
+          type: 'relationship',
+          label: apos.image.label,
+          withType: '@apostrophecms/image',
+          required: true,
+          max: 1,
+          // Temporary until we fix our modals to
+          // stack interchangeably with tiptap's
+          browse: true
+        },
+        ...(getOptions().imageStyles ? [
+          {
+            name: 'style',
+            label: this.$t('apostrophe:style'),
+            type: 'select',
+            choices: getOptions().imageStyles,
+            def: getOptions().imageStyles?.[0].value,
+            required: true
+          }
+        ] : []
+        ),
+        {
+          name: 'caption',
+          label: this.$t('apostrophe:caption'),
+          type: 'string'
+        }
+      ]
+    };
+  },
+  computed: {
+    lastSelectionTime() {
+      return this.editor.view.lastSelectionTime;
+    },
+    schema() {
+      return this.originalSchema;
+    }
+  },
+  watch: {
+    active(newVal) {
+      if (newVal) {
+        window.addEventListener('keydown', this.keyboardHandler);
+        this.populateFields();
+      } else {
+        window.removeEventListener('keydown', this.keyboardHandler);
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    save() {
+      this.triggerValidation = true;
+      this.$nextTick(() => {
+        if (this.docFields.hasErrors) {
+          return;
+        }
+        const image = this.docFields.data._image[0];
+        this.docFields.data.imageId = image && image.aposDocId;
+        this.$emit('before-commands');
+        this.editor.commands.setImage({
+          imageId: this.docFields.data.imageId,
+          caption: this.docFields.data.caption,
+          style: this.docFields.data.style
+        });
+        this.close();
+      });
+    },
+    keyboardHandler(e) {
+      if (e.keyCode === 27) {
+        this.close();
+      }
+      if (e.keyCode === 13) {
+        if (this.docFields.data.href || e.metaKey) {
+          this.save();
+          this.close();
+        }
+        e.preventDefault();
+      }
+    },
+    async populateFields() {
+      try {
+        const attrs = this.editor.getAttributes('image');
+        this.docFields.data = {};
+        this.schema.forEach((item) => {
+          this.docFields.data[item.name] = attrs[item.name] || '';
+        });
+        const defaultStyle = getOptions().imageStyles?.[0]?.value;
+        if (defaultStyle && !this.docFields.data.style) {
+          this.docFields.data.style = defaultStyle;
+        }
+        if (attrs.imageId) {
+          try {
+            const doc = await apos.http.get(`/api/v1/@apostrophecms/image/${attrs.imageId}`, {
+              busy: true
+            });
+            this.docFields.data._image = [ doc ];
+          } catch (e) {
+            if (e.status === 404) {
+              // No longer available
+              this.docFields._image = [];
+            } else {
+              throw e;
+            }
+          }
+        }
+      } finally {
+        this.generation++;
+      }
+    }
+  }
+};
+
+function getOptions() {
+  return apos.modules['@apostrophecms/rich-text-widget'];
+}
+</script>
+
+<style lang="scss" scoped>
+  .apos-image-control {
+    position: relative;
+    display: inline-block;
+  }
+
+  .apos-image-control__dialog {
+    z-index: $z-index-modal;
+    position: absolute;
+    top: calc(100% + 5px);
+    left: -15px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .apos-context-menu__dialog {
+    width: 500px;
+  }
+
+  .apos-image-control__dialog.apos-is-triggered {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .apos-is-active {
+    background-color: var(--a-base-7);
+  }
+
+  .apos-image-control__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
+
+  .apos-image-control__footer .apos-button__wrapper {
+    margin-left: 7.5px;
+  }
+
+  .apos-image-control__remove {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  // special schema style for this use
+  .apos-image-control ::v-deep .apos-field--target {
+    .apos-field__label {
+      display: none;
+    }
+  }
+
+</style>