apostrophe 3.48.0 → 3.49.0

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

@@ -100,6 +100,7 @@ module.exports = {
     self.enableBrowserData();
     self.addLegacyMigrations();
     self.addMisreplicatedParkedPagesMigration();
+    self.addDuplicateParkedPagesMigration();
     await self.createIndexes();
   },
   restApiRoutes(self) {
@@ -1959,7 +1960,10 @@ database.`);
           delete _item._children;
           if (!parent) {
             // Parking the home page for the first time
-            _item.aposDocId = self.apos.util.generateId();
+            _item.aposDocId = await self.apos.doc.bestAposDocId({
+              level: 0,
+              slug: '/'
+            });
             _item.path = _item.aposDocId;
             _item.lastPublishedAt = new Date();
             return self.apos.doc.insert(req, _item);
@@ -2365,6 +2369,64 @@ database.`);
             }
           }
         });
+      },
+      addDuplicateParkedPagesMigration() {
+        self.apos.migration.add('duplicate-parked-pages', async () => {
+          let parkedPages = await self.apos.doc.db.find({
+            parkedId: {
+              $ne: null
+            }
+          }).toArray();
+          const parkedIds = [ ...new Set(parkedPages.map(page => page.parkedId)) ];
+          const names = Object.keys(self.apos.i18n.locales);
+          const locales = [
+            ...names.map(locale => `${locale}:draft`),
+            ...names.map(locale => `${locale}:published`),
+            ...names.map(locale => `${locale}:previous`)
+          ];
+          let changes = 0;
+          const winners = new Map();
+          for (const locale of locales) {
+            for (const parkedId of parkedIds) {
+              let matches = parkedPages.filter(page =>
+                (page.parkedId === parkedId) &&
+                (page.aposLocale === locale)
+              );
+              if (matches.length > 0) {
+                if (!winners.has(parkedId)) {
+                  winners.set(parkedId, matches[0].aposDocId);
+                }
+              }
+              if (matches.length > 1) {
+                matches = matches.sort((a, b) => a.createdAt - b.createdAt);
+                const ids = matches.slice(1).map(page => page._id);
+                await self.apos.doc.db.removeMany({
+                  _id: {
+                    $in: ids
+                  }
+                });
+                parkedPages = parkedPages.filter(page => !ids.includes(page._id));
+                changes++;
+              }
+            }
+          }
+          const idChanges = [];
+          for (const parkedId of parkedIds) {
+            const aposDocId = winners.get(parkedId);
+            const matches = parkedPages.filter(page => page.parkedId === parkedId);
+            for (const match of matches) {
+              if (match.aposDocId !== aposDocId) {
+                idChanges.push([ match._id, match._id.replace(match.aposDocId, aposDocId) ]);
+              }
+            }
+          }
+          if (idChanges.length) {
+            // Also calls self.apos.attachment.recomputeAllDocReferences
+            await self.apos.doc.changeDocIds(idChanges);
+          } else if (changes > 0) {
+            await self.apos.attachment.recomputeAllDocReferences();
+          }
+        });
       }
     };
   },

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

@@ -42,15 +42,23 @@ module.exports = {
     //   visibility: 1
     // }
   },
-  fields: {
-    add: {
-      slug: {
-        type: 'slug',
-        label: 'apostrophe:slug',
-        following: [ 'title', 'archived' ],
-        required: true
-      }
-    }
+  fields(self) {
+    return {
+      add: {
+        slug: {
+          type: 'slug',
+          label: 'apostrophe:slug',
+          following: [ 'title', 'archived' ],
+          required: true
+        }
+      },
+      remove: self.options.singletonAuto ? [
+        'title',
+        'slug',
+        'archived',
+        'visibility'
+      ] : []
+    };
   },
   columns(self) {
     return {
@@ -1099,6 +1107,31 @@ module.exports = {
         });
 
         return projection;
+      },
+      async insertIfMissing() {
+        if (!self.options.singletonAuto) {
+          return;
+        }
+        // Insert at startup
+        const req = self.apos.task.getReq();
+        const criteria = {
+          type: self.name
+        };
+        if (self.options.localized) {
+          criteria.aposLocale = {
+            $in: Object.keys(self.apos.i18n.locales).map(locale => [ `${locale}:published`, `${locale}:draft` ]).flat()
+          };
+        }
+        const existing = await self.apos.doc.db.findOne(criteria, { _id: 1 });
+        if (!existing) {
+          const _new = {
+            ...self.newInstance(),
+            aposDocId: await self.apos.doc.bestAposDocId({
+              type: self.name
+            })
+          };
+          await self.insert(req, _new);
+        }
       }
     };
   },
