Move decoration of custom elements from HTML-Helper to JS

MR is created.

Please review. Ideally together with issue #3491706 ✨ Allow blocking reCaptcha Active

Tested the patch by adding Bluesky and Mastodon embeds to a Drupal website and noticed the following:

1. The required "data-name" attribute gets added to the embedded data by JS.
2. External content is blocked as well if the respective Klaro app has been marked enabled.
3. The bluesky embed gets blocked by Klaro and shown only if user allows
4. The issue is in the case of a Mastodon post, the post loads fine if the Klaro app is disabled for it but does not load completely when the Klaro app is enabled for it (Check screenshot). This could be an issue with Klaro JS or even Mastodon embed.

Overall, the required attributes get added and external content is only shown after user consent.

@gaurav.kapoor Thank you for testing! I cannot reproduce your problem :(

I use this embed for testing:

<iframe src="https://social.bund.de/@Umweltbundesamt/113366705012830259/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://social.bund.de/embed.js" async="async"></script>

and the mastodon-config from the module.

Can you please post your embed-markup? Did you adapt the src-URL in config correct? Can you please post the part the ready html-document? I will try to reproduce.

Thank you very much.

@jan.kellermann, I copied the embed from https://social.bund.de/@Umweltbundesamt/113662513183074352 by clicking the option "Get embed code" from the extra options under a post. The post loads without Klaro but doesn't load with Klaro enabled and user allowing external content.

I'm very sorry, but I can't reproduce it. I copied the embed code again and created a new content and activated mastodon-config with this MR.

Did you updated the database? This MR needs an update because the wrapper will be converted from class-names to QuerySelector (`mastodon-embed` to `.mastodon-embed`).

Can you please send your config crom klaro and mastodon-app, tell us which field type you use or if "Process final HTML" is enabled and the frontend-markup from the browser of the embed after loading in website? Thank you.

Thank you for testing and feedback! But I can only try to resolve the problem when I can reproduce it. Thank you for your understanding.

I can't get this to work. I'm using the mastodon module and configured 2 blocks, that look like this in the raw HTML:

<div id="block-olivero-mastodonembedpost" class="block block-mastodon block-mastodon-embed-post">
  
      <h2 class="block__title">Mastodon embed post</h2>
    
      <div class="block__content">
      <fed-embed data-post="https://social.bund.de/@Umweltbundesamt/113662513183074352"></fed-embed>
    </div>
  </div>



<div id="block-olivero-mastodonembedlatestposts" class="block block-mastodon block-mastodon-embed-latest-posts">
  
      <h2 class="block__title">Mastodon embed latest posts</h2>
    
      <div class="block__content">
      <fed-embed data-user="https://social.bund.de/@Umweltbundesamt"></fed-embed>
    </div>
  </div>

So, there is no iframe or anything. I guess there is some more configuration required?

Where is you code from? On Mastodon it gives you

<blockquote class="mastodon-embed" data-embed-url="https://social.bund.de/@Umweltbundesamt/113662513183074352/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.bund.de/@Umweltbundesamt/113662513183074352" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M74.7135 16.6043C73.6199 8.54587 66.5351 2.19527 58.1366 0.964691C56.7196 0.756754 51.351 0 38.9148 0H38.822C26.3824 0 23.7135 0.756754 22.2966 0.964691C14.1319 2.16118 6.67571 7.86752 4.86669 16.0214C3.99657 20.0369 3.90371 24.4888 4.06535 28.5726C4.29578 34.4289 4.34049 40.275 4.877 46.1075C5.24791 49.9817 5.89495 53.8251 6.81328 57.6088C8.53288 64.5968 15.4938 70.4122 22.3138 72.7848C29.6155 75.259 37.468 75.6697 44.9919 73.971C45.8196 73.7801 46.6381 73.5586 47.4475 73.3063C49.2737 72.7302 51.4164 72.086 52.9915 70.9542C53.0131 70.9384 53.0308 70.9178 53.0433 70.8942C53.0558 70.8706 53.0628 70.8445 53.0637 70.8179V65.1661C53.0634 65.1412 53.0574 65.1167 53.0462 65.0944C53.035 65.0721 53.0189 65.0525 52.9992 65.0371C52.9794 65.0218 52.9564 65.011 52.9318 65.0056C52.9073 65.0002 52.8819 65.0003 52.8574 65.0059C48.0369 66.1472 43.0971 66.7193 38.141 66.7103C29.6118 66.7103 27.3178 62.6981 26.6609 61.0278C26.1329 59.5842 25.7976 58.0784 25.6636 56.5486C25.6622 56.5229 25.667 56.4973 25.6775 56.4738C25.688 56.4502 25.7039 56.4295 25.724 56.4132C25.7441 56.397 25.7678 56.3856 25.7931 56.3801C25.8185 56.3746 25.8448 56.3751 25.8699 56.3816C30.6101 57.5151 35.4693 58.0873 40.3455 58.086C41.5183 58.086 42.6876 58.086 43.8604 58.0553C48.7647 57.919 53.9339 57.6701 58.7591 56.7361C58.8794 56.7123 58.9998 56.6918 59.103 56.6611C66.7139 55.2124 73.9569 50.665 74.6929 39.1501C74.7204 38.6967 74.7892 34.4016 74.7892 33.9312C74.7926 32.3325 75.3085 22.5901 74.7135 16.6043ZM62.9996 45.3371H54.9966V25.9069C54.9966 21.8163 53.277 19.7302 49.7793 19.7302C45.9343 19.7302 44.0083 22.1981 44.0083 27.0727V37.7082H36.0534V27.0727C36.0534 22.1981 34.124 19.7302 30.279 19.7302C26.8019 19.7302 25.0651 21.8163 25.0617 25.9069V45.3371H17.0656V25.3172C17.0656 21.2266 18.1191 17.9769 20.2262 15.568C22.3998 13.1648 25.2509 11.9308 28.7898 11.9308C32.8859 11.9308 35.9812 13.492 38.0447 16.6111L40.036 19.9245L42.0308 16.6111C44.0943 13.492 47.1896 11.9308 51.2788 11.9308C54.8143 11.9308 57.6654 13.1648 59.8459 15.568C61.9529 17.9746 63.0065 21.2243 63.0065 25.3172L62.9996 45.3371Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @Umweltbundesamt@social.bund.de</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.bund.de/" async src="https://social.bund.de/embed.js"></script>

I dont know "", is this a drupal module for embedding content?

Ah, sorry, you wrote it: "mastodon module"
The this produces own embed code. We need a preprocessor for this. I open a new issue.

Not sure about a separate issue, that's more dependent on how you want to organise things.

As for this issue, I wonder if you could provide some testing instructions? I'm not sure how I should be testing this if not with the mastodon module. I guess, @gaurav.kapoor has done the same thing when testing, according to his comments above.

> should i open an issue for this module?

We dont need a Klaro! service for this module because it imports serverside so the client has no contact to 3rd party.

> testing instructions

I use for testing the HTML field formatter → and copy the code directly. Maybe using text format "full_html" is another option.

We dont need a Klaro! service for this module because it imports serverside so the client has no contact to 3rd party.

I can't confirm. I see several requests going to social.bund.de from the browser. Example: GET https://social.bund.de/api/v1/accounts/109750405502438273/statuses?exclude_replies=true&exclude_reblogs=true. The module seems to deliver fed-embed HTML elements and their javascript is then loading that content.

As for the iframe test, I'm going to do that now.

I've now tested in the body field with full-html and I get this display:

There is no inline consent button. Is that by design?

When I go to the privacy settings and accept Mastodon, the embedded Toot is loaded after a page refresh, but not immediately.

Thanks @jan kellermann for going through this with me on screen. After we've updated all components properly and confirmed the settings, this is working as expected and ready to go. Very cool :-)

Thank you for the intensive work! I merged the code.