-
Notifications
You must be signed in to change notification settings - Fork 275
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: apply keepLineBreaksPlugin & htmlToTextPlugin plugins to text r…
…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>
- Loading branch information
3 people
authored
Nov 27, 2023
1 parent
3dd8dab
commit f87de16
Showing
21 changed files
with
1,988 additions
and
1,634 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // The content of babel.config.js copied here. This is due to the bug in jest - https://github.com/jestjs/jest/issues/11741 | ||
| // The bug has been resolved with jest 30 - https://github.com/jestjs/jest/commit/983274ac08c67d2a445e111b2dfaf81020f912b2 | ||
| module.exports = { | ||
| env: { | ||
| production: { | ||
| presets: [ | ||
| [ | ||
| '@babel/env', | ||
| { | ||
| modules: false, | ||
| }, | ||
| ], | ||
| ], | ||
| }, | ||
| test: { | ||
| plugins: ['transform-es2015-modules-commonjs'], | ||
| presets: [ | ||
| [ | ||
| '@babel/preset-env', | ||
| { | ||
| modules: 'commonjs', | ||
| }, | ||
| ], | ||
| ], | ||
| }, | ||
| }, | ||
| ignore: ['src/@types/*'], | ||
| plugins: [ | ||
| '@babel/plugin-proposal-class-properties', | ||
| '@babel/plugin-transform-runtime', | ||
| 'babel-plugin-dynamic-import-node', | ||
| ], | ||
| presets: ['@babel/preset-typescript', '@babel/env', '@babel/preset-react'], | ||
| }; |
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
55 changes: 55 additions & 0 deletions
55
docusaurus/docs/React/release-guides/v11/message-text-rendering-v11.mdx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| id: message-text-rendering-v11 | ||
| sidebar_position: 3 | ||
| title: Message text rendering 11.0.0 | ||
| keywords: [migration guide, upgrade, message, text rendering, breaking changes, v11] | ||
| --- | ||
|
|
||
| Optional remark plugins `htmlToTextPlugin`, `keepLineBreaksPlugin` introduced with [stream-chat-react@v10.19.0](https://github.com/GetStream/stream-chat-react/releases/tag/v10.19.0) are now included among the default remark plugins. That means that in the messages that originally contained a sequence of multiple newline characters `\n`, these will be replaced with line break elements `<br/>`. The number of line breaks equals count of newline characters minus 1. | ||
| The dependencies used to parse the markdown with [`renderText()` function](../../components/core-components/message_list/#rendering-message-text-with-rendertext-function) have been upgraded as a result of that, the following changes had to be performed in stream-chat-react library: | ||
|
|
||
| ### `ReactMarkdownProps` dropped from `customMarkDownRenderers` | ||
|
|
||
| `RenderTextOptions.customMarkDownRenderers`- a mapping of element name and corresponding React component to be rendered. The components are no longer accepting `ReactMarkdownProps` | ||
|
|
||
| ### User mention renderer props change | ||
|
|
||
| The `RenderTextOptions.customMarkDownRenderers.mention` props have been reduced. From now on, only `children` and `node` are passed to the component. And so now `mention` renderer props look as follows: | ||
|
|
||
| ```ts | ||
| import { PropsWithChildren } from 'react'; | ||
| import type { UserResponse } from 'stream-chat'; | ||
| import type { DefaultStreamChatGenerics } from 'stream-chat-react'; | ||
|
|
||
| type MentionProps< | ||
| StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics | ||
| > = PropsWithChildren<{ | ||
| node: { | ||
| mentionedUser: UserResponse<StreamChatGenerics>; | ||
| }; | ||
| }>; | ||
| ``` | ||
|
|
||
| ### Adjust custom rehype or remark plugins | ||
|
|
||
| If you have implemented your own rehype or remark plugin using `visit` function from the library `unist-util-visit` beware that the `index` and `parent` arguments of the `Visitor` function cannot be `null` but `undefined` instead. You should be notified by Typescript about this and should adjust the type checks accordingly. | ||
|
|
||
| If you would like to prevent applying plugins `htmlToTextPlugin`, `keepLineBreaksPlugin`, you can customize your `renderText()` by overriding the remark plugins. The example below will keep the plugin `remarkGfm` and exclude the rest: | ||
|
|
||
| ```tsx | ||
| import remarkGfm from 'remark-gfm'; | ||
| import { renderText, RenderTextPluginConfigurator } from 'stream-chat-react'; | ||
|
|
||
|
|
||
| const getRemarkPlugins: RenderTextPluginConfigurator = () => { | ||
| return [[remarkGfm, { singleTilde: false }]]; | ||
| }; | ||
|
|
||
| const customRenderText = (text, mentionedUsers) => | ||
| renderText(text, mentionedUsers, { | ||
| getRemarkPlugins | ||
| }); | ||
| const CustomMessageList = () => ( | ||
| <MessageList renderText={customRenderText}/> | ||
| ); | ||
| ``` |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* eslint-disable no-undef */ | ||
| const crypto = require('crypto'); | ||
|
|
||
| Object.defineProperty(globalThis, 'crypto', { | ||
| value: { | ||
| getRandomValues: (arr) => crypto.randomBytes(arr.length), | ||
| }, | ||
| }); |
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.