Inline code block support by azimgd · Pull Request #43 · Expensify/react-native

azimgd · 2023-02-14T15:31:29Z

Upstream PR Link

Summary

New textCodeBlock prop for a component which is used for displaying inline code-blocks. Similar to a <pre> tag which supports customizable inline background color and border.

consttextCodeBlockStyle={backgroundColor: '#002E22',borderColor: '#1B5744',borderRadius: 4,borderWidth: 2,};<TexttextCodeBlockStyle={textCodeBlockStyle}>
&nbsp;This text.&nbsp;
</Text>

See Libraries/Text/TextCodeBlock.js for the list of available props.

See packages/rn-tester/js/examples/Text/TextExample.ios.js for a usage example.

Changelog

[iOS] [Added] - textCodeBlock prop for component
[Android] [Added] - textCodeBlock prop for component

Test Plan

Run rn-tester app on both iOS and Android
Navigate to Text Component on home screen
Search for Inline code-block section
Each block wrapped in a <Text textCodeBlockStyle> should have be displayed inline, with a background color and a border around it.

…ed for displaying inline code-blocks. Similar to a <pre> tag which supports customizeable inline background color and border.

sketchydroide · 2023-02-14T16:09:37Z

sorry I would mantain the commit history, it's easier to understand what hapened and why we did it if we mantain that, can you create a PR from the original branch?

azimgd · 2023-02-14T18:30:19Z

Hey Andre, I don't see any particular benefit of having commit history from the previous branch, for this particular case. I have been flipping things around, along the way. While I can do that if you insist, I propose we "do nothing" or keep things cleaner and split commits into logical sequence:

Android implementation
Web implementation
Example implementation

In any case I will put this on hold and give Rajat an opportunity to fully test, report all issues he found in one batch or approve this PR before putting any extra effort.

Let me know what you think,
Thanks

parasharrajat · 2023-02-14T19:16:34Z

Getting this error while running for Hermes on iOS.

[!] CocoaPods could not find compatible versions for pod "hermes-engine":
In snapshot (Podfile.lock):
hermes-engine (from `../../sdks/hermes-engine/hermes-engine.podspec`)
In Podfile:
hermes-engine (from `../../sdks/hermes-engine/hermes-engine.podspec`)
It seems like you've changed the version of the dependency `hermes-engine` and it differs from the version stored in `Pods/Local Podspecs`.
You should run `pod update hermes-engine --no-repo-update` to apply changes made locally.

Should I try the suggestion about or do something else?

azimgd · 2023-02-14T19:21:06Z

Please do. I was hesitant to push .lock file as the diff was huge after updating gems and bundler. But it looks like I should do this tomorrow.

parasharrajat · 2023-02-14T19:25:34Z

But in which folder? I am using the automated script and not sure where...

azimgd · 2023-02-14T19:30:18Z

packages/rn-tester

parasharrajat · 2023-02-14T20:44:27Z

I still get the same result on iOS. @azimgd can you please drop your ENV values? Could it be due to the old Xcode version(13.2.1)? I don't think so but maybe.

Also, what is your cocoapods version? May be I am installing the wrong pods. It is worth noting that I am building the app on a simulator.

azimgd · 2023-02-14T21:01:44Z

$ ruby -v ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin21]
$ gem -v
3.4.6
$ bundler -v Bundler version 2.1.4

What error do you get ? Could you send me a build log in collapsed format please. Does that only fail with Hermes or JSC as well ?

Here is the build status I get:

