MBL-3092: Add support for text links & improve annotated string concatenation

[tonyteate]

📲 What

Add support for text links, and improve how AnnotatedStrings are concatenated overall, with spaces between them.

🤔 Why

Project story text should be generally readable. In addition, for parity with the pre-existing implementation, text links should be clickable and handled accordingly.

🛠 How

After transformation, a rich text block that contains any styled or linked text becomes a parent Paragraph, Header, or ListItem object, with a list of ChildParagraphs for children.

Use the list of ChildParagraphs to build an AnnotatedString (which is eventually passed to a Text composable): Within an AnnotatedString.Builder, process each ChildParagraph by mapping available styles and link properties to SpanStyle and LinkAnnotation.Url respectively, then append() the text property.

Link Support

Strings annotated with LinkAnnotation.Url are handled by a default UriHandler CompositionLocal (LocalUriHandler). Provide a custom UriHandler that simply calls ApplicationUtils.openUrlExternally() to match the behavior of the pre-existing Project Story implementation. Note: openUrlExternally attempts to force links to open in a browser-like app, bypassing deep linking behavior for any supported apps (including e.g. YouTube, Bluesky, the Kickstarter app itself, etc.).

Concatenation

In a typical scenario, for all but the last ChildParagraph, we would subsequently append() a space. However, due to the particular way in which the server-side parser currently processes linked & styled text, the API can return child elements with text that starts with punctuation.

Some examples from the Roller Pro Project:

Link

{
  "__typename": "RichText",
  "text": null,
  "link": null,
  "styles": [],
  "children": [
    {
      "__typename": "RichText",
      "text": "Roller Pro is waiting for you, in the flesh, at our beautiful Retail Stores. More info on our stores",
      "link": null,
      "styles": []
    },
    {
      "__typename": "RichText",
      "text": "here",
      "link": "https://www.peakdesign.com/pages/retail-stores",
      "styles": []
    },
    {
      "__typename": "RichText",
      "text": ".",
      "link": null,
      "styles": []
    }
  ]
},

Style

{
  "__typename": "RichText",
  "text": null,
  "link": null,
  "styles": [],
  "children": [
    {
      "__typename": "RichText",
      "text": "The backbone of Roller Pro is a",
      "link": null,
      "styles": []
    },
    {
      "__typename": "RichText",
      "text": "totally",
      "link": null,
      "styles": [
        "EMPHASIS"
      ]
    },
    {
      "__typename": "RichText",
      "text": "proprietary trolley design that we call",
      "link": null,
      "styles": []
    },
    {
      "__typename": "RichText",
      "text": "SlimDrive™",
      "link": null,
      "styles": [
        "STRONG"
      ]
    },
    {
      "__typename": "RichText",
      "text": ". It drives smoother, packs slimmer, and feels better to interact with than anything else on the market.",
      "link": null,
      "styles": []
    },
    ...
  ]
}

Note

We anticipate possible changes to the API in the future.

To handle this detail now, flip the logic to append() a space before each processed ChildParagraph except for the first, and only if the first character of text needs a leading space. To determine if a character needs a leading space, defer to the Unicode categories from the Character class alongside a small set of specific characters.

While this solution considers multiple languages, the Kickstarter story editor and server-side parser both effectively expect stories in English; and this overall scenario is highly dependent on whether or not punctuation and surrounding text is styled, such that this approach works for a vast majority of cases (excuse our French).

👀 See

Before 🐛

Styled text runs together with normal text. Links neither styled nor clickable

Screen_recording_20260304_120953.mp4

After 🦋 |

All text is readable. Links are styled and clickable.

Screen_recording_20260304_123357.mp4

📋 QA

1. Navigate to Internal Tools > Project Story Activity
2. Submit a Project url to fetch and display the Story data. (The default project is Roller Pro.)

Story 📖

[MBL-3092] Handle text links + improve styled text spacing - Jira

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.42%. Comparing base (e1e47ea) to head (bac6b54).
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@             Coverage Diff              @@
##             master    #2483      +/-   ##
============================================
- Coverage     64.43%   64.42%   -0.01%     
+ Complexity     2433     2432       -1     
============================================
  Files           385      385              
  Lines         29196    29196              
  Branches       4229     4229              
============================================
- Hits          18811    18810       -1     
  Misses         8103     8103              
- Partials       2282     2283       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.