From 6ba8aeaa6217b41fe303aba3085a258c561b3253 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 10 Dec 2025 22:07:33 +0400
Subject: [PATCH] fix placeholder and positioning for bsky mention popover

---
 .../publish/BskyPostEditorProsemirror.tsx     |  22 ++-
 components/Mention.tsx                        | 133 +++++++++---------
 2 files changed, 85 insertions(+), 70 deletions(-)

diff --git a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
index 37c62312..379208f5 100644
--- a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
+++ b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
@@ -148,10 +148,23 @@ export function BlueskyPostEditorProsemirror(props: {
     const pos = view.state.selection.from;
     setMentionInsertPos(pos);
     const coords = view.coordsAtPos(pos - 1);
-    setMentionCoords({
-      top: coords.bottom + window.scrollY,
-      left: coords.left + window.scrollX,
-    });
+
+    // Get coordinates relative to the positioned parent container
+    const editorEl = view.dom;
+    const container = editorEl.closest(".relative") as HTMLElement | null;
+
+    if (container) {
+      const containerRect = container.getBoundingClientRect();
+      setMentionCoords({
+        top: coords.bottom - containerRect.top,
+        left: coords.left - containerRect.left,
+      });
+    } else {
+      setMentionCoords({
+        top: coords.bottom,
+        left: coords.left,
+      });
+    }
     setMentionOpen(true);
   }, []);
 
@@ -270,6 +283,7 @@ export function BlueskyPostEditorProsemirror(props: {
         view={viewRef}
         onSelect={handleMentionSelect}
         coords={mentionCoords}
+        placeholder="Search people..."
       />
       {editorState?.doc.textContent.length === 0 && (
         <div className="italic text-tertiary absolute top-0 left-0 pointer-events-none">
diff --git a/components/Mention.tsx b/components/Mention.tsx
index 2912169e..ee709f21 100644
--- a/components/Mention.tsx
+++ b/components/Mention.tsx
@@ -18,6 +18,7 @@ export function MentionAutocomplete(props: {
   view: React.RefObject<EditorView | null>;
   onSelect: (mention: Mention) => void;
   coords: { top: number; left: number } | null;
+  placeholder?: string;
 }) {
   const [searchQuery, setSearchQuery] = useState("");
   const [noResults, setNoResults] = useState(false);
@@ -207,7 +208,7 @@ export function MentionAutocomplete(props: {
                 placeholder={
                   scope.type === "publication"
                     ? "Search posts..."
-                    : "Search people & publications..."
+                    : props.placeholder ?? "Search people & publications..."
                 }
                 className="flex-1 w-full min-w-0 bg-transparent border-none outline-none text-sm placeholder:text-tertiary"
               />
@@ -219,72 +220,72 @@ export function MentionAutocomplete(props: {
                 No results found
               </div>
             )}
-              <ul className="list-none p-0 text-sm flex flex-col group-data-[side=top]/mention-menu:flex-col-reverse">
-                {sortedSuggestions.map((result, index) => {
-                  const prevResult = sortedSuggestions[index - 1];
-                  const showHeader =
-                    index === 0 ||
-                    (prevResult && prevResult.type !== result.type);
+            <ul className="list-none p-0 text-sm flex flex-col group-data-[side=top]/mention-menu:flex-col-reverse">
+              {sortedSuggestions.map((result, index) => {
+                const prevResult = sortedSuggestions[index - 1];
+                const showHeader =
+                  index === 0 ||
+                  (prevResult && prevResult.type !== result.type);
 
-                  return (
-                    <Fragment
-                      key={result.type === "did" ? result.did : result.uri}
-                    >
-                      {showHeader && (
-                        <>
-                          {index > 0 && (
-                            <hr className="border-border-light mx-1 my-1" />
-                          )}
-                          <div className="text-xs text-tertiary font-bold pt-1 px-2">
-                            {getHeader(result.type, scope)}
-                          </div>
-                        </>
-                      )}
-                      {result.type === "did" ? (
-                        <DidResult
-                          onClick={() => {
-                            props.onSelect(result);
-                            props.onOpenChange(false);
-                          }}
-                          onMouseDown={(e) => e.preventDefault()}
-                          displayName={result.displayName}
-                          handle={result.handle}
-                          avatar={result.avatar}
-                          selected={index === suggestionIndex}
-                        />
-                      ) : result.type === "publication" ? (
-                        <PublicationResult
-                          onClick={() => {
-                            props.onSelect(result);
-                            props.onOpenChange(false);
-                          }}
-                          onMouseDown={(e) => e.preventDefault()}
-                          pubName={result.name}
-                          uri={result.uri}
-                          selected={index === suggestionIndex}
-                          onPostsClick={() => {
-                            handleScopeChange({
-                              type: "publication",
-                              uri: result.uri,
-                              name: result.name,
-                            });
-                          }}
-                        />
-                      ) : (
-                        <PostResult
-                          onClick={() => {
-                            props.onSelect(result);
-                            props.onOpenChange(false);
-                          }}
-                          onMouseDown={(e) => e.preventDefault()}
-                          title={result.title}
-                          selected={index === suggestionIndex}
-                        />
-                      )}
-                    </Fragment>
-                  );
-                })}
-              </ul>
+                return (
+                  <Fragment
+                    key={result.type === "did" ? result.did : result.uri}
+                  >
+                    {showHeader && (
+                      <>
+                        {index > 0 && (
+                          <hr className="border-border-light mx-1 my-1" />
+                        )}
+                        <div className="text-xs text-tertiary font-bold pt-1 px-2">
+                          {getHeader(result.type, scope)}
+                        </div>
+                      </>
+                    )}
+                    {result.type === "did" ? (
+                      <DidResult
+                        onClick={() => {
+                          props.onSelect(result);
+                          props.onOpenChange(false);
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        displayName={result.displayName}
+                        handle={result.handle}
+                        avatar={result.avatar}
+                        selected={index === suggestionIndex}
+                      />
+                    ) : result.type === "publication" ? (
+                      <PublicationResult
+                        onClick={() => {
+                          props.onSelect(result);
+                          props.onOpenChange(false);
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        pubName={result.name}
+                        uri={result.uri}
+                        selected={index === suggestionIndex}
+                        onPostsClick={() => {
+                          handleScopeChange({
+                            type: "publication",
+                            uri: result.uri,
+                            name: result.name,
+                          });
+                        }}
+                      />
+                    ) : (
+                      <PostResult
+                        onClick={() => {
+                          props.onSelect(result);
+                          props.onOpenChange(false);
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        title={result.title}
+                        selected={index === suggestionIndex}
+                      />
+                    )}
+                  </Fragment>
+                );
+              })}
+            </ul>
           </div>
         </Popover.Content>
       </Popover.Portal>
-- 
2.51.2