react-mention-input 1.1.14 → 1.1.16

package/src/MentionInput.tsx

@@ -16,6 +16,8 @@ interface MentionInputProps {
   sendBtnClassName?: string;
   suggestionListClassName?: string;
   suggestionItemClassName?: string;
+  attachedImageContainerClassName?: string;
+  attachedImageContainerStyle?: React.CSSProperties;
   imgClassName?: string; // New prop for image CSS class
   imgStyle?: React.CSSProperties; // New prop for inline image styles
   sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
@@ -25,6 +27,7 @@ interface MentionInputProps {
     messageHTML: string;
     userSelectListWithIds: { id: number; name: string }[];
     userSelectListName: string[];
+    tags: string[];
     images?: File[];
     imageUrl?: string | null;
   }) => void;
@@ -43,6 +46,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
   suggestionItemClassName,
   imgClassName,
   imgStyle,
+  attachedImageContainerClassName,
+  attachedImageContainerStyle,
   sendButtonIcon,
   attachmentButtonIcon,
   onSendMessage,
@@ -64,17 +69,29 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const caretOffsetRef = useRef<number>(0);
   const userSelectListRef = useRef<string[]>([]); // Only unique names
   const userSelectListWithIdsRef = useRef<{ id: number; name: string }[]>([]); // Unique IDs with names
+  const tagsListRef = useRef<string[]>([]); // Store hashtags
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
     const linkRegex = /(https?:\/\/[^\s]+)/g;
+    
+    // Regular expression for detecting hashtags
+    const hashtagRegex = /#[\w]+/g;
   
     // Highlight links
     let highlightedText = text.replace(
       linkRegex,
       '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>'
     );
+    
+    // Highlight hashtags
+    highlightedText = highlightedText.replace(
+      hashtagRegex,
+      (match) => {
+        return `<span class="hashtag-highlight">${match}</span>`;
+      }
+    );
   
     // Highlight mentions manually based on `userSelectListRef`
     userSelectListRef?.current.forEach((userName) => {
@@ -156,8 +173,17 @@ const MentionInput: React.FC<MentionInputProps> = ({
       setShowSuggestions(false);
     }
     
-    // Only apply highlighting if we have mentions or links to highlight
-    if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g)) {
+    // Extract and store hashtags
+    const hashtagMatches = plainText.match(/#[\w]+/g);
+    if (hashtagMatches) {
+      const uniqueTags = Array.from(new Set(hashtagMatches));
+      tagsListRef.current = uniqueTags;
+    } else {
+      tagsListRef.current = [];
+    }
+    
+    // Only apply highlighting if we have mentions, hashtags, or links to highlight
+    if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g) || plainText.match(/#[\w]+/g)) {
       const currentHTML = inputRef.current.innerHTML;
       const htmlWithHighlights = highlightMentionsAndLinks(plainText);
       
@@ -369,6 +395,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           messageHTML,
           userSelectListWithIds: userSelectListWithIdsRef.current,
           userSelectListName: userSelectListRef.current,
+          tags: tagsListRef.current,
           images: selectedImage ? [selectedImage] : [],
           imageUrl: imageUrl
         });
@@ -379,6 +406,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         setImageUrl(null);
         userSelectListRef.current = [];
         userSelectListWithIdsRef.current = [];
+        tagsListRef.current = [];
       }
     }
   };
