diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 57d7e5aea..62fa05a82 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,108 +50661,116 @@ exports[`Storyshots NewMarkdown Emoji 1`] = `
>
- 🚀
-
-
- 🤦
-
-
-
+ 🚀
+
+
-
-
-
+ 🤦
+
+
-
+ >
+
+
+
+
+
+
`;
@@ -50707,57 +50802,65 @@ 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,20 +51127,205 @@ exports[`Storyshots NewMarkdown Lists 1`] = `
-
- Open Source
+
+ Plain text
+
+
+ 💡
+
+
+
+ italic
+
+
+
+
+ bold
+
+
+
+
+ strike
+
+
+
+ #general
+
+
+ link
+
+
+ rocket.cat
+
+
+
+ inline code
+
+
- Rocket.Chat
+
+ 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
+
@@ -51095,20 +51407,205 @@ exports[`Storyshots NewMarkdown Lists 1`] = `
.
- Open Source
+
+ 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
+
+
+
+
+
+
+
- Rocket.Chat
+ - [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
+
@@ -51185,23 +51969,31 @@ exports[`Storyshots NewMarkdown Mentions 1`] = `
}
>
- rocket.cat
+
+ rocket.cat
+
- name
-
-
-
-
-
- rocket.cat
-
-
-
-
-
- here
-
-
-
-
-
- all
+
+ name
+
+
+
+
+
+ rocket.cat
+
+
+
+
+
+ here
+
+
+
+
+
+ all
+
@@ -51356,250 +52156,6 @@ exports[`Storyshots NewMarkdown Text 1`] = `
}
}
>
-
-
- 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
-
-
-
-
-
-
-
-
- e
-
-
-
-
- a b c
-
-
- This is bold
+ This is Rocket.Chat
-
- and
-
+
+
- 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
+
+
+
+
+
+
+ a
+
+
+ b
+
+
+ c
+
+
+
+
+
+ d
+
+
+
+
+
+
+
+
+ e
+
+
+
+
+
+
+ a b c
+
+
+
+
+
+
+ This is Rocket.Chat
+
+
+
+
+
+
+ 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 08c4b1e5f..364e380d7 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 7a9cdebb5..0e594d3a4 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 17684bb91..e6d6be320 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', () => (
-
-
+
+
+
));