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

shared/styles/theme.js

@@ -22,6 +22,7 @@ const colors = {
   black50: 'rgba(0, 0, 0, 0.50)',
   primary: '#1AB6FF',
   yellow: '#FBCA04',
+  warmGrey: '#EDF2F7',
 
   danger: '#D0021B',
   warning: '#f08a24',
@@ -44,7 +45,6 @@ export const base = {
   fontFamily:
     "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
   fontWeight: 400,
-  link: colors.primary,
   backgroundTransition: 'background 100ms ease-in-out',
   zIndex: 100,
 };
@@ -53,12 +53,13 @@ export const light = {
   ...base,
   background: colors.white,
 
+  link: colors.almostBlack,
   text: colors.almostBlack,
   textSecondary: colors.slateDark,
   textTertiary: colors.slate,
   placeholder: '#B1BECC',
 
-  sidebarBackground: 'rgb(244, 247, 250)',
+  sidebarBackground: colors.warmGrey,
   sidebarItemBackground: colors.black05,
   sidebarText: 'rgb(78, 92, 110)',
 
@@ -69,8 +70,7 @@ export const light = {
   inputBorder: colors.slateLight,
   inputBorderFocused: colors.slate,
 
-  listItemHoverBackground: colors.smoke,
-  listItemHoverBorder: colors.smokeDark,
+  listItemHoverBackground: colors.warmGrey,
 
   toolbarBackground: colors.lightBlack,
   toolbarInput: colors.white10,
@@ -104,6 +104,7 @@ export const dark = {
   ...base,
   background: colors.almostBlack,
 
+  link: colors.almostWhite,
   text: colors.almostWhite,
   textSecondary: lighten(0.2, colors.slate),
   textTertiary: colors.slate,
@@ -121,7 +122,6 @@ export const dark = {
   inputBorderFocused: colors.slate,
 
   listItemHoverBackground: colors.black50,
-  listItemHoverBorder: colors.black50,
 
   toolbarBackground: colors.white,
   toolbarInput: colors.black10,

shared/utils/parseDocumentIds.js

@@ -0,0 +1,29 @@
+// @flow
+import MarkdownSerializer from 'slate-md-serializer';
+const Markdown = new MarkdownSerializer();
+
+export default function parseDocumentIds(text: string) {
+  const value = Markdown.deserialize(text);
+  let links = [];
+
+  function findLinks(node) {
+    if (node.type === 'link') {
+      const href = node.data.get('href');
+
+      if (href.startsWith('/doc')) {
+        const tokens = href.replace(/\/$/, '').split('/');
+        const lastToken = tokens[tokens.length - 1];
+        links.push(lastToken);
+      }
+    }
+
+    if (!node.nodes) {
+      return;
+    }
+
+    node.nodes.forEach(findLinks);
+  }
+
+  findLinks(value.document);
+  return links;
+}

shared/utils/parseDocumentIds.test.js

@@ -0,0 +1,20 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import parseDocumentIds from './parseDocumentIds';
+
+it('should return an array of document ids', () => {
+  expect(parseDocumentIds(`# Header`).length).toBe(0);
+  expect(
+    parseDocumentIds(`# Header
+  
+  [title](/doc/test-456733)
+  `)[0]
+  ).toBe('test-456733');
+});
+
+it('should not return non document links', () => {
+  expect(parseDocumentIds(`[title](http://www.google.com)`).length).toBe(0);
+});
+
+it('should not return non document relative links', () => {
+  expect(parseDocumentIds(`[title](/developers)`).length).toBe(0);
+});