Merge branch 'master' into rc

Author: arnautov-anton

.github/workflows/docusaurus.yml

@@ -0,0 +1,13 @@
+name: Check PR title
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: aslafy-z/conventional-pr-title-action@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-check.yml

@@ -2,19 +2,31 @@ name: Release
 on:
   workflow_dispatch:
     inputs:
+      docs_only:
+        description: Skip package release and publish documentation only
+        default: false
+        type: boolean
       dry_run:
-        description: 'Run semantic-release in "dry run" mode'
+        description: Run package release in "dry run" mode (does not publish either)
         default: false
         type: boolean
+      docs_env:
+        description: Pick environment to publish documentation to
+        required: true
+        type: choice
+        default: staging
+        options:
+          - production
+          - staging
 
-env:
-  NODE_OPTIONS: --max_old_space_size=4096
 jobs:
-  release:
-    name: Release
+  package_release:
+    name: Release from "${{ github.ref_name }}" branch
     runs-on: ubuntu-latest
     # GH does not allow to limit branches in the workflow_dispatch settings so this here is a safety measure
-    if: ${{ github.ref_name == 'master' || github.ref_name == 'rc' || github.ref_name == 'release-v9' }}
+    if: ${{ !inputs.docs_only && (github.ref_name == 'master' || github.ref_name == 'rc' || github.ref_name == 'release-v9') }}
+    env:
+      NODE_OPTIONS: --max_old_space_size=4096
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -31,7 +43,33 @@ jobs:
       - name: Release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # https://github.com/stream-ci-bot
+          GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}
         run: >
           yarn semantic-release
           ${{ inputs.dry_run && '--dry-run' || '' }}
