fixed bug where link colors reset on reload

need to fix new mystery bug where any new links disappear after refreshing once but re-appear after a second refrsh

6 files changed, 20 insertions, 17 deletions

diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 175de0fa5..1fc0a7593 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -99,13 +99,13 @@ export class LinkManager {
 
 
     public createLinkrelationshipLists = () => {
-        const linkRelationshipList = new List<string>();
-        const linkColorList = new List<string>();
-        Doc.UserDoc().linkRelationshipList = linkRelationshipList;
-        Doc.UserDoc().linkColorList = linkColorList;
-        console.log(Doc.UserDoc().linkRelationshipList);
-        console.log(Doc.UserDoc().linkColorList);
-        //
+        //create new lists for link relations and their associated colors if the lists don't already exist
+        if (!Doc.UserDoc().linkRelationshipList && !Doc.UserDoc().linkColorList) {
+            const linkRelationshipList = new List<string>();
+            const linkColorList = new List<string>();
+            Doc.UserDoc().linkRelationshipList = linkRelationshipList;
+            Doc.UserDoc().linkColorList = linkColorList;
+        }
     }
 
     public addLink(linkDoc: Doc, checkExists = false) {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index ba67bbcef..0c44df64c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -180,7 +180,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const linkRelationship = LinkManager.currentLink?.linkRelationship; //get string representing relationship
         const linkRelationshipList = Doc.UserDoc().linkRelationshipList as List<string>;
         const linkColorList = Doc.UserDoc().linkColorList as List<string>;
-        const strokeColor = linkColorList[linkRelationshipList.indexOf(linkRelationship)]; //access stroke color using index of the relationship in the color list
+        //access stroke color using index of the relationship in the color list (default black)
+        const strokeColor = linkRelationshipList.indexOf(linkRelationship) == -1 ? "black" : linkColorList[linkRelationshipList.indexOf(linkRelationship)];
         console.log(strokeColor);
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
             <path className="collectionfreeformlinkview-linkLine" style={{ opacity: this._opacity, strokeDasharray: "2 2", stroke: strokeColor }}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 5e0b31754..e812064b7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -9,6 +9,7 @@ import "./CollectionFreeFormLinksView.scss";
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
 import { DocumentType } from "../../../documents/DocumentTypes";
+import { LinkManager } from "../../../util/LinkManager";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 22c3c5f56..7d6f4caf2 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
+import { Doc, StrListCast } from "../../../fields/Doc";
 import { Cast, DateCast, StrCast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
@@ -41,8 +41,8 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     setRelationshipValue = action((value: string) => {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.linkRelationship = value;
-            const linkRelationshipList = Doc.UserDoc().linkRelationshipList as List<string>;
-            const linkColorList = Doc.UserDoc().linkColorList as List<string>;
+            const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList);
+            const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
             // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color 
             if (linkRelationshipList && !linkRelationshipList.includes(value)) {
                 linkRelationshipList.push(value);
@@ -99,10 +99,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         style={{ width: "100%" }}
                         id="input"
                         value={this.relationship}
-                        placeholder={"enter link label"}
+                        placeholder={"Enter link relationship"}
                         // color={"rgb(88, 88, 88)"}
                         onKeyDown={this.onRelationshipKey}
                         onChange={this.handleRelationshipChange}
+                        onBlur={this.onRelationshipDown}
                     ></input>
                 </div>
                 <div className="linkEditor-description-add-button"
@@ -122,7 +123,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         style={{ width: "100%" }}
                         id="input"
                         value={this.description}
-                        placeholder={"enter link label"}
+                        placeholder={"Enter link description"}
                         // color={"rgb(88, 88, 88)"}
                         onKeyDown={this.onKey}
                         onChange={this.handleChange}
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 30b272a9a..b62a4dd56 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -54,7 +54,7 @@ export class LinkDescriptionPopup extends React.Component<{}> {
             }}>
             <input className="linkDescriptionPopup-input"
                 onKeyPress={e => e.key === "Enter" && this.onDismiss(true)}
-                placeholder={"(optional) enter link label..."}
+                placeholder={"(Optional) Enter link description..."}
                 onChange={(e) => this.descriptionChanged(e)}>
             </input>
             <div className="linkDescriptionPopup-btn">
@@ -65,4 +65,4 @@ export class LinkDescriptionPopup extends React.Component<{}> {
             </div>
         </div>;
     }
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 8d74b2ac4..75e3f81fb 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -152,12 +152,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     </button>
                 </Tooltip>,
                 //NOTE: link popup is currently in progress
-                <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
+                <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document"}</div>}>
                     <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
                         <FontAwesomeIcon icon="link" size="lg" />
                     </button>
                 </Tooltip>,
-                <LinkPopup showPopup={this._showLinkPopup} linkFrom={this.onMakeAnchor}/>
+                <LinkPopup showPopup={this._showLinkPopup} linkFrom={this.onMakeAnchor} />
             ] : [
                 <Tooltip key="trash" title={<div className="dash-tooltip">{"Remove Link Anchor"}</div>}>
                     <button className="antimodeMenu-button" onPointerDown={this.Delete}>