@@ -390,12 +418,10 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
-  console.log(inputValue, inputRef.current?.innerText.trim(), "inputValue====")
-
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
       {imageUrl && selectedImage && (
-        <div className="image-preview-card">
+        <div className={`image-preview-card ${attachedImageContainerClassName || ""}`} style={attachedImageContainerStyle}>
           <img 
             src={imageUrl} 
             alt="Preview" 

package/src/ShowMessageCard.css

@@ -21,9 +21,25 @@
 .message-card-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 8px; /* Space between header and body */
 }
 
+.message-card-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.message-card-item-name {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
 .message-card-img,
 .message-card-initials {
   width: 48px;
@@ -72,4 +88,40 @@
   color: #007bff;
   padding: 2px 4px;
   border-radius: 4px;
+}
+
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.15);
+  color: #FF8C00;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+/* Tag chips styling */
+.message-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.tag-chip {
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.hashtag-chip {
+  background-color: #D4A574;
+  color: #FFFFFF;
+}
+
+.mention-chip {
+  background-color: #2684FF;
+  color: #FFFFFF;
 }

package/src/ShowMessageCard.tsx

@@ -12,6 +12,7 @@ interface ShowMessageCardProps {
   commentKey?: string; // Custom key for comment
   imgSrcKey?: string; // Custom key for image source
   imageUrlKey?: string; // Custom key for attached image URL
+  itemNameKey?: string; // Custom key for item identifier (top-right)
   containerClassName?: string; // Class for the outermost container
   containerStyle?: CSSProperties; // Style for the outermost container
   cardClassName?: string; // Class for the card
@@ -32,6 +33,10 @@ interface ShowMessageCardProps {
   commentStyle?: CSSProperties; // Style for the comment text
   attachedImageClassName?: string; // Class for the attached image
   attachedImageStyle?: CSSProperties; // Style for the attached image
+  attachedImageContainerClassName?: string; // Class for the attached image container
+  attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
+  itemNameClassName?: string; // Class for the item name (top-right)
+  itemNameStyle?: CSSProperties; // Style for the item name (top-right)
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
@@ -42,6 +47,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   commentKey = "comment",
   imgSrcKey = "imgSrc",
   imageUrlKey = "imageUrl", // Default key for attached image
+  itemNameKey = "name", // Default key for item identifier
   containerClassName,
   containerStyle,
   cardClassName,
@@ -62,6 +68,10 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   commentStyle,
   attachedImageClassName,
   attachedImageStyle,
+  attachedImageContainerClassName,
+  attachedImageContainerStyle,
+  itemNameClassName,
+  itemNameStyle,
   renderItem, // Custom render function
 }) => {
   // State to manage initials for images that fail to load
@@ -87,6 +97,18 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     return initials;
   };
 
+  // Helper function to extract hashtags and mentions from text
+  const extractTagsAndMentions = (text: string) => {
+    const plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
+    const hashtags = plainText.match(/#[\w]+/g) || [];
+    const mentions = plainText.match(/@[\w\s-]+/g) || [];
+    
+    return {
+      hashtags: Array.from(new Set(hashtags)), // Remove duplicates
+      mentions: Array.from(new Set(mentions.map(mention => mention.trim()))) // Remove duplicates and trim
+    };
+  };
+
   return (
     <div
       className={`message-card-container ${containerClassName || ""}`}
@@ -103,6 +125,9 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
         }
 
         const showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
+        
+        // Extract tags and mentions from the comment
+        const { hashtags, mentions } = extractTagsAndMentions(item[commentKey] || '');
 
         return (
           <div
@@ -114,39 +139,51 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
               className={`message-card-header ${headerClassName || ""}`}
               style={headerStyle}
             >
-              {showInitials ? (
+              <div className="message-card-header-left">
+                {showInitials ? (
+                  <div
+                    className={`message-card-initials ${imgClassName || ""}`}
+                    style={imgStyle}
+                  >
+                    {getInitials(item[nameKey])}
+                  </div>
+                ) : (
+                  <img
+                    src={item[imgSrcKey]}
+                    alt={item[nameKey]}
+                    className={`message-card-img ${imgClassName || ""}`}
+                    style={imgStyle}
+                    onError={() => handleImageError(item.id || index)} // Pass card id or index
+                  />
+                )}
                 <div
-                  className={`message-card-initials ${imgClassName || ""}`}
-                  style={imgStyle}
+                  className={`message-card-info ${infoClassName || ""}`}
+                  style={infoStyle}
                 >
-                  {getInitials(item[nameKey])}
+                  <h3
+                    className={`message-card-name ${nameClassName || ""}`}
+                    style={nameStyle}
+                  >
+                    {item[nameKey]}
+                  </h3>
+                  <p
+                    className={`message-card-date ${dateClassName || ""}`}
+                    style={dateStyle}
+                  >
+                    {item[dateKey]}
+                  </p>
                 </div>
-              ) : (
-                <img
-                  src={item[imgSrcKey]}
-                  alt={item[nameKey]}
-                  className={`message-card-img ${imgClassName || ""}`}
-                  style={imgStyle}
-                  onError={() => handleImageError(item.id || index)} // Pass card id or index
-                />
-              )}
-              <div
-                className={`message-card-info ${infoClassName || ""}`}
-                style={infoStyle}
-              >
-                <h3
-                  className={`message-card-name ${nameClassName || ""}`}
-                  style={nameStyle}
-                >
-                  {item[nameKey]}
-                </h3>
-                <p
-                  className={`message-card-date ${dateClassName || ""}`}
-                  style={dateStyle}
-                >
-                  {item[dateKey]}
-                </p>
               </div>
+              
+              {/* Item identifier in top-right corner */}
+              {item[itemNameKey] && (
+                <div
+                  className={`message-card-item-name ${itemNameClassName || ""}`}
+                  style={itemNameStyle}
+                >
+                  {item[itemNameKey]}
+                </div>
+              )}
             </div>
             <div
               className={`message-card-body ${bodyClassName || ""}`}
@@ -160,7 +197,10 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
               
               {/* Display attached image if available */}
               {item?.[imageUrlKey] && (
-                <div className="message-card-attached-image-container">
+                <div
+                  className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
+                  style={attachedImageContainerStyle}
+                >
                   <img
                     src={item[imageUrlKey]}
                     alt="Attached"
@@ -169,6 +209,22 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
                   />
                 </div>
               )}
+              
+              {/* Display hashtags and mentions as chips */}
+              {(hashtags.length > 0 || mentions.length > 0) && (
+                <div className="message-card-tags">
+                  {hashtags.map((tag, tagIndex) => (
+                    <span key={`hashtag-${tagIndex}`} className="tag-chip hashtag-chip">
+                      {tag}
+                    </span>
+                  ))}
+                  {mentions.map((mention, mentionIndex) => (
+                    <span key={`mention-${mentionIndex}`} className="tag-chip mention-chip">
+                      {mention}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         );

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true
+  }
+})