verdnatura-chat/app/containers/markdown/index.tsx

356 lines
9.0 KiB
TypeScript
Raw Permalink Normal View History

import React, { PureComponent } from 'react';
import { Image, StyleProp, Text, TextStyle } from 'react-native';
import { Parser } from 'commonmark';
import Renderer from 'commonmark-react-renderer';
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
import { MarkdownAST } from '@rocket.chat/message-parser';
import MarkdownLink from './Link';
import MarkdownList from './List';
import MarkdownListItem from './ListItem';
import MarkdownAtMention from './AtMention';
import MarkdownHashtag from './Hashtag';
import MarkdownBlockQuote from './BlockQuote';
import MarkdownEmoji from './Emoji';
import MarkdownTable from './Table';
import MarkdownTableRow from './TableRow';
import MarkdownTableCell from './TableCell';
2020-02-28 16:18:03 +00:00
import mergeTextNodes from './mergeTextNodes';
import styles from './styles';
import { isValidURL } from '../../lib/methods/helpers/url';
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
import NewMarkdown from './new';
import { formatText } from './formatText';
import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
import { TGetCustomEmoji } from '../../definitions/IEmoji';
import { formatHyperlink } from './formatHyperlink';
import { TSupportedThemes } from '../../theme';
import { themes } from '../../lib/constants';
export { default as MarkdownPreview } from './Preview';
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
interface IMarkdownProps {
msg?: string | null;
theme: TSupportedThemes;
md?: MarkdownAST;
mentions?: IUserMention[];
getCustomEmoji?: TGetCustomEmoji;
baseUrl?: string;
username?: string;
tmid?: string;
numberOfLines?: number;
customEmojis?: boolean;
useRealName?: boolean;
channels?: IUserChannel[];
enableMessageParser?: boolean;
// TODO: Refactor when migrate Room
navToRoomInfo?: Function;
testID?: string;
style?: StyleProp<TextStyle>[];
onLinkPress?: TOnLinkPress;
}
type TLiteral = {
literal: string;
};
const emojiRanges = [
'\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]', // unicode emoji from https://www.regextester.com/106421
':.{1,40}:', // custom emoji
' |\n' // allow spaces and line breaks
].join('|');
const removeSpaces = (str: string) => str && str.replace(/\s/g, '');
const removeAllEmoji = (str: string) => str.replace(new RegExp(emojiRanges, 'g'), '');
const isOnlyEmoji = (str: string) => {
str = removeSpaces(str);
return !removeAllEmoji(str).length;
};
const removeOneEmoji = (str: string) => str.replace(new RegExp(emojiRanges), '');
const emojiCount = (str: string) => {
str = removeSpaces(str);
let oldLength = 0;
let counter = 0;
while (oldLength !== str.length) {
oldLength = str.length;
str = removeOneEmoji(str);
if (oldLength !== str.length) {
counter += 1;
}
}
return counter;
};
const parser = new Parser();
class Markdown extends PureComponent<IMarkdownProps, any> {
private renderer: any;
private isMessageContainsOnlyEmoji!: boolean;
constructor(props: IMarkdownProps) {
super(props);
if (!this.isNewMarkdown) {
this.renderer = this.createRenderer();
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
}
}
createRenderer = () =>
new Renderer({
renderers: {
text: this.renderText,
emph: Renderer.forwardChildren,
strong: Renderer.forwardChildren,
del: Renderer.forwardChildren,
code: this.renderCodeInline,
link: this.renderLink,
image: this.renderImage,
atMention: this.renderAtMention,
emoji: this.renderEmoji,
hashtag: this.renderHashtag,
paragraph: this.renderParagraph,
heading: this.renderHeading,
codeBlock: this.renderCodeBlock,
blockQuote: this.renderBlockQuote,
list: this.renderList,
item: this.renderListItem,
hardBreak: this.renderBreak,
thematicBreak: this.renderBreak,
softBreak: this.renderBreak,
htmlBlock: this.renderText,
htmlInline: this.renderText,
table: this.renderTable,
table_row: this.renderTableRow,
table_cell: this.renderTableCell
},
renderParagraphsInLists: true
});
get isNewMarkdown(): boolean {
const { md, enableMessageParser } = this.props;
return !!enableMessageParser && !!md;
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
}
renderText = ({ context, literal }: { context: []; literal: string }) => {
const { numberOfLines, style = [] } = this.props;
const defaultStyle = [this.isMessageContainsOnlyEmoji ? styles.textBig : {}, ...context.map(type => styles[type])];
return (
<Text accessibilityLabel={literal} style={[styles.text, defaultStyle, ...style]} numberOfLines={numberOfLines}>
{literal}
</Text>
);
};
renderCodeInline = ({ literal }: TLiteral) => {
const { theme, style = [] } = this.props;
return (
<Text
style={[
{
...styles.codeInline,
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].bannerBackground
},
...style
]}>
{literal}
</Text>
);
};
renderCodeBlock = ({ literal }: TLiteral) => {
const { theme, style = [] } = this.props;
2019-12-04 16:39:53 +00:00
return (
<Text
style={[
{
...styles.codeBlock,
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].bannerBackground
},
...style
]}>
2019-12-04 16:39:53 +00:00
{literal}
</Text>
);
2019-10-02 12:41:51 +00:00
};
renderBreak = () => {
const { tmid } = this.props;
return <Text>{tmid ? ' ' : '\n'}</Text>;
};
renderParagraph = ({ children }: any) => {
const { numberOfLines, style, theme } = this.props;
if (!children || children.length === 0) {
return null;
}
return (
<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
2019-10-02 12:41:51 +00:00
{children}
</Text>
);
};
renderLink = ({ children, href }: any) => {
const { theme, onLinkPress } = this.props;
return (
<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
{children}
</MarkdownLink>
);
};
renderHashtag = ({ hashtag }: { hashtag: string }) => {
const { channels, navToRoomInfo, style } = this.props;
return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />;
};
renderAtMention = ({ mentionName }: { mentionName: string }) => {
const { username = '', mentions, navToRoomInfo, useRealName, style } = this.props;
return (
<MarkdownAtMention
mentions={mentions}
mention={mentionName}
useRealName={useRealName}
username={username}
navToRoomInfo={navToRoomInfo}
style={style}
/>
);
};
renderEmoji = ({ literal }: TLiteral) => {
const { getCustomEmoji, baseUrl = '', customEmojis, style } = this.props;
return (
<MarkdownEmoji
literal={literal}
isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji}
getCustomEmoji={getCustomEmoji}
baseUrl={baseUrl}
customEmojis={customEmojis}
style={style}
/>
);
};
renderImage = ({ src }: { src: string }) => {
if (!isValidURL(src)) {
return null;
}
return <Image style={styles.inlineImage} source={{ uri: encodeURI(src) }} />;
};
renderHeading = ({ children, level }: any) => {
const { numberOfLines, theme } = this.props;
2022-03-21 20:44:06 +00:00
// @ts-ignore
const textStyle = styles[`heading${level}Text`];
return (
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
{children}
</Text>
);
};
renderList = ({ children, start, tight, type }: any) => {
const { numberOfLines } = this.props;
return (
<MarkdownList ordered={type !== 'bullet'} start={start} tight={tight} numberOfLines={numberOfLines}>
{children}
</MarkdownList>
);
};
renderListItem = ({ children, context, ...otherProps }: any) => {
const { theme } = this.props;
const level = context.filter((type: string) => type === 'list').length;
return (
<MarkdownListItem level={level} theme={theme} {...otherProps}>
{children}
</MarkdownListItem>
);
};
renderBlockQuote = ({ children }: { children: JSX.Element }) => {
const { theme } = this.props;
return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
};
renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
const { theme } = this.props;
return (
<MarkdownTable numColumns={numColumns} theme={theme}>
{children}
</MarkdownTable>
);
};
renderTableRow = (args: any) => {
const { theme } = this.props;
return <MarkdownTableRow {...args} theme={theme} />;
};
renderTableCell = (args: any) => {
const { theme } = this.props;
return <MarkdownTableCell {...args} theme={theme} />;
};
render() {
const {
msg,
md,
mentions,
channels,
navToRoomInfo,
useRealName,
username = '',
getCustomEmoji,
baseUrl = '',
onLinkPress
} = this.props;
if (!msg) {
return null;
}
if (this.isNewMarkdown) {
return (
<NewMarkdown
username={username}
baseUrl={baseUrl}
getCustomEmoji={getCustomEmoji}
useRealName={useRealName}
tokens={md}
mentions={mentions}
channels={channels}
navToRoomInfo={navToRoomInfo}
onLinkPress={onLinkPress}
/>
);
}
[NEW] Support new message parser (#3313) * Add message parser to profile view and db * Add md to db * Remove changes to Xcode project * Remove message-parser lib and add enable message parser field to User model * Fix message parser * Remove admin enableMessageParserEarlyAdoption * Add NewMarkdown component * Remove NewMarkdown component and add specific components for new message parser * Add new parser components * Fix BigEmoji * Updated components and added more Code components * update components and add storybooks * Update Code component and add it to storybooks * Update Mention component * Minor tweaks * Add server message parser validation * Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript * Migrate components to TypeScript and fix styling * Change interfaces and add TaskListComponent and styles * Fix new markdown and styles * Fix inlinecode * Stop using server setting * Use enableMessageParserEarlyAdoption on mapStateToProps * Remove React.FC * add link to bold, italic and strike * Update parser components * Fix missing components * Minor tweak * Fix lint and add getCustomEmojis * Fix customEmojis * Update emojis * Minor tweak * disconnect markdown from store * Use @rocket.chat/message-parser@0.30.0 * Fix link style * Unify lists and styles * Remove style prop * Use big emoji as a normal token * Remove unnecessary memo * Fix code styles * Update tests * Conditionally create renderer * Use Context instead of prop drill * Fix Link component * Fix plain text regression and update tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
2021-10-20 16:32:58 +00:00
let m = formatText(msg);
m = formatHyperlink(m);
let ast = parser.parse(m);
ast = mergeTextNodes(ast);
this.isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
return this.renderer.render(ast);
}
}
2019-12-04 16:39:53 +00:00
export default Markdown;