apostrophe 3.44.0 → 3.45.0

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

@@ -2,7 +2,7 @@
   <div>
     <bubble-menu
       class="bubble-menu"
-      :tippy-options="{ duration: 100 }"
+      :tippy-options="{ duration: 100, zIndex: 2000 }"
       :editor="editor"
       v-if="editor"
     >
@@ -25,6 +25,47 @@
         </div>
       </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"
+    >
+      <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"
+      >
+        <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"
+          @click="activateInsertMenuItem(item, insertMenu[item])"
+        >
+          <h4>{{ $t(insertMenu[item].label) }}</h4>
+          <p>{{ $t(insertMenu[item].description) }}</p>
+        </div>
+      </div>
+    </floating-menu>
     <div class="apos-rich-text-editor__editor" :class="editorModifiers">
       <editor-content :editor="editor" :class="editorOptions.className" />
     </div>
@@ -41,7 +82,8 @@
 import {
   Editor,
   EditorContent,
-  BubbleMenu
+  BubbleMenu,
+  FloatingMenu
 } from '@tiptap/vue-2';
 import StarterKit from '@tiptap/starter-kit';
 import TextAlign from '@tiptap/extension-text-align';
@@ -59,7 +101,8 @@ export default {
   name: 'AposRichTextWidgetEditor',
   components: {
     EditorContent,
-    BubbleMenu
+    BubbleMenu,
+    FloatingMenu
   },
   props: {
     type: {
@@ -100,7 +143,8 @@ export default {
       },
       pending: null,
       isFocused: null,
-      showPlaceholder: null
+      showPlaceholder: null,
+      activeInsertMenuComponent: null
     };
   },
   computed: {
@@ -150,12 +194,22 @@ export default {
       const _class = defaultStyle.class ? ` class="${defaultStyle.class}"` : '';
       return `<${defaultStyle.tag}${_class}></${defaultStyle.tag}>`;
     },
+    // Names of active toolbar items for this particular widget, as an array
     toolbar() {
       return this.editorOptions.toolbar;
     },
+    // Information about all available toolbar items, as an object
     tools() {
       return this.moduleOptions.tools;
     },
+    // Names of active insert menu items for this particular widget, as an array
+    insert() {
+      return this.editorOptions.insert || [];
+    },
+    // Information about all available insert menu items, as an object
+    insertMenu() {
+      return this.moduleOptions.insertMenu;
+    },
     isVisuallyEmpty () {
       const div = document.createElement('div');
       div.innerHTML = this.value.content;
@@ -166,6 +220,12 @@ export default {
       if (this.isVisuallyEmpty) {
         classes.push('apos-is-visually-empty');
       }
+      // Per Stu's original logic we have to deal with an edge case when the page is
+      // first loading by displaying the initial placeholder then too (showPlaceholder
+      // state not yet computed)
+      if (((this.placeholderText && this.moduleOptions.placeholder) || this.insert.length) && this.isFocused && (this.showPlaceholder !== false)) {
+        classes.push('apos-show-initial-placeholder');
+      }
       return classes;
     },
     tiptapTextCommands() {
@@ -175,11 +235,11 @@ export default {
       return this.moduleOptions.tiptapTypes;
     },
     placeholderText() {
-      return this.moduleOptions.placeholderText;
+      return this.insert.length > 0 ? this.moduleOptions.placeholderTextWithInsertMenu : (this.moduleOptions.placeholderText || '');
     }
   },
   watch: {
-    focused(newVal) {
+    isFocused(newVal) {
       if (!newVal) {
         if (this.pending) {
           this.emitWidgetUpdate();
@@ -188,6 +248,8 @@ export default {
     }
   },
   mounted() {
+    // Cleanly namespace it so we don't conflict with other uses and instances
+    const CustomPlaceholder = Placeholder.extend();
     const extensions = [
       StarterKit.configure({
         document: false,
@@ -205,23 +267,14 @@ export default {
       TableCell,
       TableHeader,
       TableRow,
-      // For this contextual widget, no need to check `widget.aposPlaceholder` value
-      // since `placeholderText` option is enough to decide whether to display it or not.
-      this.placeholderText && Placeholder.configure({
+      CustomPlaceholder.configure({
         placeholder: () => {
-          // Avoid brief display of the placeholder when loading the page.
-          if (this.isFocused === null) {
-            return '';
-          }
-
-          // Display placeholder after loading the page.
-          if (this.showPlaceholder === null) {
-            return this.$t(this.placeholderText);
-          }
-
-          return this.showPlaceholder ? this.$t(this.placeholderText) : '';
-        }
-      })
+          const text = this.$t(this.placeholderText);
+          return text;
+        },
+        emptyNodeClass: this.insert.length ? 'apos-is-empty' : 'apos-is-empty-without-insert'
+      }),
+      FloatingMenu
     ]
       .filter(Boolean)
       .concat(this.aposTiptapExtensions());
@@ -254,12 +307,19 @@ export default {
         });
       }
     });
+    apos.bus.$on('apos-refreshing', this.onAposRefreshing);
   },
 
   beforeDestroy() {
     this.editor.destroy();
+    apos.bus.$off('apos-refreshing', this.onAposRefreshing);
   },
   methods: {
+    onAposRefreshing(refreshOptions) {
+      if (this.activeInsertMenuComponent) {
+        refreshOptions.refresh = false;
+      }
+    },
     async editorUpdate() {
       // Hint that we are typing, even though we're going to
       // debounce the actual updates for performance
@@ -424,6 +484,58 @@ export default {
           styles: this.editorOptions.styles.map(this.localizeStyle),
           types: this.tiptapTypes
         }));
+    },
+    showFloatingMenu({ state }) {
+      if (!this.insertMenu || !this.insert.length) {
+        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 === '/') {
+            return true;
+          }
+        }
+        return false;
+      } else if (state.doc.textBetween($from, $to, ' ') === '/') {
+        return true;
+      }
+      return false;
+    },
+    activateInsertMenuItem(name, info) {
+      // Select the / and remove it
+      if (info.component) {
+        this.activeInsertMenuComponent = {
+          name,
+          ...info
+        };
+      } else {
+        this.removeSlash();
+        this.editor.commands[info.action || name]();
+      }
+    },
+    removeSlash() {
+      const state = this.editor.state;
+      const { $to } = state.selection;
+      if (state.selection.empty && $to?.nodeBefore?.text) {
+        const text = $to.nodeBefore.text;
+        if (text === '/') {
+          const pos = this.editor.view.state.selection.$anchor.pos;
+          // Select the slash so an insert operation can replace it
+          this.editor.commands.setTextSelection({
+            from: pos - 1,
+            to: pos
+          });
+          this.editor.commands.deleteSelection();
+        }
+      }
+    },
+    closeInsertMenuItem() {
+      this.removeSlash();
+      this.activeInsertMenuComponent = null;
     }
   }
 };
