react-mention-input 1.1.29 → 1.1.31

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.31] - 2026-02-02
+
+### Fixed
+- **Font restriction enforcement**: Added paste event handler to strip all formatting (color, font-size, font-weight, font-family) from pasted content
+- Pasted text now uses the component's standard CSS styling instead of preserving source formatting
+- Prevents visual inconsistencies when users paste content from Word, websites, emails, or other formatted sources
+
+### Technical Details
+- Implemented `handlePaste` function using standard Clipboard API (`clipboardData.getData('text/plain')`)
+- Preserves newlines, special characters, and cursor position
+- Maintains full backward compatibility with existing features (mentions, links, images, keyboard shortcuts)
+- Uses W3C standard DOM APIs (Selection and Range)
+
+## [1.1.30] - Previous Release
+
+(Previous versions not documented)

package/dist/MentionInput.js

@@ -444,6 +444,33 @@ var MentionInput = function (_a) {
             }
         }
     };
+    var handlePaste = function (event) {
+        // Prevent default paste behavior to control formatting
+        event.preventDefault();
+        // Get plain text from clipboard (strips all HTML/formatting)
+        var text = event.clipboardData.getData('text/plain');
+        // If no text, do nothing
+        if (!text)
+            return;
+        // Get current selection
+        var selection = window.getSelection();
+        if (!selection || !selection.rangeCount)
+            return;
+        // Get the range where text will be inserted
+        var range = selection.getRangeAt(0);
+        // Delete any selected content first
+        range.deleteContents();
+        // Create a text node with the plain text (preserves newlines)
+        var textNode = document.createTextNode(text);
+        range.insertNode(textNode);
+        // Move cursor to end of inserted text
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // Trigger input change to update state and apply mention/link highlighting
+        handleInputChange();
+    };
     var handleKeyDown = function (event) {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault(); // Prevent newline in content-editable
@@ -475,7 +502,7 @@ var MentionInput = function (_a) {
                 React.createElement("span", { className: "attachment-icon" }, attachmentButtonIcon || "📷")),
             React.createElement("div", { className: "mention-input-wrapper" },
                 (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") && (React.createElement("span", { className: "placeholder" }, placeholder)),
-                React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown, onFocus: function () { return document.execCommand('styleWithCSS', false, 'false'); } })),
+                React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: function () { return document.execCommand('styleWithCSS', false, 'false'); } })),
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "➤"),
             React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleImageSelect, style: { display: 'none' } }),
             isUploading && (React.createElement("div", { className: "upload-loading" },

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.31",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -42,4 +42,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

package/src/MentionInput.tsx

@@ -65,14 +65,14 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
-  
+
   // Use protected image hook to handle authenticated image URLs
   const displayImageUrl = useProtectedImage({
     url: imageUrl,
     isProtected: isProtectedUrl,
     getAuthHeaders,
   });
-  
+
 
 
   const inputRef = useRef<HTMLDivElement>(null);
@@ -85,13 +85,13 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
     const linkRegex = /(https?:\/\/[^\s]+)/g;
-  
+
     // Highlight links
     let highlightedText = text.replace(
       linkRegex,
       '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>'
     );
-  
+
     // Highlight mentions manually based on `userSelectListRef`
     userSelectListRef?.current.forEach((userName) => {
       const mentionPattern = new RegExp(`@${userName}(\\s|$)`, "g");
@@ -102,7 +102,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         }
       );
     });
-  
+
     return highlightedText;
   };
 
@@ -128,7 +128,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showSuggestions]);
-  
+
 
   const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
     const range = document.createRange();
@@ -268,29 +268,29 @@ const MentionInput: React.FC<MentionInputProps> = ({
     const newCaretOffset = getCurrentCaretOffset();
 
     caretOffsetRef.current = newCaretOffset;
-    
+
     const plainText = inputRef.current.innerText;
     setInputValue(plainText);
-    
+
     // Process for mention suggestions
     const mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
     if (mentionMatch) {
       const query = mentionMatch[1].toLowerCase();
-      const filteredUsers = query === "" ? users : users.filter((user) => 
+      const filteredUsers = query === "" ? users : users.filter((user) =>
         user.name.toLowerCase().includes(query)
       );
-      
+
       setSuggestions(filteredUsers);
       setShowSuggestions(filteredUsers.length > 0);
     } else {
       setShowSuggestions(false);
     }
-    
+
     // Only apply highlighting if we have mentions or links to highlight
     if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g)) {
       const currentHTML = inputRef.current.innerHTML;
       const htmlWithHighlights = highlightMentionsAndLinks(plainText);
-      
+
       // Only update if the highlighted HTML is different to avoid cursor jumping
       if (currentHTML !== htmlWithHighlights) {
         inputRef.current.innerHTML = htmlWithHighlights;
@@ -299,7 +299,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
       }
     }
   };
-  
+
 
   const renderSuggestions = () => {
     if (!showSuggestions || !inputRef.current) return null;
@@ -312,7 +312,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         .join("");
       return initials;
     };
