[iOS & Android] Enable borderRadius in all mention types #720

war-in · 2025-08-13T16:00:43Z

Details

This PR adds support for borderRadius prop in mentions styles on iOS & Android

Related Issues

Expensify/App#19299

Manual Tests

iOS & Android:

Verify if singleline mentions have rounded edges
Verify if multiline mentions have rounded edges only at the beginning and the end
Verify mentions work correctly in blockquotes

Linked PRs

…s to all mentions

src/styleUtils.ts

apple/MarkdownTextLayoutFragment.mm

apple/RCTMarkdownStyle.mm

src/styleUtils.ts

apple/MarkdownFormatter.mm

apple/MarkdownTextLayoutFragment.mm

tomekzaw · 2025-08-18T08:54:37Z

apple/MarkdownTextLayoutFragment.mm

+  CGFloat marginLeft = _markdownUtils.markdownStyle.blockquoteMarginLeft;
+  CGFloat borderWidth = _markdownUtils.markdownStyle.blockquoteBorderWidth;
+  CGFloat paddingLeft = _markdownUtils.markdownStyle.blockquotePaddingLeft;
+  CGFloat shift = marginLeft + borderWidth + paddingLeft;
+
+  fragmentTextBounds.origin.x -= (paddingLeft + borderWidth) + shift * ([_depth unsignedIntValue] - 1);
+  fragmentTextBounds.size.width = borderWidth + shift * ([_depth unsignedIntValue] - 1);


Looks like the blockquote logic is now duplicated, can we somehow dedupe it?

It was already :/
I could create a helper function to get the shift to make it look better but the logic would stay unchanged

I think we need it to be that way because boundingRect is also used in renderingSurfaceBounds

apple/MarkdownTextLayoutFragment.mm

apple/MarkdownFormatter.h

…e` to a separate file

android/src/main/java/com/expensify/livemarkdown/spans/MarkdownBackgroundSpan.java

war-in · 2025-08-22T09:33:12Z

I fixed last known iOS issue in this commit - 28b6a13

Before

After

jmusial

Dunno if those are connected to this PR, or just existing bugs. In all cases, it's just on mobile devices

android, switching to single line breaks highlights :(

Screen.Recording.2025-08-22.at.13.04.20.mov

android, Cursor not visible when within codeblock or mention

Screen.Recording.2025-08-22.at.13.08.38.mov

src/styleUtils.ts

jmusial · 2025-08-22T11:25:20Z

Very much a nitpick, but when having a multiline mention starting bottom border radius and finish top, should not apply. Same issue for web

jmusial · 2025-08-22T12:35:27Z

Na ios dzieją się rzeczy niestworzone :( Ale to też single - line

to jest 17.5, nie wiem czy to ma znaczenie

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-08-22.at.14.34.03.mp4

war-in · 2025-08-26T08:35:25Z

Very much a nitpick, but when having a multiline mention starting bottom border radius and finish top, should not apply. Same issue for web

We can try to fix it in a separate PR but I think we need to consult with the design team. I'll leave it as an open idea because it's not in the scope of this PR

Thanks for noticing!

war-in · 2025-08-26T08:39:21Z

android, switching to single line breaks highlights :(

@jmusial should be fixed with the latest commit 🎉 98dafda

android, Cursor not visible when within codeblock or mention

this is expected behaviour. We discussed it with the design team and there is no plan to support it in the near future

tomekzaw · 2025-08-26T08:41:20Z

android, Cursor not visible when within codeblock or mention

For the context, this was discussed on Slack: https://swmansion.slack.com/archives/C01GTK53T8Q/p1755699466781499

…dius

…off screen

…evices

apple/MarkdownTextInputDecoratorComponentView.mm

src/styleUtils.ts

war-in · 2025-10-29T16:11:04Z

@tomekzaw @parasharrajat @Skalakid PR's ready for review 🎉

Please review it carefully and ask me any questions because the solution is quite complicated in a few places. If you think adding comments would be valuable let me know!

Skalakid

Wow, amazing work! Left some comments, but overall LGTM

android/src/main/java/com/expensify/livemarkdown/spans/MarkdownBackgroundSpan.java

apple/MarkdownFormatter.mm

apple/MarkdownTextLayoutFragment.mm

android/src/main/java/com/expensify/livemarkdown/spans/MarkdownBackgroundSpan.java

tomekzaw · 2025-11-03T10:29:51Z

android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java

    mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
    mMentionHereColor = parseColor(map, "mentionHere", "color", context);
    mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
+    mMentionHereBorderRadius = parseFloat(map, "mentionHere", "borderRadius") * screenDensity;


I'd rather keep the original value of borderRadius in MarkdownStyle and multiply it by screenDensity near the drawing logic.

I tried that but context is not available in span so I had to pass it down and the code looked messy
We can do that but this approach is much cleaner

apple/MarkdownTextLayoutFragment.h

apple/RCTMarkdownTextBackgroundWithRange.h

…dius

war-in · 2025-11-14T11:36:36Z

@parasharrajat kind bump :)

war-in added 3 commits August 12, 2025 13:57

add border radius to mention user

0986812

mention-user highlighting v2

195ad24

mention-user highlighting v3 - it finally works!

1b26ad4

war-in changed the title ~~Add mention-user border radius~~ [iOS] Add mention-user border radius Aug 13, 2025

rewrite code to enable new mentions in blockquotes & add border radiu…

521e78c

…s to all mentions

war-in changed the title ~~[iOS] Add mention-user border radius~~ [iOS] Enable borderRadius in all mention types Aug 14, 2025

war-in mentioned this pull request Aug 14, 2025

Mentions styling doesn't render properly on native devices Expensify/App#19299

Open

fix web styles test

9d04008

tomekzaw requested changes Aug 18, 2025

View reviewed changes

war-in added 2 commits August 19, 2025 13:22

rename attribute & use custom objects instead of dict

5a7c73c

address review

ddeba51

war-in commented Aug 19, 2025

View reviewed changes

apple/MarkdownFormatter.h Outdated Show resolved Hide resolved

war-in requested a review from tomekzaw August 19, 2025 14:49

support rounded background on android

ac410ee

war-in changed the title ~~[iOS] Enable borderRadius in all mention types~~ [iOS & Android] Enable borderRadius in all mention types Aug 20, 2025

move RCTMarkdownTextBackground & `RCTMarkdownTextBackgroundWithRang…