@@ -472,7 +584,8 @@ function traverseNextNode(node) {
     outline: none;
   }
 
-  .apos-rich-text-editor__editor ::v-deep .ProseMirror p.is-empty:first-child::before {
+  .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 {
     content: attr(data-placeholder);
     float: left;
     pointer-events: none;
@@ -543,4 +656,52 @@ function traverseNextNode(node) {
     // Should be visible on any background, light mode or dark mode
     backdrop-filter: invert(0.1);
   }
+
+  .apos-rich-text-editor__editor ::v-deep figure.ProseMirror-selectednode {
+    opacity: 0.5;
+  }
+
+  [data-placeholder] {
+    display: none;
+  }
+
+  .apos-rich-text-insert-menu {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    user-select: none;
+    gap: 16px;
+    padding: 16px;
+    border-radius: var(--a-border-radius);
+    box-shadow: var(--a-box-shadow);
+    background-color: var(--a-background-primary);
+    border: 1px solid var(--a-base-8);
+    color: var(--a-base-1);
+    font-family: var(--a-family-default);
+  }
+
+  .apos-rich-text-insert-menu-item {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    &:hover {
+      color: var(--a-text-primary);
+    }
+  }
+
+  .apos-rich-text-insert-menu-label {
+    display: flex;
+    flex-direction: column;
+    h4, p {
+      margin: 4px;
+    }
+  }
+  .apos-rich-text-insert-menu-icon {
+    // Positions the popover meaningfully
+    position: relative;
+  }
+
+  .apos-rich-text-insert-menu-heading {
+    color: var(--a-base-5);
+  }
 </style>

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

@@ -8,59 +8,21 @@
       :icon-only="!!tool.icon"
       :icon="tool.icon || false"
       :modifiers="['no-border', 'no-motion']"
+      @close="close"
+    />
+    <AposImageControlDialog
+      :active="active"
+      :editor="editor"
+      @close="close"
+      @click.stop="$event => null"
     />
-    <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>
   </div>
 </template>
 
 <script>
-import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
-
 export default {
   name: 'AposTiptapImage',
-  mixins: [ AposEditorMixin ],
   props: {
-    name: {
-      type: String,
-      required: true
-    },
     tool: {
       type: Object,
       required: true
@@ -72,143 +34,24 @@ export default {
   },
   data() {
     return {
-      generation: 1,
-      triggerValidation: false,
-      docFields: {
-        data: {}
-      },
-      active: false,
-      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: false
-        },
-        ...(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'
-        }
-      ]
+      active: false
     };
   },
   computed: {
     buttonActive() {
-      return this.editor.getAttributes('img').src || this.active;
-    },
-    lastSelectionTime() {
-      return this.editor.view.lastSelectionTime;
-    },
-    schema() {
-      return this.originalSchema;
-    }
-  },
-  watch: {
-    active(newVal) {
-      if (newVal) {
-        window.addEventListener('keydown', this.keyboardHandler);
-      } else {
-        window.removeEventListener('keydown', this.keyboardHandler);
-      }
+      return this.editor.isActive('image');
     }
   },
   methods: {
     click() {
       this.active = !this.active;
-      if (this.active) {
-        this.populateFields();
-      }
     },
     close() {
-      if (this.active) {
-        this.active = false;
-        this.editor.chain().focus();
-      }
-    },
-    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.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();
-        } else {
-          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++;
-      }
+      this.active = false;
+      this.editor.chain().focus();
     }
   }
 };