Which app do you want to test?
1 - RNTester
2 - A new RN app using the template
> 1
What platform do you want to test?
1 - Android
2 - iOS
> 2
What VM are you testing?
1 - Hermes
2 - JSC
> 1
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.17s.
Killing any running packagers
Start the packager in another terminal by running 'npm start' from the root
and then press any key.
About to test iOS Hermes... Installing CocoaPods dependencies...
Configuring RNTester with Fabric enabled. Using Hermes engine.
Framework build type is static library
[Codegen] Generating ./build/generated/ios/React-Codegen.podspec.json
[Codegen] generating an empty RCTThirdPartyFabricComponentsProvider
Configuring RNTesterUnitTests with Fabric enabled. Using Hermes engine.
Framework build type is static library
[Codegen] Skipping React-Codegen podspec generation.
[Codegen] generating an empty RCTThirdPartyFabricComponentsProvider
Configuring RNTesterIntegrationTests with Fabric enabled. Using Hermes engine.
Framework build type is static library
[Codegen] Skipping React-Codegen podspec generation.
[Codegen] generating an empty RCTThirdPartyFabricComponentsProvider
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../../third-party-podspecs/DoubleConversion.podspec`
[Codegen] Found FBReactNativeSpec
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing safe_level with the 2nd argument of ERB.new is deprecated. Do not use it, and specify other arguments as keyword arguments.
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing trim_mode with the 3rd argument of ERB.new is deprecated. Use keyword argument like ERB.new(str, trim_mode: ...) instead.
Fetching podspec for `RCT-Folly` from `../../third-party-podspecs/RCT-Folly.podspec`
[Codegen] Found rncore
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing safe_level with the 2nd argument of ERB.new is deprecated. Do not use it, and specify other arguments as keyword arguments.
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing trim_mode with the 3rd argument of ERB.new is deprecated. Use keyword argument like ERB.new(str, trim_mode: ...) instead.
[Codegen] Found ScreenshotmanagerSpec
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing safe_level with the 2nd argument of ERB.new is deprecated. Do not use it, and specify other arguments as keyword arguments.
/Users/azimgd/codes/react-native/scripts/react_native_pods_utils/script_phases.rb:51: warning: Passing trim_mode with the 3rd argument of ERB.new is deprecated. Use keyword argument like ERB.new(str, trim_mode: ...) instead.
Fetching podspec for `boost` from `../../third-party-podspecs/boost.podspec`
Fetching podspec for `glog` from `../../third-party-podspecs/glog.podspec`
Fetching podspec for `hermes-engine` from `../../sdks/hermes-engine/hermes-engine.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.71.2-alpha.1)
Installing FBReactNativeSpec (0.71.2-alpha.1)
Installing Flipper (0.125.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)
Installing Flipper-DoubleConversion (3.2.0.1)
Installing Flipper-Fmt (7.1.7)
Installing Flipper-Folly (2.6.10)
Installing Flipper-Glog (0.5.0.5)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.4.3)
Installing FlipperKit (0.125.0)
Installing OpenSSL-Universal (1.1.1100)
Installing RCT-Folly (2021.07.22.00)
Installing RCTRequired (0.71.2-alpha.1)
Installing RCTTypeSafety (0.71.2-alpha.1)
Installing React (0.71.2-alpha.1)
Installing React-Codegen (0.71.2-alpha.1)
Installing React-Core (0.71.2-alpha.1)
Installing React-CoreModules (0.71.2-alpha.1)
Installing React-Fabric (0.71.2-alpha.1)
Installing React-RCTActionSheet (0.71.2-alpha.1)
Installing React-RCTAnimation (0.71.2-alpha.1)
Installing React-RCTAppDelegate (0.71.2-alpha.1)
Installing React-RCTBlob (0.71.2-alpha.1)
Installing React-RCTFabric (0.71.2-alpha.1)
Installing React-RCTImage (0.71.2-alpha.1)
Installing React-RCTLinking (0.71.2-alpha.1)
Installing React-RCTNetwork (0.71.2-alpha.1)
Installing React-RCTPushNotification (0.71.2-alpha.1)
Installing React-RCTSettings (0.71.2-alpha.1)
Installing React-RCTTest (0.71.2-alpha.1)
Installing React-RCTText (0.71.2-alpha.1)
Installing React-RCTVibration (0.71.2-alpha.1)
Installing React-callinvoker (0.71.2-alpha.1)
Installing React-cxxreact (0.71.2-alpha.1)
Installing React-graphics (0.71.2-alpha.1)
Installing React-hermes (0.71.2-alpha.1)
Installing React-jsi (0.71.2-alpha.1)
Installing React-jsiexecutor (0.71.2-alpha.1)
Installing React-jsinspector (0.71.2-alpha.1)
Installing React-logger (0.71.2-alpha.1)
Installing React-perflogger (0.71.2-alpha.1)
Installing React-rncore (0.71.2-alpha.1)
Installing React-runtimeexecutor (0.71.2-alpha.1)
Installing ReactCommon (0.71.2-alpha.1)
Installing ScreenshotManager (0.0.1)
Installing SocketRocket (0.6.0)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost (1.76.0)
Installing fmt (6.2.1)
Installing glog (0.3.5)
Installing hermes-engine (0.71.2)
Installing libevent (2.1.12)
Generating Pods project
Setting REACT_NATIVE build settings
Setting CLANG_CXX_LANGUAGE_STANDARD to c++17 on /Users/azimgd/codes/react-native/packages/rn-tester/RNTesterPods.xcodeproj
Pod install took 15 [s] to run
Integrating client project
Pod installation complete! There are 68 dependencies from the Podfile and 56 total pods installed.
Press any key to open the workspace in Xcode, then build and test manually.
Would you like to test something else? (Y/N)

