react-mention-input 1.1.14 → 1.1.16

package/demo.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { MentionInput, ShowMessageCard } from './src';
+
+const Demo: React.FC = () => {
+  const [messages, setMessages] = useState<any[]>([
+    {
+      id: 1,
+      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)',
+    },
+    {
+      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)',
+    }
+  ]);
+
+  // Sample users for mentions
+  const users = [
+    { id: 1, name: 'John Doe' },
+    { id: 2, name: 'Jane Smith' },
+    { id: 3, name: 'Mike Johnson' },
+    { id: 4, name: 'Sarah Wilson' },
+  ];
+
+  const handleSendMessage = (messageData: {
+    messageText: string;
+    messageHTML: string;
+    userSelectListWithIds: { id: number; name: string }[];
+    userSelectListName: string[];
+    tags: string[];
+    images?: File[];
+    imageUrl?: string | null;
+  }) => {
+    console.log('Message Data:', messageData);
+    console.log('Extracted Tags:', messageData.tags);
+
+    // Create a new message for display
+    const newMessage = {
+      id: Date.now(),
+      name: 'You',
+      date: new Date().toLocaleTimeString(),
+      comment: messageData.messageHTML,
+      imageUrl: messageData.imageUrl,
+      tags: messageData.tags,
+      mentions: messageData.userSelectListName,
+      itemName: 'new_item001 (A)', // You can customize this or make it dynamic
+    };
+
+    setMessages([...messages, newMessage]);
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '20px auto', padding: '20px' }}>
+      <h1>React Mention Input with Hashtag Support</h1>
+      
+      <div style={{ marginBottom: '20px' }}>
+        <h3>Features:</h3>
+        <ul>
+          <li>Type <strong>@</strong> to mention users (e.g., @John Doe)</li>
+          <li>Type <strong>#</strong> to create hashtags (e.g., #urgent #review #milestone)</li>
+          <li>Links are automatically detected and highlighted</li>
+          <li>Hashtags are extracted and returned in the tags array</li>
+        </ul>
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <MentionInput
+          users={users}
+          placeholder="Type a message with @mentions and #hashtags..."
+          onSendMessage={handleSendMessage}
+          suggestionPosition="bottom"
+        />
+      </div>
+
+      <div>
+        <h3>Messages:</h3>
+        <ShowMessageCard data={messages} />
+      </div>
+
+      <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+        <h4>Example Usage:</h4>
+        <p>Try typing these examples:</p>
+        <ul>
+          <li>"Project update complete. Ready for @John Doe review #milestone #completed"</li>
+          <li>"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help"</li>
+          <li>"Meeting scheduled for tomorrow #meeting #planning"</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Demo; 

package/dist/MentionInput.css

@@ -193,6 +193,14 @@
   font-weight: 500;
 }
 
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.1);
+  color: #FF8C00;
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-weight: 500;
+}
+
 .link-highlight {
   color: #2684FF;
   text-decoration: none;

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.css

@@ -21,9 +21,25 @@
 .message-card-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 8px; /* Space between header and body */
 }
 
+.message-card-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.message-card-item-name {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
 .message-card-img,
 .message-card-initials {
   width: 48px;
@@ -72,4 +88,40 @@
   color: #007bff;
   padding: 2px 4px;
   border-radius: 4px;
+}
+
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.15);
+  color: #FF8C00;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+/* Tag chips styling */
+.message-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.tag-chip {
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.hashtag-chip {
+  background-color: #D4A574;
+  color: #FFFFFF;
+}
+
+.mention-chip {
+  background-color: #2684FF;
+  color: #FFFFFF;
 }

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/dist/demo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Demo: React.FC;
+export default Demo;

package/dist/demo.js

@@ -0,0 +1,80 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from 'react';
+import { MentionInput, ShowMessageCard } from './src';
+var Demo = function () {
+    var _a = useState([
+        {
+            id: 1,
+            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)',
+        },
+        {
+            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)',
+        }
+    ]), messages = _a[0], setMessages = _a[1];
+    // Sample users for mentions
+    var users = [
+        { id: 1, name: 'John Doe' },
+        { id: 2, name: 'Jane Smith' },
+        { id: 3, name: 'Mike Johnson' },
+        { id: 4, name: 'Sarah Wilson' },
+    ];
+    var handleSendMessage = function (messageData) {
+        console.log('Message Data:', messageData);
+        console.log('Extracted Tags:', messageData.tags);
+        // Create a new message for display
+        var newMessage = {
+            id: Date.now(),
+            name: 'You',
+            date: new Date().toLocaleTimeString(),
+            comment: messageData.messageHTML,
+            imageUrl: messageData.imageUrl,
+            tags: messageData.tags,
+            mentions: messageData.userSelectListName,
+            itemName: 'new_item001 (A)', // You can customize this or make it dynamic
+        };
+        setMessages(__spreadArray(__spreadArray([], messages, true), [newMessage], false));
+    };
+    return (React.createElement("div", { style: { maxWidth: '600px', margin: '20px auto', padding: '20px' } },
+        React.createElement("h1", null, "React Mention Input with Hashtag Support"),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            React.createElement("h3", null, "Features:"),
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    "Type ",
+                    React.createElement("strong", null, "@"),
+                    " to mention users (e.g., @John Doe)"),
+                React.createElement("li", null,
+                    "Type ",
+                    React.createElement("strong", null, "#"),
+                    " to create hashtags (e.g., #urgent #review #milestone)"),
+                React.createElement("li", null, "Links are automatically detected and highlighted"),
+                React.createElement("li", null, "Hashtags are extracted and returned in the tags array"))),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            React.createElement(MentionInput, { users: users, placeholder: "Type a message with @mentions and #hashtags...", onSendMessage: handleSendMessage, suggestionPosition: "bottom" })),
+        React.createElement("div", null,
+            React.createElement("h3", null, "Messages:"),
+            React.createElement(ShowMessageCard, { data: messages })),
+        React.createElement("div", { style: { marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' } },
+            React.createElement("h4", null, "Example Usage:"),
+            React.createElement("p", null, "Try typing these examples:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "\"Project update complete. Ready for @John Doe review #milestone #completed\""),
+                React.createElement("li", null, "\"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help\""),
+                React.createElement("li", null, "\"Meeting scheduled for tomorrow #meeting #planning\"")))));
+};
+export default Demo;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/main.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Demo from './demo';
+ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(React.StrictMode, null,
+    React.createElement(Demo, null)));

package/dist/src/MentionInput.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import "./MentionInput.css";
+interface User {
+    id: number;
+    name: string;
+}
+interface MentionInputProps {
+    users: User[];
+    placeholder?: string;
+    containerClassName?: string;
+    inputContainerClassName?: string;
+    inputClassName?: string;
+    sendBtnClassName?: string;
+    suggestionListClassName?: string;
+    suggestionItemClassName?: string;
+    attachedImageContainerClassName?: string;
+    attachedImageContainerStyle?: React.CSSProperties;
+    imgClassName?: string;
+    imgStyle?: React.CSSProperties;
+    sendButtonIcon?: ReactNode;
+    attachmentButtonIcon?: ReactNode;
+    onSendMessage?: (obj: {
+        messageText: string;
+        messageHTML: string;
+        userSelectListWithIds: {
+            id: number;
+            name: string;
+        }[];
+        userSelectListName: string[];
+        tags: string[];
+        images?: File[];
+        imageUrl?: string | null;
+    }) => void;
+    suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
+    onImageUpload?: (file: File) => Promise<string>;
+}
+declare const MentionInput: React.FC<MentionInputProps>;
+export default MentionInput;