[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

war-in · 2025-10-29T13:33:58Z

apple/MarkdownTextInputDecoratorComponentView.mm

+      NSTextStorage *textStorage = [_textField valueForKey:@"_textStorage"];
+      NSTextContainer *textContainer = [_textField valueForKey:@"_textContainer"];
+      NSTextLayoutManager *textLayoutManager = [textContainer valueForKey:@"_textLayoutManager"];


I'm not sure if accessing UITextField's private fields could cause some rejections on app store. We should probably verify that

cc @tomekzaw any ideas on how to do that?

We need to obfuscate all the selectors here, e.g. "_text" + "tuoyal".reversed() + Manager"

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

Skalakid · 2025-10-30T11:22:27Z

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

+      boolean mentionStarts = lineStart <= relativeMentionStart;
+      boolean mentionEnds = lineEnd >= relativeMentionEnd;


How about renaming these variables to something for example like: startsInThisLine and endsInThisLine

Skalakid · 2025-10-30T11:40:41Z

apple/MarkdownFormatter.mm

+    if (@available(iOS 16.0, *)) {
+      RCTMarkdownTextBackground *textBackground = [[RCTMarkdownTextBackground alloc] init];
+      textBackground.color = markdownStyle.mentionHereBackgroundColor;
+      textBackground.borderRadius = markdownStyle.mentionHereBorderRadius;
+
+      [attributedString addAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                               value:textBackground
+                               range:range];
+    } else {
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionHereBackgroundColor range:range];
+    }


I see that there is a lot of similar code. How about moving it to a separate function with textColor, backgroundColor, and borderRadius as props (etc)

Helper function for applying mention-related attributes sounds good!

Skalakid · 2025-10-30T13:26:43Z

apple/MarkdownTextLayoutFragment.mm

+      NSRange intersection = NSIntersectionRange(lineRange, mentionRange);
+      CGPoint startLocation = [lineFragment locationForCharacterAtIndex:intersection.location];
+      if (isSingleline && startLocation.x == 0 && intersection.location > 0) {
+        // singleline: mention starts off screen, no need to draw background


Please add an explanation that it happens when the input isn't focused

Skalakid · 2025-10-30T13:39:49Z

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

The amount of different start and end variables is a bit overwhelming there 😓. Maybe let's add some general comments or something?

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.

tomekzaw · 2025-11-03T10:36:12Z

apple/MarkdownTextLayoutFragment.h


 @property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;

 @property NSUInteger depth;


At some point we might wanna rename depth to blockquoteDepth as this is unrelated to mentions. This can be done in a separate PR (to be merged before or after this one).

tomekzaw · 2025-11-03T10:38:18Z

apple/RCTMarkdownTextBackgroundUtils.h

I'd suggest moving these two classes to separate files, i.e. RCTMarkdownTextBackground.h and RCTMarkdownTextBackground.mm (and the same for RCTMarkdownTextBackgroundWithRange).

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

Skalakid reviewed Oct 30, 2025

View reviewed changes

tomekzaw reviewed Nov 3, 2025

View reviewed changes

		boolean mentionStarts = lineStart <= relativeMentionStart;
		boolean mentionEnds = lineEnd >= relativeMentionEnd;


		@property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;

		@property NSUInteger depth;

[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!

Choose a reason for hiding this comment

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

tomekzaw Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomekzaw Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomekzaw Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

war-in commented Aug 13, 2025 •

edited

Loading

jmusial commented Aug 22, 2025 •

edited

Loading

tomekzaw Nov 3, 2025 •

edited

Loading

tomekzaw Nov 3, 2025 •

edited

Loading

tomekzaw Nov 3, 2025 •

edited

Loading