react-mention-input 1.1.17 → 1.1.19

package/demo.tsx

@@ -8,14 +8,16 @@ const Demo: React.FC = () => {
       name: 'John Doe',
       date: '2 hours ago',
       comment: 'Updated the status to Draft. Need <span class="mention-highlight">@team-leads</span> review before proceeding. <span class="hashtag-highlight">#urgent</span> <span class="hashtag-highlight">#review</span>',
-      objectName: '26may_item001 (A)',
+      objectName: '26may_item001',
+      revision: 'A',
     },
     {
       id: 2,
       name: 'Mike Johnson',
       date: '1 day ago',
       comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
-      objectName: '26may_item001 (A)',
+      objectName: '26may_item001',
+      revision: 'A',
     }
   ]);
 
@@ -48,7 +50,8 @@ const Demo: React.FC = () => {
       imageUrl: messageData.imageUrl,
       tags: messageData.tags,
       mentions: messageData.userSelectListName,
-      objectName: 'new_item001 (A)', // You can customize this or make it dynamic
+      objectName: 'new_item001', // You can customize this or make it dynamic
+      revision: 'A', // You can customize this or make it dynamic
     };
 
     setMessages([...messages, newMessage]);

package/dist/MentionInput.d.ts

@@ -27,6 +27,7 @@ interface MentionInputProps {
             name: string;
         }[];
         userSelectListName: string[];
+        tags: string[];
         images?: File[];
         imageUrl?: string | null;
     }) => void;

package/dist/MentionInput.js

