verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

update the style of code blocks

This commit is contained in:
Reinaldo Neto 2024-02-01 21:51:07 -03:00
parent f40eb5a886
commit ac9dce315d
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

9
app/containers/markdown/Markdown.stories.tsx
View File

@ -158,8 +158,13 @@ export const Code = () => (
<Markdown <Markdown
msg='Inline `code` has `back-ticks around` it. msg='Inline `code` has `back-ticks around` it.
``` ```
Code block Code block 1
```' ```
And other code block in sequence
```
Code block 2
```
'
theme={theme} theme={theme}
/> />
</View> </View>

11
app/containers/markdown/index.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Image, StyleProp, Text, TextStyle } from 'react-native'; import { Image, StyleProp, Text, TextStyle, View } from 'react-native';
import { Parser } from 'commonmark'; import { Parser } from 'commonmark';
import Renderer from 'commonmark-react-renderer'; import Renderer from 'commonmark-react-renderer';
import { MarkdownAST } from '@rocket.chat/message-parser'; import { MarkdownAST } from '@rocket.chat/message-parser';
@ -171,19 +171,18 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderCodeBlock = ({ literal }: TLiteral) => { renderCodeBlock = ({ literal }: TLiteral) => {
const { theme, style = [] } = this.props; const { theme, style = [] } = this.props;
return ( return (
<Text <View
style={[ style={[
{ {
...styles.codeBlock, ...styles.codeBlock,
color: themes[theme!].bodyText,
backgroundColor: themes[theme!].bannerBackground, backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].bannerBackground borderColor: themes[theme!].borderColor
}, },
...style ...style
]} ]}
> >
{literal} <Text style={[styles.codeBlockText, { color: themes[theme!].bodyText }]}>{literal}</Text>
</Text> </View>
); );
}; };