react-mention-input 1.1.13 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/MentionInput.d.ts +2 -0
  2. package/dist/MentionInput.js +2 -2
  3. package/dist/ShowMessageCard.d.ts +5 -0
  4. package/dist/ShowMessageCard.js +6 -3
  5. package/package.json +1 -1
  6. package/src/MentionInput.tsx +5 -1
  7. package/src/ShowMessageCard.tsx +28 -9
package/dist/MentionInput.d.ts CHANGED
@@ -13,6 +13,8 @@ interface MentionInputProps {
13
13
  sendBtnClassName?: string;
14
14
  suggestionListClassName?: string;
15
15
  suggestionItemClassName?: string;
16
+ attachedImageContainerClassName?: string;
17
+ attachedImageContainerStyle?: React.CSSProperties;
16
18
  imgClassName?: string;
17
19
  imgStyle?: React.CSSProperties;
18
20
  sendButtonIcon?: ReactNode;
package/dist/MentionInput.js CHANGED
@@ -39,7 +39,7 @@ import ReactDOM from "react-dom";
39
39
  import "./MentionInput.css";
40
40
  var MentionInput = function (_a) {
41
41
  var _b, _c;
42
- 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;
42
+ 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;
43
43
  var _f = useState(""), inputValue = _f[0], setInputValue = _f[1]; // Plain text
44
44
  var _g = useState([]), suggestions = _g[0], setSuggestions = _g[1];
45
45
  var _h = useState(false), showSuggestions = _h[0], setShowSuggestions = _h[1];
@@ -338,7 +338,7 @@ var MentionInput = function (_a) {
338
338
  };
339
339
  console.log(inputValue, (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim(), "inputValue====");
340
340
  return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
341
- imageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card" },
341
+ imageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
342
342
  React.createElement("img", { src: imageUrl, alt: "Preview", className: imgClassName || "", style: imgStyle }),
343
343
  React.createElement("button", { onClick: removeImage, className: "remove-image-btn", "aria-label": "Remove image" }, "\u00D7"))),
344
344
  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 CHANGED
@@ -9,6 +9,7 @@ interface ShowMessageCardProps {
9
9
  dateKey?: string;
10
10
  commentKey?: string;
11
11
  imgSrcKey?: string;
12
+ imageUrlKey?: string;
12
13
  containerClassName?: string;
13
14
  containerStyle?: CSSProperties;
14
15
  cardClassName?: string;
@@ -27,6 +28,10 @@ interface ShowMessageCardProps {
27
28
  bodyStyle?: CSSProperties;
28
29
  commentClassName?: string;
29
30
  commentStyle?: CSSProperties;
31
+ attachedImageClassName?: string;
32
+ attachedImageStyle?: CSSProperties;
33
+ attachedImageContainerClassName?: string;
34
+ attachedImageContainerStyle?: CSSProperties;
30
35
  renderItem?: (element: MessageCardProps) => ReactNode;
31
36
  }
32
37
  export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
package/dist/ShowMessageCard.js CHANGED
@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
12
12
  import React, { useState } from "react";
13
13
  import "./ShowMessageCard.css";
14
14
  export var ShowMessageCard = function (_a) {
15
- 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;
15
+ 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
16
+ 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;
16
17
  // State to manage initials for images that fail to load
17
- var _f = useState({}), initialsState = _f[0], setInitialsState = _f[1];
18
+ var _g = useState({}), initialsState = _g[0], setInitialsState = _g[1];
18
19
  // Handle image load failure
19
20
  var handleImageError = function (id) {
20
21
  setInitialsState(function (prevState) {
@@ -44,6 +45,8 @@ export var ShowMessageCard = function (_a) {
44
45
  React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
45
46
  React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
46
47
  React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
47
- React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }))));
48
+ React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
49
+ (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
50
+ React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))))));
48
51
  })));
