stream-chat-react 13.6.6 → 13.7.0

package/dist/components/ChannelPreview/utils.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { htmlToTextPlugin } from '../Message';
+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) => {

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.6";
+        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',
@@ -38,6 +38,7 @@ export const defaultAllowedTagNames = [
     'h4',
     'h5',
     'h6',
+    'ins',
 ];
 function formatUrlForDisplay(url) {
     try {
@@ -124,6 +125,8 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
         htmlToTextPlugin,
         keepLineBreaksPlugin,
         [remarkGfm, { singleTilde: false }],
+        plusPlusToEmphasis,
+        imageToLink,
     ];
     const rehypePlugins = [emojiMarkdownPlugin];
     if (mentionedUsers?.length) {

package/dist/experimental/index.browser.cjs

@@ -3366,7 +3366,7 @@ function resolveAllAttention(events, context) {
   let index2 = -1;
   let open;
   let group;
-  let text7;
+  let text8;
   let openingSequence;
   let closingSequence;
   let use;
@@ -3404,7 +3404,7 @@ function resolveAllAttention(events, context) {
             },
             end
           };
-          text7 = {
+          text8 = {
             type: use > 1 ? "strongText" : "emphasisText",
             start: {
               ...events[open][1].end
@@ -3432,9 +3432,9 @@ function resolveAllAttention(events, context) {
           if (events[open][1].end.offset - events[open][1].start.offset) {
             nextEvents = push(nextEvents, [["enter", events[open][1], context], ["exit", events[open][1], context]]);
           }
-          nextEvents = push(nextEvents, [["enter", group, context], ["enter", openingSequence, context], ["exit", openingSequence, context], ["enter", text7, context]]);
+          nextEvents = push(nextEvents, [["enter", group, context], ["enter", openingSequence, context], ["exit", openingSequence, context], ["enter", text8, context]]);
           nextEvents = push(nextEvents, resolveAll(context.parser.constructs.insideSpan.null, events.slice(open + 1, index2), context));
-          nextEvents = push(nextEvents, [["exit", text7, context], ["enter", closingSequence, context], ["exit", closingSequence, context], ["exit", group, context]]);
+          nextEvents = push(nextEvents, [["exit", text8, context], ["enter", closingSequence, context], ["exit", closingSequence, context], ["exit", group, context]]);
           if (events[index2][1].end.offset - events[index2][1].start.offset) {
             offset = 2;
             nextEvents = push(nextEvents, [["enter", events[index2][1], context], ["exit", events[index2][1], context]]);
@@ -4876,7 +4876,7 @@ function resolveHeadingAtx(events, context) {
   let contentEnd = events.length - 2;
   let contentStart = 3;
   let content3;
-  let text7;
+  let text8;
   if (events[contentStart][1].type === "whitespace") {
     contentStart += 2;
   }
@@ -4892,13 +4892,13 @@ function resolveHeadingAtx(events, context) {
       start: events[contentStart][1].start,
       end: events[contentEnd][1].end
     };
-    text7 = {
+    text8 = {
       type: "chunkText",
       start: events[contentStart][1].start,
       end: events[contentEnd][1].end,
       contentType: "text"
     };
-    splice(events, contentStart, contentEnd - contentStart + 1, [["enter", content3, context], ["enter", text7, context], ["exit", text7, context], ["exit", content3, context]]);
+    splice(events, contentStart, contentEnd - contentStart + 1, [["enter", content3, context], ["enter", text8, context], ["exit", text8, context], ["exit", content3, context]]);
   }
   return events;
 }
@@ -5788,7 +5788,7 @@ function resolveToLabelEnd(events, context) {
       ...events[close][1].end
     }
   };
-  const text7 = {
+  const text8 = {
     type: "labelText",
     start: {
       ...events[open + offset + 2][1].end
@@ -5799,9 +5799,9 @@ function resolveToLabelEnd(events, context) {
   };
   media = [["enter", group, context], ["enter", label, context]];
   media = push(media, events.slice(open + 1, open + offset + 3));
-  media = push(media, [["enter", text7, context]]);
+  media = push(media, [["enter", text8, context]]);
   media = push(media, resolveAll(context.parser.constructs.insideSpan.null, events.slice(open + offset + 4, close - 3), context));
-  media = push(media, [["exit", text7, context], events[close - 2], events[close - 1], ["exit", label, context]]);
+  media = push(media, [["exit", text8, context], events[close - 2], events[close - 1], ["exit", label, context]]);
   media = push(media, events.slice(close + 1));
   media = push(media, [["exit", group, context]]);
   splice(events, open, events.length, media);
@@ -6181,7 +6181,7 @@ var setextUnderline = {
 function resolveToSetextUnderline(events, context) {
   let index2 = events.length;
   let content3;
-  let text7;
+  let text8;
   let definition3;
   while (index2--) {
     if (events[index2][0] === "enter") {
@@ -6190,7 +6190,7 @@ function resolveToSetextUnderline(events, context) {
         break;
       }
       if (events[index2][1].type === "paragraph") {
-        text7 = index2;
+        text8 = index2;
       }
     } else {
       if (events[index2][1].type === "content") {
@@ -6204,15 +6204,15 @@ function resolveToSetextUnderline(events, context) {
   const heading3 = {
     type: "setextHeading",
     start: {
-      ...events[text7][1].start
+      ...events[text8][1].start
     },
     end: {
       ...events[events.length - 1][1].end
     }
   };
-  events[text7][1].type = "setextHeadingText";
+  events[text8][1].type = "setextHeadingText";
   if (definition3) {
-    events.splice(text7, 0, ["enter", heading3, context]);
+    events.splice(text8, 0, ["enter", heading3, context]);
     events.splice(definition3 + 1, 0, ["exit", events[content3][1], context]);
     events[content3][1].end = {
       ...events[definition3][1].end
@@ -6316,10 +6316,10 @@ function initializeFactory(field) {
   function initializeText(effects) {
     const self2 = this;
     const constructs2 = this.parser.constructs[field];
-    const text7 = effects.attempt(constructs2, start2, notText);
+    const text8 = effects.attempt(constructs2, start2, notText);
     return start2;
     function start2(code4) {
-      return atBreak(code4) ? text7(code4) : notText(code4);
+      return atBreak(code4) ? text8(code4) : notText(code4);
     }
     function notText(code4) {
       if (code4 === null) {
@@ -6333,7 +6333,7 @@ function initializeFactory(field) {
     function data(code4) {
       if (atBreak(code4)) {
         effects.exit("data");
-        return text7(code4);
+        return text8(code4);
       }
       effects.consume(code4);
       return data;
@@ -7352,7 +7352,7 @@ function compiler(options) {
     const siblings = node2.children;
     let tail = siblings[siblings.length - 1];
     if (!tail || tail.type !== "text") {
-      tail = text7();
+      tail = text8();
       tail.position = {
         start: point3(token.start),
         // @ts-expect-error: we’ll add `end` later.
@@ -7597,7 +7597,7 @@ function compiler(options) {
       children: []
     };
   }
-  function text7() {
+  function text8() {
     return {
       type: "text",
       value: ""
@@ -7879,13 +7879,13 @@ function image(state, node2) {
 
 // node_modules/mdast-util-to-hast/lib/handlers/inline-code.js
 function inlineCode(state, node2) {
-  const text7 = { type: "text", value: node2.value.replace(/\r?\n|\r/g, " ") };
-  state.patch(node2, text7);
+  const text8 = { type: "text", value: node2.value.replace(/\r?\n|\r/g, " ") };
+  state.patch(node2, text8);
   const result = {
     type: "element",
     tagName: "code",
     properties: {},
-    children: [text7]
+    children: [text8]
   };
   state.patch(node2, result);
   return state.applyData(node2, result);
@@ -10968,6 +10968,65 @@ var transform = (tree) => {
 };
 var htmlToTextPlugin = () => transform;
 
+// src/components/Message/renderText/remarkPlugins/imageToLink.ts
+var text5 = (value) => ({ type: "text", value });
+function imageToLink({ getTextLabelFrom = "url" } = {}) {
+  return (tree) => {
+    const visitor2 = (node2, index2, parent) => {
+      if (parent == null || index2 == null) return;
+      const label = node2[getTextLabelFrom] ?? node2.url;
+      const link3 = {
+        children: [text5(label)],
+        title: node2.title ?? node2.alt ?? node2.url,
+        type: "link",
+        url: node2.url
+      };
+      parent.children.splice(index2, 1, link3);
+      return [SKIP, index2 + 1];
+    };
+    visit(tree, "image", visitor2);
+  };
+}
+
+// src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts
+var INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+var IGNORE_NODE_TYPES = /* @__PURE__ */ new Set([
+  "code",
+  "inlineCode",
+  "link",
+  "linkReference",
+  "definition",
+  "math",
+  "inlineMath"
+]);
+var plusPlusToEmphasis = () => {
+  const visitor2 = (node2, index2, parent) => {
+    if (IGNORE_NODE_TYPES.has(node2.type)) return SKIP;
+    if (node2.type !== "text" || parent == null || typeof index2 !== "number") return;
+    const value = node2.value;
+    INS_REGEX.lastIndex = 0;
+    let match;
+    let last = 0;
+    const out = [];
+    while (match = INS_REGEX.exec(value)) {
+      const [full, inner] = match;
+      const start2 = match.index;
+      if (start2 > last) out.push({ type: "text", value: value.slice(last, start2) });
+      out.push({
+        children: [{ type: "text", value: inner }],
+        data: { hName: "ins" },
+        type: "emphasis"
+      });
+      last = start2 + full.length;
+    }
+    if (out.length === 0) return;
+    if (last < value.length) out.push({ type: "text", value: value.slice(last) });
+    parent.children.splice(index2, 1, ...out);
+    return [SKIP, index2 + out.length];
+  };
+  return (tree) => visit(tree, visitor2);
+};
+
 // node_modules/ccount/index.js
 function ccount(value, character) {
   const source = String(value);
@@ -12156,12 +12215,12 @@ function linkReference2(node2, _, state, info) {
   let subexit = state.enter("label");
   const tracker = state.createTracker(info);
   let value = tracker.move("[");
-  const text7 = state.containerPhrasing(node2, {
+  const text8 = state.containerPhrasing(node2, {
     before: value,
     after: "]",
     ...tracker.current()
   });
-  value += tracker.move(text7 + "][");
+  value += tracker.move(text8 + "][");
   subexit();
   const stack = state.stack;
   state.stack = [];
@@ -12174,7 +12233,7 @@ function linkReference2(node2, _, state, info) {
   subexit();
   state.stack = stack;
   exit3();
-  if (type === "full" || !text7 || text7 !== reference) {
+  if (type === "full" || !text8 || text8 !== reference) {
     value += tracker.move(reference + "]");
   } else if (type === "shortcut") {
     value = value.slice(0, -1);
@@ -12419,7 +12478,7 @@ function strongPeek(_, _1, state) {
 }
 
 // node_modules/mdast-util-to-markdown/lib/handle/text.js
-function text5(node2, _, state, info) {
+function text6(node2, _, state, info) {
   return state.safe(node2.value, info);
 }
 
@@ -12460,7 +12519,7 @@ var handle = {
   paragraph: paragraph2,
   root: root3,
   strong: strong2,
-  text: text5,
+  text: text6,
   thematicBreak: thematicBreak3
 };
 
@@ -12748,27 +12807,27 @@ var emailAutolink = {
   tokenize: tokenizeEmailAutolink,
   previous: previousEmail
 };
-var text6 = {};
+var text7 = {};
 function gfmAutolinkLiteral() {
   return {
-    text: text6
+    text: text7
   };
 }
 var code3 = 48;
 while (code3 < 123) {
-  text6[code3] = emailAutolink;
+  text7[code3] = emailAutolink;
   code3++;
   if (code3 === 58) code3 = 65;
   else if (code3 === 91) code3 = 97;
 }
-text6[43] = emailAutolink;
-text6[45] = emailAutolink;
-text6[46] = emailAutolink;
-text6[95] = emailAutolink;
-text6[72] = [emailAutolink, protocolAutolink];
-text6[104] = [emailAutolink, protocolAutolink];
-text6[87] = [emailAutolink, wwwAutolink];
-text6[119] = [emailAutolink, wwwAutolink];
+text7[43] = emailAutolink;
+text7[45] = emailAutolink;
+text7[46] = emailAutolink;
+text7[95] = emailAutolink;
+text7[72] = [emailAutolink, protocolAutolink];
+text7[104] = [emailAutolink, protocolAutolink];
+text7[87] = [emailAutolink, wwwAutolink];
+text7[119] = [emailAutolink, wwwAutolink];
 function tokenizeEmailAutolink(effects, ok3, nok) {
   const self2 = this;
   let dot;
@@ -13367,17 +13426,17 @@ function gfmStrikethrough(options) {
               start: Object.assign({}, events[open][1].start),
               end: Object.assign({}, events[index2][1].end)
             };
-            const text7 = {
+            const text8 = {
               type: "strikethroughText",
               start: Object.assign({}, events[open][1].end),
               end: Object.assign({}, events[index2][1].start)
             };
-            const nextEvents = [["enter", strikethrough2, context], ["enter", events[open][1], context], ["exit", events[open][1], context], ["enter", text7, context]];
+            const nextEvents = [["enter", strikethrough2, context], ["enter", events[open][1], context], ["exit", events[open][1], context], ["enter", text8, context]];
             const insideSpan2 = context.parser.constructs.insideSpan.null;
             if (insideSpan2) {
               splice(nextEvents, nextEvents.length, 0, resolveAll(insideSpan2, events.slice(open + 1, index2), context));
             }
-            splice(nextEvents, nextEvents.length, 0, [["exit", text7, context], ["enter", events[index2][1], context], ["exit", events[index2][1], context], ["exit", strikethrough2, context]]);
+            splice(nextEvents, nextEvents.length, 0, [["exit", text8, context], ["enter", events[index2][1], context], ["exit", events[index2][1], context], ["exit", strikethrough2, context]]);
             splice(events, open - 1, index2 - open + 3, nextEvents);
             index2 = open + nextEvents.length - 2;
             break;
@@ -14418,9 +14477,11 @@ var InfiniteScrollPaginator = (props) => {
 // src/components/ChannelPreview/utils.tsx
 var remarkPlugins = [
   htmlToTextPlugin,
-  [remarkGfm, { singleTilde: false }]
+  [remarkGfm, { singleTilde: false }],
+  plusPlusToEmphasis,
+  imageToLink
 ];
-var renderPreviewText = (text7) => /* @__PURE__ */ import_react32.default.createElement(Markdown, { remarkPlugins, skipHtml: true }, text7);
+var renderPreviewText = (text8) => /* @__PURE__ */ import_react32.default.createElement(Markdown, { remarkPlugins, skipHtml: true }, text8);
 var getLatestPollVote = (latestVotesByOption) => {
   let latestVote;
   for (const optionVotes of Object.values(latestVotesByOption)) {