stream-chat-react 13.6.5 → 13.7.0

package/dist/components/ChannelPreview/utils.js

@@ -1,6 +1,14 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-export const renderPreviewText = (text) => (React.createElement(ReactMarkdown, { skipHtml: true }, text));
+import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
+import remarkGfm from 'remark-gfm';
+const remarkPlugins = [
+    htmlToTextPlugin,
+    [remarkGfm, { singleTilde: false }],
+    plusPlusToEmphasis,
+    imageToLink,
+];
+export const renderPreviewText = (text) => (React.createElement(ReactMarkdown, { remarkPlugins: remarkPlugins, skipHtml: true }, text));
 const getLatestPollVote = (latestVotesByOption) => {
     let latestVote;
     for (const optionVotes of Object.values(latestVotesByOption)) {

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.6.5";
+        const version = "13.7.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Message/renderText/remarkPlugins/imageToLink.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from 'unist';
+export type ImageToLinkPluginOptions = {
+    getTextLabelFrom?: 'alt' | 'title' | 'url';
+};
+/**
+ * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+ * to HTML <a href={url}>{url | title | alt}</a>
+ *
+ * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+ * @param getTextLabelFrom
+ */
+export declare function imageToLink({ getTextLabelFrom }?: ImageToLinkPluginOptions): (tree: Node) => void;

package/dist/components/Message/renderText/remarkPlugins/imageToLink.js

@@ -0,0 +1,27 @@
+import { SKIP, visit } from 'unist-util-visit';
+const text = (value) => ({ type: 'text', value });
+/**
+ * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+ * to HTML <a href={url}>{url | title | alt}</a>
+ *
+ * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+ * @param getTextLabelFrom
+ */
+export function imageToLink({ getTextLabelFrom = 'url' } = {}) {
+    return (tree) => {
+        const visitor = (node, index, parent) => {
+            if (parent == null || index == null)
+                return;
+            const label = node[getTextLabelFrom] ?? node.url; // node.alt || node.title || node.url;
+            const link = {
+                children: [text(label)],
+                title: node.title ?? node.alt ?? node.url,
+                type: 'link',
+                url: node.url,
+            };
+            parent.children.splice(index, 1, link);
+            return [SKIP, index + 1];
+        };
+        visit(tree, 'image', visitor);
+    };
+}

package/dist/components/Message/renderText/remarkPlugins/index.d.ts

@@ -1,2 +1,4 @@
 export * from './htmlToTextPlugin';
+export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
+export * from './plusPlusToEmphasis';

package/dist/components/Message/renderText/remarkPlugins/index.js

@@ -1,2 +1,4 @@
 export * from './htmlToTextPlugin';
+export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
+export * from './plusPlusToEmphasis';

package/dist/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'unified';
+/**
+ * Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+ */
+export declare const plusPlusToEmphasis: Plugin<[]>;

package/dist/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.js

@@ -0,0 +1,64 @@
+import { SKIP, visit } from 'unist-util-visit';
+/**
+ * \S → first char must be non-whitespace
+ * (?:...)?→ optional middle+closing when length > 1
+ * [\s\S]*?→ anything (including newlines), lazy
+ * final \S→ last char non-whitespace (only required when there’s more than 1)
+ *
+ * Matches:
+ * ++a++
+ * Does not match:
+ * ++++
+ * ++ ++
+ */
+const INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+const IGNORE_NODE_TYPES = new Set([
+    'code',
+    'inlineCode',
+    'link',
+    'linkReference',
+    'definition',
+    'math',
+    'inlineMath',
+]);
+/**
+ * Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+ */
+export const plusPlusToEmphasis = () => {
+    const visitor = (node, index, parent) => {
+        // 1) Don’t traverse inside ignored nodes
+        if (IGNORE_NODE_TYPES.has(node.type))
+            return SKIP;
+        // 2) Only transform text nodes with a valid parent + index
+        if (node.type !== 'text' || parent == null || typeof index !== 'number')
+            return;
+        const value = node.value;
+        // Reset lastIndex to 0 per node so each node is scanned from the beginning
+        INS_REGEX.lastIndex = 0;
+        let match;
+        let last = 0;
+        const out = [];
+        while ((match = INS_REGEX.exec(value))) {
+            const [full, inner] = match;
+            const start = match.index;
+            if (start > last)
+                out.push({ type: 'text', value: value.slice(last, start) });
+            // Render as <ins>…</ins> (remark-rehype respects data.hName)
+            out.push({
+                children: [{ type: 'text', value: inner }],
+                data: { hName: 'ins' },
+                type: 'emphasis',
+            });
+            last = start + full.length;
+        }
+        if (out.length === 0)
+            return; // nothing to change
+        if (last < value.length)
+            out.push({ type: 'text', value: value.slice(last) });
+        parent.children.splice(index, 1, ...out);
+        // Skip re-visiting the replaced range; continue after inserted nodes
+        return [SKIP, index + out.length];
+    };
+    return (tree) => visit(tree, visitor);
+};

package/dist/components/Message/renderText/renderText.js

@@ -5,7 +5,7 @@ import remarkGfm from 'remark-gfm';
 import { Anchor, Emoji, Mention } from './componentRenderers';
 import { detectHttp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
-import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
+import { htmlToTextPlugin, imageToLink, keepLineBreaksPlugin, plusPlusToEmphasis, } from './remarkPlugins';
 import { ErrorBoundary } from '../../UtilityComponents';
 export const defaultAllowedTagNames = [
     'html',
@@ -32,6 +32,13 @@ export const defaultAllowedTagNames = [
     // custom types (tagNames)
     'emoji',
     'mention',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ins',
 ];
 function formatUrlForDisplay(url) {
     try {
@@ -118,6 +125,8 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
         htmlToTextPlugin,
         keepLineBreaksPlugin,
         [remarkGfm, { singleTilde: false }],
+        plusPlusToEmphasis,
+        imageToLink,
     ];
     const rehypePlugins = [emojiMarkdownPlugin];
     if (mentionedUsers?.length) {