feat: expose optional remark plugin to keep all line breaks and keep HTML in message text #2170
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Merged
7 tasks
|
Size Change: +2.9 kB (0%) Total Size: 1.91 MB
ℹ️ View Unchanged
|
Codecov ReportAttention:
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## master #2170 +/- ##
==========================================
+ Coverage 83.64% 83.68% +0.03%
==========================================
Files 308 313 +5
Lines 7129 7163 +34
Branches 2018 2025 +7
==========================================
+ Hits 5963 5994 +31
Misses 832 832
- Partials 334 337 +3
☔ View full report in Codecov by Sentry. |
oliverlaz
approved these changes
Nov 13, 2023
src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
MartinCupela
deleted the
feat/add-remark-plugin-to-keep-all-linebreaks-v10
branch
|
🎉 This PR is included in version 10.19.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 11.0.0-rc.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
arnautov-anton
added a commit
that referenced
this pull request
Nov 27, 2023
…endering by default (#2169) BREAKING CHANGE: apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing, upgrade `unified` libraries ### 🎯 Goal Apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing. ## TODO - [X] merge #2170 - [X] include the plugins among the default remark plugins - [X] migration guide - see below - [X] remove docs section [Optional remark and rehype plugins](https://getstream.io/chat/docs/sdk/react/components/core-components/message_list/#optional-remark-and-rehype-plugins)](https://getstream.io/chat/docs/sdk/react/components/core-components/message_list/#overriding-defaults) - [X] upgrade Jest / install a new test runner (vitest) - new deps are not found with old Jest 26.6.3 - [X] include migration guide text in docs - [X] refactor [`customMarkDownRenderers` code in `renderText`](https://github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx#L158) --------- Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com> Co-authored-by: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
arnautov-anton
added a commit
that referenced
this pull request
Nov 27, 2023
…endering by default (#2169) Apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing. - [X] merge #2170 - [X] include the plugins among the default remark plugins - [X] migration guide - see below - [X] remove docs section [Optional remark and rehype plugins](https://getstream.io/chat/docs/sdk/react/components/core-components/message_list/#optional-remark-and-rehype-plugins)](https://getstream.io/chat/docs/sdk/react/components/core-components/message_list/#overriding-defaults) - [X] upgrade Jest / install a new test runner (vitest) - new deps are not found with old Jest 26.6.3 - [X] include migration guide text in docs - [X] refactor [`customMarkDownRenderers` code in `renderText`](https://github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx#L158) BREAKING CHANGE: apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing, upgrade `unified` libraries --------- Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com> Co-authored-by: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
github-actions bot
pushed a commit
that referenced
this pull request
Nov 27, 2023
## [11.0.0](v10.20.1...v11.0.0) (2023-11-27) ### ⚠ BREAKING CHANGES * **emoji-mart:** `EmojiPicker` & `EmojiIndex` signatures changed, `EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker` & `emojiSearchIndex` are now optional, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information * **emoji-mart:** `useImageFlagEmojisOnWindow` flag now requires extra style sheet import, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information * **emoji-mart:** `reactionOptions` signature has changed, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information * the first argument to `doSendMessageRequest` is now Channel instance instead of `Channel.cid` * apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing, upgrade `unified` libraries ### Bug Fixes * **emoji-mart:** new reactions ([#1947](#1947)) ([14bef23](14bef23)), closes [#1935](#1935) [#1637](#1637) [#1437](#1437) [#2159](#2159) * **emoji-mart:** simplify EmojiPicker & emojiSearchIndex ([#2117](#2117)) ([a6e0a87](a6e0a87)), closes [#2116](#2116) [#2094](#2094) ### Features * apply keepLineBreaksPlugin & htmlToTextPlugin plugins to text rendering by default ([#2169](#2169)) ([e8047f2](e8047f2)), closes [#2170](#2170) [/github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx#L158](https://github.com/GetStream//github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx/issues/L158) * export MessageListNotifications and LinkPreviewList components and component props ([#2181](#2181)) ([a5a7e5a](a5a7e5a)) * require Channel instance as the first argument to doSendMessageRequest ([#2171](#2171)) ([2a06b88](2a06b88)) ### Chores * **deps:** bump stream-chat from 8.14.0 to 8.14.2 ([#2179](#2179)) ([4e6a59d](4e6a59d)) * **deps:** bump stream-chat from 8.14.2 to 8.14.3 ([#2185](#2185)) ([3dd8dab](3dd8dab))
This was referenced Nov 28, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Provide a remark plugin that would allow the integrators to keep the line breaks in the displayed message text. By default, a sequence of multiple line breaks in a markdown string leads to creation of a paragraph element by the
remark-parselibrary used internally byreact-markdown(used internally byrenderText). To keep the line breaks, these have to be injected while transforming the mdast tree with a custom remark plugin.This PR introduces export of such plugin but does apply the plugin by default. Integrators that wish to keep those line breaks will have to opt in to use of the plugin as follows:
Display HTML in message text
The PR introduces a fix that renders the html in the text as a part of the message text. Until now, the HTML tags were scraped and only the text inside was rendered. Now a remark plugin
htmlToTextPluginis available to render the HTML string as text.🎨 UI Changes
keep line breaks
display html as string