"Paste above" actions

Author: brandonkelly

CHANGELOG-WIP.md

@@ -3,6 +3,7 @@
 ### Content Management
 - Collapsed Matrix blocks now show their entries’ UI labels as preview text, whenever possible. ([#18484](https://github.com/craftcms/cms/discussions/18484))
 - Element-level actions within nested element management fields (Matrix, Addresses, etc.) now consistently affect all selected elements, when performed on a selected element. ([#18561](https://github.com/craftcms/cms/pull/18561))
+- Elements within Matrix and Addresses fields now have “Paste above” actions when a compatible element is copied. ([#17406](https://github.com/craftcms/cms/discussions/17406)) 
 - Addresses fields now have a “Copy all addresses” field-level action. ([#18561](https://github.com/craftcms/cms/pull/18561))
 - Matrix fields’ “Expand”, “Collapse”, and “Copy” field-level actions now always affect all nested entries, regardless of whether any entries are selected. ([#18561](https://github.com/craftcms/cms/pull/18561))
 - Matrix fields no longer have “Duplicate” and “Delete” field-level actions. ([#18561](https://github.com/craftcms/cms/pull/18561))

src/templates/_components/fieldtypes/Matrix/block.twig

@@ -120,17 +120,30 @@
   ]) %}
 {% endif %}
 
-{% set actionMenuItems = actionMenuItems|merge([
-  {
-    icon: 'clone-dashed',
+{% set actionMenuItems = actionMenuItems|push({
+  icon: 'clone-dashed',
+  color: 'fuchsia',
+  label: 'Copy'|t('app'),
+  attributes: {
+    data: {action: 'copy'},
+  },
+}) %}
+
+{% if not staticEntries %}
+  {% set actionMenuItems = actionMenuItems|push({
+    icon: 'duplicate',
     color: 'fuchsia',
-    label: 'Copy'|t('app'),
+    label: 'Paste {type} above'|t('app', {type: 'entry'|t('app')}),
     attributes: {
-      data: {action: 'copy'},
+      data: {action: 'paste'},
     },
-  },
-  {hr: true},
-]) %}
+    liAttributes: {
+      class: ['hidden'],
+    },
+  }) %}
+{% endif %}
+
+{% set actionMenuItems = actionMenuItems|push({hr: true}) %}
 
 {% if not staticEntries %}
   {% for entryType in entryTypes %}

src/translations/en/app.php

@@ -1243,6 +1243,8 @@
     'Password' => 'Password',
     'Past year' => 'Past year',
     'Past {num} days' => 'Past {num} days',
+    'Paste {type} above' => 'Paste {type} above',
+    'Paste {type} before' => 'Paste {type} before',
     'Paste {type}' => 'Paste {type}',
     'Pay {price}' => 'Pay {price}',
     'Pending' => 'Pending',

src/web/assets/cp/CpAsset.php

@@ -323,6 +323,8 @@ private function _registerTranslations(View $view): void
             'Password',
             'Past year',
             'Past {num} days',
+            'Paste {type} above',
+            'Paste {type} before',
             'Paste {type}',
             'Pay {price}',
             'Pending',

src/web/assets/cp/dist/cp.js

@@ -675,7 +675,7 @@ Craft.NestedElementManager = Garnish.Base.extend(
       }
     },
 
-    async pasteElements() {
+    async pasteElements($before = null) {
       Craft.cp.announce(Craft.t('app', 'Loading'));
       this.$pasteBtn.addClass('loading');
 
@@ -698,7 +698,7 @@ Craft.NestedElementManager = Garnish.Base.extend(
         }
 
         if (this.settings.mode === 'cards') {
-          const $cards = await this.addElementCards(newElementInfo, false);
+          const $cards = await this.addElementCards(newElementInfo, $before);
           await this.updateSortOrder(newElementInfo[0].id);
           Garnish.firstFocusableElement($cards).focus();
         } else {
@@ -761,6 +761,7 @@ Craft.NestedElementManager = Garnish.Base.extend(
             moveDownButton,
             duplicateButton,
             copyButton,
+            pasteButton,
             deleteButton;
 
           const $li = $element.parent();
@@ -874,6 +875,27 @@ Craft.NestedElementManager = Garnish.Base.extend(
                 ul
               );
             }
+
+            // Paste
+            pasteButton = actionDisclosure.addItem(
+              {
+                icon: async () => await Craft.ui.icon('duplicate'),
+                iconColor: 'fuchsia',
+                label: this.settings.showInGrid
+                  ? Craft.t('app', 'Paste {type} before', {
+                      type: Craft.elementTypeNames[this.elementType][3],
+                    })
+                  : Craft.t('app', 'Paste {type} above', {
+                      type: Craft.elementTypeNames[this.elementType][3],
+                    }),
+                onActivate: async () => {
+                  if (this.canPaste(Craft.cp.getCopiedElements())) {
+                    await this.pasteElements($element.parent());
+                  }
+                },
+              },
+              ul
+            );
           }
 
           if (Garnish.hasAttr($element, 'data-deletable')) {
@@ -938,6 +960,30 @@ Craft.NestedElementManager = Garnish.Base.extend(
                 );
             }
 
+            const copiedElements = Craft.cp.getCopiedElements();
+            const showPasteButton =
+              copiedElements.length && this.canPaste(copiedElements);
+            actionDisclosure.toggleItem(pasteButton, showPasteButton);
+            if (showPasteButton) {
+              $(pasteButton)
+                .children('.menu-item-label')
+                .text(
+                  this.settings.showInGrid
+                    ? Craft.t('app', 'Paste {type} before', {
+                        type:
+                          copiedElements.length === 1
+                            ? Craft.elementTypeNames[this.elementType][2]
+                            : Craft.elementTypeNames[this.elementType][3],
+                      })
+                    : Craft.t('app', 'Paste {type} above', {
+                        type:
+                          copiedElements.length === 1
+                            ? Craft.elementTypeNames[this.elementType][2]
+                            : Craft.elementTypeNames[this.elementType][3],
+                      })
+                );
+            }
+
             if (deleteButton) {
               $(deleteButton)
                 .children('.menu-item-label')
@@ -1060,7 +1106,7 @@ Craft.NestedElementManager = Garnish.Base.extend(
       return await this.addElementCards([element]);
     },
 
-    async addElementCards(elements) {
+    async addElementCards(elements, $before = null) {
       if (this.creatingElement) {
         return null;
       }
@@ -1106,7 +1152,12 @@ Craft.NestedElementManager = Garnish.Base.extend(
 
       for (const elementInfo of elements) {
         for (const card of data.elements[elementInfo.id] || []) {
-          const $li = $('<li/>').appendTo(this.$elements);
+          const $li = $('<li/>');
+          if ($before?.length) {
+            $li.insertBefore($before);
+          } else {
+            $li.appendTo(this.$elements);
+          }
           const $card = $(card).appendTo($li);
           $cards = $cards.add($card);
           this.initElement($card);

src/web/assets/cp/dist/cp.js.map

@@ -213,7 +213,7 @@
         return true;
       },
 
-      async pasteEntries() {
+      async pasteEntries($before = null) {
         Craft.cp.announce(Craft.t('app', 'Loading'));
         this.$pasteBtn.addClass('loading');
 
@@ -261,7 +261,13 @@
           await this.elementEditor?.pause();
 
           const $newEntries = $(data.blockHtml);
-          this.$entriesContainer.append($newEntries);
+
+          if ($before) {
+            $newEntries.insertBefore($before);
+          } else {
+            this.$entriesContainer.append($newEntries);
+          }
+
           await Craft.appendHeadHtml(data.headHtml);
           await Craft.appendBodyHtml(data.bodyHtml);
           Craft.initUiElements($newEntries);
@@ -761,6 +767,25 @@
                 })
               : Craft.t('app', 'Delete')
           );
+
+        const $pasteBtn = $buttons.filter('[data-action="paste"]');
+        const copiedElements = Craft.cp.getCopiedElements();
+        const showPasteButton =
+          copiedElements.length && this.matrix.canPaste(copiedElements);
+        if (showPasteButton) {
+          this.actionDisclosure.showItem($pasteBtn[0]);
+          $pasteBtn.children('.menu-item-label').text(
+            copiedElements.length === 1
+              ? Craft.t('app', 'Paste {type} above', {
+                  type: Craft.t('app', 'block'),
+                })
+              : Craft.t('app', 'Paste {type} above', {
+                  type: Craft.t('app', 'blocks'),
+                })
+          );
+        } else {
+          this.actionDisclosure.hideItem($pasteBtn[0]);
+        }
       });
 
       this.actionDisclosure.on('hide', () => {
@@ -1169,6 +1194,10 @@
           break;
         }
 
+        case 'paste':
+          this.matrix.pasteEntries(this.$container);
+          break;
+
         case 'delete': {
           if (this.bulkActionMode()) {
             if (