apostrophe 3.48.0 → 3.50.0

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) {

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

@@ -95,9 +95,8 @@ module.exports = (self) => {
 
   self.addFieldType({
     name: 'string',
-    convert: function (req, field, data, destination) {
+    convert(req, field, data, destination) {
       destination[field.name] = self.apos.launder.string(data[field.name], field.def);
-
       destination[field.name] = checkStringLength(destination[field.name], field.min, field.max);
       // If field is required but empty (and client side didn't catch that)
       // This is new and until now if JS client side failed, then it would
@@ -105,8 +104,16 @@ module.exports = (self) => {
       if (field.required && (_.isUndefined(data[field.name]) || !data[field.name].toString().length)) {
         throw self.apos.error('required');
       }
+
+      if (field.pattern) {
+        const regex = new RegExp(field.pattern);
+
+        if (!regex.test(destination[field.name])) {
+          throw self.apos.error('invalid');
+        }
+      }
     },
-    index: function (value, field, texts) {
+    index(value, field, texts) {
       const silent = field.silent === undefined ? true : field.silent;
       texts.push({
         weight: field.weight || 15,
@@ -114,10 +121,22 @@ module.exports = (self) => {
         silent: silent
       });
     },
-    isEmpty: function (field, value) {
+    isEmpty(field, value) {
       return !value.length;
     },
-    addQueryBuilder: function (field, query) {
+    validate(field, options, warn, fail) {
+      if (!field.pattern) {
+        return;
+      }
+
+      const isRegexInstance = field.pattern instanceof RegExp;
+      if (!isRegexInstance && typeof field.pattern !== 'string') {
+        fail('The pattern property must be a RegExp or a String');
+      }
+
+      field.pattern = isRegexInstance ? field.pattern.source : field.pattern;
+    },
+    addQueryBuilder(field, query) {
       query.addBuilder(field.name, {
         finalize: function () {
           if (self.queryBuilderInterested(query, field.name)) {
@@ -150,6 +169,9 @@ module.exports = (self) => {
       if (field.page) {
         options.allow = '/';
       }
+      if (data.aposIsTemplate) {
+        options.allow = field.page ? [ '/', '@' ] : '@';
+      }
       destination[field.name] = self.apos.util.slugify(self.apos.launder.string(data[field.name], field.def), options);
 
       if (field.page) {
@@ -756,9 +778,9 @@ module.exports = (self) => {
         const { name: uniqueFieldName, label: uniqueFieldLabel } = field.schema.find(subfield => subfield.unique) || [];
         if (uniqueFieldName) {
           const duplicates = data
-            .map(item => Array.isArray(item[uniqueFieldName])
+            .map(item => (Array.isArray(item[uniqueFieldName])
               ? item[uniqueFieldName][0]._id
-              : item[uniqueFieldName])
+              : item[uniqueFieldName]))
             .filter((item, index, array) => array.indexOf(item) !== index);
           if (duplicates.length) {
             throw self.apos.error('duplicate', `${req.t(uniqueFieldLabel)} in ${req.t(field.label)} must be unique`);
@@ -978,6 +1000,9 @@ module.exports = (self) => {
     },
 
     relate: async function (req, field, objects, options) {
+      if ((!self.apos.doc?.replicateReached) && (!field.idsStorage)) {
+        self.apos.util.warnDevOnce('premature-relationship-query', 'Database queries for types with relationships may fail if made before the @apostrophecms/doc:beforeReplicate event');
+      }
       return self.relationshipDriver(req, joinr.byArray, false, objects, field.idsStorage, field.fieldsStorage, field.name, options);
     },
 
@@ -1109,6 +1134,9 @@ module.exports = (self) => {
     name: 'relationshipReverse',
     vueComponent: false,
     relate: async function (req, field, objects, options) {
+      if ((!self.apos.doc?.replicateReached) && (!field.idsStorage)) {
+        self.apos.util.warnDevOnce('premature-relationship-query', 'Database queries for types with relationships may fail if made before the @apostrophecms/doc:beforeReplicate event');
+      }
       return self.relationshipDriver(req, joinr.byArrayReverse, true, objects, field.idsStorage, field.fieldsStorage, field.name, options);
     },
     validate: function (field, options, warn, fail) {

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

@@ -190,9 +190,13 @@ export default {
       const options = {
         def: ''
       };
-      if (this.field.page && !componentOnly) {
+
+      if (this.field.aposIsTemplate) {
+        options.allow = this.field.page ? [ '/', '@' ] : '@';
+      } else if (this.field.page && !componentOnly) {
         options.allow = '/';
       }
+
       let preserveDash = false;
       // When you are typing a slug it feels wrong for hyphens you typed
       // to disappear as you go, so if the last character is not valid in a slug,
@@ -200,10 +204,12 @@ export default {
       if (this.focus && s.length && (sluggo(s.charAt(s.length - 1), options) === '')) {
         preserveDash = true;
       }
+
       s = sluggo(s, options);
       if (preserveDash) {
         s += '-';
       }
+
       if (this.field.page && !componentOnly) {
         if (!this.followingValues?.title) {
           const nextParts = this.next.split('/');
@@ -226,6 +232,7 @@ export default {
           s += '/';
         }
       }
+
       if (!componentOnly) {
         s = this.setPrefix(s);
       }
@@ -262,7 +269,20 @@ export default {
         // doc editor modal it will momentarily be tracked as archived but
         // without not have the archive prefix, so check that too.
         updated = this.isArchived && archivePrefix ? `${archivePrefix}${updated}` : updated;
+      } else if (this.field.aposIsTemplate) {
+        let prefix = '';
+        if (this.field.page) {
+          if (!updated.startsWith('/@')) {
+            prefix = '/@';
+          }
+        } else {
+          if (!updated.startsWith('@')) {
+            prefix = '@';
+          }
+        }
+        updated = prefix + updated;
       }
+
       return updated;
     },
     async checkConflict() {

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

@@ -11,7 +11,8 @@
           v-if="field.textarea && field.type === 'string'" rows="5"
           v-model="next" :placeholder="$t(field.placeholder)"
           @keydown.enter="enterEmit"
-          :disabled="field.readOnly" :required="field.required"
+          :disabled="field.readOnly"
+          :required="field.required"
           :id="uid" :tabindex="tabindex"
         />
         <input
@@ -123,12 +124,9 @@ export default {
       if (typeof value === 'string' && !value.length) {
         // Also correct for float and integer because Vue coerces
         // number fields to either a number or the empty string
-        if (this.field.required) {
-          return 'required';
-        } else {
-          return false;
-        }
+        return this.field.required ? 'required' : false;
       }
+
       const minMaxFields = [
         'integer',
         'float',
@@ -137,6 +135,13 @@ export default {
         'password'
       ];
 
+      if (typeof value === 'string' && this.field.pattern) {
+        const regex = new RegExp(this.field.pattern);
+        if (!regex.test(value)) {
+          return 'invalid';
+        }
+      }
+
       if (this.field.min && minMaxFields.includes(this.field.type)) {
         if ((value != null) && value.length && (this.minMaxComparable(value) < this.field.min)) {
           return 'min';
@@ -192,7 +197,7 @@ export default {
     },
     minMaxComparable(s) {
       const converted = this.convert(s);
-      if ((this.field.type === 'integer') || (this.field.type === 'float') || (this.field.type === 'date') || (this.field.type === 'range') || (this.field.type === 'time')) {
+      if ([ 'integer', 'float', 'date', 'range', 'time' ].includes(this.field.type)) {
         // Compare the actual values for these types
         return converted;
       } else {

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

@@ -158,6 +158,7 @@ export default {
       this.schema.forEach(item => {
         fields[item.name] = {};
         fields[item.name].field = item;
+        fields[item.name].field.aposIsTemplate = this.value?.data?.aposIsTemplate;
         fields[item.name].value = {
           data: this.value[item.name]
         };