From b2db7c8adf93e6eeea0a89f2bb58c3fc2d802115 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 27 Oct 2021 10:13:20 -0300 Subject: [PATCH] [FIX] Different token types inside list items (#3458) * Fix different token types inside list items * Fixing more styles * Update tests Co-authored-by: Gerzon Z --- .../__snapshots__/Storyshots.test.js.snap | 2106 ++++++++++++----- app/containers/markdown/new/Inline.tsx | 6 +- app/containers/markdown/styles.ts | 3 + storybook/stories/NewMarkdown.js | 220 +- 4 files changed, 1618 insertions(+), 717 deletions(-) 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', () => ( - - + + + ));