parasharrajat · 2023-02-14T21:19:07Z

I was not clear. I didn't that I am getting errors. I tested with JSC and the build succeeded. But the UI had the same issue where none of the code blocks were visible. Thanks for the logs. I will compare them.

On the other hand, the build failed with Hermes. I will post the logs tomorrow. For now, I have started the OS upgrade.

azimgd · 2023-02-14T21:28:23Z

Tested on XCode 13.2.1(13C100) all works fine. Can you confirm you are testing this branch without any code modifications ?
Try:

npm run test-e2e-local-clean
./scripts/test-manual-e2e.sh

parasharrajat · 2023-02-14T21:29:54Z

Trying...

parasharrajat · 2023-02-14T21:50:40Z

Ok, Now it worked. Maybe a cache issue. Thanks for the help. It's too late for me but the good news is that I can finally run my tests. I will give you the full report tomorrow and we can close this PR.

I will keep reporting bugs separately but you can wait until all are listed. I will ping you for the same.

parasharrajat · 2023-02-15T22:08:02Z

BUG: iOS: Strange wrapping got long words.

Steps:

Send a very long word without spaces so that it wraps on your iOS screen.
Notice that wrapping.

Check the cursor in this image, the wrapping started at T but there is still a lot of space. I think it should wrap when the end of the line is reached.

This is different from the Android

parasharrajat · 2023-02-16T18:05:28Z

BUG: Android: Border looks a bit off.

Steps: Check the second Text element in the code. The bottom border is very light compared to other edges.

Source

<RNTesterBlock title="Inline code-block">
<View style={{backgroundColor: '#006621', padding: 10}}>
<Text
style={{
lineHeight: 20,
fontSize: 15,
marginBottom: 40,
marginTop: 40,
}}>
&nbsp;This text.&nbsp;
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text should wrapped with a border and displayed
inline. This text should wrapped with a border and displayed
inline.&nbsp;
</Text>
&nbsp; with some text nested is deep with code block.
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;T histextshouldwrappedwithaborderanddisplayed inline. This
text should wrapped with a border and displayed inline.&nbsp;
</Text>
</Text>
</View>
</RNTesterBlock>

parasharrajat · 2023-02-16T18:07:52Z

BUG: Android: Code block overlapping with nested normal text.

Steps: Check the Text element with the link (5 Text element). Previous text is overlapping with code block.

Source

<RNTesterBlock title="Inline code-block">
<View style={{backgroundColor: '#006621', padding: 10}}>
<Text
style={{
lineHeight: 20,
fontSize: 15,
marginBottom: 40,
marginTop: 40,
}}>
&nbsp;This text.&nbsp;
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text should wrapped with a border and displayed
inline. This text should wrapped with a border and displayed
inline.&nbsp;
</Text>
&nbsp; with some text nested is deep with code block.
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;T histextshouldwrappedwithaborderanddisplayed inline. This
text should wrapped with a border and displayed inline.&nbsp;
</Text>
</Text>
</View>
</RNTesterBlock>

parasharrajat · 2023-02-16T18:41:45Z

Question: How can we add a little gap between the lines so that the code block does not overlap?

parasharrajat · 2023-02-16T19:01:16Z

BUG: Android: Spacing issue at the starting edge of the code block.

Steps: Check the 3 Text element in the source below. There is a space before the code block starts(i.e. after example word) and there is another space in the starting of code block. But the space after example is not rendered.

Not present on iOS

Source

<RNTesterBlock title="Inline code-block">
<View style={{backgroundColor: '#006621', padding: 10}}>
<Text
style={{
lineHeight: 20,
fontSize: 15,
marginBottom: 40,
marginTop: 40,
}}>
&nbsp;This text.&nbsp;
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text should wrapped with a border and displayed
inline. This text should wrapped with a border and displayed
inline.&nbsp;
</Text>
&nbsp; with some text nested is deep with code block.
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;T histextshouldwrappedwithaborderanddisplayed inline. This
text should wrapped with a border and displayed inline.&nbsp;
</Text>
</Text>
</View>
</RNTesterBlock>

