merged with master & cleaned up formatShapePane

7 files changed, 349 insertions, 60 deletions

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index b47c8976e..406a38c26 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -7,34 +7,112 @@
     user-select: none;
 }
 
-.linkEditor-back {
+.linkEditor-button-back {
     margin-bottom: 6px;
+    border-radius: 10px;
+    width: 18px;
+    height: 18px;
+    padding: 0;
 }
 
 .linkEditor-info {
-    border-bottom: 0.5px solid $light-color-secondary; 
-    padding-bottom: 6px;
-    margin-bottom: 6px;
+    //border-bottom: 0.5px solid $light-color-secondary;
+    padding-bottom: 4px;
+    padding-top: 5px;
+    padding-left: 5px;
+    //margin-bottom: 6px;
     display: flex;
     justify-content: space-between;
 
     .linkEditor-linkedTo {
         width: calc(100% - 26px);
+        padding-left: 5px;
+        padding-right: 5px
     }
 }
 
-.linkEditor-button, .linkEditor-addbutton {
+.linkEditor-description {
+    padding-left: 6.5px;
+    padding-right: 6.5px;
+    padding-bottom: 3.5px;
+
+    .linkEditor-description-text {
+        text-decoration-color: grey;
+    }
+
+    .linkEditor-description-input {
+        border: 1px solid grey;
+        border-radius: 4px;
+        background-color: rgb(236, 236, 236);
+        padding-left: 2px;
+        padding-right: 2px;
+        color: grey;
+        text-decoration-color: grey;
+    }
+}
+
+.linkEditor-followingDropdown {
+    padding-left: 6.5px;
+    padding-right: 6.5px;
+    padding-bottom: 3.5px;
+
+    .linkEditor-followingDropdown-dropdown {
+
+        .linkEditor-followingDropdown-header {
+
+            border: 1px solid grey;
+            border-radius: 4px;
+            background-color: rgb(236, 236, 236);
+            padding-left: 2px;
+            padding-right: 2px;
+            color: grey;
+            text-decoration-color: grey;
+
+            .linkEditor-followingDropdown-icon {
+                float: right;
+            }
+        }
+
+        .linkEditor-followingDropdown-optionsList {
+            padding-left: 3px;
+            padding-right: 3px;
+
+            .linkEditor-followingDropdown-option {
+                border: 0.25px dotted grey;
+                background-color: rgb(236, 236, 236);
+                padding-left: 2px;
+                padding-right: 2px;
+                color: grey;
+                text-decoration-color: grey;
+                font-size: 9px;
+
+                &:hover {
+                    background-color: rgb(211, 210, 210);
+                }
+            }
+
+        }
+    }
+
+
+}
+
+
+.linkEditor-button,
+.linkEditor-addbutton {
     width: 18px;
     height: 18px;
     padding: 0;
     // font-size: 12px;
     border-radius: 10px;
 
+
     &:disabled {
         background-color: gray;
     }
 }
-.linkEditor-addbutton{
+
+.linkEditor-addbutton {
     margin-left: 0px;
 }
 
@@ -44,7 +122,7 @@
 }
 
 .linkEditor-group {
-    background-color: $light-color-secondary; 
+    background-color: $light-color-secondary;
     padding: 6px;
     margin: 3px 0;
     border-radius: 3px;
@@ -56,7 +134,7 @@
 
     .linkEditor-group-row-label {
         margin-right: 6px;
-        display:inline-block;
+        display: inline-block;
     }
 
     .linkEditor-metadata-row {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 13b9a2459..014d57ed0 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,14 +1,18 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
+import { Doc, Opt } from "../../../fields/Doc";
 import { StrCast } from "../../../fields/Types";
 import { Utils } from "../../../Utils";
 import { LinkManager } from "../../util/LinkManager";
 import './LinkEditor.scss';
 import React = require("react");
+import { DocumentView } from "../nodes/DocumentView";
+import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
+import { EditableView } from "../EditableView";
+import { RefObject } from "react";
 
 library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus);
 
@@ -281,27 +285,113 @@ interface LinkEditorProps {
 @observer
 export class LinkEditor extends React.Component<LinkEditorProps> {
 
+
+    @observable description = StrCast(LinkManager.currentLink?.description);
+    @observable openDropdown: boolean = false;
+
+    @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default";
+
+
+    //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
+
     @action
     deleteLink = (): void => {
         LinkManager.Instance.deleteLink(this.props.linkDoc);
         this.props.showLinks();
     }
 
+    @action
+    setDescripValue = (value: string) => {
+        if (LinkManager.currentLink) {
+            LinkManager.currentLink.description = value;
+            return true;
+        }
+    }
+
+    @computed
+    get editDescription() {
+        return <div className="linkEditor-description">
+            <div className="linkEditor-description-label">
+                Link Description:</div>
+            <div className="linkEditor-description-input">
+                <EditableView
+                    GetValue={() => StrCast(LinkManager.currentLink?.description)}
+                    SetValue={value => { this.setDescripValue(value); return false; }}
+                    contents={LinkManager.currentLink?.description}
+                    placeholder={"(optional) enter link description"}
+                    color={"rgb(88, 88, 88)"}
+                ></EditableView></div></div>;
+    }
+
+    @action
+    changeDropdown = () => {
+        this.openDropdown = !this.openDropdown;
+    }
+
+    @action
+    changeFollowBehavior = (follow: string) => {
+        this.openDropdown = false;
+        this.followBehavior = follow;
+        this.props.linkDoc.follow = follow;
+    }
+
+    @computed
+    get followingDropdown() {
+        return <div className="linkEditor-followingDropdown">
+            <div className="linkEditor-followingDropdown-label">
+                Follow Behavior:</div>
+            <div className="linkEditor-followingDropdown-dropdown">
+                <div className="linkEditor-followingDropdown-header"
+                    onPointerDown={this.changeDropdown}>
+                    {this.followBehavior}
+                    <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
+                        icon={this.openDropdown ? "chevron-up" : "chevron-down"}
+                        size={"lg"} onPointerDown={this.changeDropdown} />
+                </div>
+                <div className="linkEditor-followingDropdown-optionsList"
+                    style={{ display: this.openDropdown ? "" : "none" }}>
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Default")}>
+                        Default
+                        </div>
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Always open in right tab")}>
+                        Always open in right tab
+                        </div>
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Always open in new tab")}>
+                        Always open in new tab
+                        </div>
+                </div>
+            </div>
+        </div>;
+    }
+
     render() {
         const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
 
         const groups = [this.props.linkDoc].map(groupDoc => {
-            return <LinkGroupEditor key={"gred-" + StrCast(groupDoc.linkRelationship)} linkDoc={this.props.linkDoc} sourceDoc={this.props.sourceDoc} groupDoc={groupDoc} />;
+            return <LinkGroupEditor key={"gred-" + StrCast(groupDoc.linkRelationship)} linkDoc={this.props.linkDoc}
+                sourceDoc={this.props.sourceDoc} groupDoc={groupDoc} />;
         });
 
         return !destination ? (null) : (
             <div className="linkEditor">
-                {this.props.hideback ? (null) : <button className="linkEditor-back" onPointerDown={() => this.props.showLinks()}><FontAwesomeIcon icon="arrow-left" size="sm" /></button>}
                 <div className="linkEditor-info">
-                    <p className="linkEditor-linkedTo">editing link to: <b>{destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
-                    <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
+                    <button className="linkEditor-button-back"
+                        style={{ display: this.props.hideback ? "none" : "" }}
+                        onClick={this.props.showLinks}>
+                        <FontAwesomeIcon icon="arrow-left" size="sm" /> </button>
+                    <p className="linkEditor-linkedTo">editing link to: <b>{
+                        destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
+                    <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
+                        <FontAwesomeIcon icon="trash" size="sm" /></button>
                 </div>
-                {groups.length > 0 ? groups : <div className="linkEditor-group">There are currently no relationships associated with this link.</div>}
+
+                <div>{this.editDescription}</div>
+                <div>{this.followingDropdown}</div>
+
+                {/* {groups.length > 0 ? groups : <div className="linkEditor-group">There are currently no relationships associated with this link.</div>} */}
             </div>
 
         );
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index c372e7098..4b1a3f425 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,20 +3,32 @@
 .linkMenu {
     width: 100%;
     height: auto;
+    //border: 1px solid black;
+
+    &:hover {
+        width: calc(auto + 26px);
+    }
 }
 
 .linkMenu-list {
+    border: 1px solid black;
     max-height: 200px;
     overflow-y: scroll;
     position: absolute;
     z-index: 10;
-    background: $link-color;
-    min-width: 150px
+    background: white;
+    min-width: 150px;
+    border-radius: 5px;
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
+    padding-left: 6.5px;
+    padding-right: 2px;
+    //width: calc(auto + 50px);
 }
 
 .linkMenu-group {
-    border-bottom: 0.5px solid lightgray; 
-    padding: 5px 0;
+    //border-bottom: 0.5px solid lightgray;
+    //@extend: 5px 0;
 
 
     &:last-child {
@@ -26,13 +38,17 @@
     .linkMenu-group-name {
         display: flex;
 
+
         &:hover {
             p {
                 background-color: lightgray;
+
             }
+
             p.expand-one {
-                width: calc(100% - 26px);
+                width: calc(100% + 26px);
             }
+
             .linkEditor-tableButton {
                 display: block;
             }
@@ -50,7 +66,4 @@
             display: none;
         }
     }
-}
-
-
-
+}
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 0fcc0f0b9..8a7b12f48 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -10,6 +10,8 @@ import { LinkMenuGroup } from "./LinkMenuGroup";
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
+import { LinkDocPreview } from "../nodes/LinkDocPreview";
+import { isUndefined } from "util";
 
 library.add(faTrash);
 
@@ -24,12 +26,20 @@ interface Props {
 export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
-    @observable private _linkMenuRef: Opt<HTMLDivElement | null>;
+    @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
+    private _editorRef = React.createRef<HTMLDivElement>();
 
     @action
     onClick = (e: PointerEvent) => {
-        if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) {
-            DocumentLinksButton.EditLink = undefined;
+
+        LinkDocPreview.LinkInfo = undefined;
+
+
+        if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) {
+            if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) {
+                console.log("outside click");
+                DocumentLinksButton.EditLink = undefined;
+            }
         }
     }
     @action
@@ -70,11 +80,14 @@ export class LinkMenu extends React.Component<Props> {
     render() {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
-        return <div className="linkMenu-list" ref={(r) => this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}>
-            {!this._editingLink ?
-                this.renderAllGroups(groups) :
-                <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)} />
-            }
-        </div>;
+        return <div className="linkMenu" ref={this._linkMenuRef} >
+            <div className="linkMenu-list"
+                style={{ left: this.props.location[0], top: this.props.location[1] }}>
+                {!this._editingLink ?
+                    this.renderAllGroups(groups) :
+                    <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
+                        showLinks={action(() => this._editingLink = undefined)} />
+                }
+            </div> </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 89deb3a55..ec17776e3 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -26,6 +26,7 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
 
     private _drag = React.createRef<HTMLDivElement>();
     private _table = React.createRef<HTMLDivElement>();
+    private _menuRef = React.createRef<HTMLDivElement>();
 
     onLinkButtonDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -74,17 +75,18 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
                     linkDoc={linkDoc}
                     sourceDoc={this.props.sourceDoc}
                     destinationDoc={destination}
-                    showEditor={this.props.showEditor} />;
+                    showEditor={this.props.showEditor}
+                    menuRef={this._menuRef} />;
             }
         });
 
         return (
-            <div className="linkMenu-group">
-                <div className="linkMenu-group-name">
+            <div className="linkMenu-group" ref={this._menuRef}>
+                {/* <div className="linkMenu-group-name">
                     <p ref={this._drag} onPointerDown={this.onLinkButtonDown}
                         className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"} > {this.props.groupType}:</p>
                     {this.props.groupType === "*" || this.props.groupType === "" ? <></> : this.viewGroupAsTable(this.props.groupType)}
-                </div>
+                </div> */}
                 <div className="linkMenu-group-wrapper">
                     {groupItems}
                 </div>
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index fd0954f65..67bf71fb9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -4,25 +4,45 @@
     // border-top: 0.5px solid $main-accent; 
     position: relative;
     display: flex;
-    font-size: 12px;
-    
+
 
     .linkMenu-name {
         position: relative;
 
-        p {
-            padding: 4px 6px;
-            line-height: 12px;
-            border-radius: 5px;
-            overflow-wrap: break-word;
-            user-select: none;
+        .linkMenu-text {
+
+            padding: 4px 2px;
+            //display: inline;
+
+            .linkMenu-destination-title {
+                text-decoration: none;
+                color: rgb(85, 120, 196);
+                font-size: 14px;
+                padding-bottom: 2px;
+            }
+
+            .linkMenu-description {
+                text-decoration: none;
+                font-style: italic;
+                color: rgb(95, 97, 102);
+                font-size: 10px;
+            }
+
+            p {
+                //padding: 4px 2px;
+                line-height: 12px;
+                border-radius: 5px;
+                overflow-wrap: break-word;
+                user-select: none;
+            }
         }
+
     }
 
     .linkMenu-item-content {
         width: 100%;
     }
-    
+
     .link-metadata {
         padding: 0 10px 0 16px;
         margin-bottom: 4px;
@@ -32,28 +52,45 @@
     }
 
     &:hover {
+
+
         .linkMenu-item-buttons {
             display: flex;
         }
+
         .linkMenu-item-content {
+
+            .linkMenu-destination-title {
+                text-decoration: underline;
+                color: rgb(60, 90, 156);
+                //display: inline;
+                text-overflow: break;
+            }
+
             &.expand-two p {
                 width: calc(100% - 52px);
-                background-color: lightgray;
+                //text-decoration: underline;
+                //color: rgb(15, 57, 148);
+                //background-color: lightgray;
             }
+
             &.expand-three p {
                 width: calc(100% - 84px);
-                background-color: lightgray;
+                //text-decoration: underline;
+                //color: rgb(15, 57, 148);
+                //background-color: lightgray;
             }
         }
     }
 }
 
 .linkMenu-item-buttons {
-    display: none;
+    //@extend: right;
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
+    display: none;
 
     .button {
         width: 20px;
@@ -61,7 +98,6 @@
         margin: 0;
         margin-right: 6px;
         border-radius: 50%;
-        cursor: pointer;
         pointer-events: auto;
         background-color: $dark-color;
         color: $light-color;
@@ -80,8 +116,10 @@
         &:last-child {
             margin-right: 0;
         }
+
         &:hover {
             background: $main-accent;
+            cursor: grab;
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index edc18b6a9..6af474513 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
@@ -13,7 +13,9 @@ import React = require("react");
 import { DocumentManager } from '../../util/DocumentManager';
 import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
 import { DocumentView } from '../nodes/DocumentView';
-library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);
+import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
+import { LinkDocPreview } from '../nodes/LinkDocPreview';
+library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt);
 
 
 interface LinkMenuItemProps {
@@ -24,6 +26,7 @@ interface LinkMenuItemProps {
     destinationDoc: Doc;
     showEditor: (linkDoc: Doc) => void;
     addDocTab: (document: Doc, where: string) => boolean;
+    menuRef: React.Ref<HTMLDivElement>;
 }
 
 // drag links and drop link targets (aliasing them if needed)
@@ -69,10 +72,13 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     private _eleClone: any;
 
     _editRef = React.createRef<HTMLDivElement>();
+    _buttonRef = React.createRef<HTMLDivElement>();
+
     @observable private _showMore: boolean = false;
     @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
 
     onEdit = (e: React.PointerEvent): void => {
+        LinkManager.currentLink = this.props.linkDoc;
         setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
     }
 
@@ -95,6 +101,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         return (<div className="link-metadata">{mdRows}</div>);
     }
 
+    @action
     onLinkButtonDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
@@ -104,6 +111,11 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         document.addEventListener("pointermove", this.onLinkButtonMoved);
         document.removeEventListener("pointerup", this.onLinkButtonUp);
         document.addEventListener("pointerup", this.onLinkButtonUp);
+
+        if (this._buttonRef && !!!this._buttonRef.current?.contains(e.target as any)) {
+            console.log("outside click");
+            LinkDocPreview.LinkInfo = undefined;
+        }
     }
 
     onLinkButtonUp = (e: PointerEvent): void => {
@@ -124,7 +136,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         e.stopPropagation();
     }
 
+    @action
     onContextMenu = (e: React.MouseEvent) => {
+        DocumentLinksButton.EditLink = undefined;
+        LinkDocPreview.LinkInfo = undefined;
         e.preventDefault();
         ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" });
         ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
@@ -132,7 +147,29 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
     @action.bound
     async followDefault() {
-        DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+        console.log("FOLLOWWW");
+        DocumentLinksButton.EditLink = undefined;
+        LinkDocPreview.LinkInfo = undefined;
+
+        if (this.props.linkDoc.follow) {
+            if (this.props.linkDoc.follow === "Default") {
+                DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+            } else if (this.props.linkDoc.follow === "Always open in right tab") {
+                this.props.addDocTab(this.props.destinationDoc, "onRight");
+            } else if (this.props.linkDoc.follow === "Always open in new tab") {
+                this.props.addDocTab(this.props.destinationDoc, "inTab");
+            }
+        } else {
+            DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+        }
+    }
+
+    @action
+    deleteLink = (): void => {
+        LinkManager.Instance.deleteLink(this.props.linkDoc);
+        //this.props.showLinks();
+        LinkDocPreview.LinkInfo = undefined;
+        DocumentLinksButton.EditLink = undefined;
     }
 
     render() {
@@ -142,15 +179,33 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         return (
             <div className="linkMenu-item">
                 <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
-                    <div ref={this._drag} className="linkMenu-name" title="drag to view target. click to customize." onPointerDown={this.onLinkButtonDown}>
-                        <p >{StrCast(this.props.destinationDoc.title)}</p>
-                        <div className="linkMenu-item-buttons">
+                    <div ref={this._drag} className="linkMenu-name" //title="drag to view target. click to customize."
+                        onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)}
+                        onPointerEnter={action(e => this.props.linkDoc && (LinkDocPreview.LinkInfo = {
+                            addDocTab: this.props.addDocTab,
+                            linkSrc: this.props.sourceDoc,
+                            linkDoc: this.props.linkDoc,
+                            Location: [e.clientX, e.clientY + 20]
+                        }))}
+                        onPointerDown={this.onLinkButtonDown}>
+
+                        <div className="linkMenu-text">
+                            <p className="linkMenu-destination-title"
+                                onPointerDown={this.followDefault}>
+                                {StrCast(this.props.destinationDoc.title)}</p>
+                            {this.props.linkDoc.description !== "" ? <p className="linkMenu-description">
+                                {StrCast(this.props.linkDoc.description)}</p> : null} </div>
+
+                        <div className="linkMenu-item-buttons" ref={this._buttonRef} >
                             {canExpand ? <div title="Show more" className="button" onPointerDown={e => this.toggleShowMore(e)}>
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
-                            <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
-                            <div title="Follow link" className="button" onClick={this.followDefault} onContextMenu={this.onContextMenu}>
-                                <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" />
-                            </div>
+
+                            <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
+                                <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
+                            <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
+                                <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
+                            {/* <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
+                                <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div> */}
                         </div>
                     </div>
                     {this._showMore ? this.renderMetadata() : <></>}