react-mention-input 1.1.6 → 1.1.8

package/src/ShowMessageCard.css

@@ -1,75 +1,75 @@
-.message-card-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px; /* Space between cards */
-}
-
-.message-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 16px;
-  background-color: #fff;
-  transition: box-shadow 0.2s;
-}
-
-.message-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.message-card-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px; /* Space between header and body */
-}
-
-.message-card-img,
-.message-card-initials {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: bold;
-  color: #fff;
-  background-color: #007bff;
-  text-transform: uppercase;
-  margin-right: 16px;
-}
-.message-card-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.message-card-name {
-  margin: 0;
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 1.2; /* Adjust line height for better spacing */
-}
-
-.message-card-date {
-  margin: 0;
-  font-size: 14px;
-  color: #888;
-  line-height: 1.2; /* Adjust line height for better spacing */
-}
-
-.message-card-body {
-  margin-top: 8px; /* Space between header and comment */
-}
-
-.message-card-comment {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.5; /* Optimal line height for readability */
-}
-.mention-highlight {
-  background-color: #e0f7fa;
-  color: #007bff;
-  padding: 2px 4px;
-  border-radius: 4px;
+.message-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px; /* Space between cards */
+}
+
+.message-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #fff;
+  transition: box-shadow 0.2s;
+}
+
+.message-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.message-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px; /* Space between header and body */
+}
+
+.message-card-img,
+.message-card-initials {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007bff;
+  text-transform: uppercase;
+  margin-right: 16px;
+}
+.message-card-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-card-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-date {
+  margin: 0;
+  font-size: 14px;
+  color: #888;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-body {
+  margin-top: 8px; /* Space between header and comment */
+}
+
+.message-card-comment {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5; /* Optimal line height for readability */
+}
+.mention-highlight {
+  background-color: #e0f7fa;
+  color: #007bff;
+  padding: 2px 4px;
+  border-radius: 4px;
 }

package/src/ShowMessageCard.tsx

