1 files changed, 59 insertions, 3 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index b5bae6652..69224312a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -31,6 +31,7 @@ import { PropertiesButtons } from "./PropertiesButtons";
 import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector";
 import "./PropertiesView.scss";
 import { DefaultStyleProvider } from "./StyleProvider";
+import { LinkManager } from "../util/LinkManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -1084,6 +1085,55 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
 
+    @observable
+    description = Field.toString(LinkManager.currentLink?.description as any as Field);
+    @observable
+    follow = Field.toString(LinkManager.currentLink?.follow as any as Field);
+
+    @action
+    handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+
+    @undoBatch
+    setDescripValue = action((value: string) => {
+        if (LinkManager.currentLink) {
+            Doc.GetProto(LinkManager.currentLink).description = value;
+            return true;
+        }
+    });
+
+    @undoBatch
+    changeFollowBehavior = action((follow: string) => {
+        if (LinkManager.currentLink) {
+            Doc.GetProto(LinkManager.currentLink).followLinkLocation = follow;
+            return true;
+        }
+    });
+
+    onSelectOut = () => {
+        this.setDescripValue(this.description);
+        document.getElementById('input')?.blur();
+    }
+
+    onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setDescripValue(this.description);
+            document.getElementById('input')?.blur();
+        }
+    }
+
+    @computed
+    get editDescription() {
+        return <input
+            autoComplete={"off"}
+            id="input"
+            value={this.description}
+            onKeyDown={this.onDescriptionKey}
+            onBlur={this.onSelectOut}
+            onChange={this.handleDescriptionChange}
+            className="text"
+            type="text"
+        />
+    }
 
     /**
      * Handles adding and removing members from the sharing panel
@@ -1123,7 +1173,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                         <div className="propertiesView-input" id="propertiesView-description">
                             <p>Description</p>
-                            <input className="text" type="text" />
+                            {this.editDescription}
                         </div>
                     </div>
                     <div className="propertiesView-section">
@@ -1131,8 +1181,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div className="propertiesView-input inline first" id="propertiesView-follow">
                             <p>Follow</p>
                             <select name="selectList" id="selectList">
-                                <option value="default">Default</option>
-                                <option value="newLeft">Open in new left pane</option>
+                                <option value="default" onPointerDown={() => {
+                                    this.changeFollowBehavior("default")
+                                    console.log("default")
+                                }}>Default</option>
+                                <option value="newLeft" onPointerDown={() => {
+                                    this.changeFollowBehavior("newLeft")
+                                    console.log("newLeft")
+                                }}>Open in new left pane</option>
                                 <option value="newRight">Open in new right pane</option>
                                 <option value="replaceLeft">Replace left tab</option>
                                 <option value="replaceRight">Replace right tab</option>