feat: Backlinks (#979)

* feat: backlinks

* feat: add backlinkDocumentId to documents.list

* chore: refactor
fix: create and delete backlink handling

* fix: guard against self links

* feat: basic frontend
fix: race condition

* styling

* test: fix parse ids

* self review

* linting

* feat: Improved link styling

* fix: Increase clickable area at bottom of doc / between references

* perf: global styles are SLOW

app/components/ClickablePadding.js

@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 
 const ClickablePadding = styled.div`
-  min-height: 6em;
+  min-height: 10em;
   cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
   ${({ grow }) => grow && `flex-grow: 100;`};
 `;

app/components/DocumentPreview/DocumentPreview.js

@@ -2,14 +2,13 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import Document from 'models/Document';
+import { StarredIcon } from 'outline-icons';
 import styled, { withTheme } from 'styled-components';
-import { darken } from 'polished';
 import Flex from 'shared/components/Flex';
 import Highlight from 'components/Highlight';
-import { StarredIcon } from 'outline-icons';
-import PublishingInfo from './components/PublishingInfo';
+import PublishingInfo from 'components/PublishingInfo';
 import DocumentMenu from 'menus/DocumentMenu';
+import Document from 'models/Document';
 
 type Props = {
   document: Document,
@@ -45,8 +44,8 @@ const StyledDocumentMenu = styled(DocumentMenu)`
 
 const DocumentLink = styled(Link)`
   display: block;
-  margin: 0 -16px;
-  padding: 10px 16px;
+  margin: 8px -8px;
+  padding: 6px 8px;
   border-radius: 8px;
   border: 2px solid transparent;
   max-height: 50vh;
@@ -62,7 +61,6 @@ const DocumentLink = styled(Link)`
   &:active,
   &:focus {
     background: ${props => props.theme.listItemHoverBackground};
-    border: 2px solid ${props => props.theme.listItemHoverBorder};
     outline: none;
 
     ${StyledStar}, ${StyledDocumentMenu} {
@@ -73,10 +71,6 @@ const DocumentLink = styled(Link)`
       }
     }
   }
-
-  &:focus {
-    border: 2px solid ${props => darken(0.5, props.theme.listItemHoverBorder)};
-  }
 `;
 
 const Heading = styled.h3`

app/components/Editor/Editor.js

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { Redirect } from 'react-router-dom';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { withTheme } from 'styled-components';
+import { lighten } from 'polished';
+import styled, { withTheme } from 'styled-components';
 import RichMarkdownEditor from 'rich-markdown-editor';
+import Placeholder from 'rich-markdown-editor/lib/components/Placeholder';
 import { uploadFile } from 'utils/uploadFile';
 import isInternalUrl from 'utils/isInternalUrl';
 import Tooltip from 'components/Tooltip';
