react-mention-input 1.1.14 → 1.1.15

package/dist/MentionInput.d.ts

@@ -13,6 +13,8 @@ interface MentionInputProps {
     sendBtnClassName?: string;
     suggestionListClassName?: string;
     suggestionItemClassName?: string;
+    attachedImageContainerClassName?: string;
+    attachedImageContainerStyle?: React.CSSProperties;
     imgClassName?: string;
     imgStyle?: React.CSSProperties;
     sendButtonIcon?: ReactNode;

package/dist/MentionInput.js

@@ -39,7 +39,7 @@ 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, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _e = _a.suggestionPosition, suggestionPosition = _e === void 0 ? 'bottom' : _e, onImageUpload = _a.onImageUpload;
+    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];
@@ -338,7 +338,7 @@ var MentionInput = function (_a) {
     };
     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" },
+        imageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
             React.createElement("img", { src: imageUrl, alt: "Preview", className: imgClassName || "", style: imgStyle }),
             React.createElement("button", { onClick: removeImage, className: "remove-image-btn", "aria-label": "Remove image" }, "\u00D7"))),
         React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "", " ").concat(isDraggingOver ? 'dragging-over' : ''), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDragEnd: function () { return setIsDraggingOver(false); }, onDrop: handleDrop },

package/dist/ShowMessageCard.d.ts

@@ -30,6 +30,8 @@ interface ShowMessageCardProps {
     commentStyle?: CSSProperties;
     attachedImageClassName?: string;
     attachedImageStyle?: CSSProperties;
+    attachedImageContainerClassName?: string;
+    attachedImageContainerStyle?: CSSProperties;
     renderItem?: (element: MessageCardProps) => ReactNode;
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;

package/dist/ShowMessageCard.js

@@ -13,7 +13,7 @@ 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, renderItem = _a.renderItem;
+    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;
     // State to manage initials for images that fail to load
     var _g = useState({}), initialsState = _g[0], setInitialsState = _g[1];
     // Handle image load failure
@@ -46,7 +46,7 @@ export var ShowMessageCard = function (_a) {
                     React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
             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" },
+                (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 }))))));
     })));
 };

package/package.json

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

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)
@@ -43,6 +45,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
   suggestionItemClassName,
   imgClassName,
   imgStyle,
+  attachedImageContainerClassName,
+  attachedImageContainerStyle,
   sendButtonIcon,
   attachmentButtonIcon,
   onSendMessage,
@@ -395,7 +399,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
   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.tsx

@@ -32,6 +32,8 @@ 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
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
@@ -62,6 +64,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   commentStyle,
   attachedImageClassName,
   attachedImageStyle,
+  attachedImageContainerClassName,
+  attachedImageContainerStyle,
   renderItem, // Custom render function
 }) => {
   // State to manage initials for images that fail to load
@@ -160,7 +164,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"