stream-chat-react 9.3.0 → 9.5.0

package/dist/index.cjs.js

@@ -32,7 +32,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
 var linkify = require('linkifyjs');
-var findAndReplace = require('mdast-util-find-and-replace');
 var RootReactMarkdown = require('react-markdown');
 var ReactMarkdown = require('react-markdown/with-html');
 var uniqBy = require('lodash.uniqby');
@@ -55,6 +54,8 @@ var deepequal = require('react-fast-compare');
 var DefaultEmojiIndex = require('emoji-mart/dist/utils/emoji-index/nimble-emoji-index.js');
 var resizeObserver = require('@juggle/resize-observer');
 var reactVirtuoso = require('react-virtuoso');
+var nimbleEmoji = require('emoji-mart/dist/components/emoji/nimble-emoji');
+var nimblePicker = require('emoji-mart/dist/components/picker/nimble-picker');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -93,7 +94,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
-var findAndReplace__default = /*#__PURE__*/_interopDefaultLegacy(findAndReplace);
 var RootReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(RootReactMarkdown);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
@@ -112,6 +112,8 @@ var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var deepequal__default = /*#__PURE__*/_interopDefaultLegacy(deepequal);
 var DefaultEmojiIndex__default = /*#__PURE__*/_interopDefaultLegacy(DefaultEmojiIndex);