@@ -38,26 +38,33 @@ import React, { useState, useRef } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
 var MentionInput = function (_a) {
-    var _b, _c;
-    var users = _a.users, _d = _a.placeholder, placeholder = _d === void 0 ? "Type a message... (or drag & drop an image)" : _d, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _e = _a.suggestionPosition, suggestionPosition = _e === void 0 ? 'bottom' : _e, onImageUpload = _a.onImageUpload;
-    var _f = useState(""), inputValue = _f[0], setInputValue = _f[1]; // Plain text
-    var _g = useState([]), suggestions = _g[0], setSuggestions = _g[1];
-    var _h = useState(false), showSuggestions = _h[0], setShowSuggestions = _h[1];
-    var _j = useState(null), selectedImage = _j[0], setSelectedImage = _j[1];
-    var _k = useState(null), imageUrl = _k[0], setImageUrl = _k[1];
-    var _l = useState(false), isUploading = _l[0], setIsUploading = _l[1];
-    var _m = useState(false), isDraggingOver = _m[0], setIsDraggingOver = _m[1];
+    var _b;
+    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d, onImageUpload = _a.onImageUpload;
+    var _e = useState(""), inputValue = _e[0], setInputValue = _e[1]; // Plain text
+    var _f = useState([]), suggestions = _f[0], setSuggestions = _f[1];
+    var _g = useState(false), showSuggestions = _g[0], setShowSuggestions = _g[1];
+    var _h = useState(null), selectedImage = _h[0], setSelectedImage = _h[1];
+    var _j = useState(null), imageUrl = _j[0], setImageUrl = _j[1];
+    var _k = useState(false), isUploading = _k[0], setIsUploading = _k[1];
+    var _l = useState(false), isDraggingOver = _l[0], setIsDraggingOver = _l[1];
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
     var userSelectListRef = useRef([]); // Only unique names
     var userSelectListWithIdsRef = useRef([]); // Unique IDs with names
+    var tagsListRef = useRef([]); // Store hashtags
     var fileInputRef = useRef(null);
     var highlightMentionsAndLinks = function (text) {
         // Regular expression for detecting links
         var linkRegex = /(https?:\/\/[^\s]+)/g;
+        // Regular expression for detecting hashtags
+        var hashtagRegex = /#[\w]+/g;
         // Highlight links
         var highlightedText = text.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
+        // Highlight hashtags
+        highlightedText = highlightedText.replace(hashtagRegex, function (match) {
+            return "<span class=\"hashtag-highlight\">".concat(match, "</span>");
+        });
         // Highlight mentions manually based on `userSelectListRef`
         userSelectListRef === null || userSelectListRef === void 0 ? void 0 : userSelectListRef.current.forEach(function (userName) {
             var mentionPattern = new RegExp("@".concat(userName, "(\\s|$)"), "g");
@@ -128,8 +135,17 @@ var MentionInput = function (_a) {
         else {
             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
+        var hashtagMatches = plainText.match(/#[\w]+/g);
+        if (hashtagMatches) {
+            var 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)) {
             var currentHTML = inputRef.current.innerHTML;
             var htmlWithHighlights = highlightMentionsAndLinks(plainText);
             // Only update if the highlighted HTML is different to avoid cursor jumping
@@ -317,6 +333,7 @@ var MentionInput = function (_a) {
                     messageHTML: messageHTML,
                     userSelectListWithIds: userSelectListWithIdsRef.current,
                     userSelectListName: userSelectListRef.current,
+                    tags: tagsListRef.current,
                     images: selectedImage ? [selectedImage] : [],
                     imageUrl: imageUrl
                 });
@@ -327,6 +344,7 @@ var MentionInput = function (_a) {
                 setImageUrl(null);
                 userSelectListRef.current = [];
                 userSelectListWithIdsRef.current = [];
+                tagsListRef.current = [];
             }
         }
     };
@@ -336,7 +354,6 @@ var MentionInput = function (_a) {
             handleSendMessage(); // Trigger the same function as the Send button
         }
     };
-    console.log(inputValue, (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim(), "inputValue====");
     return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
         imageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
             React.createElement("img", { src: imageUrl, alt: "Preview", className: imgClassName || "", style: imgStyle }),
@@ -348,7 +365,7 @@ var MentionInput = function (_a) {
             React.createElement("button", { onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: "attachment-button", type: "button", "aria-label": "Attach image" },
                 React.createElement("span", { className: "attachment-icon" }, attachmentButtonIcon || "📷")),
             React.createElement("div", { className: "mention-input-wrapper" },
-                (!inputValue || !inputRef.current || ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.innerText.trim()) === "") && (React.createElement("span", { className: "placeholder" }, placeholder)),
+                (!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("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' } }),

package/dist/ShowMessageCard.css

@@ -38,6 +38,19 @@
   padding: 4px 8px;
   border-radius: 6px;
   border: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.object-name-text {
+  font-weight: 600;
+}
+
+.revision-text {
+  font-weight: 400;
+  color: #888;
+  margin-left: 4px;
 }
 
 .message-card-img,

package/dist/ShowMessageCard.d.ts

@@ -10,6 +10,8 @@ interface ShowMessageCardProps {
     commentKey?: string;
     imgSrcKey?: string;
     imageUrlKey?: string;
+    objectNameKey?: string;
+    revisionKey?: string;
     containerClassName?: string;
     containerStyle?: CSSProperties;
     cardClassName?: string;
@@ -32,6 +34,10 @@ interface ShowMessageCardProps {
     attachedImageStyle?: CSSProperties;
     attachedImageContainerClassName?: string;
     attachedImageContainerStyle?: CSSProperties;
+    objectNameClassName?: string;
+    objectNameStyle?: CSSProperties;
+    revisionClassName?: string;
+    revisionStyle?: CSSProperties;
     renderItem?: (element: MessageCardProps) => ReactNode;
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;

package/dist/ShowMessageCard.js

@@ -13,9 +13,13 @@ import React, { useState } from "react";
 import "./ShowMessageCard.css";
 export var ShowMessageCard = function (_a) {
     var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ? "name" : _b, _c = _a.dateKey, dateKey = _c === void 0 ? "date" : _c, _d = _a.commentKey, commentKey = _d === void 0 ? "comment" : _d, _e = _a.imgSrcKey, imgSrcKey = _e === void 0 ? "imgSrc" : _e, _f = _a.imageUrlKey, imageUrlKey = _f === void 0 ? "imageUrl" : _f, // Default key for attached image
-    containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, renderItem = _a.renderItem;
+    _g = _a.objectNameKey, // Default key for attached image
+    objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
+    _h = _a.revisionKey, // Default key for object identifier
+    revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
+    containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, objectNameClassName = _a.objectNameClassName, objectNameStyle = _a.objectNameStyle, revisionClassName = _a.revisionClassName, revisionStyle = _a.revisionStyle, renderItem = _a.renderItem;
     // State to manage initials for images that fail to load
-    var _g = useState({}), initialsState = _g[0], setInitialsState = _g[1];
+    var _j = useState({}), initialsState = _j[0], setInitialsState = _j[1];
     // Handle image load failure
     var handleImageError = function (id) {
         setInitialsState(function (prevState) {
@@ -32,21 +36,40 @@ export var ShowMessageCard = function (_a) {
             .join("");
         return initials;
     };
+    // Helper function to extract hashtags and mentions from text
+    var extractTagsAndMentions = function (text) {
+        var plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
+        var hashtags = plainText.match(/#[\w]+/g) || [];
+        var mentions = plainText.match(/@[\w\s-]+/g) || [];
+        return {
+            hashtags: Array.from(new Set(hashtags)), // Remove duplicates
+            mentions: Array.from(new Set(mentions.map(function (mention) { return mention.trim(); }))) // Remove duplicates and trim
+        };
+    };
     return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
         if (renderItem !== undefined) {
             // Use custom render function if provided
             return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
         }
         var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
+        // Extract tags and mentions from the comment
+        var _a = extractTagsAndMentions(item[commentKey] || ''), hashtags = _a.hashtags, mentions = _a.mentions;
         return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ""), style: cardStyle },
             React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
-                showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); } })),
-                React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
-                    React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
-                    React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
+                React.createElement("div", { className: "message-card-header-left" },
+                    showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); } })),
+                    React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
+                        React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
+                        React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
+                (item[objectNameKey] || item[revisionKey]) && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
+                    item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
+                    item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))),
             React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
                 React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
                 (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
-                    React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))))));
+                    React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
+                (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
+                    hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
+                    mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))))));
     })));
 };

