fix: Document search results in editor now show full path

closes #3007

app/editor/components/LinkEditor.tsx

@@ -337,7 +337,7 @@ class LinkEditor extends React.Component<Props, State> {
                 title={result.title}
                 subtitle={result.subtitle}
                 icon={<DocumentIcon color="currentColor" />}
-                onMouseOver={() => this.handleFocusLink(index)}
+                onPointerMove={() => this.handleFocusLink(index)}
                 onClick={this.handleSelectLink(result.url, result.title)}
                 selected={index === selectedIndex}
               />
@@ -349,7 +349,7 @@ class LinkEditor extends React.Component<Props, State> {
                 title={suggestedLinkTitle}
                 subtitle={dictionary.createNewDoc}
                 icon={<PlusIcon color="currentColor" />}
-                onMouseOver={() => this.handleFocusLink(results.length)}
+                onPointerMove={() => this.handleFocusLink(results.length)}
                 onClick={() => {
                   this.handleCreateLink(suggestedLinkTitle);
 
@@ -382,13 +382,14 @@ const SearchResults = styled.ol`
   width: 100%;
   height: auto;
   left: 0;
-  padding: 4px 8px 8px;
+  padding: 0;
   margin: 0;
   margin-top: -3px;
   margin-bottom: 0;
   border-radius: 0 0 4px 4px;
   overflow-y: auto;
-  max-height: 25vh;
+  overscroll-behavior: none;
+  max-height: 260px;
 
   @media (hover: none) and (pointer: coarse) {
     position: fixed;

app/editor/components/LinkSearchResult.tsx

@@ -2,13 +2,11 @@ import * as React from "react";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
 
-type Props = {
-  onClick: (event: React.MouseEvent) => void;
-  onMouseOver: (event: React.MouseEvent) => void;
+type Props = React.HTMLAttributes<HTMLLIElement> & {
   icon: React.ReactNode;
   selected: boolean;
-  title: string;
-  subtitle?: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
 };
 
 function LinkSearchResult({ title, subtitle, selected, icon, ...rest }: Props) {
@@ -55,7 +53,7 @@ const ListItem = styled.li<{
   display: flex;
   align-items: center;
   padding: 8px;
-  border-radius: 2px;
+  border-radius: 4px;
   color: ${(props) => props.theme.toolbarItem};
   background: ${(props) =>
     props.selected ? props.theme.toolbarHoverBackground : "transparent"};

app/scenes/Document/components/DataLoader.tsx

@@ -11,6 +11,7 @@ import Document from "~/models/Document";
 import Revision from "~/models/Revision";
 import Error404 from "~/scenes/Error404";
 import ErrorOffline from "~/scenes/ErrorOffline";
+import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import withStores from "~/components/withStores";
 import { NavigationNode } from "~/types";
 import { NotFoundError, OfflineError } from "~/utils/errors";
@@ -138,7 +139,7 @@ class DataLoader extends React.Component<Props> {
 
         return {
           title: document.title,
-          subtitle: `Updated ${time}`,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
           url: document.url,
         };
       }),