parasharrajat · 2023-02-16T19:03:43Z

BUG: Android: iOS: Border radius of starting edge is not applied in code blocks nested in paragraphs.

Steps: Check the 4 Text element in the source below. There is no border-radius on the starting edge of the code block containing a link.

Source

<RNTesterBlock title="Inline code-block">
<View style={{backgroundColor: '#006621', padding: 10}}>
<Text
style={{
lineHeight: 20,
fontSize: 15,
marginBottom: 40,
marginTop: 40,
}}>
&nbsp;This text.&nbsp;
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text should wrapped with a border and displayed
inline. This text should wrapped with a border and displayed
inline.&nbsp;
</Text>
&nbsp; with some text nested is deep with code block.
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;T histextshouldwrappedwithaborderanddisplayed inline. This
text should wrapped with a border and displayed inline.&nbsp;
</Text>
</Text>
</View>
</RNTesterBlock>

parasharrajat · 2023-02-16T19:06:15Z

BUG: Android: Vertical alignment is not correct. Android seems to have more space above the text inside code block.

Steps: Check the 2 Text element in the source below. Compare both Android and iOS. iOS looks good but android seems to be shifted a little bit downwards inside the code block area.

Source

<RNTesterBlock title="Inline code-block">
<View style={{backgroundColor: '#006621', padding: 10}}>
<Text
style={{
lineHeight: 20,
fontSize: 15,
marginBottom: 40,
marginTop: 40,
}}>
&nbsp;This text.&nbsp;
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15, marginBottom: 40}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;This text should wrapped with a border and displayed
inline. This text should wrapped with a border and displayed
inline.&nbsp;
</Text>
&nbsp; with some text nested is deep with code block.
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>
</Text>
<Text style={{lineHeight: 20, fontSize: 15}}>
Inline text example&nbsp;
<Text
style={{color: '#fff', fontSize: 13}}
textCodeBlock={textCodeBlock}>
&nbsp;T histextshouldwrappedwithaborderanddisplayed inline. This
text should wrapped with a border and displayed inline.&nbsp;
</Text>
</Text>
</View>
</RNTesterBlock>

Android	iOS

parasharrajat · 2023-02-16T19:07:28Z

I think these are the bugs. cc: @azimgd

parasharrajat

Please add Testing steps to the PR description.
Also mention usage notes for the new prop.
Add limitations such as which style is supported.

parasharrajat · 2023-02-16T19:10:02Z

All the above tests have run on the JSC dev build. I will test Hermes Builds now.

Please use the following styles for textCodeblock prop.

const textCodeBlock = {
backgroundColor: '#002E22',
borderColor: '#e72517',
borderRadius: 4,
borderWidth: 2,
};

parasharrajat

Change the prop name to textCodeBlockStyles which I think best suited as per the values it takes.

parasharrajat · 2023-02-16T19:44:59Z

Getting this error on iOS Hermes build. Any help @azimgd?

azimgd · 2023-02-17T05:59:14Z

Not a bug:

BUG: iOS: Strange wrapping got long words.

Validate that this still happens by removing textCodeBlock, not a bug. Play around with breaking strategy to adjust the cross-platform behavior.

BUG: Android: Border looks a bit off.

Zoom-in emulator, that's a visual glitch rather than a bug.

BUG: Android: Code block overlapping with nested normal text.

I assume you mention this particular overlapping, not a bug. You missed   after the end of the text and before the codeblock.

Should be this:

&nbsp;withsometextnestedisdeepwithcodeblock.&nbsp;<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlock={textCodeBlock}>
&nbsp;https://github.com/Expensify/App/issues/13922#issuecomment-1433354811.&nbsp;
</Text>

Question: How can we add a little gap between the lines so that the code block does not overlap?

Not supported. Out of scope.

BUG: Android: Spacing issue at the starting edge of the code block.

All spaces given in your example are rendering correctly, make sure you have updated your code:

<Textstyle={{lineHeight: 20,fontSize: 15,marginBottom: 40}}>
Inline text example &nbsp;
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlock={textCodeBlock}>
&nbsp;This text.&nbsp;
</Text></Text>

BUG: Android: Vertical alignment is not correct. Android seems to have more space above the text inside code block.

Can't spot any shifting. Check the lower end of g, p, y characters all is good. Moreover try to zoom in your emulator.

Getting this error on iOS Hermes build. Any help @azimgd?