+var nimbleEmoji__default = /*#__PURE__*/_interopDefaultLegacy(nimbleEmoji);
+var nimblePicker__default = /*#__PURE__*/_interopDefaultLegacy(nimblePicker);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1333,6 +1335,718 @@ var withComponentContext = function (Component) {
     return WithComponentContextComponent;
 };
 
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ *
+ * @typedef {string} Type
+ * @typedef {Object<string, unknown>} Props
+ *
+ * @typedef {null|undefined|Type|Props|TestFunctionAnything|Array.<Type|Props|TestFunctionAnything>} Test
+ */
+
+const convert$1 =
+  /**
+   * @type {(
+   *   (<T extends Node>(test: T['type']|Partial<T>|TestFunctionPredicate<T>) => AssertPredicate<T>) &
+   *   ((test?: Test) => AssertAnything)
+   * )}
+   */
+  (
+    /**
+     * Generate an assertion from a check.
+     * @param {Test} [test]
+     * When nullish, checks if `node` is a `Node`.
+     * When `string`, works like passing `function (node) {return node.type === test}`.
+     * When `function` checks if function passed the node is true.
+     * When `object`, checks that all keys in test are in node, and that they have (strictly) equal values.
+     * When `array`, checks any one of the subtests pass.
+     * @returns {AssertAnything}
+     */
+    function (test) {
+      if (test === undefined || test === null) {
+        return ok$1
+      }
+
+      if (typeof test === 'string') {
+        return typeFactory$1(test)
+      }
+
+      if (typeof test === 'object') {
+        return Array.isArray(test) ? anyFactory$1(test) : propsFactory$1(test)
+      }
+
+      if (typeof test === 'function') {
+        return castFactory$1(test)
+      }
+
+      throw new Error('Expected function, string, or object as test')
+    }
+  );
+/**
+ * @param {Array.<Type|Props|TestFunctionAnything>} tests
+ * @returns {AssertAnything}
+ */
+function anyFactory$1(tests) {
+  /** @type {Array.<AssertAnything>} */
+  const checks = [];
+  let index = -1;
+
+  while (++index < tests.length) {
+    checks[index] = convert$1(tests[index]);
+  }
+
+  return castFactory$1(any)
+
+  /**
+   * @this {unknown}
+   * @param {unknown[]} parameters
+   * @returns {boolean}
+   */
+  function any(...parameters) {
+    let index = -1;
+
+    while (++index < checks.length) {
+      if (checks[index].call(this, ...parameters)) return true
+    }
+
+    return false
+  }
+}
+
+/**
+ * Utility to assert each property in `test` is represented in `node`, and each
+ * values are strictly equal.
+ *
+ * @param {Props} check
+ * @returns {AssertAnything}
+ */
+function propsFactory$1(check) {
+  return castFactory$1(all)
+
+  /**
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function all(node) {
+    /** @type {string} */
+    let key;
+
+    for (key in check) {
+      // @ts-expect-error: hush, it sure works as an index.
+      if (node[key] !== check[key]) return false
+    }
+
+    return true
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ *
+ * @param {Type} check
+ * @returns {AssertAnything}
+ */
+function typeFactory$1(check) {
+  return castFactory$1(type)
+
+  /**
+   * @param {Node} node
+   */
+  function type(node) {
+    return node && node.type === check
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ * @param {TestFunctionAnything} check
+ * @returns {AssertAnything}
+ */
+function castFactory$1(check) {
+  return assertion
+
+  /**
+   * @this {unknown}
+   * @param {Array.<unknown>} parameters
+   * @returns {boolean}
+   */
+  function assertion(...parameters) {
+    // @ts-expect-error: spreading is fine.
+    return Boolean(check.call(this, ...parameters))
+  }
+}
+
+// Utility to return true.
+function ok$1() {
+  return true
+}
+
+/**
+ * @param {string} d
+ * @returns {string}
+ */
+function color(d) {
+  return '\u001B[33m' + d + '\u001B[39m'
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ * @typedef {import('unist-util-is').Test} Test
+ * @typedef {import('./complex-types').Action} Action
+ * @typedef {import('./complex-types').Index} Index
+ * @typedef {import('./complex-types').ActionTuple} ActionTuple
+ * @typedef {import('./complex-types').VisitorResult} VisitorResult
+ * @typedef {import('./complex-types').Visitor} Visitor
+ */
+
+/**
+ * Continue traversing as normal
+ */
+const CONTINUE = true;
+/**
+ * Do not traverse this node’s children
+ */
+const SKIP = 'skip';
+/**
+ * Stop traversing immediately
+ */
+const EXIT = false;
+
+/**
+ * Visit children of tree which pass a test
+ *
+ * @param tree Abstract syntax tree to walk
+ * @param test Test node, optional
+ * @param visitor Function to run for each node
+ * @param reverse Visit the tree in reverse order, defaults to false
+ */
+const visitParents =
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types').BuildVisitor<Tree>, reverse?: boolean) => void)
+   * )}
+   */
+  (
+    /**
+     * @param {Node} tree
+     * @param {Test} test
+     * @param {import('./complex-types').Visitor<Node>} visitor
+     * @param {boolean} [reverse]
+     */
+    function (tree, test, visitor, reverse) {
+      if (typeof test === 'function' && typeof visitor !== 'function') {
+        reverse = visitor;
+        // @ts-expect-error no visitor given, so `visitor` is test.
+        visitor = test;
+        test = null;
+      }
+
+      const is = convert$1(test);
+      const step = reverse ? -1 : 1;
+
+      factory(tree, null, [])();
+
+      /**
+       * @param {Node} node
+       * @param {number?} index
+       * @param {Array.<Parent>} parents
+       */
+      function factory(node, index, parents) {
+        /** @type {Object.<string, unknown>} */
+        // @ts-expect-error: hush
+        const value = typeof node === 'object' && node !== null ? node : {};
+        /** @type {string|undefined} */
+        let name;
+
+        if (typeof value.type === 'string') {
+          name =
+            typeof value.tagName === 'string'
+              ? value.tagName
+              : typeof value.name === 'string'
+              ? value.name
+              : undefined;
+
+          Object.defineProperty(visit, 'name', {
+            value:
+              'node (' +
+              color(value.type + (name ? '<' + name + '>' : '')) +
+              ')'
+          });
+        }
+
+        return visit
+
+        function visit() {
+          /** @type {ActionTuple} */
+          let result = [];
+          /** @type {ActionTuple} */
+          let subresult;
+          /** @type {number} */
+          let offset;
+          /** @type {Array.<Parent>} */
+          let grandparents;
+
+          if (!test || is(node, index, parents[parents.length - 1] || null)) {
+            result = toResult(visitor(node, parents));
+
+            if (result[0] === EXIT) {
+              return result
+            }
+          }
+
+          // @ts-expect-error looks like a parent.
+          if (node.children && result[0] !== SKIP) {
+            // @ts-expect-error looks like a parent.
+            offset = (reverse ? node.children.length : -1) + step;
+            // @ts-expect-error looks like a parent.
+            grandparents = parents.concat(node);
+
+            // @ts-expect-error looks like a parent.
+            while (offset > -1 && offset < node.children.length) {
+              // @ts-expect-error looks like a parent.
+              subresult = factory(node.children[offset], offset, grandparents)();
+
+              if (subresult[0] === EXIT) {
+                return subresult
+              }
+
+              offset =
+                typeof subresult[1] === 'number' ? subresult[1] : offset + step;
+            }
+          }
+
+          return result
+        }
+      }
+    }
+  );
+
+/**
+ * @param {VisitorResult} value
+ * @returns {ActionTuple}
+ */
+function toResult(value) {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  if (typeof value === 'number') {
+    return [CONTINUE, value]
+  }
+
+  return [value]
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ *
+ * @typedef {string} Type
+ * @typedef {Object<string, unknown>} Props
+ *
+ * @typedef {null|undefined|Type|Props|TestFunctionAnything|Array.<Type|Props|TestFunctionAnything>} Test
+ */
+
+const convert =
+  /**
+   * @type {(
+   *   (<T extends Node>(test: T['type']|Partial<T>|TestFunctionPredicate<T>) => AssertPredicate<T>) &
+   *   ((test?: Test) => AssertAnything)
+   * )}
+   */
+  (
+    /**
+     * Generate an assertion from a check.
+     * @param {Test} [test]
+     * When nullish, checks if `node` is a `Node`.
+     * When `string`, works like passing `function (node) {return node.type === test}`.
+     * When `function` checks if function passed the node is true.
+     * When `object`, checks that all keys in test are in node, and that they have (strictly) equal values.
+     * When `array`, checks any one of the subtests pass.
+     * @returns {AssertAnything}
+     */
+    function (test) {
+      if (test === undefined || test === null) {
+        return ok
+      }
+
+      if (typeof test === 'string') {
+        return typeFactory(test)
+      }
+
+      if (typeof test === 'object') {
+        return Array.isArray(test) ? anyFactory(test) : propsFactory(test)
+      }
+
+      if (typeof test === 'function') {
+        return castFactory(test)
+      }
+
+      throw new Error('Expected function, string, or object as test')
+    }
+  );
+/**
+ * @param {Array.<Type|Props|TestFunctionAnything>} tests
+ * @returns {AssertAnything}
+ */
+function anyFactory(tests) {
+  /** @type {Array.<AssertAnything>} */
+  const checks = [];
+  let index = -1;
+
+  while (++index < tests.length) {
+    checks[index] = convert(tests[index]);
+  }
+
+  return castFactory(any)
+
+  /**
+   * @this {unknown}
+   * @param {unknown[]} parameters
+   * @returns {boolean}
+   */
+  function any(...parameters) {
+    let index = -1;
+
+    while (++index < checks.length) {
+      if (checks[index].call(this, ...parameters)) return true
+    }
+
+    return false
+  }
+}
+
+/**
+ * Utility to assert each property in `test` is represented in `node`, and each
+ * values are strictly equal.
+ *
+ * @param {Props} check
+ * @returns {AssertAnything}
+ */
+function propsFactory(check) {
+  return castFactory(all)
+
+  /**
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function all(node) {
+    /** @type {string} */
+    let key;
+
+    for (key in check) {
+      // @ts-expect-error: hush, it sure works as an index.
+      if (node[key] !== check[key]) return false
+    }
+
+    return true
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ *
+ * @param {Type} check
+ * @returns {AssertAnything}
+ */
+function typeFactory(check) {
+  return castFactory(type)
+
+  /**
+   * @param {Node} node
+   */
+  function type(node) {
+    return node && node.type === check
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ * @param {TestFunctionAnything} check
+ * @returns {AssertAnything}
+ */
+function castFactory(check) {
+  return assertion
+
+  /**
+   * @this {unknown}
+   * @param {Array.<unknown>} parameters
+   * @returns {boolean}
+   */
+  function assertion(...parameters) {
+    // @ts-expect-error: spreading is fine.
+    return Boolean(check.call(this, ...parameters))
+  }
+}
+
+// Utility to return true.
+function ok() {
+  return true
+}
+
+/**
+ * @typedef Options
+ *   Configuration (optional).
+ * @property {Test} [ignore]
+ *   `unist-util-is` test used to assert parents
+ *
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('mdast').Content} Content
+ * @typedef {import('mdast').PhrasingContent} PhrasingContent
+ * @typedef {import('mdast').Text} Text
+ * @typedef {Content|Root} Node
+ * @typedef {Exclude<Extract<Node, import('mdast').Parent>, Root>} Parent
+ *
+ * @typedef {import('unist-util-visit-parents').Test} Test
+ * @typedef {import('unist-util-visit-parents').VisitorResult} VisitorResult
+ *
+ * @typedef RegExpMatchObject
+ * @property {number} index
+ * @property {string} input
+ * @property {[Root, ...Array<Parent>, Text]} stack
+ *
+ * @typedef {string|RegExp} Find
+ * @typedef {string|ReplaceFunction} Replace
+ *
+ * @typedef {[Find, Replace]} FindAndReplaceTuple
+ * @typedef {Record<string, Replace>} FindAndReplaceSchema
+ * @typedef {Array<FindAndReplaceTuple>} FindAndReplaceList
+ *
+ * @typedef {[RegExp, ReplaceFunction]} Pair
+ * @typedef {Array<Pair>} Pairs
+ */
+
+const own = {}.hasOwnProperty;
+
+/**
+ * @param tree mdast tree
+ * @param find Value to find and remove. When `string`, escaped and made into a global `RegExp`
+ * @param [replace] Value to insert.
+ *   * When `string`, turned into a Text node.
+ *   * When `Function`, called with the results of calling `RegExp.exec` as
+ *     arguments, in which case it can return a single or a list of `Node`,
+ *     a `string` (which is wrapped in a `Text` node), or `false` to not replace
+ * @param [options] Configuration.
+ */
+const findAndReplace =
+  /**
+   * @type {(
+   *   ((tree: Node, find: Find, replace?: Replace, options?: Options) => Node) &
+   *   ((tree: Node, schema: FindAndReplaceSchema|FindAndReplaceList, options?: Options) => Node)
+   * )}
+   **/
+  (
+    /**
+     * @param {Node} tree
+     * @param {Find|FindAndReplaceSchema|FindAndReplaceList} find
+     * @param {Replace|Options} [replace]
+     * @param {Options} [options]
+     */
+    function (tree, find, replace, options) {
+      /** @type {Options|undefined} */
+      let settings;
+      /** @type {FindAndReplaceSchema|FindAndReplaceList} */
+      let schema;
+
+      if (typeof find === 'string' || find instanceof RegExp) {
+        // @ts-expect-error don’t expect options twice.
+        schema = [[find, replace]];
+        settings = options;
+      } else {
+        schema = find;
+        // @ts-expect-error don’t expect replace twice.
+        settings = replace;
+      }
+
+      if (!settings) {
+        settings = {};
+      }
+
+      const ignored = convert(settings.ignore || []);
+      const pairs = toPairs(schema);
+      let pairIndex = -1;
+
+      while (++pairIndex < pairs.length) {
+        visitParents(tree, 'text', visitor);
+      }
+
+      return tree
+
+      /** @type {import('unist-util-visit-parents/complex-types').BuildVisitor<Root, 'text'>} */
+      function visitor(node, parents) {
+        let index = -1;
+        /** @type {Parent|undefined} */
+        let grandparent;
+
+        while (++index < parents.length) {
+          const parent = /** @type {Parent} */ (parents[index]);
+
+          if (
+            ignored(
+              parent,
+              // @ts-expect-error mdast vs. unist parent.
+              grandparent ? grandparent.children.indexOf(parent) : undefined,
+              grandparent
+            )
+          ) {
+            return
+          }
+
+          grandparent = parent;
+        }
+
+        if (grandparent) {
+          // @ts-expect-error: stack is fine.
+          return handler(node, parents)
+        }
+      }
+
+      /**
+       * @param {Text} node
+       * @param {[Root, ...Array<Parent>]} parents
+       * @returns {VisitorResult}
+       */
+      function handler(node, parents) {
+        const parent = parents[parents.length - 1];
+        const find = pairs[pairIndex][0];
+        const replace = pairs[pairIndex][1];
+        let start = 0;
+        // @ts-expect-error: TS is wrong, some of these children can be text.
+        const index = parent.children.indexOf(node);
+        let change = false;
+        /** @type {Array<PhrasingContent>} */
+        let nodes = [];
+        /** @type {number|undefined} */
+        let position;
+
+        find.lastIndex = 0;
+
+        let match = find.exec(node.value);
+
+        while (match) {
+          position = match.index;
+          /** @type {RegExpMatchObject} */
+          const matchObject = {
+            index: match.index,
+            input: match.input,
+            stack: [...parents, node]
+          };
+          let value = replace(...match, matchObject);
+
+          if (typeof value === 'string') {
+            value = value.length > 0 ? {type: 'text', value} : undefined;
+          }
+
+          if (value !== false) {
+            if (start !== position) {
+              nodes.push({
+                type: 'text',
+                value: node.value.slice(start, position)
+              });
+            }
+
+            if (Array.isArray(value)) {
+              nodes.push(...value);
+            } else if (value) {
+              nodes.push(value);
+            }
+
+            start = position + match[0].length;
+            change = true;
+          }
+
+          if (!find.global) {
+            break
+          }
+
+          match = find.exec(node.value);
+        }
+
+        if (change) {
+          if (start < node.value.length) {
+            nodes.push({type: 'text', value: node.value.slice(start)});
+          }
+
+          parent.children.splice(index, 1, ...nodes);
+        } else {
+          nodes = [node];
+        }
+
+        return index + nodes.length
+      }
+    }
+  );
+
+/**
+ * @param {FindAndReplaceSchema|FindAndReplaceList} schema
+ * @returns {Pairs}
+ */
+function toPairs(schema) {
+  /** @type {Pairs} */
+  const result = [];
+
+  if (typeof schema !== 'object') {
+    throw new TypeError('Expected array or object as schema')
+  }
+
+  if (Array.isArray(schema)) {
+    let index = -1;
+
+    while (++index < schema.length) {
+      result.push([
+        toExpression(schema[index][0]),
+        toFunction(schema[index][1])
+      ]);
+    }
+  } else {
+    /** @type {string} */
+    let key;
+
+    for (key in schema) {
+      if (own.call(schema, key)) {
+        result.push([toExpression(key), toFunction(schema[key])]);
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * @param {Find} find
+ * @returns {RegExp}
+ */
+function toExpression(find) {
+  return typeof find === 'string' ? new RegExp(escapeStringRegexp(find), 'g') : find
+}
+
+/**
+ * @param {Replace} replace
+ * @returns {ReplaceFunction}
+ */
+function toFunction(replace) {
+  return typeof replace === 'function' ? replace : () => replace
+}
+
 var isOnlyEmojis = function (text) {
     if (!text)
         return false;
@@ -1413,7 +2127,7 @@ var emojiMarkdownPlugin = function () {
         };
     }
     var transform = function (markdownAST) {
-        findAndReplace__default['default'](markdownAST, emojiRegex__default['default'](), replace);
+        findAndReplace(markdownAST, emojiRegex__default['default'](), replace);
         return markdownAST;
     };
     return transform;
@@ -1440,7 +2154,7 @@ var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
             return markdownAST;
         }
         var mentionedUsersRegex = new RegExp(mentioned_usernames.map(function (username) { return "@" + username; }).join('|'), 'g');
-        findAndReplace__default['default'](markdownAST, mentionedUsersRegex, replace);
+        findAndReplace(markdownAST, mentionedUsersRegex, replace);
         return markdownAST;
     };
     return transform;
@@ -1471,6 +2185,22 @@ var renderText = function (text, mentioned_users, options) {
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
         try {
+            // special case for mentions:
+            // it could happen that a user's name matches with an e-mail format pattern.
+            // in that case, we check whether the found e-mail is actually a mention
+            // by naively checking for an existence of @ sign in front of it.
+            if (type === 'email' && mentioned_users) {
+                var emailMatchesWithName = mentioned_users.some(function (u) { return u.name === value; });
+                if (emailMatchesWithName) {
+                    newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), function (match, position) {
+                        var isMention = newText.charAt(position - 1) === '@';
+                        // in case of mention, we leave the match in its original form,
+                        // and we let `mentionsMarkdownPlugin` to do its job
+                        return isMention ? match : "[" + match + "](" + encodeDecode(href) + ")";
+                    });
+                    return;
+                }
+            }
             var displayLink = type === 'email' ? value : formatUrlForDisplay(href);
             newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeDecode(href) + ")");
         }
@@ -1866,7 +2596,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "_defaultShouldSubmit", function (event) {
-      return event.key === 'Enter' && !event.shiftKey;
+      return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "_handleKeyDown", function (event) {
@@ -4120,32 +4850,12 @@ var UnMemoizedMessageTextComponent = function (props) {
 };
 var MessageText = React__default['default'].memo(UnMemoizedMessageTextComponent);
 
-var DefaultEmoji = React__default['default'].lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
-    var emoji;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('emoji-mart/dist/components/emoji/nimble-emoji.js')); })];
-            case 1:
-                emoji = _a.sent();
-                return [2 /*return*/, { default: emoji.default }];
-        }
-    });
-}); });
-var DefaultEmojiPicker = React__default['default'].lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
-    var emojiPicker;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('emoji-mart/dist/components/picker/nimble-picker.js')); })];
-            case 1:
-                emojiPicker = _a.sent();
-                return [2 /*return*/, { default: emojiPicker.default }];
-        }
-    });
-}); });
+var DefaultEmoji$1 = React__default['default'].lazy(function () { return Promise.resolve().then(function () { return DefaultEmoji; }); });
+var DefaultEmojiPicker$1 = React__default['default'].lazy(function () { return Promise.resolve().then(function () { return DefaultEmojiPicker; }); });
 var EmojiContext = React__default['default'].createContext(undefined);
 var EmojiProvider = function (_a) {
     var children = _a.children, value = _a.value;
-    var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default['default'] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker : _d;
+    var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji$1 : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default['default'] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker$1 : _d;
     var emojiContextValue = {
         Emoji: Emoji,
         emojiConfig: emojiConfig,
@@ -4858,8 +5568,9 @@ var useImageUploads = function (props, state, dispatch) {
     }, []);
     var uploadImage = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
         var img, file, canUpload, response, error_1, errorMessage, alreadyRemoved;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     img = imageUploads[id];
                     if (!img)
@@ -4876,24 +5587,24 @@ var useImageUploads = function (props, state, dispatch) {
                             uploadType: 'image',
                         })];
                 case 1:
-                    canUpload = _a.sent();
+                    canUpload = _b.sent();
                     if (!canUpload)
                         return [2 /*return*/, removeImage(id)];
-                    _a.label = 2;
+                    _b.label = 2;
                 case 2:
-                    _a.trys.push([2, 7, , 8]);
+                    _b.trys.push([2, 7, , 8]);
                     if (!doImageUploadRequest) return [3 /*break*/, 4];
                     return [4 /*yield*/, doImageUploadRequest(file, channel)];
                 case 3:
-                    response = _a.sent();
+                    response = _b.sent();
                     return [3 /*break*/, 6];
                 case 4: return [4 /*yield*/, channel.sendImage(file)];
                 case 5:
-                    response = _a.sent();
-                    _a.label = 6;
+                    response = _b.sent();
+                    _b.label = 6;
                 case 6: return [3 /*break*/, 8];
                 case 7:
-                    error_1 = _a.sent();
+                    error_1 = _b.sent();
                     errorMessage = typeof error_1.message === 'string'
                         ? error_1.message
                         : t('Error uploading image');
@@ -4917,8 +5628,11 @@ var useImageUploads = function (props, state, dispatch) {
                         removeImage(id);
                         return [2 /*return*/];
                     }
+                    if (img.previewUri)
+                        (_a = URL.revokeObjectURL) === null || _a === void 0 ? void 0 : _a.call(URL, img.previewUri);
                     dispatch({
                         id: id,
+                        previewUri: undefined,
                         state: 'finished',
                         type: 'setImageUpload',
                         url: response.file,
@@ -4928,33 +5642,10 @@ var useImageUploads = function (props, state, dispatch) {
         });
     }); }, [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
     React.useEffect(function () {
-        if (FileReader) {
-            var upload = Object.values(imageUploads).find(function (imageUpload) {
-                return imageUpload.state === 'uploading' && !!imageUpload.file && !imageUpload.previewUri;
-            });
-            if (upload) {
-                var file = upload.file, id_1 = upload.id;
-                // TODO: Possibly use URL.createObjectURL instead. However, then we need
-                // to release the previews when not used anymore though.
-                var reader_1 = new FileReader();
-                reader_1.onload = function (event) {
-                    var _a;
-                    if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) !== 'string')
-                        return;
-                    dispatch({
-                        id: id_1,
-                        previewUri: event.target.result,
-                        type: 'setImageUpload',
-                    });
-                };
-                reader_1.readAsDataURL(file);
-                uploadImage(id_1);
-                return function () {
-                    reader_1.onload = null;
-                };
-            }
-        }
-        return;
+        var upload = Object.values(imageUploads).find(function (imageUpload) { return imageUpload.state === 'uploading' && imageUpload.file; });
+        if (!upload)
+            return;
+        uploadImage(upload.id);
     }, [imageUploads, uploadImage]);
     return {
         removeImage: removeImage,
@@ -5078,11 +5769,18 @@ var useAttachments = function (props, state, dispatch, textareaRef) {
         Array.from(files)
             .slice(0, maxFilesLeft)
             .forEach(function (file) {
+            var _a;
             var id = nanoid.nanoid();
             if (file.type.startsWith('image/') &&
                 !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
             ) {
-                dispatch({ file: file, id: id, state: 'uploading', type: 'setImageUpload' });
+                dispatch({
+                    file: file,
+                    id: id,
+                    previewUri: (_a = URL.createObjectURL) === null || _a === void 0 ? void 0 : _a.call(URL, file),
+                    state: 'uploading',
+                    type: 'setImageUpload',
+                });
             }
             else if (file instanceof File && !noFiles) {
                 dispatch({ file: file, id: id, state: 'uploading', type: 'setFileUpload' });
@@ -5337,7 +6035,7 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, editMessage(__assign(__assign({}, message), updatedMessage))];
+                    return [4 /*yield*/, editMessage(__assign(__assign(__assign({}, message), updatedMessage), customMessageData))];
                 case 2:
                     _a.sent();
                     clearEditingState === null || clearEditingState === void 0 ? void 0 : clearEditingState();
@@ -6184,7 +6882,6 @@ var makeAddNotifications = function (setNotifications, notificationTimeouts) { r
     notificationTimeouts.push(timeout);
 }; };
 
-var JUMP_MESSAGE_PAGE_SIZE = 25;
 var UnMemoizedChannel = function (props) {
     var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, LoadingIndicator = props.LoadingIndicator;
     var _b = useChatContext('Channel'), contextChannel = _b.channel, channelsQueryState = _b.channelsQueryState;
@@ -6454,30 +7151,33 @@ var ChannelInner = function (props) {
             });
         });
     };
