Hashtag link misalignment

jamesleesaunders commented 1 week ago

Steps to Reproduce

When a post contains any special characters '£', 'é', 'â' the hashtag href link become mis-aligned.

This is only a visual issue and the hashtag link still works correctly.

Examples: https://bsky.app/profile/jamessaunders.bsky.social/post/3laxwjbt4vb2n https://bsky.app/profile/jamessaunders.bsky.social/post/3laxwgtilvr2n https://bsky.app/profile/jamessaunders.bsky.social/post/3lavbfhwdeq2w

Attachments

No response

What platform(s) does this occur on?

iOS, Web (Desktop)

Device Info

No response

What version of the app are you using?

Version 1.93.0.548 0ca7c0962 (prod)

Additional Information

These were created via the BlueSky API.

brunoccc commented 1 week ago

TL;DR: I am new to this project, and tried to investigate this issue. It looks like it is due to "malformed" data sent by the backend, and it's not a frontend rendering issue.

Details: I copied one of the messages above and posted it using the mobile app. This new post is shown correctly:

If I check the data received over the network, I see that my new post has the tags offset by 1 when compared to the original "malformed" post:

"posts": [
    {
      ..... MY POST ....
      "record": {
        "$type": "app.bsky.feed.post",
        "createdAt": "2024-11-16T16:10:46.851Z",
        "facets": [
          {
            "features": [
              {
                "$type": "app.bsky.richtext.facet#tag",
                "tag": "lawn"
              }
            ],
            "index": {
              "byteEnd": 108, <<<<<<<<<<<<<<< HERE
              "byteStart": 103
            }
          }
        ],
        "langs": [
          "en"
        ],
        "text": "Raked lawn, new shoes, garden centre, café & sun... tis looking to be a good start to the weekend :-) #lawn"
      },
      ...
    },
    {
      ..... ORIGINAL POST ....
      "record": {
        "$type": "app.bsky.feed.post",
        "createdAt": "2014-05-03T13:50:00.000000Z",
        "facets": [
          {
            "features": [
              {
                "$type": "app.bsky.richtext.facet#tag",
                "tag": "lawn"
              }
            ],
            "index": {
              "byteEnd": 107,  <<<<<<<<<<<<<<< HERE
              "byteStart": 102
            }
          }
        ],
        "text": "Raked lawn, new shoes, garden centre, café & sun... tis looking to be a good start to the weekend :-) #lawn"
      },
      ...
    }
  ]
}

I am not familiar with the code on backend, but it could be a bug in the API used to create the original posts. Hopefully these notes help to identify the issue. 🤞

jamesleesaunders commented 6 days ago

HI @brunoccc Thanks for looking into this.

I suspected as much as I did upload these posts via the API. I will just point out that this only affects posts with special characters ('£', 'é', 'â') and as you point out likely caused by the byteStart, byteEnd values.

      ..... ORIGINAL POST ....
            "text": "Raked lawn, new shoes, garden centre, café & sun... tis looking to be a good start to the weekend :-) #lawn"
            ...
            "index": {
              "byteStart": 102,
              "byteEnd": 107
            }

But if we look at the positions the start of the hashtag is 102:

Ref: https://docs.bsky.app/docs/advanced-guides/post-richtext

However is it that the 'special character' 'é' may count as two bytes therefore causing the mis-alignment? So, I don't know if this is something my code needs to account for when posting or whether this is in fact an issue with the Bluesky end?

You may want to mention this on the API docs link above?

Either way please feel free to close this issue down as I am sure you have more pressing things to concentrate on. Thank you for building Bluesky it is a breath of fresh air compared to X/Twitter!

Raked lawn, new shoes, garden centre, cafè & sun... tis looking to be a good start to the weekend :-) #lawn 
000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011111111
000000000011111111112222222222333333333344444444445555555555666666666677777777778888888888999999999900000000
012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567
                                                                                                      ^----^

bluesky-social / social-app