Clean build, checkout to base branch, rebuild. If base branch builds successfully report here, if not report to Rory.

To be fixed:

BUG: Android: iOS: Border radius of starting edge is not applied in code blocks nested in paragraphs.

Agree.

textCodeBlockStyle

Might be.

Szymon20000 · 2023-03-14T10:07:01Z

+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTextCodeBlockStyle : NSLayoutManager


What's the reason for using custom LayoutManager?
There are already other attributes like background colour and they don't require the change.
I guess we want to merge it later upstream so I think it makes sense to avoid introducing new mechanisms if they are not needed. However, I'm not sure we need it while writing this comment :)

Looks that it's a standard approach https://levelup.gitconnected.com/background-with-rounded-corners-in-uitextview-1c095c708d14

Szymon20000 · 2023-03-14T10:29:23Z

+ NSString *borderColor = [textCodeBlockStyle objectForKey:@"borderColor"];
+ float borderRadius = [[textCodeBlockStyle objectForKey:@"borderRadius"] floatValue];
+ float borderWidth = [[textCodeBlockStyle objectForKey:@"borderWidth"] floatValue];
+ float horizontalOffset = 5;


shouldn't it be exposed to JS?

Szymon20000 · 2023-03-14T10:37:10Z

+ float borderRadius = [[textCodeBlockStyle objectForKey:@"borderRadius"] floatValue];
+ float borderWidth = [[textCodeBlockStyle objectForKey:@"borderWidth"] floatValue];
+ float horizontalOffset = 5;
+ float verticalOffset = 2;


shouldn't it be exposed to JS?

Szymon20000 · 2023-03-14T10:41:24Z

+ enclosingRect.size.height - (borderWidth * 2)
+ );
+
+ UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:resultRect byRoundingCorners:corners cornerRadii:CGSizeMake(borderRadius, borderRadius)];


Should we set those values here?
context.setAllowsAntialiasing(true) context.setShouldAntialias(true)

Szymon20000 · 2023-03-14T11:01:17Z

Just checked iOS side and it looks solid 🎉
I think we don't want to draw border on left and right side when it's not a beginning or end line.

^ slack

^ our approach

Szymon20000 · 2023-03-14T11:04:53Z

Just checked iOS side and it looks solid 🎉 I think we don't want to draw border on left and right side when it's not a beginning or end line. ^ slack
^ our approach

@shawnborton WDYT?

TMisiukiewicz · 2023-03-14T11:34:02Z

Had the same issues with running the app on iOS Hermes as @parasharrajat , tested the others and LGTM 👍

Szymon20000 · 2023-03-14T12:14:56Z

I'm testing Android and see problem with layout:

Szymon20000 · 2023-03-14T12:19:26Z

on iOS it works fine.

I guess android adds a padding without actually moving the component.

Szymon20000 · 2023-03-14T12:36:43Z

I'm testing Android and see problem with layout:

@azimgd Maybe we should use ReplacementSpan to change size properly?
https://stackoverflow.com/questions/27198155/adding-a-padding-margin-to-a-spannable

parasharrajat · 2023-03-14T14:46:35Z

Just checked iOS side and it looks solid tada I think we don't want to draw border on left and right side when it's not a beginning or end line.

Correct. It should not have border-left or border-right for these cases. It wasn't the case when I tested but It might be due to new changes.

fabioh8010 · 2023-03-14T17:29:46Z

Hello, I'm coming from this issue and PR, and was also testing this PR together with @TMisiukiewicz, and I found some issues exclusively in Android.

Source

<Textstyle={{lineHeight: 20,fontSize: 15,color: 'red'}}>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
<Textstyle={{color: '#fff',fontSize: 13}}textCodeBlockStyle={textCodeBlockStyle}>
Inline
</Text>
Text
</Text>

parasharrajat · 2023-03-14T17:37:19Z

@fabioh8010 Do you mind explaining the issues here?

fabioh8010 · 2023-03-14T17:41:20Z

Hi @parasharrajat , we noticed that this PR could solve the back tick issue I have been working some time ago and I decided to do some tests with inline code support in this PR, and came across this issue in Android. During my tests, everything seems fine with iOS, but Android have some alignment problems as you can see in the screenshoot.

shawnborton · 2023-03-14T19:03:51Z

Yeah I think I agree that we shouldn't draw the borders on the sides when wrapping multi-line.

parasharrajat · 2023-04-04T05:19:05Z