@@ -1133,6 +1166,21 @@ module.exports = {
       },
       find(_super, req, criteria, projection) {
         return _super(req, criteria, projection).defaultSort(self.options.sort || { updatedAt: -1 });
+      },
+      newInstance(_super) {
+        if (!self.options.singletonAuto) {
+          return _super();
+        }
+        const slug = self.apos.util.slugify(self.options.singletonAuto?.slug || self.name);
+        return {
+          ..._super(),
+          // These fields are removed from the editable schema of singletons,
+          // but we assign them directly for broader compatibility
+          slug,
+          title: slug,
+          archived: false,
+          visibility: 'public'
+        };
       }
     };
   },

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="active"
-    v-click-outside-element="close"
+    v-click-outside-element="cancel"
     class="apos-popover apos-image-control__dialog"
     x-placement="bottom"
     :class="{
@@ -25,7 +25,7 @@
       <footer class="apos-image-control__footer">
         <AposButton
           type="default" label="apostrophe:cancel"
-          @click="close"
+          @click="cancel"
           :modifiers="formModifiers"
         />
         <AposButton
@@ -54,7 +54,7 @@ export default {
       required: true
     }
   },
-  emits: [ 'before-commands', 'close' ],
+  emits: [ 'before-commands', 'done', 'cancel' ],
   data() {
     return {
       generation: 1,
@@ -113,8 +113,11 @@ export default {
     }
   },
   methods: {
-    close() {
-      this.$emit('close');
+    cancel() {
+      this.$emit('cancel');
+    },
+    done() {
+      this.$emit('done');
     },
     save() {
       this.triggerValidation = true;
@@ -132,17 +135,17 @@ export default {
           style: this.docFields.data.style,
           alt: this.docFields.data.alt
         });
-        this.close();
+        this.done();
       });
     },
     keyboardHandler(e) {
       if (e.keyCode === 27) {
-        this.close();
+        this.cancel();
       }
       if (e.keyCode === 13) {
         if (this.docFields.data.href || e.metaKey) {
           this.save();
-          this.close();
+          this.done();
         }
         e.preventDefault();
       }

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :aria-controls="`insert-menu-${value._id}`" @keydown="handleUIKeydown">
     <bubble-menu
       class="bubble-menu"
       :tippy-options="{ maxWidth: 'none', duration: 100, zIndex: 2000 }"
@@ -26,44 +26,64 @@
       </AposContextMenuDialog>
     </bubble-menu>
     <floating-menu
-      class="apos-rich-text-insert-menu" :should-show="showFloatingMenu"
-      :editor="editor"
-      :tippy-options="{ duration: 100, zIndex: 2000 }"
       v-if="editor"
+      class="apos-rich-text-insert-menu"
+      :tippy-options="{ duration: 100, zIndex: 2000, placement: 'bottom-start' }"
+      :should-show="showFloatingMenu"
+      :editor="editor"
+      role="listbox"
+      tabindex="0"
+      ref="insertMenu"
+      :id="`insert-menu-${value._id}`"
+      :key="insertMenuKey"
     >
       <div class="apos-rich-text-insert-menu-heading">
         {{ $t('apostrophe:richTextInsertMenuHeading') }}
       </div>
       <div
-        v-for="(item, index) in insert"
-        :key="`${item}-${index}`"
-        class="apos-rich-text-insert-menu-item"
+        class="apos-rich-text-insert-menu-wrapper"
+        @keydown.prevent.arrow-up="focusInsertMenuItem(true)"
+        @keydown.prevent.arrow-down="focusInsertMenuItem()"
+        @keydown="closeInsertMenu"
       >
-        <div class="apos-rich-text-insert-menu-icon">
-          <AposIndicator
-            :icon="insertMenu[item].icon"
-            :icon-size="35"
-            class="apos-button__icon"
-            fill-color="currentColor"
-            @click="activateInsertMenuItem(item, insertMenu[item])"
-          />
-          <component
-            v-if="item === activeInsertMenuComponent?.name"
-            :is="activeInsertMenuComponent.component"
-            :active="true"
-            :editor="editor"
-            :options="editorOptions"
-            @before-commands="removeSlash"
-            @close="closeInsertMenuItem"
-            @click.stop="$event => null"
-          />
-        </div>
-        <div
-          class="apos-rich-text-insert-menu-label"
+        <button
+          v-for="(item, index) in insert"
+          :key="`${item}-${index}`"
+          class="apos-rich-text-insert-menu-item"
+          role="option"
+          data-insert-menu-item
           @click="activateInsertMenuItem(item, insertMenu[item])"
         >
-          <h4>{{ $t(insertMenu[item].label) }}</h4>
-          <p>{{ $t(insertMenu[item].description) }}</p>
+          <div class="apos-rich-text-insert-menu-icon">
+            <AposIndicator
+              :icon="insertMenu[item].icon"
+              :icon-size="24"
+              class="apos-button__icon"
+              fill-color="currentColor"
+            />
+          </div>
+          <div class="apos-rich-text-insert-menu-label">
+            <h4>{{ $t(insertMenu[item].label) }}</h4>
+            <p>{{ $t(insertMenu[item].description) }}</p>
+          </div>
+        </button>
+        <div class="apos-rich-text-insert-menu-components">
+          <div
+            v-for="(item, index) in insert"
+            :key="`${item}-${index}-component`"
+          >
+            <component
+              v-if="item === activeInsertMenuComponent?.name"
+              :is="activeInsertMenuComponent.component"
+              :active="true"
+              :editor="editor"
+              :options="editorOptions"
+              @before-commands="removeSlash"
+              @cancel="cancelInsertMenuItem"
+              @done="closeInsertMenuItem"
+              @close="closeInsertMenuItem"
+            />
+          </div>
         </div>
       </div>
     </floating-menu>
@@ -86,7 +106,23 @@ import {
   BubbleMenu,
   FloatingMenu
 } from '@tiptap/vue-2';
-import StarterKit from '@tiptap/starter-kit';
+// Starter Kit extensions
+import BlockQuote from '@tiptap/extension-blockquote';
+import Bold from '@tiptap/extension-bold';
+import BulletList from '@tiptap/extension-bullet-list';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Dropcursor from '@tiptap/extension-dropcursor';
+import Gapcursor from '@tiptap/extension-gapcursor';
+import HardBreak from '@tiptap/extension-hard-break';
+import History from '@tiptap/extension-history';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Italic from '@tiptap/extension-italic';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Strike from '@tiptap/extension-strike';
+import Text from '@tiptap/extension-text';
+// End starter kit extensions
 import TextAlign from '@tiptap/extension-text-align';
 import Highlight from '@tiptap/extension-highlight';
 import Underline from '@tiptap/extension-underline';
@@ -144,8 +180,11 @@ export default {
       },
       pending: null,
       isFocused: null,
+      isShowingInsert: false,
       showPlaceholder: null,
-      activeInsertMenuComponent: null
+      activeInsertMenuComponent: null,
+      suppressInsertMenu: false,
+      insertMenuKey: null
     };
   },
   computed: {
@@ -246,17 +285,33 @@ export default {
           this.emitWidgetUpdate();
         }
       }