+
+  docs_release:
+    name: Publish documentation from "${{ github.ref_name }}" branch to ${{ inputs.docs_env }}
+    runs-on: ubuntu-latest
+    # skip during dry runs, release to production only from master, release to staging from anywhere
+    if: ${{ !inputs.dry_run && ((inputs.docs_env == 'production' && github.ref_name == 'master') || (github.ref_name != 'master' && inputs.docs_env == 'staging')) }}
+    outputs:
+      target-version: $${{ steps.target-version.outputs }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
+      - name: Merge shared "@stream-io/stream-chat-css" docs
+        run: bash scripts/merge-stream-chat-css-docs.sh node_modules/@stream-io/stream-chat-css/docs
+      - name: Push to stream-chat-docusaurus
+        uses: GetStream/push-stream-chat-docusaurus-action@main
+        with:
+          target-branch: ${{ inputs.docs_env }}
+        env:
+          DOCUSAURUS_GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

.github/workflows/release.yml

@@ -9,6 +9,27 @@
 ### BREAKING CHANGES
 
 * **emoji-mart:** `reactionOptions` signature has changed, see [release guide](https://github.com/GetStream/stream-chat-react/blob/7a19e386aa3adcc5741a7f0d92bc816a1a424094/docusaurus/docs/React/release-guides/new-reactions.mdx) for more information
+  
+# [10.15.0](https://github.com/GetStream/stream-chat-react/compare/v10.14.1...v10.15.0) (2023-10-25)
+
+
+### Features
+
+* **renderText:** allow custom remark and rehype plugin composition ([#2142](https://github.com/GetStream/stream-chat-react/issues/2142)) ([4a25912](https://github.com/GetStream/stream-chat-react/commit/4a259125a41d49d50473b6f0edc89a9f56d21ea6))
+* **VirtualizedMessageList:** allow to merge custom virtuoso components with the SDK defaults ([#2140](https://github.com/GetStream/stream-chat-react/issues/2140)) ([6ea9ff0](https://github.com/GetStream/stream-chat-react/commit/6ea9ff0ca01782ec1b4ceffffb74d9fa9a2fdc1c))
+
+## [10.14.1](https://github.com/GetStream/stream-chat-react/compare/v10.14.0...v10.14.1) (2023-10-19)
+
+
+###
+* chore(deps): bump stream-chat from 8.12.4 to 8.13.1
+
+# [10.14.0](https://github.com/GetStream/stream-chat-react/compare/v10.13.1...v10.14.0) (2023-10-11)
+
+
+### Features
+
+* allow complete channel list throttled reload on internet connection recovery ([#2123](https://github.com/GetStream/stream-chat-react/issues/2123)) ([252cac3](https://github.com/GetStream/stream-chat-react/commit/252cac3366986523b9f6b1152c9408ccab0af710))
 
 ## [10.13.1](https://github.com/GetStream/stream-chat-react/compare/v10.13.0...v10.13.1) (2023-10-09)
 

CHANGELOG.md

@@ -1,28 +1,32 @@
-# Release
+# Release process (for package and documentation)
+
 The `stream-chat-react` package follows semantic versioning and the release is to a big part automated by `semantic-release`. The utility automates:
 
-1. Collects release notes from the commits added since the last release
-2. Creates a [GitHub release](https://github.com/GetStream/stream-chat-react/releases)
-3. Appends release notes to `CHANGELOG.md`
-4. Publishes a new package version to NPM.
+1. release notes collection from the commits added since the last release
+2. [GitHub release](https://github.com/GetStream/stream-chat-react/releases) creation
+3. release notes (`CHANGELOG.md`) update
+4. version bump and package release to the NPM
+
+In order to get the above generated outputs, each contributor should follow [Angular's Commit Message Format rules](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format).
+
+## Required steps
 
-In order the above generates correct outputs, each contributor should [Angular's Commit Messag Format rules](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format).
+At the moment these manual actions have to be taken to achieve a successfull release:
 
-At the moment these manual actions have to be taken while doing a release:
+1. make sure that all the new required features and bug fixes in peer dependency repositories `@stream-io/stream-chat-css` and `stream-chat-js` are released
+2. make sure that the peer dependencies `@stream-io/stream-chat-css` and `stream-chat-js` are installed at their latest version (see `package.json`, `yarn.lock`) (if applicable)
+3. squash-merge required pull requests to `master` branch with appropriate message name, for example: `fix(scope): new feature`, if this feature is breaking, make sure to include `BREAKING CHANGE: <reason>` in the message footer
+4. navigate to ["Actions"](https://github.com/GetStream/stream-chat-react/actions) and in the left bar select the "Release" workflow
+5. click "Run workflow" and select the branch you want to release from then adjust the prompt options and click "Run workflow", note that allowed branches for __PACKAGE RELEASE__ are: `master`, `release-v9` and `rc`, there's _is no such limititation_ for the __DOCUMENTATION RELEASE__, extend the workflow condition and `.releaserc.json` as needed
 
-0. Make sure that all the new required features and bug fixes in peer dependency repositories `@stream-io/stream-chat-css` and `stream-chat-js` are released
-1. Make sure that the peer dependencies `@stream-io/stream-chat-css` and `stream-chat-js` are installed at their latest version (see `package.json`, `yarn.lock`)
-2. Create a new PR request from `develop` to `master` branch.
-   - The PR name should correspond to the next package version that is to be released (e.g. v1.1, v8, v9.1.2). You can use GitHub's CLI utility (e.g. `gh pr create —base master`)
-   - The PR description should list all the changes in form of commit messages (therefore we require squashing the commit history when merging into `develop`).
-3. Solve potential conflicts between the two branches
-   - As `master` receives updates only from `develop`, there should be no conflicts.
-4. Merge the PR and make sure that:
-   - the `CHANGELOG.md` file has been correctly updated
-   - a new (correct) version of the package has been published at NPM
-   - a new release with correct version number has be created in GitHub
+## Available release prompt options
+
+- `docs_only` option if checked will skip the `package_release` job and will only run the `docs_release`
+- `dry_run` option if checked will run the `semantic-release` command in ["dry run" mode](https://semantic-release.gitbook.io/semantic-release/usage/configuration#dryrun) and will skip `docs_release`
+- `docs_env` (required) option offers two environment options to which the documentation will be pushed to via `GetStream/push-stream-chat-docusaurus-action` - defaults to `staging`
 
 ## After the release
+
 We maintain multiple demo applications developed with `stream-chat-react`. With each new version of the package, the applications should have their dependencies upgraded explicitly in their `package.json`.
 
 The demo apps repositories are:

developers/RELEASE.md

@@ -341,7 +341,7 @@ Custom function to render message text content.
 
 | Type     | Default                                                                                |
 | -------- | -------------------------------------------------------------------------------------- |
-| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
+| function | <GHComponentLink text='renderText' path='/Message/renderText/renderText.tsx'/> |
 
 ### setEditingState
 

docusaurus/docs/React/components/contexts/message-context.mdx

@@ -66,10 +66,20 @@ The `MessageList` internally creates a mapping of message id to a style group. T
 
 ### Default behaviour
 
-The output of the default [`renderText`](#render-text) function is a message text processed by the `ReactMarkdown` component with [`remark`](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) [`remark-gfm`](https://github.com/remarkjs/remark-gfm) plugin and custom [`rehype`](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) plugins for mentions and emojis.
+The default [`renderText`](#render-text) function parses a markdown string and outputs a `ReactElement`. Under the hood, the output is generated by the `ReactMarkdown` component from [react-markdown library](https://github.com/remarkjs/react-markdown). The component transforms the markdown to `ReactElement` by using [`remark` parser](https://github.com/remarkjs/remark/tree/main) and [`remark`](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) and [`rehype`](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) plugins.
+
+The default `remark` plugins used by SDK are:
+
+1. [`remark-gfm`](https://github.com/remarkjs/remark-gfm) - a third party plugin to add GitHub-like markdown support
+
+The default `rehype` plugins (both specific to this SDK) are:
+1. plugin to render user mentions
+2. plugin to render emojis
 
 ### Overriding defaults
 
+#### Custom `renderText` function
+
 If you don't want your chat implementation to support markdown syntax by default you can override the default behaviour by creating a custom `renderText` function which returns a React node and passing it down to the `MessageList` or `MessageSimple` component via `renderText` property.
 
 For this particular example we'll create a very primitive one which takes the message text passed down to it as a first argument and returns it wrapped in `span` element:
@@ -112,10 +122,12 @@ const App = () => (
 );
 ```
 
-If you feel like the default output is sufficient but you'd like to adjust how certain [ReactMarkdown components](https://github.com/remarkjs/react-markdown#appendix-b-components) look like (like `strong` element generated by typing \*\*strong\*\*) you can do so by passing down options to a third argument of the default `renderText` function:
+#### Custom element rendering
+
+If you feel like the default output is sufficient, but you'd like to adjust how certain [ReactMarkdown components](https://github.com/remarkjs/react-markdown#appendix-b-components) look like (like `strong` element generated by typing \*\*strong\*\*) you can do so by passing down options to a third argument of the default `renderText` function:
 
 :::note
-Types `mention` and `emoji` are special case component types generated by our custom rehype plugins. Currently we do not allow to add custom rehype/remark plugins to our default `renderText` function due to compatibility reasons regarding our custom plugins.
+Types `mention` and `emoji` are special case component types generated by our SDK's custom rehype plugins.
 :::
 
 ```tsx
@@ -146,6 +158,66 @@ const App = () => (
 );
 ```
 
+#### Custom remark and rehype plugins
+
+If you would like to extend the array of plugins used to parse the markdown, you can provide your own lists of remark resp. rehype plugins. The logic that determines what plugins are used and in which order can be specified in custom `getRehypePlugins` and `getRemarkPlugins` functions. These receive the default array of rehype and remark plugins for further customization. Both custom functions ought to be passed to the third `renderText()` parameter. An example follows:
+
+:::note
+It is important to understand what constitutes a rehype or remark plugin. A good start is to learn about the library called [`react-remark`](https://github.com/remarkjs/react-remark) which is used under the hood in our `renderText()` function.
+:::
+
+
+```tsx
+import { renderText, RenderTextPluginConfigurator } from 'stream-chat-react';
+import {customRehypePlugin} from './rehypePlugins';
+import {customRemarkPlugin} from './remarkPlugins';
+
+const getRehypePlugins: RenderTextPluginConfigurator = (plugins) => {
+    return [customRehypePlugin, ...plugins];
+}
+const getRemarkPlugins: RenderTextPluginConfigurator = (plugins) => {
+    return [customRemarkPlugin, ...plugins];
+}
+
+const customRenderText = (text, mentionedUsers) =>
+  renderText(text, mentionedUsers, {
+    getRehypePlugins,
+    getRemarkPlugins
+  });
+
+const CustomMessageList = () => (
+  <MessageList renderText={customRenderText}/>
+);
+```
+
+It is also possible to define your custom set of allowed tag names for the elements rendered from the parsed markdown. To perform the tree transformations, you will need to use libraries like [`unist-builder`](https://github.com/syntax-tree/unist-builder) to build the trees and [`unist-util-visit`](https://github.com/syntax-tree/unist-util-visit-parents) or [`hast-util-find-and-replace`](https://github.com/syntax-tree/hast-util-find-and-replace) to traverse the tree:
+
+```tsx
+import { findAndReplace } from 'hast-util-find-and-replace';
+import { u } from 'unist-builder';
+import { defaultAllowedTagNames, renderText, RenderTextPluginConfigurator } from 'stream-chat-react';
+
+// wraps every letter b in <xxx></xxx> tags
+const customTagName = 'xxx';
+const replace = (match) => u('element', { tagName: customTagName }, [u('text', match)]);
+const customRehypePlugin = () => (tree) => findAndReplace(tree, /b/, replace);
+
+const getRehypePlugins: RenderTextPluginConfigurator = (plugins) => {
+    return [customRehypePlugin, ...plugins];
+}
+
+
+const customRenderText = (text, mentionedUsers) =>
+  renderText(text, mentionedUsers, {
+    allowedTagNames: [...defaultAllowedTagNames, customTagName],
+    getRehypePlugins,
+  });
+
+const CustomMessageList = () => (
+  <MessageList renderText={customRenderText}/>
+);
+```
+
 ## Props
 
 ### additionalMessageInputProps
@@ -434,7 +506,7 @@ Custom function to render message text content.
 
 | Type     | Default                                                                                |
 | -------- | -------------------------------------------------------------------------------------- |
-| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
+| function | <GHComponentLink text='renderText' path='/Message/renderText/renderText.tsx'/> |
 
 ### retrySendMessage
 

docusaurus/docs/React/components/core-components/message-list.mdx

@@ -460,7 +460,7 @@ Custom function to render message text content (overrides the function stored in
 
 | Type     | Default                                                                                |
 | -------- | -------------------------------------------------------------------------------------- |
-| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
+| function | <GHComponentLink text='renderText' path='/Message/renderText/renderText.tsx'/> |
 
 ### setEditingState
 

docusaurus/docs/React/components/message-components/message-ui.mdx

@@ -326,7 +326,7 @@ Custom function to render message text content.
 
 | Type     | Default                                                                                |
 | -------- | -------------------------------------------------------------------------------------- |
-| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
+| function | <GHComponentLink text='renderText' path='/Message/renderText/renderText.tsx'/> |
 
 ### retrySendMessage
 

docusaurus/docs/React/components/message-components/message.mdx

@@ -169,7 +169,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.12.4",
+    "stream-chat": "^8.13.1",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "typescript": "^4.7.4",