switch to plain markdown

package.json

@@ -84,7 +84,6 @@
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "rehype-raw": "^6.1.1",
-    "turndown": "^7.2.0",
     "use-keyboard-shortcut": "^1.1.6",
     "xlsx": "^0.18.5"
   },

src/Components/Common/RichTextEditor/MarkdownPreview.tsx

@@ -38,17 +38,20 @@ const MarkdownPreview = ({
   }
 
   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(/@(\w+)/g, (_, username) => {
+      const user = MentionedUsers[username];
+      if (user) {
+        return `<a href="/user/profile/${username}" data-username="${username}">@${username}</a>`;
+      } else {
+        return `@${username}`;
+      }
+    })
     .replace(/~~(.*?)~~/g, (_, text) => `<del>${text}</del>`);
 
   const CustomLink: React.FC<CustomLinkProps> = (props) => {
     const [isHovered, setIsHovered] = useState(false);
 
-    if (props.className?.includes("user-mention") && props["data-username"]) {
+    if (props["data-username"]) {
       const username = props["data-username"];
       return (
         <span

src/Components/Common/RichTextEditor/MentionDropdown.tsx

@@ -6,7 +6,7 @@ import useSlug from "../../../Common/hooks/useSlug";
 interface MentionsDropdownProps {
   onSelect: (user: { id: string; username: string }) => void;
   position: { top: number; left: number };
-  editorRef: React.RefObject<HTMLDivElement>;
+  editorRef: React.RefObject<HTMLTextAreaElement>;
   filter: string;
 }
 
@@ -28,10 +28,9 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
 
   useEffect(() => {
     if (editorRef.current) {
-      const editorRect = editorRef.current.getBoundingClientRect();
       setDropdownPosition({
-        top: position.top - editorRect.top + editorRef.current.scrollTop,
-        left: position.left - editorRect.left,
+        top: position.top,
+        left: position.left,
       });
     }
   }, [position, editorRef]);
@@ -83,7 +82,7 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
 
   return (
     <div
-      className="absolute z-10 max-h-36 w-64 overflow-y-scroll rounded-md bg-white text-sm shadow-lg"
+      className="absolute z-10 max-h-36 w-64 overflow-y-auto rounded-md bg-white text-sm shadow-lg"
       style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
     >
       {loading && <div className="p-2 text-gray-500">Loading...</div>}