From 4b5680a16ef9a35f299b2175d37e3aef11413309 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 22 Apr 2023 09:29:01 -0400
Subject: [PATCH] fix: Document hover preview should not show for the same
 document

---
 app/components/Editor.tsx               | 1 +
 app/components/HoverPreview.tsx         | 8 ++++++--
 app/components/HoverPreviewDocument.tsx | 7 +++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/components/Editor.tsx b/app/components/Editor.tsx
index b0e8235dd..195042df2 100644
--- a/app/components/Editor.tsx
+++ b/app/components/Editor.tsx
@@ -350,6 +350,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         )}
         {activeLinkElement && !shareId && (
           <HoverPreview
+            id={props.id}
             element={activeLinkElement}
             onClose={handleLinkInactive}
           />
diff --git a/app/components/HoverPreview.tsx b/app/components/HoverPreview.tsx
index bd15ed46a..2c7fbdbab 100644
--- a/app/components/HoverPreview.tsx
+++ b/app/components/HoverPreview.tsx
@@ -14,11 +14,15 @@ const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;
 
 type Props = {
+  /* The document associated with the editor, if any */
+  id?: string;
+  /* The HTML element that is being hovered over */
   element: HTMLAnchorElement;
+  /* A callback on close of the hover preview */
   onClose: () => void;
 };
 
-function HoverPreviewInternal({ element, onClose }: Props) {
+function HoverPreviewInternal({ element, id, onClose }: Props) {
   const { documents } = useStores();
   const slug = parseDocumentSlug(element.href);
   const [isVisible, setVisible] = React.useState(false);
@@ -104,7 +108,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
         aria-hidden
       >
         <div ref={cardRef}>
-          <HoverPreviewDocument url={element.href}>
+          <HoverPreviewDocument url={element.href} id={id}>
             {(content: React.ReactNode) =>
               isVisible ? (
                 <Animate>
diff --git a/app/components/HoverPreviewDocument.tsx b/app/components/HoverPreviewDocument.tsx
index a4c6238c7..874a5cb1e 100644
--- a/app/components/HoverPreviewDocument.tsx
+++ b/app/components/HoverPreviewDocument.tsx
@@ -9,11 +9,14 @@ import Editor from "~/components/Editor";
 import useStores from "~/hooks/useStores";
 
 type Props = {
+  /* The document associated with the editor, if any */
+  id?: string;
+  /* The URL we want a preview for */
   url: string;
   children: (content: React.ReactNode) => React.ReactNode;
 };
 
-function HoverPreviewDocument({ url, children }: Props) {
+function HoverPreviewDocument({ url, id, children }: Props) {
   const { documents } = useStores();
   const slug = parseDocumentSlug(url);
 
@@ -22,7 +25,7 @@ function HoverPreviewDocument({ url, children }: Props) {
   }
 
   const document = slug ? documents.getByUrl(slug) : undefined;
-  if (!document) {
+  if (!document || document.id === id) {
     return null;
   }