+    },
+    isShowingInsert(newVal) {
+      if (newVal) {
+        this.focusInsertMenuItem(false, 0);
+      }
     }
   },
   mounted() {
+    this.insertMenuKey = this.generateKey();
     // Cleanly namespace it so we don't conflict with other uses and instances
     const CustomPlaceholder = Placeholder.extend();
     const extensions = [
-      StarterKit.configure({
-        document: false,
-        heading: false,
-        listItem: false
-      }),
+      BlockQuote,
+      Bold,
+      BulletList,
+      Code,
+      CodeBlock,
+      Dropcursor,
+      Gapcursor,
+      HardBreak,
+      History,
+      HorizontalRule,
+      Italic,
+      OrderedList,
+      Paragraph,
+      Strike,
+      Text,
       TextAlign.configure({
         types: [ 'heading', 'paragraph', 'defaultNode' ]
       }),
@@ -273,7 +328,7 @@ export default {
           const text = this.$t(this.placeholderText);
           return text;
         },
-        emptyNodeClass: this.insert.length ? 'apos-is-empty' : 'apos-is-empty-without-insert'
+        emptyNodeClass: 'apos-is-empty'
       }),
       FloatingMenu
     ]
@@ -316,6 +371,22 @@ export default {
     apos.bus.$off('apos-refreshing', this.onAposRefreshing);
   },
   methods: {
+    generateKey() {
+      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    },
+    handleUIKeydown(e) {
+      if (e.key === 'Escape') {
+        this.doSuppressInsertMenu();
+      } else {
+        this.suppressInsertMenu = false;
+      }
+    },
+    doSuppressInsertMenu() {
+      this.suppressInsertMenu = true;
+      this.activeInsertMenuComponent = null;
+      this.insertMenuKey = this.generateKey();
+      this.editor.commands.focus();
+    },
     onAposRefreshing(refreshOptions) {
       if (this.activeInsertMenuComponent) {
         refreshOptions.refresh = false;
@@ -335,6 +406,7 @@ export default {
         // least once per second if the user is actively typing
         return;
       }
+
       this.pending = setTimeout(() => {
         this.emitWidgetUpdate();
       }, 1000);
@@ -472,24 +544,34 @@ export default {
           types: this.tiptapTypes
         }));
     },
