diff --git a/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot b/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot index 6bdd5a268..a869a9c29 100644 --- a/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot +++ b/__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot @@ -16,7 +16,7 @@ exports[`Storyshots NewMarkdown Katex 1`] = `"{\\"type\\":\\"View\\",\\"props\\" 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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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},{\\"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\\":[{\\"flexShrink\\":1},{\\"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 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\\":[{\\"flexShrink\\":1},{\\"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\\":[{\\"flexShrink\\":1},{\\"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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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\\"},{\\"fontVariant\\":[\\"tabular-nums\\"]},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"flexShrink\\":1},{\\"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\\":{\\"selectable\\":false,\\"testID\\":\\"task-list-checked\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9297a2\\"},[{\\"lineHeight\\":24},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1},{\\"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\\":{\\"selectable\\":false,\\"testID\\":\\"task-list-unchecked\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9297a2\\"},[{\\"lineHeight\\":24},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1},{\\"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\\"]}]}]}]}"`; diff --git a/app/containers/MessageComposer/MessageComposer.tsx b/app/containers/MessageComposer/MessageComposer.tsx index 56b25d8f4..00337588b 100644 --- a/app/containers/MessageComposer/MessageComposer.tsx +++ b/app/containers/MessageComposer/MessageComposer.tsx @@ -30,6 +30,7 @@ import log from '../../lib/methods/helpers/log'; import { prepareQuoteMessage } from './helpers'; import { RecordAudio } from './components/RecordAudio'; import { useKeyboardListener } from './hooks'; +import { emitter } from '../../lib/methods/helpers/emitter'; const styles = StyleSheet.create({ container: { @@ -193,6 +194,7 @@ export const MessageComposer = ({ const onHeightChanged = (height: number) => { setTrackingViewHeight(height); + emitter.emit(`setComposerHeight${tmid ? 'Thread' : ''}`, height); }; const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight; diff --git a/app/containers/MessageComposer/components/ComposerInput.tsx b/app/containers/MessageComposer/components/ComposerInput.tsx index 4c7fc8508..1d05f9563 100644 --- a/app/containers/MessageComposer/components/ComposerInput.tsx +++ b/app/containers/MessageComposer/components/ComposerInput.tsx @@ -7,16 +7,16 @@ import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native'; import I18n from '../../../i18n'; import { IAutocompleteItemProps, IComposerInput, IComposerInputProps, IInputSelection, TSetInput } from '../interfaces'; import { useAutocompleteParams, useFocused, useMessageComposerApi } from '../context'; -import { loadDraftMessage, saveDraftMessage, fetchIsAllOrHere, getMentionRegexp } from '../helpers'; -import { useSubscription } from '../hooks'; +import { loadDraftMessage, fetchIsAllOrHere, getMentionRegexp } from '../helpers'; +import { useSubscription, useAutoSaveDraft } from '../hooks'; import sharedStyles from '../../../views/Styles'; import { useTheme } from '../../../theme'; import { userTyping } from '../../../actions/room'; -import { getRoomTitle } from '../../../lib/methods/helpers'; +import { getRoomTitle, parseJson } from '../../../lib/methods/helpers'; import { MAX_HEIGHT, MIN_HEIGHT, NO_CANNED_RESPONSES, MARKDOWN_STYLES } from '../constants'; import database from '../../../lib/database'; import Navigation from '../../../lib/navigation/appNavigation'; -import { emitter } from '../emitter'; +import { emitter } from '../../../lib/methods/helpers/emitter'; import { useRoomContext } from '../../../views/RoomView/context'; import { getMessageById } from '../../../lib/database/services/Message'; import { generateTriggerId } from '../../../lib/methods'; @@ -30,11 +30,12 @@ const defaultSelection: IInputSelection = { start: 0, end: 0 }; export const ComposerInput = memo( forwardRef(({ inputRef }, ref) => { const { colors, theme } = useTheme(); - const { rid, tmid, sharing, action, selectedMessages } = useRoomContext(); + const { rid, tmid, sharing, action, selectedMessages, setQuotesAndText } = useRoomContext(); const focused = useFocused(); const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi(); const autocompleteType = useAutocompleteParams()?.type; const textRef = React.useRef(''); + const firstRender = React.useRef(false); const selectionRef = React.useRef(defaultSelection); const dispatch = useDispatch(); const subscription = useSubscription(rid); @@ -47,29 +48,29 @@ export const ComposerInput = memo( const usedCannedResponse = route.params?.usedCannedResponse; const prevAction = usePrevious(action); + useAutoSaveDraft(textRef.current); + // Draft/Canned Responses useEffect(() => { const setDraftMessage = async () => { const draftMessage = await loadDraftMessage({ rid, tmid }); if (draftMessage) { - setInput(draftMessage); + const parsedDraft = parseJson(draftMessage); + if (parsedDraft?.msg || parsedDraft?.quotes) { + setQuotesAndText?.(parsedDraft.msg, parsedDraft.quotes); + } else { + setInput(draftMessage); + } } }; if (sharing) return; - - if (usedCannedResponse) { - setInput(usedCannedResponse); - } else if (action !== 'edit') { + if (usedCannedResponse) setInput(usedCannedResponse); + if (action !== 'edit' && !firstRender.current) { + firstRender.current = true; setDraftMessage(); } - - return () => { - if (action !== 'edit') { - saveDraftMessage({ rid, tmid, draftMessage: textRef.current }); - } - }; - }, [action, rid, tmid, usedCannedResponse]); + }, [action, rid, tmid, usedCannedResponse, firstRender.current]); // Edit/quote useEffect(() => { @@ -91,7 +92,7 @@ export const ComposerInput = memo( fetchMessageAndSetInput(); return; } - if (action === 'quote' && selectedMessages.length === 1) { + if (action === 'quote' && selectedMessages.length) { focus(); } }, [action, selectedMessages]); diff --git a/app/containers/MessageComposer/components/Toolbar/Default.tsx b/app/containers/MessageComposer/components/Toolbar/Default.tsx index b16c369db..961002098 100644 --- a/app/containers/MessageComposer/components/Toolbar/Default.tsx +++ b/app/containers/MessageComposer/components/Toolbar/Default.tsx @@ -3,7 +3,7 @@ import React, { ReactElement } from 'react'; import { ActionsButton, BaseButton } from '..'; import { useMessageComposerApi } from '../../context'; import { Gap } from '../Gap'; -import { emitter } from '../../emitter'; +import { emitter } from '../../../../lib/methods/helpers/emitter'; import { useRoomContext } from '../../../../views/RoomView/context'; export const Default = (): ReactElement | null => { diff --git a/app/containers/MessageComposer/components/Toolbar/Markdown.tsx b/app/containers/MessageComposer/components/Toolbar/Markdown.tsx index 1c1e946a4..bcecfb8bb 100644 --- a/app/containers/MessageComposer/components/Toolbar/Markdown.tsx +++ b/app/containers/MessageComposer/components/Toolbar/Markdown.tsx @@ -4,7 +4,7 @@ import { BaseButton } from '..'; import { useMessageComposerApi } from '../../context'; import { Gap } from '../Gap'; import { TMarkdownStyle } from '../../interfaces'; -import { emitter } from '../../emitter'; +import { emitter } from '../../../../lib/methods/helpers/emitter'; export const Markdown = (): ReactElement => { const { setMarkdownToolbar } = useMessageComposerApi(); diff --git a/app/containers/MessageComposer/emitter.ts b/app/containers/MessageComposer/emitter.ts deleted file mode 100644 index e3e1f5132..000000000 --- a/app/containers/MessageComposer/emitter.ts +++ /dev/null @@ -1,14 +0,0 @@ -import mitt from 'mitt'; - -import { TMarkdownStyle } from './interfaces'; - -type Events = { - toolbarMention: undefined; - addMarkdown: { - style: TMarkdownStyle; - }; -}; - -export const emitter = mitt(); - -emitter.on('*', (type, e) => console.log(type, e)); diff --git a/app/containers/MessageComposer/hooks/index.ts b/app/containers/MessageComposer/hooks/index.ts index f84b052af..d8dedc217 100644 --- a/app/containers/MessageComposer/hooks/index.ts +++ b/app/containers/MessageComposer/hooks/index.ts @@ -1,4 +1,5 @@ export * from './useAutocomplete'; +export * from './useAutoSaveDraft'; export * from './useCanUploadFile'; export * from './useChooseMedia'; export * from './useKeyboardListener'; diff --git a/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts b/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts new file mode 100644 index 000000000..8aaf3b99e --- /dev/null +++ b/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts @@ -0,0 +1,35 @@ +import { useCallback, useEffect, useRef } from 'react'; + +import { saveDraftMessage } from '../helpers'; +import { useRoomContext } from '../../../views/RoomView/context'; +import { useFocused } from '../context'; + +export const useAutoSaveDraft = (text = '') => { + const { rid, tmid, action, selectedMessages } = useRoomContext(); + const focused = useFocused(); + const oldText = useRef(''); + const intervalRef = useRef(); + + const saveMessageDraft = useCallback(() => { + if (action === 'edit') return; + + const draftMessage = selectedMessages?.length ? JSON.stringify({ quotes: selectedMessages, msg: text }) : text; + if (oldText.current !== draftMessage) { + oldText.current = draftMessage; + saveDraftMessage({ rid, tmid, draftMessage }); + } + }, [action, rid, tmid, text, selectedMessages?.length]); + + useEffect(() => { + if (focused) { + intervalRef.current = setInterval(saveMessageDraft, 3000) as any; + } else { + clearInterval(intervalRef.current); + } + + return () => { + clearInterval(intervalRef.current); + saveMessageDraft(); + }; + }, [focused, saveMessageDraft]); +}; diff --git a/app/containers/MessageComposer/hooks/useChooseMedia.ts b/app/containers/MessageComposer/hooks/useChooseMedia.ts index 5e28b8cd9..282cd11b5 100644 --- a/app/containers/MessageComposer/hooks/useChooseMedia.ts +++ b/app/containers/MessageComposer/hooks/useChooseMedia.ts @@ -23,7 +23,7 @@ export const useChooseMedia = ({ permissionToUpload: boolean; }) => { const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = useAppSelector(state => state.settings); - const { action, selectedMessages } = useRoomContext(); + const { action, setQuotesAndText, selectedMessages, getText } = useRoomContext(); const allowList = FileUpload_MediaTypeWhiteList as string; const maxFileSize = FileUpload_MaxFileSize as number; const libPickerLabels = { @@ -115,6 +115,16 @@ export const useChooseMedia = ({ } }; + const startShareView = () => { + const text = getText?.() || ''; + return { + selectedMessages, + text + }; + }; + + const finishShareView = (text = '', quotes = []) => setQuotesAndText?.(text, quotes); + const openShareView = async (attachments: any) => { if (!rid) return; const room = await getSubscriptionByRoomId(rid); @@ -129,7 +139,8 @@ export const useChooseMedia = ({ thread, attachments, action, - selectedMessages + finishShareView, + startShareView }); } }; diff --git a/app/containers/MessageComposer/hooks/useKeyboardListener.ts b/app/containers/MessageComposer/hooks/useKeyboardListener.ts index eb7e3b0ca..f8575d07c 100644 --- a/app/containers/MessageComposer/hooks/useKeyboardListener.ts +++ b/app/containers/MessageComposer/hooks/useKeyboardListener.ts @@ -1,26 +1,37 @@ import { MutableRefObject, useEffect } from 'react'; import { Keyboard } from 'react-native'; +import { useIsFocused } from '@react-navigation/native'; import { useMessageComposerApi } from '../context'; import { ITrackingView } from '../interfaces'; +import { TKeyEmitterEvent, emitter } from '../../../lib/methods/helpers/emitter'; +import { useRoomContext } from '../../../views/RoomView/context'; export const useKeyboardListener = (ref: MutableRefObject) => { const { setKeyboardHeight } = useMessageComposerApi(); + const { tmid } = useRoomContext(); + const isFocused = useIsFocused(); useEffect(() => { + if (!isFocused) { + return; + } + const keyboardEvent: TKeyEmitterEvent = `setKeyboardHeight${tmid ? 'Thread' : ''}`; const showListener = Keyboard.addListener('keyboardWillShow', async () => { if (ref?.current) { const props = await ref.current.getNativeProps(); setKeyboardHeight(props.keyboardHeight); + emitter.emit(keyboardEvent, props.keyboardHeight); } }); const hideListener = Keyboard.addListener('keyboardWillHide', () => { setKeyboardHeight(0); + emitter.emit(keyboardEvent, 0); }); return () => { showListener.remove(); hideListener.remove(); }; - }, [ref, setKeyboardHeight]); + }, [ref, setKeyboardHeight, tmid, isFocused]); }; diff --git a/app/containers/markdown/new/TaskList.tsx b/app/containers/markdown/new/TaskList.tsx index 0349b7e20..3c47cd1d1 100644 --- a/app/containers/markdown/new/TaskList.tsx +++ b/app/containers/markdown/new/TaskList.tsx @@ -5,6 +5,7 @@ import { Tasks as TasksProps } from '@rocket.chat/message-parser'; import Inline from './Inline'; import styles from '../styles'; import { useTheme } from '../../../theme'; +import { CustomIcon } from '../../CustomIcon'; interface ITasksProps { value: TasksProps['value']; @@ -16,7 +17,14 @@ const TaskList = ({ value = [] }: ITasksProps) => { {value.map(item => ( - {item.status ? '- [x] ' : '- [ ] '} + + + diff --git a/app/containers/markdown/new/UnorderedList.tsx b/app/containers/markdown/new/UnorderedList.tsx index 6bfea2e76..67a603291 100644 --- a/app/containers/markdown/new/UnorderedList.tsx +++ b/app/containers/markdown/new/UnorderedList.tsx @@ -17,8 +17,8 @@ const UnorderedList = ({ value }: IUnorderedListProps) => { {value.map(item => ( - - - + {'\u2022'} + diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts index 4cc8d0aa1..1b91535ce 100644 --- a/app/lib/constants/colors.ts +++ b/app/lib/constants/colors.ts @@ -289,6 +289,7 @@ export const colors = { statusBackgroundWarning: '#FFECAD', statusFontOnWarning: '#B88D00', overlayColor: '#1F2329CC', + taskBoxColor: '#9297a2', ...mentions, ...callButtons }, @@ -370,6 +371,7 @@ export const colors = { statusBackgroundWarning: '#FFECAD', statusFontOnWarning: '#B88D00', overlayColor: '#1F2329CC', + taskBoxColor: '#9297a2', ...mentions, ...callButtons }, @@ -451,6 +453,7 @@ export const colors = { statusBackgroundWarning: '#FFECAD', statusFontOnWarning: '#B88D00', overlayColor: '#1F2329CC', + taskBoxColor: '#9297a2', ...mentions, ...callButtons } diff --git a/app/lib/methods/helpers/emitter.ts b/app/lib/methods/helpers/emitter.ts new file mode 100644 index 000000000..ba8f7b21c --- /dev/null +++ b/app/lib/methods/helpers/emitter.ts @@ -0,0 +1,20 @@ +import mitt from 'mitt'; + +import { TMarkdownStyle } from '../../../containers/MessageComposer/interfaces'; + +export type TEmitterEvents = { + toolbarMention: undefined; + addMarkdown: { + style: TMarkdownStyle; + }; + setKeyboardHeight: number; + setKeyboardHeightThread: number; + setComposerHeight: number; + setComposerHeightThread: number; +}; + +export type TKeyEmitterEvent = keyof TEmitterEvents; + +export const emitter = mitt(); + +emitter.on('*', (type, e) => console.log(type, e)); diff --git a/app/lib/methods/helpers/events.ts b/app/lib/methods/helpers/events.ts index ff3ff3e65..234453133 100644 --- a/app/lib/methods/helpers/events.ts +++ b/app/lib/methods/helpers/events.ts @@ -42,6 +42,9 @@ class EventEmitter { } } + /** + * @deprecated use lib/methods/helpers/emitter.ts + */ emit(event: string, ...args: TEventEmitterEmmitArgs[]) { if (typeof this.events[event] === 'object') { this.events[event].forEach((listener: Function) => { diff --git a/app/lib/methods/helpers/index.ts b/app/lib/methods/helpers/index.ts index acf8b8e38..65ae74993 100644 --- a/app/lib/methods/helpers/index.ts +++ b/app/lib/methods/helpers/index.ts @@ -16,3 +16,5 @@ export * from './isValidEmail'; export * from './random'; export * from './image'; export * from './askAndroidMediaPermissions'; +export * from './emitter'; +export * from './parseJson'; diff --git a/app/lib/methods/helpers/parseJson.ts b/app/lib/methods/helpers/parseJson.ts new file mode 100644 index 000000000..0e29c3a12 --- /dev/null +++ b/app/lib/methods/helpers/parseJson.ts @@ -0,0 +1,7 @@ +export const parseJson = (json: string) => { + try { + return JSON.parse(json); + } catch (ex) { + return json; + } +}; diff --git a/app/stacks/types.ts b/app/stacks/types.ts index 893df6d14..8df75b976 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -274,7 +274,8 @@ export type InsideStackParamList = { room: TSubscriptionModel; thread: TThreadModel; action: TMessageAction; - selectedMessages: string[]; + finishShareView: (text?: string, selectedMessages?: string[]) => void | undefined; + startShareView: () => { text: string; selectedMessages: string[] }; }; ModalBlockView: { data: any; // TODO: Change; diff --git a/app/views/RoomView/List/components/NavBottomFAB.tsx b/app/views/RoomView/List/components/NavBottomFAB.tsx index a0d9a65c6..7673b697c 100644 --- a/app/views/RoomView/List/components/NavBottomFAB.tsx +++ b/app/views/RoomView/List/components/NavBottomFAB.tsx @@ -1,14 +1,16 @@ -import React from 'react'; -import { StyleSheet, View, Platform } from 'react-native'; +import React, { memo } from 'react'; +import { StyleSheet, View } from 'react-native'; import { CustomIcon } from '../../../../containers/CustomIcon'; import { useTheme } from '../../../../theme'; import Touch from '../../../../containers/Touch'; +import { useNavBottomStyle } from '../hooks'; +import { EDGE_DISTANCE } from '../constants'; const styles = StyleSheet.create({ container: { position: 'absolute', - right: 15 + right: EDGE_DISTANCE }, button: { borderRadius: 25 @@ -23,46 +25,25 @@ const styles = StyleSheet.create({ } }); -const NavBottomFAB = ({ - visible, - onPress, - isThread -}: { - visible: boolean; - onPress: Function; - isThread: boolean; -}): React.ReactElement | null => { - const { colors } = useTheme(); +const NavBottomFAB = memo( + ({ visible, onPress, isThread }: { visible: boolean; onPress: Function; isThread: boolean }): React.ReactElement | null => { + const { colors } = useTheme(); + const positionStyle = useNavBottomStyle(isThread); - if (!visible) { - return null; + if (!visible) { + return null; + } + + return ( + + onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}> + + + + + + ); } - - return ( - - onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}> - - - - - - ); -}; +); export default NavBottomFAB; diff --git a/app/views/RoomView/List/constants.ts b/app/views/RoomView/List/constants.ts index 30aafb545..863e8953a 100644 --- a/app/views/RoomView/List/constants.ts +++ b/app/views/RoomView/List/constants.ts @@ -5,3 +5,5 @@ export const VIEWABILITY_CONFIG = { }; export const SCROLL_LIMIT = 200; + +export const EDGE_DISTANCE = 15; diff --git a/app/views/RoomView/List/hooks/index.ts b/app/views/RoomView/List/hooks/index.ts index 0e9e991f8..65f094110 100644 --- a/app/views/RoomView/List/hooks/index.ts +++ b/app/views/RoomView/List/hooks/index.ts @@ -1,2 +1,3 @@ +export * from './useNavBottomStyle'; export * from './useMessages'; export * from './useScroll'; diff --git a/app/views/RoomView/List/hooks/useNavBottomStyle/index.ts b/app/views/RoomView/List/hooks/useNavBottomStyle/index.ts new file mode 100644 index 000000000..086222689 --- /dev/null +++ b/app/views/RoomView/List/hooks/useNavBottomStyle/index.ts @@ -0,0 +1 @@ +export * from './useNavBottomStyle'; diff --git a/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.android.ts b/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.android.ts new file mode 100644 index 000000000..2e6251809 --- /dev/null +++ b/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.android.ts @@ -0,0 +1,8 @@ +import { ViewStyle } from 'react-native'; + +import { EDGE_DISTANCE } from '../../constants'; + +export const useNavBottomStyle = (): ViewStyle => ({ + top: EDGE_DISTANCE, + scaleY: -1 +}); diff --git a/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.ts b/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.ts new file mode 100644 index 000000000..91371651a --- /dev/null +++ b/app/views/RoomView/List/hooks/useNavBottomStyle/useNavBottomStyle.ts @@ -0,0 +1,36 @@ +import { useEffect, useState } from 'react'; +import { ViewStyle } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +import { TKeyEmitterEvent, emitter } from '../../../../../lib/methods/helpers'; +import { EDGE_DISTANCE } from '../../constants'; + +export const useNavBottomStyle = (isThread: boolean): ViewStyle => { + const [keyboardHeight, setKeyboardHeight] = useState(0); + const [composerHeight, setComposerHeight] = useState(0); + const { bottom } = useSafeAreaInsets(); + + useEffect(() => { + const keyboardEvent: TKeyEmitterEvent = `setKeyboardHeight${isThread ? 'Thread' : ''}`; + const composerEvent: TKeyEmitterEvent = `setComposerHeight${isThread ? 'Thread' : ''}`; + emitter.on(keyboardEvent, height => { + if (height !== keyboardHeight) { + setKeyboardHeight(height); + } + }); + emitter.on(composerEvent, height => { + if (height !== composerHeight) { + setComposerHeight(height); + } + }); + + return () => { + emitter.off(keyboardEvent); + emitter.off(composerEvent); + }; + }, [isThread, keyboardHeight, composerHeight]); + + return { + bottom: keyboardHeight + composerHeight + (keyboardHeight ? 0 : bottom) + EDGE_DISTANCE + }; +}; diff --git a/app/views/RoomView/List/hooks/useScroll.ts b/app/views/RoomView/List/hooks/useScroll.ts index 5f6551b5a..7e332d1b8 100644 --- a/app/views/RoomView/List/hooks/useScroll.ts +++ b/app/views/RoomView/List/hooks/useScroll.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { ViewToken, ViewabilityConfigCallbackPairs } from 'react-native'; import { IListContainerRef, IListProps, TListRef, TMessagesIdsRef } from '../definitions'; @@ -20,9 +20,9 @@ export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; message [] ); - const jumpToBottom = () => { + const jumpToBottom = useCallback(() => { listRef.current?.scrollToOffset({ offset: -100 }); - }; + }, [listRef]); const onViewableItemsChanged: IListProps['onViewableItemsChanged'] = ({ viewableItems: vi }) => { viewableItems.current = vi; diff --git a/app/views/RoomView/context.ts b/app/views/RoomView/context.ts index f2ca7f646..9352b0c75 100644 --- a/app/views/RoomView/context.ts +++ b/app/views/RoomView/context.ts @@ -9,11 +9,12 @@ export interface IRoomContext { sharing?: boolean; action?: TMessageAction; selectedMessages: string[]; - editCancel?: () => void; editRequest?: (message: any) => void; onRemoveQuoteMessage?: (messageId: string) => void; onSendMessage?: Function; + setQuotesAndText?: (text: string, quotes: string[]) => void; + getText?: () => string | undefined; } export const RoomContext = createContext({} as IRoomContext); diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 28cb2ce05..fdb544a3a 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -1250,6 +1250,17 @@ class RoomView extends React.Component { } }; + setQuotesAndText = (text: string, quotes: string[]) => { + if (quotes.length) { + this.setState({ selectedMessages: quotes, action: 'quote' }); + } else { + this.setState({ action: null, selectedMessages: [] }); + } + this.messageComposerRef.current?.setInput(text || ''); + }; + + getText = () => this.messageComposerRef.current?.getText(); + renderItem = (item: TAnyMessageModel, previousItem: TAnyMessageModel, highlightedMessage?: string) => { const { room, lastOpen, canAutoTranslate } = this.state; const { @@ -1454,7 +1465,9 @@ class RoomView extends React.Component { onRemoveQuoteMessage: this.onRemoveQuoteMessage, editCancel: this.onEditCancel, editRequest: this.onEditRequest, - onSendMessage: this.handleSendMessage + onSendMessage: this.handleSendMessage, + setQuotesAndText: this.setQuotesAndText, + getText: this.getText }} > diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx index e67e935b5..233d72fd8 100644 --- a/app/views/ShareView/index.tsx +++ b/app/views/ShareView/index.tsx @@ -23,7 +23,15 @@ import Thumbs from './Thumbs'; import Preview from './Preview'; import Header from './Header'; import styles from './styles'; -import { IApplicationState, IServer, IShareAttachment, IUser, TSubscriptionModel, TThreadModel } from '../../definitions'; +import { + IApplicationState, + IServer, + IShareAttachment, + IUser, + TMessageAction, + TSubscriptionModel, + TThreadModel +} from '../../definitions'; import { sendFileMessage, sendMessage } from '../../lib/methods'; import { hasPermission, isAndroid, canUploadFile, isReadOnly, isBlocked } from '../../lib/methods/helpers'; import { RoomContext } from '../RoomView/context'; @@ -38,6 +46,8 @@ interface IShareViewState { thread: TThreadModel; maxFileSize?: number; mediaAllowList?: string; + selectedMessages: string[]; + action: TMessageAction; } interface IShareViewProps { @@ -59,7 +69,8 @@ class ShareView extends Component { private files: any[]; private isShareExtension: boolean; private serverInfo: IServer; - private closeReply?: Function; + private finishShareView: (text?: string, selectedMessages?: string[]) => void; + private sentMessage: boolean; constructor(props: IShareViewProps) { super(props); @@ -67,6 +78,8 @@ class ShareView extends Component { this.files = props.route.params?.attachments ?? []; this.isShareExtension = props.route.params?.isShareExtension; this.serverInfo = props.route.params?.serverInfo ?? {}; + this.finishShareView = props.route.params?.finishShareView; + this.sentMessage = false; this.state = { selected: {} as IShareAttachment, @@ -77,7 +90,11 @@ class ShareView extends Component { room: props.route.params?.room ?? {}, thread: props.route.params?.thread ?? {}, maxFileSize: this.isShareExtension ? this.serverInfo?.FileUpload_MaxFileSize : props.FileUpload_MaxFileSize, - mediaAllowList: this.isShareExtension ? this.serverInfo?.FileUpload_MediaTypeWhiteList : props.FileUpload_MediaTypeWhiteList + mediaAllowList: this.isShareExtension + ? this.serverInfo?.FileUpload_MediaTypeWhiteList + : props.FileUpload_MediaTypeWhiteList, + selectedMessages: [], + action: props.route.params?.action }; this.getServerInfo(); } @@ -86,16 +103,15 @@ class ShareView extends Component { const readOnly = await this.getReadOnly(); const { attachments, selected } = await this.getAttachments(); this.setState({ readOnly, attachments, selected }, () => this.setHeader()); + this.startShareView(); }; componentWillUnmount = () => { console.countReset(`${this.constructor.name}.render calls`); - // close reply from the RoomView - setTimeout(() => { - if (this.closeReply) { - this.closeReply(); - } - }, 300); + if (this.finishShareView && !this.sentMessage) { + const text = this.messageComposerRef.current?.getText(); + this.finishShareView(text, this.state.selectedMessages); + } }; setHeader = () => { @@ -196,21 +212,23 @@ class ShareView extends Component { }; }; - send = async () => { - const { loading, selected } = this.state; - if (loading) { - return; + startShareView = () => { + const startShareView = this.props.route.params?.startShareView; + if (startShareView) { + const { selectedMessages, text } = startShareView(); + this.messageComposerRef.current?.setInput(text); + this.setState({ selectedMessages }); } + }; + send = async () => { + if (this.state.loading) return; + + const { attachments, room, text, thread, action, selected, selectedMessages } = this.state; + const { navigation, server, user } = this.props; // update state await this.selectFile(selected); - const { attachments, room, text, thread } = this.state; - const { navigation, server, user, route } = this.props; - - const action = route.params?.action; - const selectedMessages = route.params?.selectedMessages ?? []; - // if it's share extension this should show loading if (this.isShareExtension) { this.setState({ loading: true }); @@ -218,6 +236,8 @@ class ShareView extends Component { // if it's not share extension this can close } else { + this.sentMessage = true; + this.finishShareView('', []); navigation.pop(); } @@ -257,7 +277,10 @@ class ShareView extends Component { await sendMessage(room.rid, text, thread?.id, { id: user.id, token: user.token } as IUser); } } catch { - // Do nothing + if (!this.isShareExtension) { + const text = this.messageComposerRef.current?.getText(); + this.finishShareView(text, this.state.selectedMessages); + } } // if it's share extension this should close @@ -303,8 +326,14 @@ class ShareView extends Component { this.setState({ text }); }; + onRemoveQuoteMessage = (messageId: string) => { + const { selectedMessages } = this.state; + const newSelectedMessages = selectedMessages.filter(item => item !== messageId); + this.setState({ selectedMessages: newSelectedMessages, action: newSelectedMessages.length ? 'quote' : null }); + }; + renderContent = () => { - const { attachments, selected, text, room, thread } = this.state; + const { attachments, selected, text, room, thread, selectedMessages } = this.state; const { theme, route } = this.props; if (attachments.length) { @@ -316,8 +345,9 @@ class ShareView extends Component { tmid: thread.id, sharing: true, action: route.params?.action, - selectedMessages: route.params?.selectedMessages, - onSendMessage: this.send + selectedMessages, + onSendMessage: this.send, + onRemoveQuoteMessage: this.onRemoveQuoteMessage }} >