Rich text editor component ( markdown + mentions + fileuploads)

package.json

@@ -98,6 +98,7 @@
     "redux-thunk": "^2.4.2",
     "rehype-raw": "^6.1.1",
     "rescript-webapi": "^0.8.0",
+    "turndown": "^7.2.0",
     "use-keyboard-shortcut": "^1.1.6",
     "uuid": "^9.0.1",
     "xlsx": "^0.18.5"
@@ -123,6 +124,7 @@
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-qr-reader": "^2.1.7",
     "@types/react-transition-group": "^4.4.10",
+    "@types/turndown": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.6.0",

src/Components/Common/FilePreviewDialog.tsx

@@ -33,16 +33,17 @@ type FilePreviewProps = {
 };
 
 const previewExtensions = [
-  ".html",
-  ".htm",
-  ".pdf",
-  ".mp4",
-  ".webm",
-  ".jpg",
-  ".jpeg",
-  ".png",
-  ".gif",
-  ".webp",
+  "html",
+  "htm",
+  "pdf",
+  "mp4",
+  "mp3",
+  "webm",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
 ];
 
 const FilePreviewDialog = (props: FilePreviewProps) => {

src/Components/Common/MarkdownPreview.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { UserModel } from "../Users/models";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+
+interface UserCardProps {
+  user: UserModel;
+}
+
+const UserCard: React.FC<UserCardProps> = ({ user }) => (
+  <div className="flex w-64 items-center space-x-3 rounded-lg bg-white p-3 shadow-lg">
+    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
+      {user.first_name[0]}
+    </div>
+    <div className="space-y-0">
+      <h3 className="text-sm font-semibold text-gray-800">
+        {user.first_name} {user.last_name}
+      </h3>
+      <p className="text-xs text-gray-500">@{user.username}</p>
+      <p className="text-xs text-gray-500">{user.user_type}</p>
+    </div>
+  </div>
+);
+
+const MarkdownPreview: React.FC<{ markdown: string }> = ({ markdown }) => {
+  const [userCache, setUserCache] = useState<Record<string, UserModel>>({});
+  const facilityId = "81092ced-8720-44cb-b4c5-3f0ad0540153";
+
+  const { data: facilityUsers } = useQuery(routes.getFacilityUsers, {
+    pathParams: { facility_id: facilityId },
+  });
+
+  useEffect(() => {
+    if (facilityUsers?.results) {
+      const newCache: Record<string, UserModel> = {};
+      facilityUsers.results.forEach((user) => {
+        if (user.username) {
+          newCache[user.username] = user as UserModel;
+        }
+      });
+      setUserCache(newCache);
+    }
+  }, [facilityUsers]);
+
+  const processedMarkdown = markdown
+    .replace(
+      /!\[mention_user\]\(user_id:(\d+), username:([^)]+)\)/g,
+      (_, userId, username) =>
+        `<a class="user-mention" href="/user/profile/${username}" data-user-id="${userId}" data-username="${username}">@${username}</a>`,
+    )
+    .replace(/~(.*?)~/g, (_, text) => `<del>${text}</del>`);
+
+  const CustomLink: React.FC<any> = (props) => {
+    if (props.className?.includes("user-mention")) {
+      const username = props["data-username"];
+      return (
+        <span className="group relative inline-block">
+          <a
+            {...props}
+            className="cursor-pointer rounded bg-blue-100 px-1 font-normal text-slate-800 no-underline hover:underline"
+          />
+          {userCache[username] && (
+            <div className="tooltip-text invisible absolute left-1/2 z-10 mt-1 -translate-x-1/2 opacity-0 transition-opacity duration-300 ease-in-out group-hover:visible group-hover:opacity-100">
+              <UserCard user={userCache[username]} />
+            </div>
+          )}
+        </span>
+      );
+    }
+    return <a {...props} />;
+  };
+
+  return (
+    <ReactMarkdown
+      className="prose"
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: CustomLink,
+      }}
+    >
+      {processedMarkdown}
+    </ReactMarkdown>
+  );
+};
+
+export default MarkdownPreview;

src/Components/Common/MentionDropdown.tsx

@@ -0,0 +1,33 @@
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+
+const MentionsDropdown: React.FC<{
+  onSelect: (user: any) => void;
+  position: { top: number; left: number };
+}> = ({ onSelect, position }) => {
+  const facilityId = "81092ced-8720-44cb-b4c5-3f0ad0540153";
+  const { data } = useQuery(routes.getFacilityUsers, {
+    pathParams: { facility_id: facilityId },
+  });
+
+  const users = data?.results || [];
+
+  return (
+    <div
+      className="absolute z-10 w-64 rounded-md bg-white shadow-lg"
+      style={{ top: position.top, left: position.left }}
+    >
+      {users.map((user) => (
+        <div
+          key={user.id}
+          className="cursor-pointer p-2 hover:bg-gray-100"
+          onClick={() => onSelect(user)}
+        >
+          {user.username}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MentionsDropdown;