49
52
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.13",
3
+ "version": "1.1.15",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/MentionInput.tsx CHANGED
@@ -16,6 +16,8 @@ interface MentionInputProps {
16
16
  sendBtnClassName?: string;
17
17
  suggestionListClassName?: string;
18
18
  suggestionItemClassName?: string;
19
+ attachedImageContainerClassName?: string;
20
+ attachedImageContainerStyle?: React.CSSProperties;
19
21
  imgClassName?: string; // New prop for image CSS class
20
22
  imgStyle?: React.CSSProperties; // New prop for inline image styles
21
23
  sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
@@ -43,6 +45,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
43
45
  suggestionItemClassName,
44
46
  imgClassName,
45
47
  imgStyle,
48
+ attachedImageContainerClassName,
49
+ attachedImageContainerStyle,
46
50
  sendButtonIcon,
47
51
  attachmentButtonIcon,
48
52
  onSendMessage,
@@ -395,7 +399,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
395
399
  return (
396
400
  <div className={`mention-container ${containerClassName || ""}`}>
397
401
  {imageUrl && selectedImage && (
398
- <div className="image-preview-card">
402
+ <div className={`image-preview-card ${attachedImageContainerClassName || ""}`} style={attachedImageContainerStyle}>
399
403
  <img
400
404
  src={imageUrl}
401
405
  alt="Preview"
package/src/ShowMessageCard.tsx CHANGED
@@ -11,6 +11,7 @@ interface ShowMessageCardProps {
11
11
  dateKey?: string; // Custom key for date
12
12
  commentKey?: string; // Custom key for comment
13
13
  imgSrcKey?: string; // Custom key for image source
14
+ imageUrlKey?: string; // Custom key for attached image URL
14
15
  containerClassName?: string; // Class for the outermost container
15
16
  containerStyle?: CSSProperties; // Style for the outermost container
16
17
  cardClassName?: string; // Class for the card
@@ -29,6 +30,10 @@ interface ShowMessageCardProps {
29
30
  bodyStyle?: CSSProperties; // Style for the card body
30
31
  commentClassName?: string; // Class for the comment text
31
32
  commentStyle?: CSSProperties; // Style for the comment text
33
+ attachedImageClassName?: string; // Class for the attached image
34
+ attachedImageStyle?: CSSProperties; // Style for the attached image
35
+ attachedImageContainerClassName?: string; // Class for the attached image container
36
+ attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
32
37
  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
33
38
  }
34
39
 
@@ -38,6 +43,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
38
43
  dateKey = "date",
39
44
  commentKey = "comment",
40
45
  imgSrcKey = "imgSrc",
46
+ imageUrlKey = "imageUrl", // Default key for attached image
41
47
  containerClassName,
42
48
  containerStyle,
43
49
  cardClassName,
@@ -56,6 +62,10 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
56
62
  bodyStyle,
57
63
  commentClassName,
58
64
  commentStyle,
65
+ attachedImageClassName,
66
+ attachedImageStyle,
67
+ attachedImageContainerClassName,
68
+ attachedImageContainerStyle,
59
69
  renderItem, // Custom render function
60
70
  }) => {
61
71
  // State to manage initials for images that fail to load
@@ -146,17 +156,26 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
146
156
  className={`message-card-body ${bodyClassName || ""}`}
147
157
  style={bodyStyle}
148
158
  >
149
- {/* <p
159
+ <p
150
160
  className={`message-card-comment ${commentClassName || ""}`}
151
161
  style={commentStyle}
152
- >
153
- {item[commentKey]}
154
- </p> */}
155
- <p
156
- className={`message-card-comment ${commentClassName || ""}`}
157
- style={commentStyle}
158
- dangerouslySetInnerHTML={{ __html: item[commentKey] }}
159
- ></p>
162
+ dangerouslySetInnerHTML={{ __html: item[commentKey] }}
163
+ ></p>
164
+
165
+ {/* Display attached image if available */}
166
+ {item?.[imageUrlKey] && (
167
+ <div
168
+ className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
169
+ style={attachedImageContainerStyle}
170
+ >
171
+ <img
172
+ src={item[imageUrlKey]}
173
+ alt="Attached"
174
+ className={`message-card-attached-image ${attachedImageClassName || ""}`}
175
+ style={attachedImageStyle}
176
+ />
177
+ </div>
178
+ )}
160
179
  </div>
161
180
  </div>
162
181
  );