@azimgd Please look into the above requests.

azimgd · 2023-04-18T13:45:43Z

I'm back, on this issue right now.

azimgd · 2023-04-18T20:06:59Z

issue is on hold from my side until 6883 is completed.

parasharrajat · 2023-05-02T15:28:45Z

@azimgd Any updates?

puneetlath · 2023-05-04T17:07:21Z

Could we also add support for padding as a nested style attribute here? We'll need it for mentions.

parasharrajat · 2023-05-10T11:29:12Z

Any update @azimgd?

azimgd · 2023-05-10T15:07:29Z

I have been working on a new approach, for which I expect to have an update by Monday.
I will post more detailed explanation tomorrow.

Implement new textCodeBlock prop for a <Text /> component which is us…
0f03d58
…ed for displaying inline code-blocks. Similar to a <pre> tag which supports customizeable inline background color and border.

azimgd mentioned this pull request Feb 14, 2023
Inline code block support #35
Closed

podfile.lock
b50207f

azimgd mentioned this pull request Feb 16, 2023
Android/iOS - Code blocks are overflowing the app border Expensify/App#4733
Closed

parasharrajat suggested changes Feb 16, 2023
View reviewed changes

fixing display of multiple codeblocks on the same line
f3205d7

Szymon20000 reviewed Mar 14, 2023
View reviewed changes

fabioh8010 mentioned this pull request Mar 14, 2023
[HOLD] fix: improve mobile's inline code block font and alignment Expensify/App#15367
Closed
53 tasks

roryabraham mentioned this pull request Mar 31, 2023
[HOLD facebook/react-native#37397][$1000] Back ticks aren't centered vertically Expensify/App#8132
Closed

puneetlath mentioned this pull request May 4, 2023
[No QA] 17885 custom user mentions renderer Expensify/App#18167
Merged
57 tasks

parasharrajat mentioned this pull request May 5, 2023
[HOLD on App/issues/4733 & facebook/react-native/pull/37397] [$4000] Inline code blocks do not appear on Android Native Expensify/App#17441
Closed
6 tasks

This was referenced May 5, 2023
[HOLD for payment 2023-05-16] Add custom renderer for user mentions Expensify/App#17885
Closed
[No QA] create UserMentionRenderer for rendering mentions inside chat Expensify/App#18495
Merged

azimgd closed this by deleting the head repository May 11, 2023

azimgd mentioned this pull request May 11, 2023
Add substring measurements for Text react/react-native#37397
Closed


		NS_ASSUME_NONNULL_BEGIN

		@interface RCTTextCodeBlockStyle : NSLayoutManager

Uh oh!

Conversation

azimgd commented Feb 14, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Upstream PR Link

Summary

Changelog

Test Plan

Uh oh!

sketchydroide commented Feb 14, 2023

Uh oh!

azimgd commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023

Uh oh!

azimgd commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023

Uh oh!

azimgd commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

azimgd commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023

Uh oh!

azimgd commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023

Uh oh!

parasharrajat commented Feb 14, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Feb 15, 2023

Uh oh!

parasharrajat commented Feb 16, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Feb 16, 2023

Uh oh!

parasharrajat commented Feb 16, 2023

Uh oh!

parasharrajat commented Feb 16, 2023

Uh oh!

parasharrajat commented Feb 16, 2023

Uh oh!

parasharrajat commented Feb 16, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Feb 16, 2023

Uh oh!

parasharrajat left a comment

Choose a reason for hiding this comment

Uh oh!

parasharrajat commented Feb 16, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat left a comment • 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!

parasharrajat commented Feb 16, 2023

Uh oh!

azimgd commented Feb 17, 2023

Not a bug:

To be fixed:

Uh oh!

Szymon20000Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

Szymon20000Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

Szymon20000Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

Szymon20000Mar 14, 2023

Choose a reason for hiding this comment

azimgd commented Feb 14, 2023•
edited
Loading

parasharrajat commented Feb 14, 2023•
edited
Loading

parasharrajat commented Feb 14, 2023•
edited
Loading

parasharrajat commented Feb 16, 2023•
edited
Loading

parasharrajat commented Feb 16, 2023•
edited
Loading

parasharrajat commented Feb 16, 2023•
edited
Loading

parasharrajat left a comment •
edited
Loading

fabioh8010 commented Mar 14, 2023•
edited
Loading

shawnborton commented Mar 14, 2023•
edited
Loading