-    
+
     const inputRect = inputRef.current.getBoundingClientRect();
     const scrollLeft =
       window.scrollX ?? window.pageXOffset ?? document.documentElement.scrollLeft ?? 0;
@@ -349,7 +349,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
 
     return ReactDOM.createPortal(
-      <div 
+      <div
         className={`suggestion-container ${suggestionListClassName || ''}`}
         style={styles}
       >
@@ -378,15 +378,15 @@ const MentionInput: React.FC<MentionInputProps> = ({
 
   const handleSuggestionClick = (user: User) => {
     if (!inputRef.current) return;
-  
+
     const plainText = inputValue;
     const caretOffset = caretOffsetRef.current;
     const mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
-  
+
     if (!userSelectListRef.current.includes(user.name)) {
       userSelectListRef.current.push(user.name);
     }
-  
+
     // Check if the ID is already stored
     const isIdExists = userSelectListWithIdsRef.current.some(
       (item) => item.id === user.id
@@ -394,26 +394,26 @@ const MentionInput: React.FC<MentionInputProps> = ({
     if (!isIdExists) {
       userSelectListWithIdsRef.current.push(user);
     }
-  
+
     if (!mentionMatch) return;
-  
+
     const mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
-  
+
     // Append space after the mention
     const newValue =
       plainText.substring(0, mentionIndex + 1) + user.name + " " + plainText.substring(caretOffset);
-  
+
     setInputValue(newValue);
     inputRef.current.innerText = newValue;
-  
+
     // Highlight mentions and links with &nbsp;
     const htmlWithHighlights = highlightMentionsAndLinks(newValue);
-  
+
     // Set highlighted content
     inputRef.current.innerHTML = htmlWithHighlights;
-  
+
     setShowSuggestions(false);
-  
+
     // Adjust caret position after adding the mention and space
     const mentionEnd = mentionIndex + user.name.length + 1;
     restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
@@ -449,7 +449,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
     const rect = e.currentTarget.getBoundingClientRect();
     const x = e.clientX;
     const y = e.clientY;
-    
+
     if (
       x <= rect.left ||
       x >= rect.right ||
@@ -532,6 +532,40 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
+  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    // Prevent default paste behavior to control formatting
+    event.preventDefault();
+
+    // Get plain text from clipboard (strips all HTML/formatting)
+    const text = event.clipboardData.getData('text/plain');
+
+    // If no text, do nothing
+    if (!text) return;
+
+    // Get current selection
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    // Get the range where text will be inserted
+    const range = selection.getRangeAt(0);
+
+    // Delete any selected content first
+    range.deleteContents();
+
+    // Create a text node with the plain text (preserves newlines)
+    const textNode = document.createTextNode(text);
+    range.insertNode(textNode);
+
+    // Move cursor to end of inserted text
+    range.setStartAfter(textNode);
+    range.setEndAfter(textNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    // Trigger input change to update state and apply mention/link highlighting
+    handleInputChange();
+  };
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault(); // Prevent newline in content-editable
@@ -558,9 +592,9 @@ const MentionInput: React.FC<MentionInputProps> = ({
     <div className={`mention-container ${containerClassName || ""}`}>
       {displayImageUrl && selectedImage && (
         <div className={`image-preview-card ${attachedImageContainerClassName || ""}`} style={attachedImageContainerStyle}>
-          <img 
-            src={displayImageUrl} 
-            alt="Preview" 
+          <img
+            src={displayImageUrl}
+            alt="Preview"
             className={imgClassName || ""}
             style={imgStyle}
           />
@@ -569,8 +603,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
           </button>
         </div>
       )}
-      
-      <div 
+
+      <div
         className={`mention-input-container ${inputContainerClassName || ""} ${isDraggingOver ? 'dragging-over' : ''}`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -584,7 +618,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
             </div>
           </div>
         )}
-        
+
         <button
           onClick={() => fileInputRef.current?.click()}
           className="attachment-button"
@@ -593,7 +627,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         >
           <span className="attachment-icon">{attachmentButtonIcon || "📷"}</span>
         </button>
-        
+
         <div className="mention-input-wrapper">
           {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") && (
             <span className="placeholder">{placeholder}</span>
@@ -605,10 +639,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
             className={`mention-input ${inputClassName || ""}`}
             onInput={handleInputChange}
             onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
             onFocus={() => document.execCommand('styleWithCSS', false, 'false')}
           />
         </div>
-        
+
         <button
           onClick={handleSendMessage}
           className={`send-button ${sendBtnClassName || ""}`}
@@ -616,7 +651,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         >
           {sendButtonIcon || "➤"}
         </button>
-        
+
         <input
           type="file"
           ref={fileInputRef}
@@ -624,7 +659,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           onChange={handleImageSelect}
           style={{ display: 'none' }}
         />
-        
+
         {isUploading && (
           <div className="upload-loading">
             <span>Uploading...</span>

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;
 };