react-mention-input 1.1.12 → 1.1.14

package/dist/MentionInput.d.ts

@@ -13,7 +13,10 @@ interface MentionInputProps {
     sendBtnClassName?: string;
     suggestionListClassName?: string;
     suggestionItemClassName?: string;
+    imgClassName?: string;
+    imgStyle?: React.CSSProperties;
     sendButtonIcon?: ReactNode;
+    attachmentButtonIcon?: ReactNode;
     onSendMessage?: (obj: {
         messageText: string;
         messageHTML: string;

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, sendButtonIcon = _a.sendButtonIcon, 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, 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];
@@ -339,14 +339,14 @@ 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" },
-            React.createElement("img", { src: imageUrl, alt: "Preview" }),
+            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 },
             isDraggingOver && (React.createElement("div", { className: "drag-overlay" },
                 React.createElement("div", { className: "drag-message" },
                     React.createElement("span", null, "Drop to upload")))),
             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" }, "\uD83D\uDCF7")),
+                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)),
                 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'); } })),

package/dist/ShowMessageCard.d.ts

@@ -9,6 +9,7 @@ interface ShowMessageCardProps {
     dateKey?: string;
     commentKey?: string;
     imgSrcKey?: string;
+    imageUrlKey?: string;
     containerClassName?: string;
     containerStyle?: CSSProperties;
     cardClassName?: string;
@@ -27,6 +28,8 @@ interface ShowMessageCardProps {
     bodyStyle?: CSSProperties;
     commentClassName?: string;
     commentStyle?: CSSProperties;
+    attachedImageClassName?: string;
+    attachedImageStyle?: CSSProperties;
     renderItem?: (element: MessageCardProps) => ReactNode;
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;

package/dist/ShowMessageCard.js

@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
 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, 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, renderItem = _a.renderItem;
+    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;
     // State to manage initials for images that fail to load
-    var _f = useState({}), initialsState = _f[0], setInitialsState = _f[1];
+    var _g = useState({}), initialsState = _g[0], setInitialsState = _g[1];
     // Handle image load failure
     var handleImageError = function (id) {
         setInitialsState(function (prevState) {
@@ -44,6 +45,8 @@ export var ShowMessageCard = function (_a) {
                     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-body ".concat(bodyClassName || ""), style: bodyStyle },
-                React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }))));
+                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" },
+                    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.12",
+  "version": "1.1.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -16,7 +16,10 @@ interface MentionInputProps {
   sendBtnClassName?: string;
   suggestionListClassName?: string;
   suggestionItemClassName?: string;
+  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)
+  attachmentButtonIcon?: ReactNode; // New prop for attachment button icon
   onSendMessage?: (obj: {
     messageText: string;
     messageHTML: string;
@@ -38,7 +41,10 @@ const MentionInput: React.FC<MentionInputProps> = ({
   sendBtnClassName,
   suggestionListClassName,
   suggestionItemClassName,
+  imgClassName,
+  imgStyle,
   sendButtonIcon,
+  attachmentButtonIcon,
   onSendMessage,
   suggestionPosition = 'bottom',
   onImageUpload,
@@ -390,7 +396,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
     <div className={`mention-container ${containerClassName || ""}`}>
       {imageUrl && selectedImage && (
         <div className="image-preview-card">
-          <img src={imageUrl} alt="Preview" />
+          <img 
+            src={imageUrl} 
+            alt="Preview" 
+            className={imgClassName || ""}
+            style={imgStyle}
+          />
           <button onClick={removeImage} className="remove-image-btn" aria-label="Remove image">
             ×
           </button>
@@ -418,7 +429,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           type="button"
           aria-label="Attach image"
         >
-          <span className="attachment-icon">📷</span>
+          <span className="attachment-icon">{attachmentButtonIcon || "📷"}</span>
         </button>
         
         <div className="mention-input-wrapper">

package/src/ShowMessageCard.tsx

@@ -11,6 +11,7 @@ interface ShowMessageCardProps {
   dateKey?: string; // Custom key for date
   commentKey?: string; // Custom key for comment
   imgSrcKey?: string; // Custom key for image source
+  imageUrlKey?: string; // Custom key for attached image URL
   containerClassName?: string; // Class for the outermost container
   containerStyle?: CSSProperties; // Style for the outermost container
   cardClassName?: string; // Class for the card
@@ -29,6 +30,8 @@ interface ShowMessageCardProps {
   bodyStyle?: CSSProperties; // Style for the card body
   commentClassName?: string; // Class for the comment text
   commentStyle?: CSSProperties; // Style for the comment text
+  attachedImageClassName?: string; // Class for the attached image
+  attachedImageStyle?: CSSProperties; // Style for the attached image
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
@@ -38,6 +41,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   dateKey = "date",
   commentKey = "comment",
   imgSrcKey = "imgSrc",
+  imageUrlKey = "imageUrl", // Default key for attached image
   containerClassName,
   containerStyle,
   cardClassName,
@@ -56,6 +60,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   bodyStyle,
   commentClassName,
   commentStyle,
+  attachedImageClassName,
+  attachedImageStyle,
   renderItem, // Custom render function
 }) => {
   // State to manage initials for images that fail to load
@@ -146,17 +152,23 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
               className={`message-card-body ${bodyClassName || ""}`}
               style={bodyStyle}
             >
-              {/* <p
+              <p
                 className={`message-card-comment ${commentClassName || ""}`}
                 style={commentStyle}
-              >
-                {item[commentKey]}
-              </p> */}
-              <p
-  className={`message-card-comment ${commentClassName || ""}`}
-  style={commentStyle}
-  dangerouslySetInnerHTML={{ __html: item[commentKey] }}
-></p>
+                dangerouslySetInnerHTML={{ __html: item[commentKey] }}
+              ></p>
+              
+              {/* Display attached image if available */}
+              {item?.[imageUrlKey] && (
+                <div className="message-card-attached-image-container">
+                  <img
+                    src={item[imageUrlKey]}
+                    alt="Attached"
+                    className={`message-card-attached-image ${attachedImageClassName || ""}`}
+                    style={attachedImageStyle}
+                  />
+                </div>
+              )}
             </div>
           </div>
         );