[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

…dius

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

@parasharrajat kind bump :)

parasharrajat · 2025-11-23T12:31:02Z

src/styleUtils.ts

    mentionHere: {
      color: 'green',
      backgroundColor: 'lime',
+      borderRadius: 5,


I think it should be 4px as per design system.

We're using different values here on purpose. For instance, we also have background color lime and foreground color green. That's because they need to be set on the E/App side.

Make sense. I didn't notice that it is a different repo. 😄

@parasharrajat so are we ready for the ✅? 👀

WebExample/__tests__/styles.spec.ts

war-in · 2025-11-28T08:32:18Z

@parasharrajat can we get a final ✅? All comments have been answered!

…ratorComponentView

parasharrajat · 2025-12-02T13:56:58Z

BUG: Android: Cursor shows behind the background.

02.12.2025_19.26.11_REC.mp4

parasharrajat · 2025-12-02T14:21:24Z

How do I build iOS build locally?

"@expensify/react-native-live-markdown": "git://github.com/Expensify/react-native-live-markdown#eb521b53582165d532918ca64b859210dc92bf09",

I installed the latest commit for this package on NewDot repo, and it worked for Android. But for iOS, the app is downloading the app from the remote cache.

war-in · 2025-12-03T08:19:33Z

BUG: Android: Cursor shows behind the background

We know about the issue and already reported it. It was put on hold at the time but we could revisit this idea in another issue/thread.
Marking as unrelated for now!

war-in · 2025-12-03T08:21:24Z

But for iOS, the app is downloading the app from the remote cache.

@parasharrajat I'd probably remove the GITHUB_TOKEN entry from my .env to achieve that. This should be the easiest way to disable remote builds

parasharrajat · 2025-12-03T08:27:53Z

~~Nice idea. I will try that.~~ Won't work

Now the builds are coming from S3.

war-in · 2025-12-03T08:38:55Z

Ok, so another quick one - I'd add a dummy log to some ~~android~~ iOS file to change the fingerprint. That should work

parasharrajat · 2025-12-03T10:06:56Z

iOS looks good.

parasharrajat · 2025-12-03T10:08:01Z

@war-in So we are not targeting this #720 (comment) here in this PR. Do we have approval for this from internal team?

@puneetlath What do you say?

parasharrajat · 2025-12-03T10:35:22Z

Screenshots

🔲 iOS / native

03.12.2025_16.07.26_REC.mp4

🔲 MacOS / Chrome

🔲 Android / native

03.12.2025_17.26.54_REC.mp4

war-in · 2025-12-03T16:31:00Z

@war-in So we are not targeting this #720 (comment) here in this PR. Do we have approval for this from internal team?

Do we have approval for this

@parasharrajat which this are you referring to here? approval for not including the fix in this PR or approval for handling this in another issue?

parasharrajat · 2025-12-03T16:40:46Z

approval for not including the fix in this PR or approval for handling this in another issue?

Both are the same. We will have to fix that. The question is where. This Pr or another issue.

So we need to clarify that first before moving forward.

puneetlath · 2025-12-03T21:32:59Z

Sorry, the Slack link above doesn't work for me. Is that a bug this PR introduces? Or it already exists?

war-in · 2025-12-04T10:20:15Z

introduced by this.

@parasharrajat No, it's not. I downloaded the prod version from google play and this is how it behaves right now (see not-rounded corners)
So this behaviour is not introduced by this PR

Screen_Recording_20251204_111617_Expensify.mp4

cc @puneetlath (you can enter the slack link by copying it and pasting in a slack conversation e.g. self dm)

parasharrajat · 2025-12-04T10:26:12Z

Ah, I see. Thanks for correcting me. Then we are fine with this PR.

parasharrajat

🎀 👀 🎀 C+ reviewed

os-botify · 2025-12-04T15:37:47Z

🚀 Published to npm in 0.1.317 🎉

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

puneetlath requested review from parasharrajat and puneetlath November 18, 2025 20:11

parasharrajat suggested changes Nov 23, 2025

View reviewed changes

This was referenced Nov 24, 2025

Implement code and pre blocks support on Android #338

Closed

Implement code and pre blocks support on iOS #306

Closed

refactor: improve private field access logic in MarkdownTextInputDeco…

eb521b5

…ratorComponentView

tomekzaw approved these changes Dec 3, 2025

View reviewed changes

parasharrajat approved these changes Dec 4, 2025

View reviewed changes

puneetlath approved these changes Dec 4, 2025

View reviewed changes

puneetlath merged commit 6e84c21 into Expensify:main Dec 4, 2025
10 checks passed

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

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

war-in commented Nov 14, 2025

Uh oh!

parasharrajat Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

tomekzaw Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

parasharrajat Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

war-in Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

war-in commented Nov 28, 2025

Uh oh!

parasharrajat commented Dec 2, 2025

Uh oh!

parasharrajat commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

war-in commented Dec 3, 2025

Uh oh!

war-in commented Dec 3, 2025

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

parasharrajat commented Dec 3, 2025

Uh oh!

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

Uh oh!

Uh oh!

war-in commented Aug 13, 2025 •

edited

Loading

jmusial commented Aug 22, 2025 •

edited

Loading

parasharrajat commented Dec 2, 2025 •

edited

Loading

parasharrajat commented Dec 3, 2025 •

edited

Loading

war-in commented Dec 3, 2025 •

edited

Loading

parasharrajat commented Dec 3, 2025 •

edited

Loading

parasharrajat commented Dec 3, 2025 •

edited

Loading