870b5da

…e` to a separate file

tomekzaw reviewed Aug 20, 2025

View reviewed changes

android/src/main/java/com/expensify/livemarkdown/spans/MarkdownBackgroundSpan.java Outdated Show resolved Hide resolved

war-in added 2 commits August 20, 2025 16:45

rename cornerRadius to borderRadius

99cf1fb

rename cornerRadius to borderRadius iOS

8b416a5

war-in marked this pull request as ready for review August 20, 2025 14:48

war-in requested a review from jmusial August 21, 2025 10:24

fix blockquote \n issue

28b6a13

war-in requested a review from tomekzaw August 22, 2025 09:33

jmusial reviewed Aug 22, 2025

View reviewed changes

src/styleUtils.ts Show resolved Hide resolved

use StaticLayout to correctly calculate text position

98dafda

war-in added 5 commits August 26, 2025 12:59

create layout for the specific part of the text to improve performance

a105c10

Merge branch 'main' into war-in/add-mention-user-border-radius

db307b2

Merge branch 'refs/heads/main' into war-in/add-mention-user-border-ra…

8d5e9b2

…dius

Merge branch 'refs/heads/main' into war-in/add-mention-user-border-ra…

bd8aaf3

…dius

feat: add support for rounded corners in singleline input on iOS

2a5069e

war-in mentioned this pull request Oct 23, 2025

Missing blockquote ribbon in singleline input on iOS #87

Open

war-in added 6 commits October 27, 2025 17:11

fix: rounded background issues on singeline input when mentions were …

cbab252

…off screen

fix: Android - wrap mentions tightly, don't highlight entire line height

f1b8c74

fix: iOS - wrap mentions tightly, don't highlight entire line height

46ad23f

fix: iOS - highlighting multiline mentions

fe24512

fix: Android - apply density to borderRadius to align radius on all d…

39e0318

…evices

chore: improve the iOS algorithm

0da8207

war-in commented Oct 29, 2025

View reviewed changes

apple/MarkdownTextInputDecoratorComponentView.mm Outdated Show resolved Hide resolved

src/styleUtils.ts Show resolved Hide resolved

Skalakid reviewed Oct 30, 2025

View reviewed changes

tomekzaw reviewed Nov 3, 2025

View reviewed changes

apple/MarkdownTextLayoutFragment.h Show resolved Hide resolved

tomekzaw reviewed Nov 3, 2025

View reviewed changes

apple/RCTMarkdownTextBackgroundWithRange.h Show resolved Hide resolved

war-in added 3 commits November 14, 2025 11:14

Merge branch 'refs/heads/main' into war-in/add-mention-user-border-ra…

48830e5

…dius

chore: iOS - apply review

6665f83

chore: Android - apply review

c556257

[iOS & Android] Enable borderRadius in all mention types #720

Are you sure you want to change the base?

[iOS & Android] Enable borderRadius in all mention types #720

Uh oh!

Conversation

war-in commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Related Issues

Manual Tests

Linked PRs

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomekzaw Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

war-in Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

war-in commented Aug 22, 2025

Uh oh!

jmusial left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jmusial commented Aug 22, 2025

Uh oh!

jmusial commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

war-in commented Aug 26, 2025

Uh oh!

war-in commented Aug 26, 2025

Uh oh!

tomekzaw commented Aug 26, 2025

Uh oh!

Uh oh!

Uh oh!

war-in commented Oct 29, 2025

Uh oh!

Skalakid left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomekzaw Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

war-in Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

war-in commented Nov 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

war-in commented Aug 13, 2025 •

edited

Loading

jmusial commented Aug 22, 2025 •

edited

Loading