-
-function getOptions() {
-  return apos.modules['@apostrophecms/rich-text-widget'];
-}
 </script>
 
 <style lang="scss" scoped>
@@ -217,45 +60,7 @@ function getOptions() {
     display: inline-block;
   }
 
-  .apos-image-control__dialog {
-    z-index: $z-index-modal;
-    position: absolute;
-    top: calc(100% + 5px);
-    left: -15px;
-    width: 250px;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .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>

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

@@ -120,7 +120,7 @@ export default {
           withType: type,
           required: true,
           max: 1,
-          browse: false,
+          browse: true,
           if: {
             linkTo: type
           }
@@ -307,11 +307,14 @@ function getOptions() {
     position: absolute;
     top: calc(100% + 5px);
     left: -15px;
-    width: 250px;
     opacity: 0;
     pointer-events: none;
   }
 
+  .apos-context-menu__dialog {
+    width: 500px;
+  }
+
   .apos-link-control__dialog.apos-is-triggered.apos-has-selection {
     opacity: 1;
     pointer-events: auto;

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

@@ -430,6 +430,7 @@ function alwaysExpand(field) {
     position: relative;
     left: -35px;
     min-width: calc(100% + 35px);
+    width: max-content;
     margin: 0 0 $spacing-base;
     border-collapse: collapse;
 

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

@@ -186,9 +186,12 @@ export default {
         this.subfields[doc._id] = doc._fields;
       }
       for (const doc of after) {
-        if (this.subfields[doc._id] && !Object.keys(doc._fields || {}).length) {
-          doc._fields = this.subfields[doc._id];
+        if (Object.keys(doc._fields || {}).length) {
+          continue;
         }
+        doc._fields = this.field.schema && (this.subfields[doc._id]
+          ? this.subfields[doc._id]
+          : this.getDefault());
       }
     }
   },
@@ -317,6 +320,21 @@ export default {
       if (this.field.editor === 'AposImageRelationshipEditor') {
         return 'apostrophe:editImageAdjustments';
       }
+    },
+    getDefault() {
+      const object = {};
+      this.field.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');
+        object[field.name] = hasDefaultValue
+          ? klona(field.def)
+          : null;
+      });
+      return object;
     }
   }
 };

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

@@ -43,24 +43,6 @@ export default {
       return [ this.value.duplicate && 'apos-input--error' ];
     }
   },
-  async mounted() {
-    // Add an null option if there isn't one already
-    if (!this.field.required && !this.choices.find(choice => {
-      return choice.value === null;
-    })) {
-      this.choices.unshift({
-        label: '',
-        value: null
-      });
-    }
-    this.$nextTick(() => {
-      // this has to happen on nextTick to avoid emitting before schemaReady is
-      // set in AposSchema
-      if (this.field.required && (this.next == null) && (this.choices[0] != null)) {
-        this.next = this.choices[0].value;
-      }
-    });
-  },
   methods: {
     validate(value) {
       if (this.field.required && (value === null)) {