[Feature] Assure compatibility with b13/container, (and perhaps further extensions ?)

[DavidBruchmann]

in paste-reference.js lines 163-165 it states:
if (!$(this).find('.icon-actions-plus').length) { return true; }

Thats fine, but b13/container uses .icon-actions-add for the icon, which is an alias for the icons-action-plus icon. So right now it returns here and the paste icons in b13/container columns are not decorated. This could be true for other extensions and setups as well.

maybe it should test for the paste-icon or button.t3js-paste directly instead of testing for the adjacent button?

If you want I can open a new ticket for this?

Originally posted by @foppelfb in #70 (comment)

[RinyVT]

I wanted to open a new issue but maybe/probably my issue is related to this.
Pasting a reference within a container causes the element to be pasted at the end of the page, because the target is determined with the closest .t3js-page-ce element:
https://github.com/Kephson/paste_reference/blob/main/Resources/Public/JavaScript/paste-reference-drag-drop.js#L93-L98
https://github.com/Kephson/paste_reference/blob/main/Resources/Public/JavaScript/paste-reference-drag-drop.js#L32

If you paste inside an empty column there's a container element closest without a data-uid and thus the fallback to the page is activated.

The colPos is set correctly but because the target isn't correct (and the tx_container_parent is 0 is not set but I've not found out if that's because of the wrong target or another issue) it immediately shows up as an unused element.

[asakurayoh]

I have the same problem, do not work when b13/container is installed, for version 3.0.3.
Can we have a fix for that? Is the problem b13/container ?

[YKWeyer]

Hi,

Pasting a reference within a container causes the element to be pasted at the end of the page, because the target is determined with the closest .t3js-page-ce element:

This is the patch we're currently testing to get b13/container (v3.1.6) and paste-reference (v3.0.3) to allow copy-pasting and cut-pasting into container columns:

diff --git a/Resources/Public/JavaScript/paste-reference-drag-drop.js b/Resources/Public/JavaScript/paste-reference-drag-drop.js
--- a/Resources/Public/JavaScript/paste-reference-drag-drop.js
+++ b/Resources/Public/JavaScript/paste-reference-drag-drop.js
@@ -173,6 +173,7 @@
    */
   onDrop: function ($draggableElement, $droppableElement, evt, reference) {
     const newColumn = DragDrop.default.getColumnPositionForElement($droppableElement) ?? 0;
+    const containerParent = DragDrop.default.getContainerParentForElement($droppableElement) ?? 0;

     $droppableElement.removeClass(DragDrop.default.dropPossibleHoverClass);
     const $pasteAction = typeof $draggableElement === 'number' || typeof $draggableElement === 'undefined';
@@ -261,6 +262,9 @@
         if (evt === 'copyFromAnotherPage') {
           parameters['CB'] = {setCopyMode: 1};
         }
+        if (containerParent){
+          parameters['cmd']['tt_content'][contentElementUid]['copy']['update']['tx_container_parent'] = containerParent;
+        }
         // fire the request, and show a message if it has failed
         // This is adding a copy from another page "to this [selected] place".
         AjaxDataHandler.process(parameters).then(function (result) {
@@ -290,6 +294,9 @@
             }
           }
         };
+        if (containerParent){
+          parameters['cmd']['tt_content'][contentElementUid]['move']['update']['tx_container_parent'] = containerParent;
+        }
         // fire the request, and show a message if it has failed
         AjaxDataHandler.process(parameters).then(function (result) {
           if (!result.hasErrors) {
@@ -322,6 +329,20 @@
       return $columnContainer.data('colpos');
     } else {
       return false;
+    }
+  },
+
+  /**
+   * returns the next "upper" container parent parameter inside the code
+   * @param $element
+   * @return int|boolean the containerParent
+   */
+  getContainerParentForElement: function ($element) {
+    const $gridContainer = $element.closest('[data-tx-container-parent]');
+    if ($gridContainer.length && $gridContainer.data('txContainerParent') !== 'undefined') {
+      return $gridContainer.data('txContainerParent');
+    } else {
+      return false;
     }
   }
 }