@@ -79,7 +81,7 @@ class Editor extends React.Component<Props> {
     if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
 
     return (
-      <RichMarkdownEditor
+      <StyledEditor
         ref={this.props.forwardedRef}
         uploadImage={this.onUploadImage}
         onClickLink={this.onClickLink}
@@ -92,6 +94,38 @@ class Editor extends React.Component<Props> {
   }
 }
 
+const StyledEditor = styled(RichMarkdownEditor)`
+  justify-content: start;
+
+  > div {
+    transition: ${props => props.theme.backgroundTransition};
+  }
+
+  p {
+    ${Placeholder} {
+      visibility: hidden;
+    }
+  }
+  p:nth-child(2):last-child {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  p {
+    a {
+      color: ${props => props.theme.link};
+      border-bottom: 1px solid ${props => lighten(0.5, props.theme.link)};
+      font-weight: 500;
+
+      &:hover {
+        border-bottom: 1px solid ${props => props.theme.link};
+        text-decoration: none;
+      }
+    }
+  }
+`;
+
 const EditorTooltip = props => <Tooltip offset={8} {...props} />;
 
 export default withTheme(

app/components/PathToDocument.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { darken } from 'polished';
 import styled from 'styled-components';
 import { GoToIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
@@ -92,13 +91,8 @@ const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
   &:active,
   &:focus {
     background: ${props => props.theme.listItemHoverBackground};
-    border: 2px solid ${props => props.theme.listItemHoverBorder};
     outline: none;
   }
-
-  &:focus {
-    border: 2px solid ${props => darken(0.5, props.theme.listItemHoverBorder)};
-  }
 `;
 
 export default PathToDocument;

app/components/Tooltip.js

@@ -201,13 +201,21 @@ type Props = {
   offset?: number,
 };
 
-const Tooltip = function({ offset = 0, ...rest }: Props) {
-  return (
-    <React.Fragment>
-      <GlobalStyles offset={offset} />
-      <TooltipTrigger {...rest} />
-    </React.Fragment>
-  );
-};
+class Tooltip extends React.Component<Props> {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { offset = 0, ...rest } = this.props;
+
+    return (
+      <React.Fragment>
+        <GlobalStyles offset={offset} />
+        <TooltipTrigger {...rest} />
+      </React.Fragment>
+    );
+  }
+}
 
 export default Tooltip;

app/scenes/Document/Document.js

@@ -22,6 +22,7 @@ import { emojiToUrl } from 'utils/emoji';
 import Header from './components/Header';
 import DocumentMove from './components/DocumentMove';
 import Branding from './components/Branding';
+import Backlinks from './components/Backlinks';
 import ErrorBoundary from 'components/ErrorBoundary';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -415,6 +416,12 @@ class DocumentScene extends React.Component<Props> {
                 ui={this.props.ui}
                 schema={schema}
               />
+              {!this.isEditing && (
+                <Backlinks
+                  documents={this.props.documents}
+                  document={document}
+                />
+              )}
             </MaxWidth>
           </Container>
         </Container>

app/scenes/Document/components/Backlink.js

@@ -0,0 +1,68 @@
+// @flow
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import PublishingInfo from 'components/PublishingInfo';
+import Document from 'models/Document';
+
+type Props = {
+  document: Document,
+  anchor: string,
+  showCollection?: boolean,
+  ref?: *,
+};
+
+const DocumentLink = styled(Link)`
+  display: block;
+  margin: 0 -8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  max-height: 50vh;
+  min-width: 100%;
+  overflow: hidden;
+  position: relative;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: ${props => props.theme.listItemHoverBackground};
+    outline: none;
+  }
+`;
+
+const Title = styled.h3`
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+`;
+
+@observer
+class Backlink extends React.Component<Props> {
+  render() {
+    const { document, showCollection, anchor, ...rest } = this.props;
+
+    return (
+      <DocumentLink
+        to={{
+          pathname: document.url,
+          hash: `d-${anchor}`,
+          state: { title: document.title },
+        }}
+        {...rest}
+      >
+        <Title>{document.title}</Title>
+        <PublishingInfo document={document} showCollection={showCollection} />
+      </DocumentLink>
+    );
+  }
+}
+
+export default Backlink;

app/scenes/Document/components/Backlinks.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import Fade from 'components/Fade';
+import Subheading from 'components/Subheading';
+import DocumentsStore from 'stores/DocumentsStore';
+import Document from 'models/Document';
+import Backlink from './Backlink';
+
+type Props = {
+  document: Document,
+  documents: DocumentsStore,
+};
+
+@observer
+class Backlinks extends React.Component<Props> {
+  componentDidMount() {
+    this.props.documents.fetchBacklinks(this.props.document.id);
+  }
+
+  render() {
+    const { documents, document } = this.props;
+    const backlinks = documents.getBacklinedDocuments(document.id);
+    const showBacklinks = !!backlinks.length;
+
+    return (
+      showBacklinks && (
+        <Fade>
+          <Subheading>Referenced By</Subheading>
+          {backlinks.map(backlinkedDocument => (
+            <Backlink
+              anchor={document.urlId}
+              key={backlinkedDocument.id}
+              document={backlinkedDocument}
+              showCollection={
+                backlinkedDocument.collectionId !== document.collectionId
+              }
+            />
+          ))}
+        </Fade>
+      )
+    );
+  }
+}
+
+export default Backlinks;

app/scenes/Document/components/Editor.js

@@ -1,8 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
 import Editor from 'components/Editor';
-import Placeholder from 'rich-markdown-editor/lib/components/Placeholder';
 import ClickablePadding from 'components/ClickablePadding';
 import plugins from './plugins';
 
@@ -33,7 +31,7 @@ class DocumentEditor extends React.Component<Props> {
 
     return (
       <React.Fragment>
-        <StyledEditor
+        <Editor
           ref={ref => (this.editor = ref)}
           plugins={plugins}
           {...this.props}
@@ -47,23 +45,4 @@ class DocumentEditor extends React.Component<Props> {
   }
 }
 
-const StyledEditor = styled(Editor)`
-  justify-content: start;
-
-  > div {
-    transition: ${props => props.theme.backgroundTransition};
-  }
-
-  p {
-    ${Placeholder} {
-      visibility: hidden;
-    }
-  }
-  p:nth-child(2):last-child {
-    ${Placeholder} {
-      visibility: visible;
-    }
-  }
-`;
-
 export default DocumentEditor;

app/stores/DocumentsStore.js

@@ -24,6 +24,7 @@ export default class DocumentsStore extends BaseStore<Document> {
   @observable recentlyViewedIds: string[] = [];
   @observable searchCache: Map<string, SearchResult[]> = new Map();
   @observable starredIds: Map<string, boolean> = new Map();
+  @observable backlinks: Map<string, string[]> = new Map();
 
   constructor(rootStore: RootStore) {
     super(rootStore, Document);
@@ -140,6 +141,28 @@ export default class DocumentsStore extends BaseStore<Document> {
       : undefined;
   }
 
+  @action
+  fetchBacklinks = async (documentId: string): Promise<?(Document[])> => {
+    const res = await client.post(`/documents.list`, {
+      backlinkDocumentId: documentId,
+    });
+    invariant(res && res.data, 'Document list not available');
+    const { data } = res;
+    runInAction('DocumentsStore#fetchBacklinks', () => {
+      data.forEach(this.add);
+      this.backlinks.set(documentId, data.map(doc => doc.id));
+    });
+  };
+
+  getBacklinedDocuments(documentId: string): Document[] {
+    const documentIds = this.backlinks.get(documentId) || [];
+    return orderBy(
+      compact(documentIds.map(id => this.data.get(id))),
+      'updatedAt',
+      'desc'
+    );
+  }
+
   @action
   fetchNamedPage = async (
     request: string = 'list',