-    var jumpToMessage = function (messageId) { return __awaiter(void 0, void 0, void 0, function () {
-        var indexOfMessage, hasMoreMessages;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    dispatch({ loadingMore: true, type: 'setLoadingMore' });
-                    return [4 /*yield*/, channel.state.loadMessageIntoState(messageId)];
-                case 1:
-                    _a.sent();
-                    indexOfMessage = channel.state.messages.findIndex(function (message) { return message.id === messageId; });
-                    hasMoreMessages = indexOfMessage >= Math.floor(JUMP_MESSAGE_PAGE_SIZE / 2);
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
-                    dispatch({
-                        hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
-                        highlightedMessageId: messageId,
-                        type: 'jumpToMessageFinished',
-                    });
-                    setTimeout(function () {
-                        dispatch({ type: 'clearHighlightedMessage' });
-                    }, 500);
-                    return [2 /*return*/];
-            }
+    var jumpToMessage = function (messageId, messageLimit) {
+        if (messageLimit === void 0) { messageLimit = 100; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var indexOfMessage, hasMoreMessages;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                        return [4 /*yield*/, channel.state.loadMessageIntoState(messageId, undefined, messageLimit)];
+                    case 1:
+                        _a.sent();
+                        indexOfMessage = channel.state.messages.findIndex(function (message) { return message.id === messageId; });
+                        hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
+                        loadMoreFinished(hasMoreMessages, channel.state.messages);
+                        dispatch({
+                            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+                            highlightedMessageId: messageId,
+                            type: 'jumpToMessageFinished',
+                        });
+                        setTimeout(function () {
+                            dispatch({ type: 'clearHighlightedMessage' });
+                        }, 500);
+                        return [2 /*return*/];
+                }
+            });
         });
-    }); };
+    };
     var jumpToLatestMessage = function () { return __awaiter(void 0, void 0, void 0, function () {
         var hasMoreOlder;
         return __generator(this, function (_a) {
@@ -7691,7 +8391,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '9.3.0';
+var version = '9.5.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -9490,6 +10190,20 @@ var UnMemoizedWindow = function (props) {
  */
 var Window = React__default['default'].memo(UnMemoizedWindow);
 
+// @ts-expect-error
+
+var DefaultEmoji = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': nimbleEmoji__default['default']
+});
+
+// @ts-expect-error
+
+var DefaultEmojiPicker = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': nimblePicker__default['default']
+});
+
 exports.ActionsIcon = ActionsIcon;
 exports.Attachment = Attachment;
 exports.AttachmentActions = AttachmentActions;