added button to delete a link

2 files changed, 28 insertions, 11 deletions

diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index 6aac39f45..154b4abe3 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -10,6 +10,21 @@
     margin-bottom: 6px;
 }
 
+.linKEditor-info {
+    border-bottom: 0.5px solid $light-color-secondary; 
+    padding-bottom: 6px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .linkEditor-delete {
+        width: 20px;
+        height: 20px;
+        margin-left: 6px;
+        padding: 0;
+    }
+}
+
 .linkEditor-groupsLabel {
     display: flex;
     justify-content: space-between;
@@ -23,12 +38,6 @@
     }
 }
 
-.linkEditor-linkedTo {
-    border-bottom: 0.5px solid $light-color-secondary; 
-    padding-bottom: 6px;
-    margin-bottom: 6px;
-}
-
 .linkEditor-group {
     background-color: $light-color-secondary; 
     padding: 6px;
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 484682c22..29ead7388 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -7,14 +7,12 @@ import { Doc } from "../../../new_fields/Doc";
 import { LinkManager } from "../../util/LinkManager";
 import { Docs } from "../../documents/Documents";
 import { Utils } from "../../../Utils";
-import { faArrowLeft, faEllipsisV, faTable } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft, faEllipsisV, faTable, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SetupDrag } from "../../util/DragManager";
 
-library.add(faArrowLeft);
-library.add(faEllipsisV);
-library.add(faTable);
+library.add(faArrowLeft, faEllipsisV, faTable, faTrash);
 
 
 interface GroupTypesDropdownProps {
@@ -163,6 +161,13 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     }
 
     @action
+    deleteLink = (): void => {
+        let index = LinkManager.Instance.allLinks.indexOf(this.props.linkDoc);
+        LinkManager.Instance.allLinks.splice(index, 1);
+        this.props.showLinks();
+    }
+
+    @action
     addGroup = (): void => {
         // new group only gets added if there is not already a group with type "new group"
         let index = Array.from(this._groups.values()).findIndex(groupDoc => {
@@ -324,7 +329,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         return (
             <div className="linkEditor">
                 <button className="linkEditor-back" onPointerDown={() => this.props.showLinks()}><FontAwesomeIcon icon="arrow-left" size="sm" /></button>
-                <p className="linkEditor-linkedTo">editing link to: <b>{destination.proto!.title}</b></p>
+                <div className="linkEditor-info">
+                    <p className="linkEditor-linkedTo">editing link to: <b>{destination.proto!.title}</b></p>
+                    <button className="linkEditor-delete" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
+                </div>
                 <div className="linkEditor-groupsLabel">
                     <b>Relationships:</b>
                     <button onClick={() => this.addGroup()} title="Add Group">+</button>