(We're using cweagans/composer-patches to apply it)

I will open a MR if our tests are conclusive 😉

[DavidBruchmann]

@RinyVT I can confirm, tx_container_parent isn't set, so the element is shown in section "Unused" at the bottom of the page.

@YKWeyer your patch is working in general well. I had the issue though, that by click on the upper paste button in a col, that the common dialog is shown sometimes (orange title bar), not the one from paste_reference (blue title bar). Furthermore the icon for adding from another page is not shown, this might be another issue for you, not sure if you'll include it in the MR.

[DavidBruchmann]

Just for the record, your patch, @YKWeyer is only for v3 (TYPO3 v12), and v4 (for TYPO3 v13) would need further work (it's working without jQuery). Having the solution for 1 version already makes it easier though to adapt for the other version.
Anyway, thanks for the patch so far, I'm curious about your proceeding.

[DavidBruchmann]

@YKWeyer I created a new branch with your code and also the icon should be shown inside container columns,
Please test everybody and let me know if I shall still adjust something:

https://github.com/Kephson/paste_reference/tree/v12-feature-container

[h3nn3s]

@DavidBruchmann @YKWeyer
Successfully tested your branch "v12-feature-container" - It solves all our compat-issues with current version of EXT:container

Thanks - imho this could be released :-)

[DavidBruchmann]

@h3nn3s
Thanks a lot for your positive feedback!
Also lot of thanks to @YKWeyer whose patch above I used for that branch!

[YKWeyer]

Sorry for the late answer, I was on holiday last week and only managed to test the branch today.

I am not sure how much of a performance difference it would make, but I think the two find operations could be combined in a single selector:

-    if (!$(this).find('.icon-actions-plus').length && !$(this).find('.icon-actions-add').length) {
+    if (!$(this).find('.icon-actions-plus, .icon-actions-add').length) { 

I didn't notice any issue while testing it 👍 Thank you very much! 🎉

---

I had the issue though, that by click on the upper paste button in a col, that the common dialog is shown sometimes (orange title bar), not the one from paste_reference (blue title bar).

IMHO this is the same bug that was reported in #70 . We already had that patch in our codebase, here's the version adapted for the v12-feature-container branch:

From bca7dda641cd169e58132207c7f633931c7ef572 Mon Sep 17 00:00:00 2001
From: DavidBruchmann <david.bruchmann@gmail.com>
Date: Sun, 24 Nov 2024 13:27:57 +0700
Subject: [PATCH] [DRAFT] exchange classes instead of EventHandler directly.

---
 Resources/Public/JavaScript/paste-reference.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Resources/Public/JavaScript/paste-reference.js b/Resources/Public/JavaScript/paste-reference.js
index 4d199dc1..946d4097 100644
--- a/Resources/Public/JavaScript/paste-reference.js
+++ b/Resources/Public/JavaScript/paste-reference.js
@@ -173,17 +173,17 @@ Paste.activatePasteIcons = function () {
       $.when($(this).find('button.t3js-paste'))
       .then(() => {

-          // disable default click-EventListener on default paste button
-          $(document).off('click', '.t3js-paste');
+          // replace class and in consequence the corresponding EventListener
+          $(this).find('button.t3js-paste').addClass('t3js-paste-default').removeClass('t3js-paste');

           // add custom click-EventListener on default paste button
-          $(document).on('click', '.t3js-paste', (evt) => {
+          $(this).on('click', '.t3js-paste-default', (evt) => {
             evt.preventDefault();
             Paste.activatePasteModal($(evt.currentTarget));
           });

           // promise to add custom button and eventHandler if 'button.t3js-paste' is found
-          $.when($(this).find('button.t3js-paste').after(top.copyFromAnotherPageLinkTemplate))
+          $.when($(this).find('button.t3js-paste-default').after(top.copyFromAnotherPageLinkTemplate))
             .then(
               onReady.initClickEventListener($(this))
             )

(Alternatively, you could rebase v12-feature-container on top of v12-alt, I think)

[DavidBruchmann]

thanks @YKWeyer, your propositions are applied in the branch v12-feature-container and it's working more reliable now!

[sypets]

I have tested the branch with container 3.1.10

composer require ehaerer/paste-reference:dev-v12-feature-container

When I try to copy / paste a content element into a container column, it no longer offers me the option to "paste reference" on first try. But when I try again, it works.

Thank you for providing the branch @DavidBruchmann Can you test with latest container?