@@ -1,167 +1,167 @@
-import React, { CSSProperties, useState, ReactNode } from "react";
-import "./ShowMessageCard.css";
-
-interface MessageCardProps {
-  [key: string]: any; // Support dynamic keys
-}
-
-interface ShowMessageCardProps {
-  data: MessageCardProps[];
-  nameKey?: string; // Custom key for name
-  dateKey?: string; // Custom key for date
-  commentKey?: string; // Custom key for comment
-  imgSrcKey?: string; // Custom key for image source
-  containerClassName?: string; // Class for the outermost container
-  containerStyle?: CSSProperties; // Style for the outermost container
-  cardClassName?: string; // Class for the card
-  cardStyle?: CSSProperties; // Style for the card
-  headerClassName?: string; // Class for the card header
-  headerStyle?: CSSProperties; // Style for the card header
-  imgClassName?: string; // Class for the image
-  imgStyle?: CSSProperties; // Style for the image
-  infoClassName?: string; // Class for the user info container
-  infoStyle?: CSSProperties; // Style for the user info container
-  nameClassName?: string; // Class for the user name
-  nameStyle?: CSSProperties; // Style for the user name
-  dateClassName?: string; // Class for the date
-  dateStyle?: CSSProperties; // Style for the date
-  bodyClassName?: string; // Class for the card body
-  bodyStyle?: CSSProperties; // Style for the card body
-  commentClassName?: string; // Class for the comment text
-  commentStyle?: CSSProperties; // Style for the comment text
-  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
-}
-
-export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
-  data,
-  nameKey = "name",
-  dateKey = "date",
-  commentKey = "comment",
-  imgSrcKey = "imgSrc",
-  containerClassName,
-  containerStyle,
-  cardClassName,
-  cardStyle,
-  headerClassName,
-  headerStyle,
-  imgClassName,
-  imgStyle,
-  infoClassName,
-  infoStyle,
-  nameClassName,
-  nameStyle,
-  dateClassName,
-  dateStyle,
-  bodyClassName,
-  bodyStyle,
-  commentClassName,
-  commentStyle,
-  renderItem, // Custom render function
-}) => {
-  // State to manage initials for images that fail to load
-  const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
-    {}
-  );
-
-  // Handle image load failure
-  const handleImageError = (id: string | number) => {
-    setInitialsState((prevState) => ({
-      ...prevState,
-      [id]: true, // Show initials for the specific card
-    }));
-  };
-
-  // Helper function to generate initials from the name
-  const getInitials = (name: string) => {
-    const nameParts = name.split(" ");
-    const initials = nameParts
-      .map((part) => part[0]?.toUpperCase() || "") // Take the first letter of each part
-      .slice(0, 2) // Limit to 2 letters
-      .join("");
-    return initials;
-  };
-
-  return (
-    <div
-      className={`message-card-container ${containerClassName || ""}`}
-      style={containerStyle}
-    >
-      {data.map((item, index) => {
-        if (renderItem !== undefined) {
-          // Use custom render function if provided
-          return (
-            <React.Fragment key={item.id || index}>
-              {renderItem(item)}
-            </React.Fragment>
-          );
-        }
-
-        const showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
-
-        return (
-          <div
-            key={item.id || index}
-            className={`message-card ${cardClassName || ""}`}
-            style={cardStyle}
-          >
-            <div
-              className={`message-card-header ${headerClassName || ""}`}
-              style={headerStyle}
-            >
-              {showInitials ? (
-                <div
-                  className={`message-card-initials ${imgClassName || ""}`}
-                  style={imgStyle}
-                >
-                  {getInitials(item[nameKey])}
-                </div>
-              ) : (
-                <img
-                  src={item[imgSrcKey]}
-                  alt={item[nameKey]}
-                  className={`message-card-img ${imgClassName || ""}`}
-                  style={imgStyle}
-                  onError={() => handleImageError(item.id || index)} // Pass card id or index
-                />
-              )}
-              <div
-                className={`message-card-info ${infoClassName || ""}`}
-                style={infoStyle}
-              >
-                <h3
-                  className={`message-card-name ${nameClassName || ""}`}
-                  style={nameStyle}
-                >
-                  {item[nameKey]}
-                </h3>
-                <p
-                  className={`message-card-date ${dateClassName || ""}`}
-                  style={dateStyle}
-                >
-                  {item[dateKey]}
-                </p>
-              </div>
-            </div>
-            <div
-              className={`message-card-body ${bodyClassName || ""}`}
-              style={bodyStyle}
-            >
-              {/* <p
-                className={`message-card-comment ${commentClassName || ""}`}
-                style={commentStyle}
-              >
-                {item[commentKey]}
-              </p> */}
-              <p
-  className={`message-card-comment ${commentClassName || ""}`}
-  style={commentStyle}
-  dangerouslySetInnerHTML={{ __html: item[commentKey] }}
-></p>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
+import React, { CSSProperties, useState, ReactNode } from "react";
+import "./ShowMessageCard.css";
+
+interface MessageCardProps {
+  [key: string]: any; // Support dynamic keys
+}
+
+interface ShowMessageCardProps {
+  data: MessageCardProps[];
+  nameKey?: string; // Custom key for name
+  dateKey?: string; // Custom key for date
+  commentKey?: string; // Custom key for comment
+  imgSrcKey?: string; // Custom key for image source
+  containerClassName?: string; // Class for the outermost container
+  containerStyle?: CSSProperties; // Style for the outermost container
+  cardClassName?: string; // Class for the card
+  cardStyle?: CSSProperties; // Style for the card
+  headerClassName?: string; // Class for the card header
+  headerStyle?: CSSProperties; // Style for the card header
+  imgClassName?: string; // Class for the image
+  imgStyle?: CSSProperties; // Style for the image
+  infoClassName?: string; // Class for the user info container
+  infoStyle?: CSSProperties; // Style for the user info container
+  nameClassName?: string; // Class for the user name
+  nameStyle?: CSSProperties; // Style for the user name
+  dateClassName?: string; // Class for the date
+  dateStyle?: CSSProperties; // Style for the date
+  bodyClassName?: string; // Class for the card body
+  bodyStyle?: CSSProperties; // Style for the card body
+  commentClassName?: string; // Class for the comment text
+  commentStyle?: CSSProperties; // Style for the comment text
+  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
+}
+
+export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
+  data,
+  nameKey = "name",
+  dateKey = "date",
+  commentKey = "comment",
+  imgSrcKey = "imgSrc",
+  containerClassName,
+  containerStyle,
+  cardClassName,
+  cardStyle,
+  headerClassName,
+  headerStyle,
+  imgClassName,
+  imgStyle,
+  infoClassName,
+  infoStyle,
+  nameClassName,
+  nameStyle,
+  dateClassName,
+  dateStyle,
+  bodyClassName,
+  bodyStyle,
+  commentClassName,
+  commentStyle,
+  renderItem, // Custom render function
+}) => {
+  // State to manage initials for images that fail to load
+  const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
+    {}
+  );
+
+  // Handle image load failure
+  const handleImageError = (id: string | number) => {
+    setInitialsState((prevState) => ({
+      ...prevState,
+      [id]: true, // Show initials for the specific card
+    }));
+  };
+
+  // Helper function to generate initials from the name
+  const getInitials = (name: string) => {
+    const nameParts = name.split(" ");
+    const initials = nameParts
+      .map((part) => part[0]?.toUpperCase() || "") // Take the first letter of each part
+      .slice(0, 2) // Limit to 2 letters
+      .join("");
+    return initials;
+  };
+
+  return (
+    <div
+      className={`message-card-container ${containerClassName || ""}`}
+      style={containerStyle}
+    >
+      {data.map((item, index) => {
+        if (renderItem !== undefined) {
+          // Use custom render function if provided
+          return (
+            <React.Fragment key={item.id || index}>
+              {renderItem(item)}
+            </React.Fragment>
+          );
+        }
+
+        const showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
+
+        return (
+          <div
+            key={item.id || index}
+            className={`message-card ${cardClassName || ""}`}
+            style={cardStyle}
+          >
+            <div
+              className={`message-card-header ${headerClassName || ""}`}
+              style={headerStyle}
+            >
+              {showInitials ? (
+                <div
+                  className={`message-card-initials ${imgClassName || ""}`}
+                  style={imgStyle}
+                >
+                  {getInitials(item[nameKey])}
+                </div>
+              ) : (
+                <img
+                  src={item[imgSrcKey]}
+                  alt={item[nameKey]}
+                  className={`message-card-img ${imgClassName || ""}`}
+                  style={imgStyle}
+                  onError={() => handleImageError(item.id || index)} // Pass card id or index
+                />
+              )}
+              <div
+                className={`message-card-info ${infoClassName || ""}`}
+                style={infoStyle}
+              >
+                <h3
+                  className={`message-card-name ${nameClassName || ""}`}
+                  style={nameStyle}
+                >
+                  {item[nameKey]}
+                </h3>
+                <p
+                  className={`message-card-date ${dateClassName || ""}`}
+                  style={dateStyle}
+                >
+                  {item[dateKey]}
+                </p>
+              </div>
+            </div>
+            <div
+              className={`message-card-body ${bodyClassName || ""}`}
+              style={bodyStyle}
+            >
+              {/* <p
+                className={`message-card-comment ${commentClassName || ""}`}
+                style={commentStyle}
+              >
+                {item[commentKey]}
+              </p> */}
+              <p
+  className={`message-card-comment ${commentClassName || ""}`}
+  style={commentStyle}
+  dangerouslySetInnerHTML={{ __html: item[commentKey] }}
+></p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+

package/src/index.ts

@@ -1,2 +1,2 @@
-export {default as MentionInput}  from './MentionInput';
-export { ShowMessageCard } from './ShowMessageCard';
+export {default as MentionInput}  from './MentionInput';
+export { ShowMessageCard } from './ShowMessageCard';

package/tsconfig.json

@@ -1,15 +1,15 @@
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "sourceMap": false,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "lib": ["dom", "es6"],  // Ensure karein ki 'es6' included ho
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true
-  }
- 
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "sourceMap": false,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "lib": ["dom", "es6"],  // Ensure karein ki 'es6' included ho
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true
+  }
+ 
 }