fix markdown dropdown position

UdaySagar-Git · Dec 4, 2024 · 453042e · 453042e
1 parent 7458c11
commit 453042e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 29 deletions.
diff --git a/src/Utils/textEditor.ts b/src/Utils/textEditor.ts
@@ -20,29 +20,34 @@ export const getCaretInfo = (element: HTMLTextAreaElement) => {
  */
 export const getCaretCoordinates = (element: HTMLTextAreaElement) => {
   const { start } = getCaretInfo(element);
+  const styles = window.getComputedStyle(element);
+  const textareaRect = element.getBoundingClientRect();
+  const mirror = document.createElement("div");
+  mirror.style.cssText = [
+    "position: fixed",
+    "visibility: hidden",
+    `width: ${element.offsetWidth}px`,
+    `white-space: ${styles.whiteSpace}`,
+    `font-family: ${styles.fontFamily}`,
+    `font-size: ${styles.fontSize}`,
+    `line-height: ${styles.lineHeight}`,
+    `padding: ${styles.padding}`,
+    `top: ${window.scrollY + textareaRect.top}px`,
+    `left: ${window.scrollX + textareaRect.left}px`,
+  ].join(";");
 
-  // Create a hidden div to measure text
-  const div = document.createElement("div");
-  const span = document.createElement("span");
+  mirror.textContent = element.value.substring(0, start);
 
-  // Copy textarea styles to div
-  const style = window.getComputedStyle(element);
-  div.style.cssText = style.cssText;
-  div.style.position = "absolute";
-  div.style.visibility = "hidden";
-  div.style.whiteSpace = "pre-wrap";
+  const marker = document.createElement("span");
+  marker.textContent = "I";
+  mirror.appendChild(marker);
+  document.body.appendChild(mirror);
 
-  // Add text content
-  div.textContent = element.value.substring(0, start);
-  span.textContent = "."; // Marker for position
-  div.appendChild(span);
-
-  document.body.appendChild(div);
-  const coordinates = span.getBoundingClientRect();
-  document.body.removeChild(div);
+  const markerRect = marker.getBoundingClientRect();
+  document.body.removeChild(mirror);
 
   return {
-    top: coordinates.top + window.scrollY,
-    left: coordinates.left + window.scrollX,
+    top: markerRect.top - textareaRect.top,
+    left: markerRect.left - textareaRect.left,
   };
 };
diff --git a/src/components/Common/DiscussionNotesEditor.tsx b/src/components/Common/DiscussionNotesEditor.tsx
@@ -95,8 +95,8 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
       if (mentionText.includes(" ")) return;
 
       setMentionFilter(mentionText);
-      const { top, left } = getCaretCoordinates(event.target);
-      setMentionPosition({ top: top + 30, left: left + 10 });
+      const coordinates = getCaretCoordinates(event.target);
+      setMentionPosition(coordinates);
       setShowMentions(true);
     } else {
       setShowMentions(false);
@@ -109,7 +109,9 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
     const cursorPosition = editorRef.current.selectionStart;
     const currentText = editorRef.current.value;
 
-    const newText = `${currentText.slice(0, cursorPosition)}@${currentText.slice(cursorPosition)}`;
+    const newText = `${currentText.slice(0, cursorPosition)}@${currentText.slice(
+      cursorPosition,
+    )}`;
     setText(newText);
 
     requestAnimationFrame(() => {
@@ -119,8 +121,8 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
       const newPosition = cursorPosition + 1;
       editorRef.current.setSelectionRange(newPosition, newPosition);
 
-      const { top, left } = getCaretCoordinates(editorRef.current);
-      setMentionPosition({ top: top + 20, left });
+      const coordinates = getCaretCoordinates(editorRef.current);
+      setMentionPosition(coordinates);
       setShowMentions(true);
     });
   };

diff --git a/src/components/Common/FilePreviewCard.tsx b/src/components/Common/FilePreviewCard.tsx
@@ -61,7 +61,7 @@ export function FilePreviewCard({
             e.stopPropagation();
             onRemove(index);
           }}
-          className="absolute -right-1 -top-1 z-10 h-5 w-5 rounded-full bg-gray-300 text-gray-800 transition-colors duration-200 hover:bg-gray-400 hover:text-white"
+          className="absolute right-0 top-0 z-10 h-5 w-5 rounded-full bg-gray-300 text-gray-800 transition-colors duration-200 hover:bg-gray-400 hover:text-white"
         >
           <CareIcon
             icon="l-times-circle"

diff --git a/src/components/Common/NotePreview.tsx b/src/components/Common/NotePreview.tsx
@@ -3,11 +3,17 @@ import { useEffect, useState } from "react";
 
 import { UserBareMinimum } from "@/components/Users/models";
 
+import { formatDisplayName } from "@/Utils/utils";
+
+import { Avatar } from "./Avatar";
+
 const UserCard = ({ user }: { user: UserBareMinimum }) => (
-  <div className="z-10 flex w-64 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-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="z-10 flex w-56 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-3 shadow-lg">
+    <Avatar
+      name={formatDisplayName(user)}
+      imageUrl={user.read_profile_picture_url}
+      className="h-12 w-12 rounded-full text-black/50"
+    />
     <div className="space-y-0">
       <h3 className="text-sm font-semibold text-gray-800">
         {user.first_name} {user.last_name}