react-mention-input 1.1.12 → 1.1.13

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "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">