Adding alt text that includes a Mastodon handle breaks HTML markup on images

[davidwolfpaw]

If I utilize a complete Mastodon handle in the alt text of an image (for instance @david@tech.lgbt), the handle is turned into a link. This breaks the image markup on the site.

This issue does not occur in the following instances:

• In the caption of the image
• If the handle does not include the first @ (such as david@tech.lgbt)
• If the handle is for a Pleroma instance
• If the handle is for a Calckey instance

I have not tested with other federated software, but it was interesting to note that it only seemed to affect Mastodon links.

The following blocks are an example of the issue that I'm having on a staging site that is using twentytwentythree theme with only the ActivityPub plugin active:

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":6579,"sizeSlug":"medium","style":{"color":{}}} -->
<figure class="wp-block-image size-medium"><img src="https://dwolfpawstg.wpengine.com/wp-content/uploads/2023/04/IMG_1817-300x300.jpg" alt="If I include a full username on Mastodon, such as @david@tech.lgbt in the alt text, The auto-link generation breaks the markup" class="wp-image-6579"/><figcaption class="wp-element-caption">This is a test with david@tech.lgbt in the caption, not linked</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":6580,"sizeSlug":"medium","linkDestination":"media"} -->
<figure class="wp-block-image size-medium"><a href="https://dwolfpawstg.wpengine.com/wp-content/uploads/2023/04/IMG_1815.jpg"><img src="https://dwolfpawstg.wpengine.com/wp-content/uploads/2023/04/IMG_1815-300x300.jpg" alt="If I include a full username on Mastodon, without the first @, such as david@tech.lgbt in the alt text, The auto-link generation does not break the markup" class="wp-image-6580"/></a><figcaption class="wp-element-caption">This is a test with @david@tech.lgbt in the caption, linking to the Mastodon profile with the ActivityPub plugin</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":6358,"sizeSlug":"medium","linkDestination":"media"} -->
<figure class="wp-block-image size-medium"><a href="https://dwolfpawstg.wpengine.com/wp-content/uploads/2023/01/hyperlink-Keliff-edited-bowie-icon.jpeg"><img src="https://dwolfpawstg.wpengine.com/wp-content/uploads/2023/01/hyperlink-Keliff-edited-bowie-icon-300x300.jpeg" alt="This includes a calckey link to @GayCookie@calckey.social in the alt text, as well as @lammm@blob.cat for Pleroma" class="wp-image-6358"/></a><figcaption class="wp-element-caption">This is a test with @david@tech.lgbt in the caption</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[pfefferle]

Can you maybe have a look @akirk ?

[akirk]

I've created a PR that fixes it: #312.