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/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;