diff --git a/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot b/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot index e56a41ce3..70328abba 100644 --- a/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot +++ b/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot @@ -14,10 +14,12 @@ exports[`Storyshots NewMarkdown Inline Katex 1`] = `"{\\"type\\":\\"View\\",\\"p exports[`Storyshots NewMarkdown Katex 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"math\\":\\" f(x) = \\\\\\\\int_{-\\\\\\\\infty}^\\\\\\\\infty \\\\\\\\hat f(\\\\\\\\xi)\\\\\\\\,e^{2 \\\\\\\\pi i \\\\\\\\xi x} \\\\\\\\,d\\\\\\\\xi \\",\\"style\\":{\\"color\\":\\"#2f343d\\"}},\\"children\\":null}]}"`; -exports[`Storyshots NewMarkdown Links 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"https://rocket.chat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"Markdown link\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"Normal Link - \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Bold\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Bold\\"]}]},\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"strike\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"strike\\"]}]},\\" and \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Italic\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Italic\\"]}]},\\" Styles\\"]}]}]}]}"`; +exports[`Storyshots NewMarkdown Links 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"Markdown link\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"Normal Link - \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Bold\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Bold\\"]}]},\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"strike\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"strike\\"]}]},\\" and \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Italic\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Italic\\"]}]},\\" Styles\\"]}]}]}]}"`; exports[`Storyshots NewMarkdown Lists 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"color\\":\\"#2f343d\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"color\\":\\"#2f343d\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"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\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"color\\":\\"#2f343d\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"color\\":\\"#2f343d\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"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\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [x] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [ ] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"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`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"name\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"@not_a_user\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F38C39\\"}]},\\"children\\":[\\"here\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F38C39\\"}]},\\"children\\":[\\"all\\"]}]}]}]}"`; +exports[`Storyshots NewMarkdown Message Quote 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\",\\"fontSize\\":24},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Hello head 1\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"height\\":8}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\",\\"fontSize\\":24},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Head 1 as the first line then line break and after paragraph\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"height\\":8}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"bla bla bla bla bla bla \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"bla bla bla bla bla bla \\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"bla bla bla bla bla bla \\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"bla bla bla bla bla bla \\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\",\\"fontSize\\":24},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Head 1 after a forced line break\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"height\\":8}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Description\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Description\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"There is a link before this bold separated by single space\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"There is a link before this bold separated by single space\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Quoting a message wrote before\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"Quoting a message wrote before\\"]}]}]}]}"`; + exports[`Storyshots NewMarkdown Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is Rocket.Chat\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"This is Rocket.Chat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"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\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"a\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"a\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"b\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"b\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"c\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"c\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"d\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"d\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"e\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"e\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"a b c\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"a b c\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is Rocket.Chat\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"This is Rocket.Chat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":{\\"fontSize\\":16,\\"flexShrink\\":1}},\\"children\\":[\\"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/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx index 85b070037..53926e78d 100644 --- a/app/containers/MessageBox/index.tsx +++ b/app/containers/MessageBox/index.tsx @@ -1062,7 +1062,7 @@ class MessageBox extends Component { }; formatReplyMessage = async (replyingMessage: IMessage, message = '') => { - const { user, roomType, replyWithMention } = this.props; + const { user, roomType, replyWithMention, serverVersion } = this.props; const permalink = await this.getPermalink(replyingMessage); let msg = `[ ](${permalink}) `; @@ -1071,7 +1071,8 @@ class MessageBox extends Component { msg += `@${replyingMessage?.u?.username} `; } - return `${msg} ${message}`; + const connectionString = compareServerVersion(serverVersion, 'lowerThan', '5.0.0') ? ' ' : '\n'; + return `${msg}${connectionString}${message}`; }; updateMentions = (keyword: any, type: string) => { diff --git a/app/containers/markdown/new/Inline.tsx b/app/containers/markdown/new/Inline.tsx index e1a2f8ffd..889f15a1c 100644 --- a/app/containers/markdown/new/Inline.tsx +++ b/app/containers/markdown/new/Inline.tsx @@ -18,13 +18,29 @@ import MarkdownContext from './MarkdownContext'; interface IParagraphProps { value: ParagraphProps['value']; + forceTrim?: boolean; } -const Inline = ({ value }: IParagraphProps): React.ReactElement | null => { +const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | null => { const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext); return ( - {value.map(block => { + {value.map((block, index) => { + // We are forcing trim when is a `[ ](https://https://open.rocket.chat/) plain_text` + // to clean the empty spaces + if (forceTrim) { + if (index === 0 && block.type === 'LINK') { + block.value.label.value = + // Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[] + // https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141 + // @ts-ignore + block.value?.label?.value?.toString().trimLeft() || block?.value?.label?.[0]?.value?.toString().trimLeft(); + } + if (index === 1 && block.type !== 'LINK') { + block.value = block.value?.toString().trimLeft(); + } + } + switch (block.type) { case 'IMAGE': return ; diff --git a/app/containers/markdown/new/NewMarkdown.stories.tsx b/app/containers/markdown/new/NewMarkdown.stories.tsx index f7ac63f72..9bc46e2ac 100644 --- a/app/containers/markdown/new/NewMarkdown.stories.tsx +++ b/app/containers/markdown/new/NewMarkdown.stories.tsx @@ -381,27 +381,6 @@ export const BlockQuote = () => ( ); -const rocketChatLink = [ - { - type: 'PARAGRAPH', - value: [ - { - type: 'LINK', - value: { - src: { - type: 'PLAIN_TEXT', - value: 'https://rocket.chat' - }, - label: { - type: 'PLAIN_TEXT', - value: 'https://rocket.chat' - } - } - } - ] - } -]; - const markdownLink = [ { type: 'PARAGRAPH', @@ -487,7 +466,6 @@ const markdownLinkWithEmphasis = [ export const Links = () => ( - @@ -806,3 +784,128 @@ export const InlineKatex = () => ( ); + +const messageQuote = { + /** + # Hello head 1 + [ ](https://google.com) + */ + headAndLink: [ + { type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Hello head 1' }] }, + { type: 'LINE_BREAK' }, + { + type: 'PARAGRAPH', + value: [ + { + type: 'LINK', + value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } } + } + ] + } + ], + /** + # Head 1 as the first line then line break and after paragraph + bla bla bla bla bla bla + bla bla bla bla bla bla + [ ](https://google.com) + */ + headTextAndLink: [ + { + type: 'HEADING', + level: 1, + value: [{ type: 'PLAIN_TEXT', value: 'Head 1 as the first line then line break and after paragraph' }] + }, + { type: 'LINE_BREAK' }, + { type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] }, + { type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] }, + { + type: 'PARAGRAPH', + value: [ + { + type: 'LINK', + value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } } + } + ] + } + ], + /** + [ ](permalink from message)\n# Head 1 after a forced line break + asdas asd asd asd + */ + headTextAndQuote: [ + { + type: 'PARAGRAPH', + value: [ + { + type: 'LINK', + value: { + src: { type: 'PLAIN_TEXT', value: 'https://open.rocket.chat/direct/subaru123?msg=QB42gWcaO6BgqtLTo' }, + label: { type: 'PLAIN_TEXT', value: ' ' } + } + }, + { type: 'PLAIN_TEXT', value: ' ' } + ] + }, + { type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Head 1 after a forced line break' }] }, + { type: 'LINE_BREAK' }, + { type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'Description' }] } + ], + /** + [ ](https://google.com) *There is a link before this bold separated by single space* + */ + linkAndBoldText: [ + { + type: 'PARAGRAPH', + value: [ + { + type: 'LINK', + value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } } + }, + { type: 'PLAIN_TEXT', value: ' ' }, + { type: 'BOLD', value: [{ type: 'PLAIN_TEXT', value: 'There is a link before this bold separated by single space' }] } + ] + } + ], + simpleQuote: [ + { + type: 'PARAGRAPH', + value: [ + { + type: 'LINK', + value: { + src: { + type: 'PLAIN_TEXT', + value: 'https://open.rocket.chat/group/quoteeee9798789?msg=ZZp6t2dCRX4TqExht' + }, + // format of label for servers greater or equal than 6.0 + label: [ + { + type: 'PLAIN_TEXT', + value: ' ' + } + ] + } + } + ] + }, + { + type: 'PARAGRAPH', + value: [ + { + type: 'PLAIN_TEXT', + value: 'Quoting a message wrote before' + } + ] + } + ] +}; + +export const MessageQuote = () => ( + + + + + + + +); diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx index c58d4be5d..2c8735138 100644 --- a/app/containers/markdown/new/Paragraph.tsx +++ b/app/containers/markdown/new/Paragraph.tsx @@ -12,10 +12,28 @@ interface IParagraphProps { } const Paragraph = ({ value }: IParagraphProps) => { + let forceTrim = false; const { theme } = useTheme(); + if ( + value?.[0]?.type === 'LINK' && + // Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[] + // https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141 + // @ts-ignore + (value?.[0]?.value?.label?.value?.toString().trim() === '' || value?.[0]?.value?.label?.[0]?.value?.toString().trim() === '') + ) { + // We are returning null when we receive a message like this: `[ ](https://open.rocket.chat/)\nplain_text` + // to avoid render a line empty above the the message + if (value.length === 1) { + return null; + } + if (value.length === 2 && value?.[1]?.type === 'PLAIN_TEXT' && value?.[1]?.value?.toString().trim() === '') { + return null; + } + forceTrim = true; + } return ( - + ); };