package/dist/demo.js

@@ -16,14 +16,14 @@ var Demo = function () {
             name: 'John Doe',
             date: '2 hours ago',
             comment: 'Updated the status to Draft. Need <span class="mention-highlight">@team-leads</span> review before proceeding. <span class="hashtag-highlight">#urgent</span> <span class="hashtag-highlight">#review</span>',
-            itemName: '26may_item001 (A)',
+            objectName: '26may_item001 (A)',
         },
         {
             id: 2,
             name: 'Mike Johnson',
             date: '1 day ago',
             comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
-            itemName: '26may_item001 (A)',
+            objectName: '26may_item001 (A)',
         }
     ]), messages = _a[0], setMessages = _a[1];
     // Sample users for mentions
@@ -45,7 +45,7 @@ var Demo = function () {
             imageUrl: messageData.imageUrl,
             tags: messageData.tags,
             mentions: messageData.userSelectListName,
-            itemName: 'new_item001 (A)', // You can customize this or make it dynamic
+            objectName: 'new_item001 (A)', // You can customize this or make it dynamic
         };
         setMessages(__spreadArray(__spreadArray([], messages, true), [newMessage], false));
     };

package/dist/src/ShowMessageCard.d.ts

@@ -10,7 +10,7 @@ interface ShowMessageCardProps {
     commentKey?: string;
     imgSrcKey?: string;
     imageUrlKey?: string;
-    itemNameKey?: string;
+    objectNameKey?: string;
     containerClassName?: string;
     containerStyle?: CSSProperties;
     cardClassName?: string;
@@ -33,8 +33,8 @@ interface ShowMessageCardProps {
     attachedImageStyle?: CSSProperties;
     attachedImageContainerClassName?: string;
     attachedImageContainerStyle?: CSSProperties;
-    itemNameClassName?: string;
-    itemNameStyle?: CSSProperties;
+    objectNameClassName?: string;
+    objectNameStyle?: CSSProperties;
     renderItem?: (element: MessageCardProps) => ReactNode;
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;

package/dist/src/ShowMessageCard.js

@@ -13,9 +13,10 @@ import React, { useState } from "react";
 import "./ShowMessageCard.css";
 export var ShowMessageCard = function (_a) {
     var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ? "name" : _b, _c = _a.dateKey, dateKey = _c === void 0 ? "date" : _c, _d = _a.commentKey, commentKey = _d === void 0 ? "comment" : _d, _e = _a.imgSrcKey, imgSrcKey = _e === void 0 ? "imgSrc" : _e, _f = _a.imageUrlKey, imageUrlKey = _f === void 0 ? "imageUrl" : _f, // Default key for attached image
-    _g = _a.itemNameKey, // Default key for attached image
-    itemNameKey = _g === void 0 ? "name" : _g, // Default key for item identifier
-    containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, itemNameClassName = _a.itemNameClassName, itemNameStyle = _a.itemNameStyle, renderItem = _a.renderItem;
+    _g = _a.objectNameKey, // Default key for attached image
+    objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
+    containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, objectNameClassName = _a.objectNameClassName, objectNameStyle = _a.objectNameStyle, renderItem = _a.renderItem;
+    console.log(data, "data==");
     // State to manage initials for images that fail to load
     var _h = useState({}), initialsState = _h[0], setInitialsState = _h[1];
     // Handle image load failure
@@ -59,7 +60,7 @@ export var ShowMessageCard = function (_a) {
                     React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
                         React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
                         React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
-                item[itemNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(itemNameClassName || ""), style: itemNameStyle }, item[itemNameKey]))),
+                item[objectNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle }, item[objectNameKey]))),
             React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
                 React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
                 (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -8,7 +8,9 @@
     "build": "tsc && npm run copy-css",
     "copy-css": "copyfiles -u 1 src/**/*.css dist",
     "dev": "vite",
-    "demo": "vite"
+    "demo": "vite",
+    "prepublishOnly": "npm run build",
+    "version": "npm run build && git add -A dist"
   },
   "keywords": [
     "mention",

package/src/ShowMessageCard.css

@@ -38,6 +38,19 @@
   padding: 4px 8px;
   border-radius: 6px;
   border: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.object-name-text {
+  font-weight: 600;
+}
+
+.revision-text {
+  font-weight: 400;
+  color: #888;
+  margin-left: 4px;
 }
 
 .message-card-img,

package/src/ShowMessageCard.tsx

@@ -13,6 +13,7 @@ interface ShowMessageCardProps {
   imgSrcKey?: string; // Custom key for image source
   imageUrlKey?: string; // Custom key for attached image URL
   objectNameKey?: string; // Custom key for object identifier (top-right)
+  revisionKey?: string; // Custom key for revision (top-right)
   containerClassName?: string; // Class for the outermost container
   containerStyle?: CSSProperties; // Style for the outermost container
   cardClassName?: string; // Class for the card
@@ -37,6 +38,8 @@ interface ShowMessageCardProps {
   attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
   objectNameClassName?: string; // Class for the object name (top-right)
   objectNameStyle?: CSSProperties; // Style for the object name (top-right)
+  revisionClassName?: string; // Class for the revision (top-right)
+  revisionStyle?: CSSProperties; // Style for the revision (top-right)
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
@@ -48,6 +51,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   imgSrcKey = "imgSrc",
   imageUrlKey = "imageUrl", // Default key for attached image
   objectNameKey = "objectName", // Default key for object identifier
+  revisionKey = "revision", // Default key for revision
   containerClassName,
   containerStyle,
   cardClassName,
@@ -72,10 +76,10 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   attachedImageContainerStyle,
   objectNameClassName,
   objectNameStyle,
+  revisionClassName,
+  revisionStyle,
   renderItem, // Custom render function
 }) => {
-
-  console.log(data, "data==");
   // State to manage initials for images that fail to load
   const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
     {}
@@ -177,13 +181,20 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
                 </div>
               </div>
               
-              {/* Object identifier in top-right corner */}
-              {item[objectNameKey] && (
+              {/* Object identifier with revision in top-right corner */}
+              {(item[objectNameKey] || item[revisionKey]) && (
                 <div
                   className={`message-card-item-name ${objectNameClassName || ""}`}
                   style={objectNameStyle}
                 >
-                  {item[objectNameKey]}
+                  {item[objectNameKey] && (
+                    <span className="object-name-text">{item[objectNameKey]}</span>
+                  )}
+                  {item[revisionKey] && (
+                    <span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
+                      {item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
+                    </span>
+                  )}
                 </div>
               )}
             </div>

package/tsconfig.json

@@ -3,13 +3,26 @@
     "target": "ES5",
     "sourceMap": false,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "jsx": "react",
-    "lib": ["dom", "es6"],  // Ensure karein ki 'es6' included ho
+    "lib": ["dom", "es6"],
     "declaration": true,
     "outDir": "./dist",
     "strict": true,
-    "esModuleInterop": true
-  }
- 
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "demo.tsx",
+    "main.tsx",
+    "vite.config.ts",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ]
 }