feat: Document hover cards (#1346)

* stash

* refactor

* refactor, styling

* tweaks

* pointer

* styling

* fi: Hide when printing

* fix: No hover cards on shared links

* remove suppressions no longer needed

* fix: Don't show hover cards when editing, they get in the way

* fix: Prevent hover card from going off rhs edge of screen

* fix: Remount hover card when changing between links

* fix: allow one part domains in links (#1350)

* allow one part domains in links

* no TLD when only one part domain

* return null for parseDomain of empty string

* fix fiddly hover preview behavior

* WIP

* refactor hover preview

* fix: Non-rounded bottom corners

* fix: Fixes an edgecase where mounting the nested editor in hovercard causesdocument to scroll if there is a hash in the url

* fix: Incorrect document preview rendering

* lint

Co-authored-by: Nan Yu <thenanyu@gmail.com>
Co-authored-by: Nan Yu <nan@getoutline.com>

app/components/HoverPreviewDocument.js

@@ -0,0 +1,50 @@
+// @flow
+import * as React from "react";
+import { inject, observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import Editor from "components/Editor";
+import styled from "styled-components";
+import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentIds";
+import DocumentsStore from "stores/DocumentsStore";
+import DocumentMeta from "components/DocumentMeta";
+
+type Props = {
+  url: string,
+  documents: DocumentsStore,
+  children: React.Node => React.Node,
+};
+
+function HoverPreviewDocument({ url, documents, children }: Props) {
+  const slug = parseDocumentSlugFromUrl(url);
+
+  documents.prefetchDocument(slug, {
+    prefetch: true,
+  });
+
+  const document = slug ? documents.getByUrl(slug) : undefined;
+  if (!document) return null;
+
+  return children(
+    <Content to={document.url}>
+      <Heading>{document.title}</Heading>
+      <DocumentMeta isDraft={document.isDraft} document={document} />
+
+      <Editor
+        key={document.id}
+        defaultValue={document.getSummary()}
+        disableEmbeds
+        readOnly
+      />
+    </Content>
+  );
+}
+
+const Content = styled(Link)`
+  cursor: pointer;
+`;
+
+const Heading = styled.h2`
+  margin: 0 0 0.75em;
+`;
+
+export default inject("documents")(observer(HoverPreviewDocument));