[BUG] Invalid page ID in TYPO3 v13 language comparison due to generic [data-page] selector

[s-meiser]

Summary / Description

In the TYPO3 backend Page module, paste_reference can generate an invalid page ID when the language view is set to "All languages" or a translated language such as "English".

The JavaScript currently reads the page ID via a generic selector:

  document.querySelector('[data-page]')

In TYPO3 v13 language comparison views, the first matching element can be a TYPO3 localization action button where data-page contains the page title/slug,instead of the numeric page ID.

This causes parseInt(..., 10) to return NaN, which later leads to the error:

Error generating unique ID: Error: Invalid page ID for unique ID generation

Version

• ehaerer/paste-reference: 4.0.5
• TYPO3 CMS: 13.4.32

Steps to reproduce

• Create or open a page that has content elements and at least one additional backend language, for example English.
• Open the TYPO3 backend Page module for that page.
• Switch the language display to either:
  • All languages
  • or a translated language, for example English
• Open the browser developer console.

Expected behaviour

The paste reference JavaScript should resolve the numeric page ID of the current page and generate stable unique IDs for paste targets without console errors.

Example expected ID format:

page_290863-colpos_0-tt_content_0

Actual behavior

The JavaScript sometimes reads the wrong data-page attribute.

In TYPO3 v13 language comparison views, the first [data-page] element can be a localization button like this:

<a class="btn btn-default btn-sm t3js-localize"
    data-page="testseite003"
    data-page-id="290863">

Because data-page="testseite003" is not numeric, the generated page ID becomes NaN.

The browser console then shows:

Error generating unique ID: Error: Invalid page ID for unique ID generation
    at Draggable.getUniqueId (...)
    at paste-reference.js (...)

The issue does not occur in the default language view in our setup because the first [data-page] element there is the actual page content container with a numeric page ID.

Additional

Possible fix

The selector should be scoped to the TYPO3 page content element instead of using the first arbitrary [data-page] element in the document.

For example, replace:

document.querySelector('[data-page]')

with:

document.querySelector('.t3js-page-ce[data-page]')

Affected locations:

• https://github.com/Kephson/paste_reference/blob/4.0.5/Resources/Public/JavaScript/paste-reference-drag-drop.js#L481
• https://github.com/Kephson/paste_reference/blob/4.0.5/Resources/Public/JavaScript/paste-reference-draggable.js#L120
• https://github.com/Kephson/paste_reference/blob/4.0.5/Resources/Public/JavaScript/paste-reference.js#L228
• https://github.com/Kephson/paste_reference/blob/4.0.5/Resources/Public/JavaScript/paste-reference.js#L283

This avoids selecting TYPO3 backend action buttons or other unrelated elements that also use a data-page attribute.

Miscellaneous

Observed console error:

Error generating unique ID: Error: Invalid page ID for unique ID generation
    at Draggable.getUniqueId (...)
    at paste-reference.js (...)
    at NodeList.forEach (<anonymous>)
    at PasteReference.activatePasteIcons (...)

[DavidBruchmann]

Thanks for the report!
I'm not sure but I suppose this could also be the real issue about #84

[s-meiser]

No Problem :)

I'm not sure but I suppose this could also be the real issue about #84

So, the issue was -> The user try to paste a reference and got an sql error

I took a look at post #84 and I'm really not sure. It's about version 4.0.2, and you created v4-dev based on that, right?

When I compare these 2 branches, we have a lot of filechanges -> 4.0.2...v4-dev

I need time to dig in what's the real problem of #84 was and whether there are any connections to the bug I found.

[DavidBruchmann]

yes, it's always v4-dev and the tagged releases reflect the current state.
Essentially it was an added JS class and somewhere an additional promise if I remember correctly.
We can just make a PR with you proposed code and test if everything is working then.
In general I still want to clean the JS more too anyway ...

[s-meiser]

Essentially it was an added JS class and somewhere an additional promise if I remember correctly.

Okay, I haven't looked at the code that deeply. If you'd (or other ones) like to create a pull request, feel free. I'm only superficially familiar with the project; I only discovered the JS error and tried to fix it. I don't even know exactly which branches or these three JS classes are present in.

And btw, thank you always for your answers 👍