From e79897e5cb86db49caff84b7c30f013485d30ed6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 23 Oct 2017 20:13:22 -0700
Subject: [PATCH] Fixes link editing

---
 frontend/components/Editor/Editor.js              |  9 ++++-----
 .../Toolbar/components/DocumentResult.js          |  4 ++--
 .../components/Toolbar/components/LinkToolbar.js  |  7 ++++---
 frontend/components/Icon/NextIcon.js              | 15 +++++++++++++++
 4 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 frontend/components/Icon/NextIcon.js

diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index 659cb4b2..b73d7738 100644
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Editor, Plain } from 'slate';
 import keydown from 'react-keydown';
-import type { Document, State, Editor as EditorType } from './types';
+import type { State, Editor as EditorType } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
 import Flex from 'components/Flex';
 import ClickablePadding from './components/ClickablePadding';
@@ -76,10 +76,10 @@ type KeyData = {
 
   onChange = (state: State) => {
     this.setState({ state });
-  };
 
-  onDocumentChange = (document: Document, state: State) => {
-    this.props.onChange(Markdown.serialize(state));
+    if (this.state.state !== state) {
+      this.props.onChange(Markdown.serialize(state));
+    }
   };
 
   handleDrop = async (ev: SyntheticEvent) => {
@@ -205,7 +205,6 @@ type KeyData = {
             state={this.state.state}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
-            onDocumentChange={this.onDocumentChange}
             onSave={onSave}
             readOnly={readOnly}
           />
diff --git a/frontend/components/Editor/components/Toolbar/components/DocumentResult.js b/frontend/components/Editor/components/Toolbar/components/DocumentResult.js
index 8351681d..7d4b157b 100644
--- a/frontend/components/Editor/components/Toolbar/components/DocumentResult.js
+++ b/frontend/components/Editor/components/Toolbar/components/DocumentResult.js
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { fontWeight, color } from 'styles/constants';
 import Document from 'models/Document';
-import GoToIcon from 'components/Icon/GoToIcon';
+import NextIcon from 'components/Icon/NextIcon';
 
 type Props = {
   innerRef?: Function,
@@ -14,7 +14,7 @@ type Props = {
 function DocumentResult({ document, ...rest }: Props) {
   return (
     <ListItem {...rest} href="">
-      <i><GoToIcon light /></i>
+      <i><NextIcon light /></i>
       {document.title}
     </ListItem>
   );
diff --git a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
index 01004834..c7b38bb2 100644
--- a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
+++ b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
@@ -114,9 +114,10 @@ class LinkToolbar extends Component {
     const { state } = this.props;
     const transform = state.transform();
 
-    if (state.selection.isExpanded) {
+    if (href) {
+      transform.setInline({ type: 'link', data: { href } });
+    } else {
       transform.unwrapInline('link');
-      if (href) transform.wrapInline({ type: 'link', data: { href } });
     }
 
     this.props.onChange(transform.apply());
@@ -179,7 +180,7 @@ class LinkToolbar extends Component {
 }
 
 const SearchResults = styled.div`
-  background: rgba(34, 34, 34, .95);
+  background: #2F3336;
   position: absolute;
   top: 100%;
   width: 100%;
diff --git a/frontend/components/Icon/NextIcon.js b/frontend/components/Icon/NextIcon.js
new file mode 100644
index 00000000..ab9144dc
--- /dev/null
+++ b/frontend/components/Icon/NextIcon.js
@@ -0,0 +1,15 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function NextIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <path
+        d="M9.29289322,16.2928932 C8.90236893,16.6834175 8.90236893,17.3165825 9.29289322,17.7071068 C9.68341751,18.0976311 10.3165825,18.0976311 10.7071068,17.7071068 L15.7071068,12.7071068 C16.0976311,12.3165825 16.0976311,11.6834175 15.7071068,11.2928932 L10.7071068,6.29289322 C10.3165825,5.90236893 9.68341751,5.90236893 9.29289322,6.29289322 C8.90236893,6.68341751 8.90236893,7.31658249 9.29289322,7.70710678 L13.5857864,12 L9.29289322,16.2928932 Z"
+        id="path-1"
+      />
+    </Icon>
+  );
+}