-    showFloatingMenu({ state }) {
-      if (!this.insertMenu || !this.insert.length) {
+    showFloatingMenu({
+      state, oldState
+    }) {
+      const hasChanges = JSON.stringify(state?.doc.toJSON()) !== JSON.stringify(oldState?.doc.toJSON());
+      const { $to } = state.selection;
+
+      if (
+        !this.insertMenu ||
+        !this.insert.length ||
+        !hasChanges ||
+        ($to.nodeAfter && $to.nodeAfter.text) ||
+        this.suppressInsertMenu
+      ) {
+        this.isShowingInsert = false;
         return false;
       }
-      const { $from, $to } = state.selection;
+
       if (state.selection.empty) {
         if ($to.nodeBefore && $to.nodeBefore.text) {
           const text = $to.nodeBefore.text;
-          // Only show when the user has just entered a '/' character or
-          // an insert menu component is active
-          if (text === '/') {
+          if (text.slice(-1) === '/') {
+            this.isShowingInsert = true;
             return true;
           }
         }
-        return false;
-      } else if (state.doc.textBetween($from, $to, ' ') === '/') {
-        return true;
       }
+
+      this.isShowingInsert = false;
       return false;
     },
     activateInsertMenuItem(name, info) {
@@ -523,6 +605,38 @@ export default {
     closeInsertMenuItem() {
       this.removeSlash();
       this.activeInsertMenuComponent = null;
+    },
+    cancelInsertMenuItem() {
+      this.doSuppressInsertMenu();
+    },
+    closeInsertMenu(e) {
+      if (
+        [ 'ArrowUp', 'ArrowDown', 'Enter', ' ' ].includes(e.key) ||
+        this.activeInsertMenuComponent
+      ) {
+        return;
+      }
+      this.editor.commands.focus();
+      this.activeInsertMenuComponent = null;
+      // Only insert character keys
+      if (e.key.length === 1) {
+        this.editor.commands.insertContent(e.key);
+      }
+    },
+    focusInsertMenuItem(prev = false, index) {
+      if (this.activeInsertMenuComponent) {
+        return;
+      }
+      const buttons = Array.from(this.$refs.insertMenu.$el.querySelectorAll('[data-insert-menu-item]'));
+      const currentIndex = buttons.findIndex(el => el === document.activeElement);
+      let targetIndex = prev ? currentIndex - 1 : currentIndex + 1;
+      if (targetIndex >= buttons.length) {
+        targetIndex = 0;
+      }
+      if (targetIndex < 0) {
+        targetIndex = buttons.length - 1;
+      }
+      buttons[index || targetIndex]?.focus();
     }
   }
 };
@@ -569,27 +683,41 @@ function traverseNextNode(node) {
     background-color: var(--a-base-9);
   }
 
+  .apos-rich-text-editor__editor ::v-deep .ProseMirror {
+    @include apos-transition();
+  }
+
   .apos-rich-text-editor__editor ::v-deep .ProseMirror:focus {
     outline: none;
   }
 
-  .apos-rich-text-editor__editor ::v-deep .ProseMirror:focus p.apos-is-empty::before,
-  .apos-rich-text-editor__editor.apos-is-visually-empty ::v-deep .ProseMirror:focus p:first-of-type::before {
+  .apos-rich-text-editor__editor ::v-deep .ProseMirror {
+    padding: 10px 0;
+  }
+
+  .apos-rich-text-editor__editor ::v-deep .ProseMirror:focus p.apos-is-empty::after {
+    display: block;
+    margin: 5px 0 10px;
+    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);
-    float: left;
     pointer-events: none;
-    height: 0;
-    color: var(--a-base-4);
   }
 
   .apos-rich-text-editor__editor {
     @include apos-transition();
     position: relative;
     border-radius: var(--a-border-radius);
-    box-shadow: 0 0 0 1px transparent;
+    background-color: transparent;
   }
   .apos-rich-text-editor__editor.apos-is-visually-empty {
-    box-shadow: 0 0 0 1px var(--a-primary-transparent-50);
+    background-color: var(--a-primary-transparent-10);
+    min-height: 50px;
   }
   .apos-rich-text-editor__editor_after {
     @include type-small;
@@ -602,9 +730,7 @@ function traverseNextNode(node) {
     width: 200px;
     height: 10px;
     margin: auto;
-    margin-top: 7.5px;
-    margin-bottom: 7.5px;
-    color: var(--a-base-5);
+    color: var(--a-primary-transparent-50);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
@@ -655,12 +781,9 @@ function traverseNextNode(node) {
   }
 
   .apos-rich-text-insert-menu {
-    display: flex;
-    flex-direction: column;
     cursor: pointer;
     user-select: none;
-    gap: 16px;
-    padding: 16px;
+    min-width: 350px;
     border-radius: var(--a-border-radius);
     box-shadow: var(--a-box-shadow);
     background-color: var(--a-background-primary);
@@ -670,44 +793,75 @@ function traverseNextNode(node) {
     font-size: var(--a-type-base);
   }
 
+  .apos-rich-text-insert-menu-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
   .apos-rich-text-insert-menu-item {
+    all: unset;
     display: flex;
     flex-direction: row;
-    gap: 16px;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--a-base-9);
+    @include apos-transition();
+    &:last-of-type {
+      border-bottom: none;
+    }
     &:hover {
-      color: var(--a-text-primary);
+      background-color: var(--a-primary-transparent-10);
+    }
+    &:active, &:focus {
+      background-color: var(--a-primary);
+      color: var(--a-white);
     }
   }
 
   .apos-rich-text-insert-menu-label {
     display: flex;
     flex-direction: column;
+    gap: 5px;
     h4, p {
-      margin: 4px;
+      margin: 0;
       font-family: var(--a-family-default);
-      font-size: var(--a-type-base);
     }
     h4 {
-      font-weight: bold;
+      font-weight: 500;
+      font-size: var(--a-type-large);
+    }
+    p {
+      font-size: var(--a-type-label);
     }
   }
   .apos-rich-text-insert-menu-icon {
-    // Positions the popover meaningfully
     position: relative;
+    display: flex;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--a-base-8);
+    color: var(--a-text-primary);
+    background-color: var(--a-white);
+    border-radius: var(--a-border-radius);
   }
 
   .apos-rich-text-insert-menu-heading {
-    color: var(--a-base-5);
+    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);
+    font-size: var(--a-type-label);
+    letter-spacing: 0.25px;
   }
 
   ::v-deep .ProseMirror {
     > * + * {
       margin-top: 0.75em;
     }
-
-    > :last-child {
-      margin-bottom: 1.75em;
-    }
   }
 
   ::v-deep .ProseMirror-gapcursor {

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

@@ -1615,7 +1615,6 @@ module.exports = {
           throw self.apos.error('invalid', error.message);
         }
       }
-
     };
   },
   apiRoutes(self) {