apostrophe 4.3.3 → 4.4.0

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

@@ -1,5 +1,8 @@
 <template>
-  <div :aria-controls="`insert-menu-${modelValue._id}`" @keydown="handleUIKeydown">
+  <div
+    :aria-controls="`insert-menu-${modelValue._id}`"
+    @keydown="handleUIKeydown"
+  >
     <bubble-menu
       v-if="editor"
       class="bubble-menu"
@@ -9,7 +12,8 @@
         zIndex: 2000,
         animation: 'fade',
         inertia: true,
-        placement: 'bottom'
+        placement: 'bottom',
+        hideOnClick: true
       }"
       :editor="editor"
     >
@@ -713,7 +717,6 @@ function traverseNextNode(node) {
   }
 
   :deep(.apos-rich-text-toolbar) {
-
     & > .apos-context-menu__pane {
       padding: 8px;
       border: 1px solid var(--a-primary-transparent-25);
@@ -721,24 +724,24 @@ function traverseNextNode(node) {
       border-radius: var(--a-border-radius-large);
     }
 
-    .apos-is-active .apos-button--rich-text:after,
-    .apos-button--rich-text:hover:after,
-    .apos-button--rich-text:active:after,
-    .apos-button--rich-text:focus:after {
+    .apos-is-active .apos-button--rich-text::after,
+    .apos-button--rich-text:hover::after,
+    .apos-button--rich-text:active::after,
+    .apos-button--rich-text:focus::after {
       opacity: 1;
       transform: scale(1.15) translateY(0);
     }
 
-    .apos-is-active .apos-button--rich-text:after {
+    .apos-is-active .apos-button--rich-text::after {
       background-color: var(--a-primary-transparent-10);
     }
 
-    .apos-is-active .apos-button--rich-text:hover:after {
+    .apos-is-active .apos-button--rich-text:hover::after {
       background-color: var(--a-primary-transparent-15);
     }
 
     .apos-button--rich-text .apos-button__icon {
-      transition: all 0.3s var(--a-transition-timing-bounce);
+      transition: all 300ms var(--a-transition-timing-bounce);
     }
 
     .apos-button--rich-text {
@@ -749,26 +752,33 @@ function traverseNextNode(node) {
       border-radius: var(--a-border-radius);
       background-color: transparent;
       color: var(--a-base-1);
+
       &.apos-button--icon-only {
         width: 24px;
         padding: 0;
       }
+
       &:hover {
         background-color: transparent;
       }
-      &:hover:after {
+
+      &:hover::after {
         background-color: var(--a-base-9);
       }
+
       &:active {
         background-color: transparent;
       }
+
       &:active .apos-button__icon {
         transform: scale(0.8);
       }
-      &:active:after, &:focus:after {
+
+      &:active::after, &:focus::after {
         background-color: var(--a-primary-transparent-25);
       }
-      &:after {
+
+      &::after {
         content: '';
         z-index: $z-index-button-background;
         position: absolute;
@@ -779,9 +789,9 @@ function traverseNextNode(node) {
         height: 100%;
         background-color: transparent;
         transition:
-          opacity 0.5s var(--a-transition-timing-bounce),
-          transform 0.5s var(--a-transition-timing-bounce),
-          background-color 0.5s ease;
+          opacity 500ms var(--a-transition-timing-bounce),
+          transform 500ms var(--a-transition-timing-bounce),
+          background-color 500ms ease;
         opacity: 0;
         transform: scale(0.3) translateY(-4px);
       }
@@ -811,43 +821,42 @@ function traverseNextNode(node) {
     gap: 6px;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror) {
+  .apos-rich-text-editor__editor :deep(.ProseMirror) { /* stylelint-disable-line selector-class-pattern */
     @include apos-transition();
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror:focus) {
+  .apos-rich-text-editor__editor :deep(.ProseMirror:focus) { /* stylelint-disable-line selector-class-pattern */
     outline: none;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror) {
+  .apos-rich-text-editor__editor :deep(.ProseMirror) { /* stylelint-disable-line selector-class-pattern */
     padding: 10px 0;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror:focus p.apos-is-empty::after) {
+  .apos-rich-text-editor__editor :deep(.ProseMirror:focus p.apos-is-empty::after) { /* stylelint-disable-line selector-class-pattern, selector-no-qualifying-type */
     display: block;
     margin: 5px 0 10px;
+    padding-top: 5px;
+    border-top: 1px solid var(--a-primary-transparent-50);
     color: var(--a-primary-transparent-50);
     font-size: var(--a-type-smaller);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 600;
-    border-top: 1px solid var(--a-primary-transparent-50);
-    padding-top: 5px;
     content: attr(data-placeholder);
     pointer-events: none;
   }
 
   .apos-rich-text-editor__editor {
     @include apos-transition();
+
     position: relative;
     border-radius: var(--a-border-radius);
     background-color: transparent;
   }
 
   .apos-rich-text-editor__editor :deep([data-tippy-root]) {
-    transition: all 0.4s var(--a-transition-timing-bounce);
-    /* stylelint-disable-next-line time-min-milliseconds */
-    transition-delay: 0.1s;
+    transition: transform 400ms var(--a-transition-timing-bounce) 100ms;
   }
 
   .apos-rich-text-editor__editor :deep(.tippy-box[data-animation='fade'][data-state='hidden']) {
@@ -859,13 +868,12 @@ function traverseNextNode(node) {
     background-color: var(--a-primary-transparent-10);
     min-height: 50px;
   }
+
   .apos-rich-text-editor__editor_after {
     @include type-small;
+
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: block;
     width: 200px;
     height: 10px;
@@ -878,11 +886,13 @@ function traverseNextNode(node) {
     text-transform: uppercase;
     letter-spacing: 1px;
     text-align: center;
+
     &.apos-is-visually-empty {
       opacity: 1;
       visibility: visible;
     }
   }
+
   :deep(.apos-rich-text-toolbar__inner > .apos-rich-text-editor__control) {
     /* Addresses a Safari-only situation where it inherits the
       `::-webkit-scrollbar-button` 2px margin. */
@@ -907,12 +917,12 @@ function traverseNextNode(node) {
 
   // So editors can identify the cells that would take part
   // in a merge operation
-  .apos-rich-text-editor__editor :deep(.selectedCell) {
+  .apos-rich-text-editor__editor :deep(.selectedCell) { /* stylelint-disable-line selector-class-pattern */
     // Should be visible on any background, light mode or dark mode
     backdrop-filter: invert(0.1);
   }
 
-  .apos-rich-text-editor__editor :deep(figure.ProseMirror-selectednode) {
+  .apos-rich-text-editor__editor :deep(figure.ProseMirror-selectednode) { /* stylelint-disable-line selector-no-qualifying-type, selector-class-pattern */
     opacity: 0.5;
   }
 
@@ -939,6 +949,8 @@ function traverseNextNode(node) {
   }
 
   .apos-rich-text-insert-menu-item {
+    @include apos-transition();
+
     all: unset;
     display: flex;
     flex-direction: row;
@@ -946,13 +958,15 @@ function traverseNextNode(node) {
     gap: 12px;
     padding: 14px 16px;
     border-bottom: 1px solid var(--a-base-9);
-    @include apos-transition();
+
     &:last-of-type {
       border-bottom: none;
     }
+
     &:hover {
       background-color: var(--a-primary-transparent-10);
     }
+
     &:active, &:focus {
       background-color: var(--a-primary);
       color: var(--a-white);
@@ -963,25 +977,29 @@ function traverseNextNode(node) {
     display: flex;
     flex-direction: column;
     gap: 5px;
+
     h4, p {
       margin: 0;
       font-family: var(--a-family-default);
     }
+
     h4 {
       font-weight: 500;
       font-size: var(--a-type-large);
     }
+
     p {
       font-size: var(--a-type-label);
     }
   }
+
   .apos-rich-text-insert-menu-icon {
     position: relative;
     display: flex;
-    width: 40px;
-    height: 40px;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 40px;
     border: 1px solid var(--a-base-8);
     color: var(--a-text-primary);
     background-color: var(--a-white);
@@ -990,30 +1008,30 @@ function traverseNextNode(node) {
 
   .apos-rich-text-insert-menu-heading {
     padding: 12px 16px;
-    background-color: var(--a-base-9);
-    color: var(--a-base-2);
-    font-weight: 500;
     border-bottom: 1px solid var(--a-base-7);
+    color: var(--a-base-2);
     font-size: var(--a-type-label);
+    background-color: var(--a-base-9);
+    font-weight: 500;
     letter-spacing: 0.25px;
   }
 
-  :deep(.ProseMirror) {
+  :deep(.ProseMirror) { /* stylelint-disable-line selector-class-pattern */
     > * + * {
       margin-top: 0.75em;
     }
   }
 
-  :deep(.ProseMirror-gapcursor) {
+  :deep(.ProseMirror-gapcursor) { /* stylelint-disable-line selector-class-pattern */
     position: relative;
     display: block;
     height: 20px;
 
-    &:after {
+    &::after {
       width: 1px;
       height: 20px;
-      border-left: 1px solid #000;
       border-top: 0 none;
+      border-left: 1px solid #000;
     }
   }
 </style>

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

@@ -20,6 +20,7 @@ export default {
 <style lang="scss" scoped>
   .apos-rich-text-editor__control--divider {
     @include type-help;
+
     padding: 10px;
     opacity: 0.3;
   }

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

@@ -152,7 +152,7 @@ export default {
   }
 
   .apos-marks-control__button:deep(.apos-button--rich-text) {
-    &:active:after, &:focus:after {
+    &:active::after, &:focus::after {
       background-color: var(--a-base-8);
     }
 
@@ -210,6 +210,7 @@ export default {
 
     &--is-active {
       background-color: var(--a-base-10);
+
       &:hover {
         background-color: var(--a-base-9);
       }
@@ -217,6 +218,7 @@ export default {
 
     .apos-marks-control__button {
       @include apos-button-reset();
+
       display: block;
       width: 100%;
       padding: $spacing-base;

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

@@ -156,6 +156,7 @@ export default {
   .apos-tiptap-control--select {
     @include apos-button-reset();
     @include apos-transition();
+
     height: 100%;
     padding: 0 $spacing-half;
     font-size: var(--a-type-smaller);
@@ -172,7 +173,8 @@ export default {
     padding: 0 $spacing-half;
     color: var(--a-base-1);
     border-radius: var(--a-border-radius);
-    transition: all 0.5s ease;
+    transition: all 500ms ease;
+
     &:hover {
       color: var(--a-text-primary);
       background-color: var(--a-base-9);

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

@@ -146,6 +146,7 @@ export default {
   .apos-tiptap-control--select {
     @include apos-button-reset();
     @include type-small;
+
     height: 100%;
     padding: 0 15px 0 10px;
 
@@ -153,6 +154,7 @@ export default {
       background-color: var(--a-base-9);
       outline: none;
     }
+
     &:hover {
       background-color: var(--a-base-8);
     }

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

@@ -93,16 +93,10 @@ export default (options) => {
                   .filter(c => allow[tag].includes(c));
 
                 // If we have valid classes, join and return them.
-                // If no valid classes for this parse, default to the
-                // the first setting for this tag (including null for tags defined without classes).
                 // else, remove classes.
-                const defaultOrNull =
-                  options.nodes.find(s => s.tag === tag)?.class ||
-                  options.marks.find(s => s.tag === tag)?.class ||
-                  null;
                 return classes.length
                   ? classes.join(' ')
-                  : defaultOrNull;
+                  : null;
               }
             }
           }

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

@@ -22,6 +22,16 @@ export default (options) => {
           rendered: false
         }
       };
+    },
+    addKeyboardShortcuts() {
+      const marks = Object.keys(this.editor.schema.marks);
+      return this.options.levels.reduce((items, level) => ({
+        ...items,
+        ...{
+          [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level }),
+          Enter: () => marks.forEach(mark => this.editor.commands.unsetMark(mark))
+        }
+      }), {});
     }
   });
 };

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -786,8 +786,12 @@ module.exports = (self) => {
       }
       const errors = [];
       for (const datum of data) {
-        const result = {};
-        result._id = self.apos.launder.id(datum._id) || self.apos.util.generateId();
+        const _id = self.apos.launder.id(datum._id) || self.apos.util.generateId();
+        const [ found ] = destination[field.name]?.filter?.(item => item._id === _id) || [];
+        const result = {
+          ...(found || {}),
+          _id
+        };
         result.metaType = 'arrayItem';
         result.scopedArrayName = field.scopedArrayName;
         try {
@@ -876,6 +880,7 @@ module.exports = (self) => {
       const schema = field.schema;
       const errors = [];
       const result = {
+        ...(destination[field.name] || {}),
         _id: self.apos.launder.id(data && data._id) || self.apos.util.generateId()
       };
       if (data == null || typeof data !== 'object' || Array.isArray(data)) {
@@ -1027,7 +1032,7 @@ module.exports = (self) => {
           const result = results.find(doc => (doc._id === item._id));
           if (result) {
             if (field.schema) {
-              result._fields = {};
+              result._fields = { ...(destination[field.name]?.find?.(doc => doc._id === item._id)?._fields || {}) };
               if (item && ((typeof item._fields === 'object'))) {
                 await self.convert(req, field.schema, item._fields || {}, result._fields);
               }

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

@@ -6,7 +6,6 @@
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
     @esc="confirmAndCancel"
-    @no-modal="emitSafeClose"
   >
     <template #secondaryControls>
       <AposButton
@@ -66,7 +65,7 @@
               <div class="apos-modal-array-item__pane">
                 <div class="apos-array-item__body">
                   <AposSchema
-                    v-if="currentId"
+                    v-show="currentId"
                     ref="schema"
                     :schema="schema"
                     :trigger-validation="triggerValidation"
@@ -94,8 +93,7 @@ import AposArrayEditorLogic from '../logic/AposArrayEditor';
 
 export default {
   name: 'AposArrayEditor',
-  mixins: [ AposArrayEditorLogic ],
-  emits: [ 'safe-close' ]
+  mixins: [ AposArrayEditorLogic ]
 };
 </script>
 
@@ -116,10 +114,10 @@ export default {
   }
 
   .apos-array-item__body {
-    padding-top: 20px;
-    max-width: 90%;
     margin-right: auto;
     margin-left: auto;
+    padding-top: 20px;
+    max-width: 90%;
   }
 
   .apos-modal-array-min-error, .apos-modal-array-max-error {

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

@@ -47,6 +47,7 @@ export default {
 <style lang="scss" scoped>
   .apos-field--area {
     max-width: $input-max-width;
+
     .apos-input-wrapper:not(.apos-is-empty) {
       padding: $spacing-base;
       border: 1px solid var(--a-base-8);

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

@@ -71,12 +71,12 @@ export default {
   }
 
   .apos-boolean__label {
-    min-width: 0;
     position: relative;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     padding: math.div($boolean-padding, 2) $boolean-padding;
+    min-width: 0;
 
     &:first-of-type {
       border-top-right-radius: 0;
@@ -117,6 +117,7 @@ export default {
         border-color: var(--a-base-4);
       }
     }
+
     .apos-boolean__input + & {
       &:hover {
         cursor: pointer;
@@ -144,6 +145,7 @@ export default {
       top: 1px;
     }
   }
+
   .apos-boolean__input:focus + .apos-boolean__label {
     border-color: var(--a-base-2);
     box-shadow: 0 0 5px var(--a-base-6);
@@ -156,6 +158,7 @@ export default {
       color: var(--a-base-4);
       background: var(--a-base-7);
       border-color: var(--a-base-4);
+
       &:hover {
         cursor: not-allowed;
         border-color: var(--a-base-4);

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

@@ -61,6 +61,7 @@ export default {
 
   .apos-color__info {
     @include type-base;
+
     margin-left: 15px;
     color: var(--a-text-primary);
   }

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

@@ -46,8 +46,8 @@ export default {
 <style scoped lang='scss'>
   .apos-input-wrapper {
     display: flex;
-    justify-content: space-around;
     align-items: center;
+    justify-content: space-around;
   }
 
   .apos-toggle {

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

@@ -42,9 +42,11 @@ export default {
   .apos-input-object {
     border-left: 1px solid var(--a-base-9);
   }
+
   .apos-input-wrapper {
     margin: 20px 0 0 19px;
   }
+
   .apos-input-object :deep(.apos-schema .apos-field) {
     margin-bottom: 30px;
   }

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

@@ -61,6 +61,7 @@ export default {
       border-radius: 50%;
     }
   }
+
   .apos-choice-label-info {
     position: relative;
     top: 3px;

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

@@ -64,18 +64,20 @@ export default {
 <style lang="scss" scoped>
   .apos-input-wrapper {
     @include type-base;
+
     display: flex;
-    justify-content: space-between;
-    align-content: flex-start;
+    place-content: flex-start space-between;
   }
 
   .apos-range__value {
     padding-top: 7px;
     min-width: 100px;
+
     &.apos-is-unset {
       opacity: 0;
       pointer-events: none;
     }
+
     .apos-range__clear {
       margin-left: 5px;
     }
@@ -94,8 +96,9 @@ export default {
 
   .apos-range__scale {
     @include type-small;
+
     color: var(--a-base-4);
-    transition: color 0.5s ease;
+    transition: color 500ms ease;
   }
 
   // adapted from http://danielstern.ca/range.css/#/
@@ -105,9 +108,11 @@ export default {
     background-color: transparent;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;
-    transition: all 0.3s ease;
+    transition: all 300ms ease;
+
     &:focus {
       outline: none;
+
       & + .apos-range__scale {
         color: var(--a-text-primary);
       }
@@ -136,16 +141,17 @@ export default {
   }
 
   .apos-range__input::-webkit-slider-thumb {
-    margin-top: -6px;
     width: 15px;
     height: 15px;
+    margin-top: -6px;
     border: 1px solid var(--a-primary-dark-15);
-    border-radius: 50%;
     background: var(--a-primary);
+    border-radius: 50%;
     cursor: pointer;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;
   }
+
   .apos-range__input[disabled]::-webkit-slider-thumb {
     background: var(--a-primary-light-40);
   }
@@ -203,11 +209,11 @@ export default {
   .apos-range__input::-ms-thumb {
     width: 15px;
     height: 15px;
+    margin-top: 0;
     border: 1px solid var(--a-primary-dark-15);
-    border-radius: 1px;
     background: var(--a-primary);
+    border-radius: 1px;
     cursor: pointer;
-    margin-top: 0;
   }
 
   .apos-range__input[disabled]::-ms-thumb {

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

@@ -45,7 +45,7 @@
           <AposButton
             v-if="field.browse !== false"
             class="apos-input-relationship__button"
-            :disabled="field.readOnly || limitReached"
+            :disabled="field.readOnly"
             :label="browseLabel"
             :modifiers="buttonModifiers"
             type="input"
@@ -69,7 +69,7 @@
           :selected-items="next"
           :icon="field.suggestionIcon"
           :icon-size="field.suggestionIconSize"
-          :fields="field.suggestionFields"
+          :fields="suggestionFields"
           disabled-tooltip="apostrophe:publishBeforeUsingTooltip"
           @select="updateSelected"
         />
@@ -114,6 +114,7 @@ export default {
       padding: $spacing-half;
     }
   }
+
   .apos-field--no-search {
     .apos-input-relationship__button {
       position: relative;
@@ -124,6 +125,7 @@ export default {
 
   .apos-field__min-size {
     @include type-help;
+
     display: flex;
     flex-grow: 1;
     margin-bottom: $spacing-base;