react-mention-input 1.1.29 → 1.1.30

package/dist/ShowMessageCard.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useState } from "react";
+import React, { useState, memo } from "react";
 import "./ShowMessageCard.css";
 import { useProtectedImage } from "./useProtectedImage";
 export var ShowMessageCard = function (_a) {
@@ -50,8 +50,8 @@ export var ShowMessageCard = function (_a) {
             .join("");
         return initials;
     };
-    // Component to render protected images
-    var ProtectedImage = function (_a) {
+    // Component to render protected images - memoized to prevent recreation on every render
+    var ProtectedImage = memo(function (_a) {
         var url = _a.url, alt = _a.alt, className = _a.className, style = _a.style, containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, onError = _a.onError, _b = _a.renderInContainer, renderInContainer = _b === void 0 ? true : _b;
         var displayUrl = useProtectedImage({
             url: url,
@@ -66,7 +66,7 @@ export var ShowMessageCard = function (_a) {
             return (React.createElement("div", { className: containerClassName, style: containerStyle }, imgElement));
         }
         return imgElement;
-    };
+    });
     // Helper function to extract hashtags and mentions from text
     var extractTagsAndMentions = function (text) {
         // First extract from HTML with spans

package/dist/useProtectedImage.d.ts

@@ -7,6 +7,7 @@ interface UseProtectedImageOptions {
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export declare const useProtectedImage: ({ url, isProtected, getAuthHeaders, }: UseProtectedImageOptions) => string | null;
 export {};

package/dist/useProtectedImage.js

@@ -46,40 +46,49 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { useState, useEffect, useRef } from 'react';
+// Module-level cache to persist blob URLs across component re-renders
+var blobUrlCache = new Map();
+var fetchingUrls = new Set();
 /**
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export var useProtectedImage = function (_a) {
     var url = _a.url, isProtected = _a.isProtected, getAuthHeaders = _a.getAuthHeaders;
-    var _b = useState(null), blobUrl = _b[0], setBlobUrl = _b[1];
-    var blobUrlRef = useRef(null);
-    var blobUrlForUrlRef = useRef(null); // Track which URL the blob URL corresponds to
+    var _b = useState(function () {
+        // Initialize from cache if available
+        return url ? blobUrlCache.get(url) || null : null;
+    }), blobUrl = _b[0], setBlobUrl = _b[1];
     var previousUrlRef = useRef(null);
     var isProtectedRef = useRef(isProtected);
     var getAuthHeadersRef = useRef(getAuthHeaders);
+    var mountedRef = useRef(true);
     // Update refs when props change (but don't trigger re-fetch)
     useEffect(function () {
         isProtectedRef.current = isProtected;
         getAuthHeadersRef.current = getAuthHeaders;
     }, [isProtected, getAuthHeaders]);
     useEffect(function () {
-        // If URL hasn't changed, don't do anything
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(function () {
+        // Always check cache first and restore if needed (synchronous)
+        if (url && blobUrlCache.has(url) && !blobUrl) {
+            var cachedBlobUrl = blobUrlCache.get(url);
+            setBlobUrl(cachedBlobUrl);
+        }
+        // If URL hasn't changed, keep using cached blob URL
         if (url === previousUrlRef.current) {
             return;
         }
-        // Store previous URL and blob URL for later cleanup
         var oldUrl = previousUrlRef.current;
-        var oldBlobUrl = blobUrlRef.current;
         previousUrlRef.current = url;
         if (!url) {
-            // If URL is null, clean up old blob URL and clear state
-            if (oldBlobUrl) {
-                URL.revokeObjectURL(oldBlobUrl);
-                blobUrlRef.current = null;
-                blobUrlForUrlRef.current = null;
-            }
             setBlobUrl(null);
             return;
         }
@@ -87,23 +96,35 @@ export var useProtectedImage = function (_a) {
         var shouldUseAuth = typeof isProtectedRef.current === 'boolean'
             ? isProtectedRef.current
             : isProtectedRef.current ? isProtectedRef.current(url) : false;
-        // If not protected, clean up old blob URL and use original URL
+        // If not protected, use original URL
         if (!shouldUseAuth || !getAuthHeadersRef.current) {
-            if (oldBlobUrl) {
-                URL.revokeObjectURL(oldBlobUrl);
-                blobUrlRef.current = null;
-                blobUrlForUrlRef.current = null;
+            // Clear any cached blob URL for this URL
+            if (blobUrlCache.has(url)) {
+                var cachedBlobUrl = blobUrlCache.get(url);
+                URL.revokeObjectURL(cachedBlobUrl);
+                blobUrlCache.delete(url);
             }
             setBlobUrl(null);
             return;
         }
+        // Check cache first - if we have a cached blob URL, use it immediately
+        if (blobUrlCache.has(url)) {
+            var cachedBlobUrl = blobUrlCache.get(url);
+            setBlobUrl(cachedBlobUrl);
+            return;
+        }
+        // If already fetching this URL, don't fetch again
+        if (fetchingUrls.has(url)) {
+            return;
+        }
         // Fetch protected image with auth headers
+        fetchingUrls.add(url);
         var fetchProtectedImage = function () { return __awaiter(void 0, void 0, void 0, function () {
             var headers, response, blob, newBlobUrl, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 4, , 5]);
+                        _a.trys.push([0, 4, 5, 6]);
                         return [4 /*yield*/, Promise.resolve(getAuthHeadersRef.current())];
                     case 1:
                         headers = _a.sent();
@@ -120,44 +141,36 @@ export var useProtectedImage = function (_a) {
                     case 3:
                         blob = _a.sent();
                         newBlobUrl = URL.createObjectURL(blob);
-                        // Only update if URL hasn't changed during fetch
-                        if (previousUrlRef.current === url) {
-                            // Revoke old blob URL now that new one is ready
-                            if (oldBlobUrl && oldUrl !== url) {
-                                URL.revokeObjectURL(oldBlobUrl);
-                            }
-                            blobUrlRef.current = newBlobUrl;
-                            blobUrlForUrlRef.current = url;
+                        // Only update if URL hasn't changed during fetch and component is still mounted
+                        if (previousUrlRef.current === url && mountedRef.current) {
+                            // Cache the blob URL
+                            blobUrlCache.set(url, newBlobUrl);
                             setBlobUrl(newBlobUrl);
                         }
                         else {
-                            // URL changed during fetch, revoke this blob URL
+                            // URL changed during fetch or component unmounted, revoke this blob URL
                             URL.revokeObjectURL(newBlobUrl);
                         }
-                        return [3 /*break*/, 5];
+                        return [3 /*break*/, 6];
                     case 4:
                         error_1 = _a.sent();
                         console.error('Error fetching protected image:', error_1);
-                        // On error, only clear if URL hasn't changed
-                        if (previousUrlRef.current === url) {
+                        // On error, only clear if URL hasn't changed and component is mounted
+                        if (previousUrlRef.current === url && mountedRef.current) {
                             setBlobUrl(null);
                         }
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 5:
+                        fetchingUrls.delete(url);
+                        return [7 /*endfinally*/];
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
         fetchProtectedImage();
-        // Cleanup function - revoke blob URL on unmount
-        return function () {
-            // On unmount, clean up the current blob URL
-            if (blobUrlRef.current) {
-                URL.revokeObjectURL(blobUrlRef.current);
-                blobUrlRef.current = null;
-                blobUrlForUrlRef.current = null;
-            }
-        };
-    }, [url]); // Only depend on url, not isProtected or getAuthHeaders
+    }, [url]); // Only depend on url
+    // Cleanup: Don't revoke blob URLs on unmount - keep them in cache for reuse
+    // They will be cleaned up when the URL changes or when the cache is cleared
     // Return blob URL if available, otherwise return original URL (or null)
     if (!url) {
         return null;
@@ -165,5 +178,10 @@ export var useProtectedImage = function (_a) {
     var isUrlProtected = typeof isProtectedRef.current === 'boolean'
         ? isProtectedRef.current
         : isProtectedRef.current ? isProtectedRef.current(url) : false;
-    return blobUrl || (!isUrlProtected ? url : null);
+    // For protected URLs, return cached blob URL or current blobUrl state
+    // For non-protected URLs, return the original URL
+    if (isUrlProtected) {
+        return blobUrl || blobUrlCache.get(url) || null;
+    }
+    return url;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/ShowMessageCard.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState, ReactNode } from "react";
+import React, { CSSProperties, useState, ReactNode, useMemo, memo } from "react";
 import "./ShowMessageCard.css";
 import { useProtectedImage } from "./useProtectedImage";
 
@@ -112,8 +112,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     return initials;
   };
 
-  // Component to render protected images
-  const ProtectedImage: React.FC<{ 
+  // Component to render protected images - memoized to prevent recreation on every render
+  const ProtectedImage = memo<{ 
     url: string; 
     alt: string; 
     className?: string; 
@@ -122,7 +122,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     containerStyle?: CSSProperties;
     onError?: () => void;
     renderInContainer?: boolean;
-  }> = ({ url, alt, className, style, containerClassName, containerStyle, onError, renderInContainer = true }) => {
+  }>(({ url, alt, className, style, containerClassName, containerStyle, onError, renderInContainer = true }) => {
     const displayUrl = useProtectedImage({
       url,
       isProtected: isProtectedUrl,
@@ -152,7 +152,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     }
 
     return imgElement;
-  };
+  });
 
   // Helper function to extract hashtags and mentions from text
   const extractTagsAndMentions = (text: string) => {

package/src/useProtectedImage.ts

@@ -6,22 +6,29 @@ interface UseProtectedImageOptions {
   getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
 }
 
+// Module-level cache to persist blob URLs across component re-renders
+const blobUrlCache = new Map<string, string>();
+const fetchingUrls = new Set<string>();
+
 /**
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export const useProtectedImage = ({
   url,
   isProtected,
   getAuthHeaders,
 }: UseProtectedImageOptions): string | null => {
-  const [blobUrl, setBlobUrl] = useState<string | null>(null);
-  const blobUrlRef = useRef<string | null>(null);
-  const blobUrlForUrlRef = useRef<string | null>(null); // Track which URL the blob URL corresponds to
+  const [blobUrl, setBlobUrl] = useState<string | null>(() => {
+    // Initialize from cache if available
+    return url ? blobUrlCache.get(url) || null : null;
+  });
   const previousUrlRef = useRef<string | null>(null);
   const isProtectedRef = useRef(isProtected);
   const getAuthHeadersRef = useRef(getAuthHeaders);
+  const mountedRef = useRef(true);
 
   // Update refs when props change (but don't trigger re-fetch)
   useEffect(() => {
@@ -30,23 +37,28 @@ export const useProtectedImage = ({
   }, [isProtected, getAuthHeaders]);
 
   useEffect(() => {
-    // If URL hasn't changed, don't do anything
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    // Always check cache first and restore if needed (synchronous)
+    if (url && blobUrlCache.has(url) && !blobUrl) {
+      const cachedBlobUrl = blobUrlCache.get(url)!;
+      setBlobUrl(cachedBlobUrl);
+    }
+
+    // If URL hasn't changed, keep using cached blob URL
     if (url === previousUrlRef.current) {
       return;
     }
 
-    // Store previous URL and blob URL for later cleanup
     const oldUrl = previousUrlRef.current;
-    const oldBlobUrl = blobUrlRef.current;
     previousUrlRef.current = url;
 
     if (!url) {
-      // If URL is null, clean up old blob URL and clear state
-      if (oldBlobUrl) {
-        URL.revokeObjectURL(oldBlobUrl);
-        blobUrlRef.current = null;
-        blobUrlForUrlRef.current = null;
-      }
       setBlobUrl(null);
       return;
     }
@@ -56,18 +68,32 @@ export const useProtectedImage = ({
       ? isProtectedRef.current 
       : isProtectedRef.current ? isProtectedRef.current(url) : false;
 
-    // If not protected, clean up old blob URL and use original URL
+    // If not protected, use original URL
     if (!shouldUseAuth || !getAuthHeadersRef.current) {
-      if (oldBlobUrl) {
-        URL.revokeObjectURL(oldBlobUrl);
-        blobUrlRef.current = null;
-        blobUrlForUrlRef.current = null;
+      // Clear any cached blob URL for this URL
+      if (blobUrlCache.has(url)) {
+        const cachedBlobUrl = blobUrlCache.get(url)!;
+        URL.revokeObjectURL(cachedBlobUrl);
+        blobUrlCache.delete(url);
       }
       setBlobUrl(null);
       return;
     }
 
+    // Check cache first - if we have a cached blob URL, use it immediately
+    if (blobUrlCache.has(url)) {
+      const cachedBlobUrl = blobUrlCache.get(url)!;
+      setBlobUrl(cachedBlobUrl);
+      return;
+    }
+
+    // If already fetching this URL, don't fetch again
+    if (fetchingUrls.has(url)) {
+      return;
+    }
+
     // Fetch protected image with auth headers
+    fetchingUrls.add(url);
     const fetchProtectedImage = async () => {
       try {
         const headers = await Promise.resolve(getAuthHeadersRef.current!());
@@ -85,40 +111,31 @@ export const useProtectedImage = ({
         const blob = await response.blob();
         const newBlobUrl = URL.createObjectURL(blob);
         
-        // Only update if URL hasn't changed during fetch
-        if (previousUrlRef.current === url) {
-          // Revoke old blob URL now that new one is ready
-          if (oldBlobUrl && oldUrl !== url) {
-            URL.revokeObjectURL(oldBlobUrl);
-          }
-          blobUrlRef.current = newBlobUrl;
-          blobUrlForUrlRef.current = url;
+        // Only update if URL hasn't changed during fetch and component is still mounted
+        if (previousUrlRef.current === url && mountedRef.current) {
+          // Cache the blob URL
+          blobUrlCache.set(url, newBlobUrl);
           setBlobUrl(newBlobUrl);
         } else {
-          // URL changed during fetch, revoke this blob URL
+          // URL changed during fetch or component unmounted, revoke this blob URL
           URL.revokeObjectURL(newBlobUrl);
         }
       } catch (error) {
         console.error('Error fetching protected image:', error);
-        // On error, only clear if URL hasn't changed
-        if (previousUrlRef.current === url) {
+        // On error, only clear if URL hasn't changed and component is mounted
+        if (previousUrlRef.current === url && mountedRef.current) {
           setBlobUrl(null);
         }
+      } finally {
+        fetchingUrls.delete(url);
       }
     };
 
     fetchProtectedImage();
+  }, [url]); // Only depend on url
 
-    // Cleanup function - revoke blob URL on unmount
-    return () => {
-      // On unmount, clean up the current blob URL
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-        blobUrlForUrlRef.current = null;
-      }
-    };
-  }, [url]); // Only depend on url, not isProtected or getAuthHeaders
+  // Cleanup: Don't revoke blob URLs on unmount - keep them in cache for reuse
+  // They will be cleaned up when the URL changes or when the cache is cleared
 
   // Return blob URL if available, otherwise return original URL (or null)
   if (!url) {
@@ -128,6 +145,13 @@ export const useProtectedImage = ({
   const isUrlProtected = typeof isProtectedRef.current === 'boolean' 
     ? isProtectedRef.current 
     : isProtectedRef.current ? isProtectedRef.current(url) : false;
-  return blobUrl || (!isUrlProtected ? url : null);
+  
+  // For protected URLs, return cached blob URL or current blobUrl state
+  // For non-protected URLs, return the original URL
+  if (isUrlProtected) {
+    return blobUrl || blobUrlCache.get(url) || null;
+  }
+  
+  return url;
 };