diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 57d7e5aea0a..62fa05a821d 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -50379,20 +50379,100 @@ exports[`Storyshots NewMarkdown Block quote 1`] = `
}
>
+
+ Rocket.Chat to the moon
+
+
+
+
+
+
+
+
+
+
- Rocket.Chat to the moon
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+
@@ -50428,28 +50508,36 @@ exports[`Storyshots NewMarkdown Code 1`] = `
>
-
- inline code
+
+
+ inline code
+
@@ -50475,10 +50563,9 @@ exports[`Storyshots NewMarkdown Code 1`] = `
}
>
- Multi line
-
-
- Code
+ Multi
+Line
+Code
@@ -50574,111 +50661,119 @@ exports[`Storyshots NewMarkdown Emoji 1`] = `
>
- 🚀
-
-
- 🤦
-
-
-
+ 🚀
+
+
-
-
-
+ 🤦
+
+
-
-
-
-`;
+ Array [
+ Object {
+ "overflow": "hidden",
+ },
+ Array [
+ Object {
+ "height": 20,
+ "width": 20,
+ },
+ ],
+ ]
+ }
+ >
+
+
+
+
+
+
+
+
+`;
exports[`Storyshots NewMarkdown Hashtag 1`] = `
- #text_channel
-
-
- and
-
-
- #not_a_channel
+
+ #text_channel
+
+
+ and
+
+
+ #not_a_channel
+
@@ -50911,24 +51014,32 @@ exports[`Storyshots NewMarkdown Links 1`] = `
}
>
- https://rocket.chat
+
+ https://rocket.chat
+
- Markdown link
+
+ Markdown link
+
@@ -51008,66 +51127,207 @@ exports[`Storyshots NewMarkdown Lists 1`] = `
-
- Open Source
-
-
-
-
- -
-
-
+ Plain text
+
+
+ 💡
+
+
+
+ italic
+
+
+
- Rocket.Chat
+ "backgroundColor": "transparent",
+ "fontFamily": "System",
+ "fontWeight": "700",
+ "textAlign": "left",
+ }
+ }
+ >
+
+ bold
+
+
+
+
+ strike
+
+
+
+ #general
+
+
+ link
+
+
+ rocket.cat
+
+
+
+ inline code
+
+
-
-
- 1
- .
+ -
- Open Source
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+
+
+
- 2
+ 1
.
- Rocket.Chat
-
-
-
-
-`;
-
-exports[`Storyshots NewMarkdown Mentions 1`] = `
-
-
+ Plain text
+
+
+ 💡
+
+
+
+ italic
+
+
+
+
+ bold
+
+
+
+
+ strike
+
+
+
+ #general
+
+
+ link
+
+
+ rocket.cat
+
+
+
+ inline code
+
+
+
+
+
+
+ 2
+ .
+
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+
+
+
+
+
+
+
+ - [x]
+
+
+
+ Plain text
+
+
+ 💡
+
+
+
+ italic
+
+
+
+
+ bold
+
+
+
+
+ strike
+
+
+
+ #general
+
+
+ link
+
+
+ rocket.cat
+
+
+
+ inline code
+
+
+
+
+
+
+ - [ ]
+
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+
+
+
+
+
+`;
+
+exports[`Storyshots NewMarkdown Mentions 1`] = `
+
+
- rocket.cat
+
+ rocket.cat
+
-
- name
-
-
-
-
-
- rocket.cat
-
-
-
-
-
- here
-
-
-
-
- all
+
+ name
+
+
+
+
+
+ rocket.cat
+
+
+
+
+
+ here
+
+
+
+
+
+ all
+
@@ -51365,206 +52165,36 @@ exports[`Storyshots NewMarkdown Text 1`] = `
"fontSize": 16,
"fontWeight": "400",
"textAlign": "left",
- },
- Object {
- "color": "#2f343d",
- },
- ]
- }
- >
-
- This is Rocket.Chat
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
- a
-
-
- b
-
-
- c
-
-
-
-
-
- d
-
-
-
-
-
-
-
+ },
+ Object {
+ "color": "#2f343d",
+ },
+ ]
+ }
+ >
- e
+
+ This is Rocket.Chat
+
- a b c
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+
+
+ a
+
+
+ b
+
+
+ c
+
+
+
+
+
+ d
+
+
+
+
+
+
+
+
+ e
+
+
+
+
+
- This is bold
+ a b c
+
+
- and
+
+ This is Rocket.Chat
+
+
+
- this is italic
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
diff --git a/app/containers/markdown/new/Inline.tsx b/app/containers/markdown/new/Inline.tsx
index 08c4b1e5f8e..364e380d790 100644
--- a/app/containers/markdown/new/Inline.tsx
+++ b/app/containers/markdown/new/Inline.tsx
@@ -1,8 +1,10 @@
import React, { useContext } from 'react';
+import { Text } from 'react-native';
import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
import Hashtag from '../Hashtag';
import AtMention from '../AtMention';
+import styles from '../styles';
import Link from './Link';
import Plain from './Plain';
import Bold from './Bold';
@@ -20,7 +22,7 @@ interface IParagraphProps {
const Inline = ({ value }: IParagraphProps): JSX.Element => {
const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
return (
- <>
+
{value.map(block => {
switch (block.type) {
case 'IMAGE':
@@ -55,7 +57,7 @@ const Inline = ({ value }: IParagraphProps): JSX.Element => {
return null;
}
})}
-
+
);
};
diff --git a/app/containers/markdown/styles.ts b/app/containers/markdown/styles.ts
index 7a9cdebb521..0e594d3a475 100644
--- a/app/containers/markdown/styles.ts
+++ b/app/containers/markdown/styles.ts
@@ -161,5 +161,8 @@ export default StyleSheet.create({
},
alignRight: {
textAlign: 'right'
+ },
+ inline: {
+ flexShrink: 1
}
});
diff --git a/storybook/stories/NewMarkdown.js b/storybook/stories/NewMarkdown.js
index 17684bb91c0..e6d6be32029 100644
--- a/storybook/stories/NewMarkdown.js
+++ b/storybook/stories/NewMarkdown.js
@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
import NewMarkdown from '../../app/containers/markdown/new';
import { themes } from '../../app/constants/colors';
+import { longText } from '../utils';
const stories = storiesOf('NewMarkdown', module);
@@ -49,8 +50,7 @@ const longTextMsg = [
value: [
{
type: 'PLAIN_TEXT',
- value:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+ value: longText
}
]
}
@@ -108,43 +108,13 @@ const sequentialEmptySpacesMsg = [
}
];
-const boldOrUnderscoreMsg = [
- {
- type: 'PARAGRAPH',
- value: [
- {
- type: 'BOLD',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'This is bold'
- }
- ]
- },
- {
- type: 'PLAIN_TEXT',
- value: ' and '
- },
- {
- type: 'ITALIC',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'this is italic'
- }
- ]
- }
- ]
- }
-];
-
stories.add('Text', () => (
-
+
));
@@ -375,6 +345,20 @@ const blockQuoteTokens = [
]
}
]
+ },
+ {
+ type: 'QUOTE',
+ value: [
+ {
+ type: 'PARAGRAPH',
+ value: [
+ {
+ type: 'PLAIN_TEXT',
+ value: longText
+ }
+ ]
+ }
+ ]
}
];
@@ -546,14 +530,7 @@ const multilineCodeToken = [
type: 'CODE_LINE',
value: {
type: 'PLAIN_TEXT',
- value: 'Multi line '
- }
- },
- {
- type: 'CODE_LINE',
- value: {
- type: 'PLAIN_TEXT',
- value: 'Code'
+ value: 'Multi \nLine \nCode'
}
}
]
@@ -567,53 +544,141 @@ stories.add('Code', () => (
));
+const items = [
+ [
+ {
+ type: 'PLAIN_TEXT',
+ value: 'Plain text '
+ },
+ {
+ type: 'EMOJI',
+ value: {
+ type: 'PLAIN_TEXT',
+ value: 'bulb'
+ }
+ },
+ {
+ type: 'ITALIC',
+ value: [
+ {
+ type: 'PLAIN_TEXT',
+ value: ' italic '
+ }
+ ]
+ },
+ {
+ type: 'BOLD',
+ value: [
+ {
+ type: 'PLAIN_TEXT',
+ value: ' bold '
+ }
+ ]
+ },
+ {
+ type: 'STRIKE',
+ value: [
+ {
+ type: 'PLAIN_TEXT',
+ value: ' strike '
+ }
+ ]
+ },
+ {
+ type: 'MENTION_CHANNEL',
+ value: {
+ type: 'PLAIN_TEXT',
+ value: 'general'
+ }
+ },
+ {
+ type: 'LINK',
+ value: {
+ src: {
+ type: 'PLAIN_TEXT',
+ value: 'https://google.com'
+ },
+ label: {
+ type: 'PLAIN_TEXT',
+ value: ' link '
+ }
+ }
+ },
+ {
+ type: 'MENTION_USER',
+ value: {
+ type: 'PLAIN_TEXT',
+ value: 'rocket.cat'
+ }
+ },
+ {
+ type: 'INLINE_CODE',
+ value: {
+ type: 'PLAIN_TEXT',
+ value: ' inline code'
+ }
+ }
+ ],
+ [
+ {
+ type: 'PLAIN_TEXT',
+ value: longText
+ }
+ ]
+];
+
+const listItems = [
+ {
+ type: 'LIST_ITEM',
+ value: items[0]
+ },
+ {
+ type: 'LIST_ITEM',
+ value: items[1]
+ }
+];
+
const unorederedListToken = [
{
type: 'UNORDERED_LIST',
- value: [
- {
- type: 'LIST_ITEM',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'Open Source'
- }
- ]
- },
- {
- type: 'LIST_ITEM',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'Rocket.Chat'
- }
- ]
- }
- ]
+ value: listItems
}
];
const orderedListToken = [
{
type: 'ORDERED_LIST',
+ value: listItems
+ }
+];
+
+const listMentions = [
+ {
+ _id: 'rocket.cat',
+ username: 'rocket.cat'
+ }
+];
+
+const listChannels = [
+ {
+ _id: 'general',
+ name: 'general'
+ }
+];
+
+const tasks = [
+ {
+ type: 'TASKS',
value: [
{
- type: 'LIST_ITEM',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'Open Source'
- }
- ]
+ type: 'TASK',
+ status: true,
+ value: items[0]
},
{
- type: 'LIST_ITEM',
- value: [
- {
- type: 'PLAIN_TEXT',
- value: 'Rocket.Chat'
- }
- ]
+ type: 'TASK',
+ status: false,
+ value: items[1]
}
]
}
@@ -621,7 +686,8 @@ const orderedListToken = [
stories.add('Lists', () => (
-
-
+
+
+
));