Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into view_doc_impl

25 files changed, 883 insertions, 148 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
new file mode 100644
index 000000000..704cdc31c
--- /dev/null
+++ b/src/client/views/nodes/AudioBox.scss
@@ -0,0 +1,4 @@
+.audiobox-cont{
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
new file mode 100644
index 000000000..6daf15f5f
--- /dev/null
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -0,0 +1,44 @@
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+import { AudioField } from "../../../fields/AudioField";
+import "./AudioBox.scss"
+import { NumberField } from "../../../fields/NumberField";
+
+@observer
+export class AudioBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(AudioBox) }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey)
+        let path = field == FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" :
+            field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3";
+
+        return (
+            <div>
+                <audio controls className="audiobox-cont">
+                    <source src={path} type="audio/mpeg" />
+                    Not supported.
+                </audio>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
new file mode 100644
index 000000000..55b4938a0
--- /dev/null
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -0,0 +1,35 @@
+import { Document } from "../../../fields/Document";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
+import { CollectionVideoView } from "../collections/CollectionVideoView";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import { VideoBox } from "../nodes/VideoBox";
+import { AudioBox } from "../nodes/AudioBox";
+import { KeyValueBox } from "./KeyValueBox"
+import { WebBox } from "../nodes/WebBox";
+import { PDFBox } from "../nodes/PDFBox";
+import "./DocumentView.scss";
+import React = require("react");
+const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
+
+interface JsxBindings {
+    Document: Document;
+    layout: string;
+    [prop: string]: any;
+}
+
+export class DocumentContentsView extends React.PureComponent<JsxBindings> {
+    render() {
+        return <JsxParser
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
+            bindings={this.props}
+            jsx={this.props.layout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index ab913897b..85a115f1c 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,23 +1,23 @@
+@import "../global_variables";
 .documentView-node {
-    position: absolute;
-    background: #cdcdcd;
-    //overflow: hidden;
-    &.minimized {
-        width: 30px;
-        height: 30px;
-    }
-    .top {
-        background: #232323;
-        height: 20px;
-        cursor: pointer;
-    }
-    .content {
-        padding: 20px 20px;
-        height: auto;
-        box-sizing: border-box;
-    }
-    .scroll-box {
-        overflow-y: scroll;
-        height: calc(100% - 20px);
-    }
-}
\ No newline at end of file
+  position: absolute;
+  background: $light-color; //overflow: hidden;
+  &.minimized {
+    width: 30px;
+    height: 30px;
+  }
+  .top {
+    background: #232323;
+    height: 20px;
+    cursor: pointer;
+  }
+  .content {
+    padding: 20px 20px;
+    height: auto;
+    box-sizing: border-box;
+  }
+  .scroll-box {
+    overflow-y: scroll;
+    height: calc(100% - 20px);
+  }
+}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e109f2a38..84483ac55 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,28 +1,24 @@
-import { action, computed } from "mobx";
+import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
+import { Documents } from "../../documents/Documents";
+import { DocumentManager } from "../../util/DocumentManager";
 import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
-import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { ContextMenu } from "../ContextMenu";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import { Documents } from "../../documents/Documents"
-import { KeyValueBox } from "./KeyValueBox"
-import { WebBox } from "../nodes/WebBox";
-import { PDFBox } from "../nodes/PDFBox";
 import "./DocumentView.scss";
 import React = require("react");
 import { props } from "bluebird";
+import { DocumentContentsView } from "./DocumentContentsView";
+import { Utils } from "../../../Utils";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 
@@ -84,9 +80,9 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
-    private _documentBindings: any = null;
     private _downX: number = 0;
     private _downY: number = 0;
+    private _reactionDisposer: Opt<IReactionDisposer>;
     @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
     @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
     @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
@@ -96,16 +92,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        if (e.shiftKey && e.buttons === 1) {
-            let document = e.ctrlKey ? this.props.Document.CreateAlias() : this.props.Document
-            CollectionDockingView.Instance.StartOtherDrag(document, e);
+        if (e.shiftKey && e.buttons === 2) {
+            if (this.props.isTopMost) {
+                this.startDragging(e.pageX, e.pageY, e.ctrlKey);
+            }
+            else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
         } else {
             if (this.active && !e.isDefaultPrevented()) {
                 e.stopPropagation();
-                if (e.buttons === 2) {
-                    e.preventDefault();
-                }
                 document.removeEventListener("pointermove", this.onPointerMove)
                 document.addEventListener("pointermove", this.onPointerMove);
                 document.removeEventListener("pointerup", this.onPointerUp)
@@ -113,27 +108,76 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
         }
     }
+
+    private dropDisposer?: DragManager.DragDropDisposer;
+    protected createDropTarget = (ele: HTMLDivElement) => {
+
+    }
+
+    componentDidMount() {
+        if (this._mainCont.current) {
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+        }
+        runInAction(() => {
+            DocumentManager.Instance.DocumentViews.push(this);
+        })
+        this._reactionDisposer = reaction(
+            () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(),
+            () => {
+                if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.indexOf(this.props.Document.Id) != -1)
+                    SelectionManager.SelectDoc(this, true);
+            });
+    }
+
+    componentDidUpdate() {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        if (this._mainCont.current) {
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        runInAction(() => {
+            DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1);
+
+        })
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+    }
+
+    startDragging(x: number, y: number, ctrlPressed: boolean) {
+        if (this._mainCont.current) {
+            const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            let dragData: { [id: string]: any } = {};
+            dragData["documentView"] = this;
+            dragData["document"] = ctrlPressed ? this.props.Document.CreateAlias() : this.props.Document
+            dragData["xOffset"] = x - left;
+            dragData["yOffset"] = y - top;
+            dragData["alias"] = ctrlPressed
+            DragManager.StartDrag(this._mainCont.current, dragData, {
+                handlers: {
+                    dragComplete: action(() => { }),
+                },
+                hideSource: !ctrlPressed
+            })
+        }
+    }
+
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
             document.removeEventListener("pointermove", this.onPointerMove)
-            document.removeEventListener("pointerup", this.onPointerUp)
-            if (this._mainCont.current != null && !this.topMost) {
-                const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                let dragData: { [id: string]: any } = {};
-                dragData["documentView"] = this;
-                dragData["document"] = e.ctrlKey ? this.props.Document.CreateAlias() : this.props.Document
-                dragData["xOffset"] = e.x - left;
-                dragData["yOffset"] = e.y - top;
-                dragData["alias"] = e.ctrlKey
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: action(() => { }),
-                    },
-                    hideSource: !e.ctrlKey
-                })
+            document.removeEventListener("pointerup", this.onPointerUp);
+            if (!this.topMost || e.buttons == 2 || e.altKey) {
+                this.startDragging(e.x, e.y, e.ctrlKey);
             }
         }
         e.stopPropagation();
@@ -147,6 +191,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
+    stopPropogation = (e: React.SyntheticEvent) => {
+        e.stopPropagation();
+    }
 
     deleteClicked = (): void => {
         if (this.props.RemoveDocument) {
@@ -174,6 +221,46 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @action
+    drop = (e: Event, de: DragManager.DropEvent) => {
+        console.log("drop");
+        const sourceDocView: DocumentView = de.data["linkSourceDoc"];
+        if (!sourceDocView) {
+            return;
+        }
+        let sourceDoc: Document = sourceDocView.props.Document;
+        let destDoc: Document = this.props.Document;
+        if (this.props.isTopMost) {
+            return;
+        }
+        let linkDoc: Document = new Document();
+
+        linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+        linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+        linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+
+        sourceDoc.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
+        linkDoc.Set(KeyStore.LinkedToDocs, destDoc);
+        destDoc.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
+        linkDoc.Set(KeyStore.LinkedFromDocs, sourceDoc);
+
+        e.stopPropagation();
+    }
+
+    onDrop = (e: React.DragEvent) => {
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        let text = e.dataTransfer.getData("text/plain");
+        if (text && text.startsWith("<div")) {
+            let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+            let layout = text.replace("{layout}", oldLayout);
+            this.props.Document.SetText(KeyStore.Layout, layout);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
         let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
@@ -187,6 +274,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
         ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+        ContextMenu.Instance.addItem({
+            description: "Copy ID",
+            event: () => {
+                Utils.CopyText(this.props.Document.Id);
+            }
+        });
         //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         if (!this.topMost) {
@@ -198,15 +291,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         SelectionManager.SelectDoc(this, e.ctrlKey);
     }
-    @computed get mainContent() {
-        return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
-            bindings={this._documentBindings}
-            jsx={this.layout}
-            showWarnings={true}
-            onError={(test: any) => { console.log(test) }}
-        />
-    }
+
 
     isSelected = () => {
         return SelectionManager.IsSelected(this);
@@ -216,40 +301,52 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         SelectionManager.SelectDoc(this, ctrlPressed)
     }
 
-    render() {
-        if (!this.props.Document) return <div></div>
-        let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
-        if (!lkeys || lkeys === "<Waiting>") {
-            return <p>Error loading layout keys</p>;
-        }
-        this._documentBindings = {
+    @computed
+    get getProps() {
+        let bindings: any = {
             ...this.props,
             isSelected: this.isSelected,
             select: this.select,
-            focus: this.props.focus
+            layout: this.layout
         };
         for (const key of this.layoutKeys) {
-            this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
+            bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
         }
         for (const key of this.layoutFields) {
             let field = this.props.Document.Get(key);
-            this._documentBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+        }
+        bindings.bindings = bindings;
+
+        return bindings
+    }
+
+    render() {
+        if (!this.props.Document) {
+            return (null);
+        }
+        let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
+        if (!lkeys || lkeys === "<Waiting>") {
+            return <p>Error loading layout keys</p>;
         }
-        this._documentBindings.bindings = this._documentBindings;
         var scaling = this.props.ContentScaling();
         var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+        var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, "");
         return (
             <div className="documentView-node" ref={this._mainCont}
                 style={{
+                    background: backgroundcolor,
                     width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
                     height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
                     transformOrigin: "left top",
                     transform: `scale(${scaling} , ${scaling})`
                 }}
+                onDrop={this.onDrop}
                 onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown} >
-                {this.mainContent}
+                onPointerDown={this.onPointerDown}
+                onPointerUp={this.stopPropogation} >
+                <DocumentContentsView {...this.getProps} />
             </div>
         )
     }
diff --git a/src/client/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
index b6ce2fabc..d2cd61b0d 100644
--- a/src/client/views/nodes/FieldTextBox.scss
+++ b/src/client/views/nodes/FieldTextBox.scss
@@ -1,14 +1,14 @@
 .ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
+  margin-top: -1em;
+  width: 100%;
+  height: 100%;
 }
 
 .ProseMirror:focus {
-    outline: none !important
+  outline: none !important;
 }
 
 .fieldTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
+  background: white;
+  padding: 1vw;
+}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 9e63006d1..49f4cefce 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -8,10 +8,15 @@ import { NumberField } from "../../../fields/NumberField";
 import { RichTextField } from "../../../fields/RichTextField";
 import { ImageField } from "../../../fields/ImageField";
 import { WebField } from "../../../fields/WebField";
+import { VideoField } from "../../../fields/VideoField"
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
+import { VideoBox } from "./VideoBox";
+import { AudioBox } from "./AudioBox";
+import { AudioField } from "../../../fields/AudioField";
+
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -55,6 +60,12 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof WebField) {
             return <WebBox {...this.props} />
+        } 
+        else if (field instanceof VideoField){ 
+            return <VideoBox {...this.props}/>
+        }
+        else if (field instanceof AudioField){ 
+            return <AudioBox {...this.props}/>
         }
         // bcz: this belongs here, but it doesn't render well so taking it out for now
         // else if (field instanceof HtmlField) {
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index ab5849f09..32da2632e 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -1,38 +1,46 @@
+@import "../global_variables";
 .ProseMirror {
-    width: 100%;
-    height: auto;
-    min-height: 100%
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  font-family: $serif;
 }
 
 .ProseMirror:focus {
-    outline: none !important
+  outline: none !important;
 }
 
 .formattedTextBox-cont {
-    background: white;
-    padding: 1;
-    border-width: 1px;
-    border-radius: 2px;
-    border-color:black;
-    box-sizing: border-box;
-    background: white;
-    border-style:solid;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    color: initial;
-    height: 100%;
+  background: $light-color-secondary;
+  padding: 0.9em;
+  border-width: 0px;
+  border-radius: $border-radius;
+  border-color: $intermediate-color;
+  box-sizing: border-box;
+  border-style: solid;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  color: initial;
+  height: 100%;
 }
 
 .menuicon {
-    display: inline-block;
-    border-right: 1px solid rgba(0, 0, 0, 0.2);
-    color: #888;
-    line-height: 1;
-    padding: 0 7px;
-    margin: 1px;
-    cursor: pointer;
-    text-align: center;
-    min-width: 1.4em;
-  }
-  .strong, .heading { font-weight: bold; }
-  .em { font-style: italic; }
\ No newline at end of file
+  display: inline-block;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  color: #888;
+  line-height: 1;
+  padding: 0 7px;
+  margin: 1px;
+  cursor: pointer;
+  text-align: center;
+  min-width: 1.4em;
+}
+
+.strong,
+.heading {
+  font-weight: bold;
+}
+
+.em {
+  font-style: italic;
+}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 3c78e21e0..4bd5726f4 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -14,6 +14,9 @@ import { Plugin } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
+import { inpRules } from "../../util/RichTextRules";
+const { buildMenuItems } = require("prosemirror-example-setup");
+const { menuBar } = require("prosemirror-menu");
 
 
 
@@ -31,7 +34,7 @@ import { ContextMenu } from "../../views/ContextMenu";
 //    and 'doc' property to the document that is being rendered
 //
 //  When rendered() by React, this extracts the TextController from the Document stored at the 
-//  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
+//  specified Key and assigns it to an HTML input node.  When changes are made to this node, 
 //  this will edit the document and assign the new value to that field.
 //]
 export class FormattedTextBox extends React.Component<FieldViewProps> {
@@ -62,6 +65,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         let state: EditorState;
         const config = {
             schema,
+            inpRules, //these currently don't do anything, but could eventually be helpful
             plugins: [
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
@@ -71,7 +75,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         };
 
         let field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
-        if (field && field != FieldWaiting) {
+        if (field && field != FieldWaiting && field.Data) {
             state = EditorState.fromJSON(config, JSON.parse(field.Data));
         } else {
             state = EditorState.create(config);
@@ -117,7 +121,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         // doc.SetData(fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.buttons === 1 && this.props.isSelected()) {
+        if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
             e.stopPropagation();
         }
     }
@@ -155,8 +159,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         })
     }
 
+    onKeyPress(e: React.KeyboardEvent) {
+        e.stopPropagation();
+    }
     render() {
         return (<div className="formattedTextBox-cont"
+            onKeyPress={this.onKeyPress}
             onPointerDown={this.onPointerDown}
             onContextMenu={this.specificContextMenu}
             onWheel={this.onPointerWheel}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index ea459b911..487038841 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,22 +1,21 @@
-
 .imageBox-cont {
-    padding: 0vw;
-    position: relative;
-    text-align: center;
-    width: 100%;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%
+  padding: 0vw;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .imageBox-cont img {
-    object-fit: contain;
     height: 100%;
+    width:100%;
 }
 
 .imageBox-button {
-    padding : 0vw;
-    border: none;
-    width : 100%;
-    height: 100%;
-}
\ No newline at end of file
+  padding: 0vw;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 195c66cc0..c12db1192 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,5 +1,5 @@
 
-import { action, observable } from 'mobx';
+import { action, observable, trace } from 'mobx';
 import { observer } from "mobx-react";
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
@@ -70,7 +70,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
     }
 
     lightbox = (path: string) => {
-        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
+        const images = [path];
         if (this._isOpen && this.props.isSelected()) {
             return (<Lightbox
                 mainSrc={images[this._photoIndex]}
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index 1295266e5..63ae75424 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,31 +1,57 @@
+@import "../global_variables";
 .keyValueBox-cont {
-    overflow-y:scroll;
+    overflow-y: scroll;
     height: 100%;
-    border: black;
-    border-width: 1px;
-    border-style: solid;
+    background-color: $light-color;
+    border: 1px solid $intermediate-color;
+    border-radius: $border-radius;
     box-sizing: border-box;
     display: inline-block;
     .imageBox-cont img {
-        max-height:45px;
+        max-height: 45px;
         height: auto;
     }
+    td {
+        padding: 6px 8px;
+        border-right: 1px solid $intermediate-color;
+        border-top: 1px solid $intermediate-color;
+        &:last-child {
+            border-right: none;
+        }
+    }
 }
+
 .keyValueBox-table {
     position: relative;
+    border-collapse: collapse;
 }
+
 .keyValueBox-header {
-    background:gray;
+    background: $intermediate-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 12px;
+    height: 30px;
+    padding-top: 4px;
+    th {
+        font-weight: normal;
+        &:first-child {
+            border-right: 1px solid $light-color;
+        }
+    }
 }
+
 .keyValueBox-evenRow {
-    background: white;
+    background: $light-color;
     .formattedTextBox-cont {
-        background: white;
+        background: $light-color;
     }
 }
+
 .keyValueBox-oddRow {
-    background: lightGray;
+    background: $light-color-secondary;
     .formattedTextBox-cont {
-        background: lightgray;
+        background: $light-color-secondary;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index ac8c949a9..283c1f732 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -2,17 +2,62 @@
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
 import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
+import { CompileScript, ToField } from "../../util/Scripting";
+import { Key } from '../../../fields/Key';
+import { observable, action } from "mobx";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    @observable private _keyInput: string = "";
+    @observable private _valueInput: string = "";
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    @action
+    onEnterKey = (e: React.KeyboardEvent): void => {
+        if (e.key == 'Enter') {
+            if (this._keyInput && this._valueInput) {
+                let doc = this.props.doc.GetT(KeyStore.Data, Document);
+                if (!doc || doc == FieldWaiting) {
+                    return
+                }
+                let realDoc = doc;
+
+                let script = CompileScript(this._valueInput, undefined, true);
+                if (!script.compiled) {
+                    return;
+                }
+                let field = script();
+                if (field instanceof Field) {
+                    realDoc.Set(new Key(this._keyInput), field);
+                } else {
+                    let dataField = ToField(field);
+                    if (dataField) {
+                        realDoc.Set(new Key(this._keyInput), dataField);
+                    }
+                }
+                this._keyInput = ""
+                this._valueInput = ""
+            }
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
@@ -33,7 +78,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let ids: { [key: string]: string } = {};
         let protos = doc.GetAllPrototypes();
         for (const proto of protos) {
-            proto._proxies.forEach((val, key) => {
+            proto._proxies.forEach((val: any, key: string) => {
                 if (!(key in ids)) {
                     ids[key] = key;
                 }
@@ -48,9 +93,26 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    @action
+    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._keyInput = e.currentTarget.value;
+    }
+
+    @action
+    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._valueInput = e.currentTarget.value;
+    }
 
-    render() {
+    newKeyValue = () => {
+        return (
+            <tr>
+                <td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+            </tr>
+        )
+    }
 
+    render() {
         return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
             <table className="keyValueBox-table">
                 <tbody>
@@ -59,6 +121,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         <th>Fields</th>
                     </tr>
                     {this.createTable()}
+                    {this.newKeyValue()}
                 </tbody>
             </table>
         </div>)
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..111f85a05 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -8,6 +8,8 @@ import { observable, action } from 'mobx';
 import { Document } from '../../../fields/Document';
 import { Key } from '../../../fields/Key';
 import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
 
 // Represents one row in a key value plane
 
@@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             bindings: {},
             selectOnLoad: false,
         }
+        let contents = (
+            <FieldView {...props} />
+        );
         return (
             <tr className={this.props.rowStyle}>
                 <td>{this.key.Name}</td>
-                <td><FieldView {...props} /></td>
+                <td><EditableView contents={contents} height={36} GetValue={() => {
+                    let field = props.doc.Get(props.fieldKey);
+                    if (field && field instanceof Field) {
+                        return field.ToScriptString();
+                    }
+                    return field || "";
+                }}
+                    SetValue={(value: string) => {
+                        let script = CompileScript(value, undefined, true);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}></EditableView></td>
             </tr>
         )
     }
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
new file mode 100644
index 000000000..5d5f782d2
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.scss
@@ -0,0 +1,65 @@
+@import "../global_variables";
+.link-container {
+    width: 100%;
+    height: 35px;
+    display: flex;
+    flex-direction: row;
+    border-top: 0.5px solid #bababa;
+}
+
+.info-container {
+    width: 55%;
+    padding-top: 5px;
+    padding-left: 5px;
+    display: flex;
+    flex-direction: column
+}
+
+.link-name {
+    font-size: 11px;
+}
+
+.doc-name {
+    font-size: 8px;
+}
+
+.button-container {
+    width: 45%;
+    display: flex;
+    flex-direction: row;
+}
+
+.button {
+    height: 20px;
+    width: 20px;
+    margin: 8px 4px;
+    border-radius: 50%;
+    opacity: 0.9;
+    pointer-events: auto;
+    background-color: $dark-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 60%;
+    transition: transform 0.2s;
+}
+
+.button:hover {
+    background: $main-accent;
+    cursor: pointer;
+}
+
+.fa-icon-view {
+    margin-left: 3px;
+    margin-top: 5px;
+}
+
+.fa-icon-edit {
+    margin-left: 5px;
+    margin-top: 5px;
+}
+
+.fa-icon-delete {
+    margin-left: 6px;
+    margin-top: 5px;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
new file mode 100644
index 000000000..430c1b694
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -0,0 +1,102 @@
+import { observable, computed, action } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { observer } from "mobx-react";
+import './LinkBox.scss'
+import { KeyStore } from '../../../fields/KeyStore'
+import { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { DocumentManager } from "../../util/DocumentManager";
+import { LinkEditor } from "./LinkEditor";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye } from '@fortawesome/free-solid-svg-icons';
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+
+library.add(faEye);
+library.add(faEdit);
+library.add(faTimes);
+
+interface Props {
+    linkDoc: Document;
+    linkName: String;
+    pairedDoc: Document;
+    type: String;
+    showEditor: () => void
+}
+
+@observer
+export class LinkBox extends React.Component<Props> {
+
+    onViewButtonPressed = (e: React.PointerEvent): void => {
+        console.log("view down");
+        e.stopPropagation();
+        let docView = DocumentManager.Instance.getDocumentView(this.props.pairedDoc);
+        if (docView) {
+            docView.props.focus(this.props.pairedDoc);
+        } else {
+            CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc)
+        }
+    }
+
+    onEditButtonPressed = (e: React.PointerEvent): void => {
+        console.log("edit down");
+        e.stopPropagation();
+
+        this.props.showEditor();
+    }
+
+    onDeleteButtonPressed = (e: React.PointerEvent): void => {
+        console.log("delete down");
+        e.stopPropagation();
+        this.props.linkDoc.GetTAsync(KeyStore.LinkedFromDocs, Document, field => {
+            if (field) {
+                field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field => {
+                    if (field) {
+                        field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+                    }
+                })
+            }
+        });
+        this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => {
+            if (field) {
+                field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field => {
+                    if (field) {
+                        field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+                    }
+                })
+            }
+        });
+    }
+
+    render() {
+
+        return (
+            //<LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
+            <div className="link-container">
+                <div className="info-container" onPointerDown={this.onViewButtonPressed}>
+                    <div className="link-name">
+                        <p>{this.props.linkName}</p>
+                    </div>
+                    <div className="doc-name">
+                        <p>{this.props.type}{this.props.pairedDoc.Title}</p>
+                    </div>
+                </div>
+
+                <div className="button-container">
+                    <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div>
+                    <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div>
+                    <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-delete" icon="times" size="sm" /></div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
new file mode 100644
index 000000000..fb0c69cff
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -0,0 +1,43 @@
+@import "../global_variables";
+.edit-container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.name-input {
+    margin-bottom: 10px;
+    padding: 5px;
+    font-size: 12px;
+    border: 1px solid #bababa;
+}
+
+.description-input {
+    font-size: 11px;
+    padding: 5px;
+    margin-bottom: 10px;
+    border: 1px solid #bababa;
+}
+
+.save-button {
+    width: 50px;
+    height: 20px;
+    pointer-events: auto;
+    background-color: $dark-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    padding: 2px;
+    font-size: 10px;
+    margin: 0 auto;
+    transition: transform 0.2s;
+    text-align: center;
+    line-height: 20px;
+}
+
+.save-button:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
new file mode 100644
index 000000000..3f7b4bf2d
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -0,0 +1,58 @@
+import { observable, computed, action } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { observer } from "mobx-react";
+import './LinkEditor.scss'
+import { KeyStore } from '../../../fields/KeyStore'
+import { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
+import { TextField } from "../../../fields/TextField";
+import { link } from "fs";
+
+interface Props {
+    linkDoc: Document;
+    showLinks: () => void;
+}
+
+@observer
+export class LinkEditor extends React.Component<Props> {
+
+    @observable private _nameInput: string = this.props.linkDoc.GetText(KeyStore.Title, "");
+    @observable private _descriptionInput: string = this.props.linkDoc.GetText(KeyStore.LinkDescription, "");
+
+
+    onSaveButtonPressed = (e: React.PointerEvent): void => {
+        console.log("view down");
+        e.stopPropagation();
+
+        this.props.linkDoc.SetData(KeyStore.Title, this._nameInput, TextField);
+        this.props.linkDoc.SetData(KeyStore.LinkDescription, this._descriptionInput, TextField);
+
+        this.props.showLinks();
+    }
+
+
+
+    render() {
+
+        return (
+            <div className="edit-container">
+                <input onChange={this.onNameChanged} className="name-input" type="text" value={this._nameInput} placeholder="Name . . ."></input>
+                <textarea onChange={this.onDescriptionChanged} className="description-input" value={this._descriptionInput} placeholder="Description . . ."></textarea>
+                <div className="save-button" onPointerDown={this.onSaveButtonPressed}>SAVE</div>
+            </div>
+
+        )
+    }
+
+    @action
+    onNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._nameInput = e.target.value;
+    }
+
+    @action
+    onDescriptionChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this._descriptionInput = e.target.value;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
new file mode 100644
index 000000000..dedcce6ef
--- /dev/null
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -0,0 +1,21 @@
+#linkMenu-container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+#linkMenu-searchBar {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    border: 1px solid #bababa;
+}
+
+#linkMenu-list {
+    margin-top: 5px;
+    width: 100%;
+    height: 100px;
+    overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
new file mode 100644
index 000000000..5eeb40772
--- /dev/null
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -0,0 +1,54 @@
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { FieldWaiting } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from '../../../fields/KeyStore';
+import { ListField } from "../../../fields/ListField";
+import { DocumentView } from "./DocumentView";
+import { LinkBox } from "./LinkBox";
+import { LinkEditor } from "./LinkEditor";
+import './LinkMenu.scss';
+import React = require("react");
+
+interface Props {
+    docView: DocumentView;
+    changeFlyout: () => void
+}
+
+@observer
+export class LinkMenu extends React.Component<Props> {
+
+    @observable private _editingLink?: Document;
+
+    renderLinkItems(links: Document[], key: Key, type: string) {
+        return links.map(link => {
+            let doc = link.GetT(key, Document);
+            if (doc && doc != FieldWaiting) {
+                return <LinkBox key={doc.Id} linkDoc={link} linkName={link.Title} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />
+            }
+        })
+    }
+
+    render() {
+        //get list of links from document
+        let linkFrom: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []);
+        let linkTo: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []);
+        if (this._editingLink === undefined) {
+            return (
+                <div id="linkMenu-container">
+                    <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input>
+                    <div id="linkMenu-list">
+                        {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")}
+                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
+                    </div>
+                </div>
+            )
+        } else {
+            return (
+                <LinkEditor linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
+            )
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 9f92410d4..ad947afd5 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -11,5 +11,5 @@
 }
 .pdfBox-contentContainer {
     position: absolute;
-    transform-origin: "left top";
+    transform-origin: left top;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 70a70c7c8..b0b5a63a4 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,5 +1,5 @@
 import * as htmlToImage from "html-to-image";
-import { action, computed, observable, reaction, IReactionDisposer } from 'mobx';
+import { action, computed, observable, reaction, IReactionDisposer, trace } from 'mobx';
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css';
 import Measure from "react-measure";
@@ -86,7 +86,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
     @observable private _interactive: boolean = false;
     @observable private _loaded: boolean = false;
 
-    @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); }
+    @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); }
 
     componentDidMount() {
         this._reactionDisposer = reaction(
@@ -423,7 +423,9 @@ export class PDFBox extends React.Component<FieldViewProps> {
         //      so this design is flawed.
         var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
         if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
-            this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width);
+            var nativeHeight = nativeWidth * r.entry.height / r.entry.width;
+            this.props.doc.SetNumber(KeyStore.Height, nativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0));
+            this.props.doc.SetNumber(KeyStore.NativeHeight, nativeHeight);
         }
         if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) {
             this.saveThumbnail();
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
new file mode 100644
index 000000000..76bbeb37c
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.scss
@@ -0,0 +1,4 @@
+.videobox-cont{
+    width: 100%; 
+    height: Auto; 
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
new file mode 100644
index 000000000..8c1ee669f
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -0,0 +1,61 @@
+import React = require("react")
+import { observer } from "mobx-react";
+import { FieldWaiting } from '../../../fields/Field';
+import { VideoField } from '../../../fields/VideoField';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./VideoBox.scss";
+import Measure from "react-measure";
+import { action, trace, observable } from "mobx";
+import { KeyStore } from "../../../fields/KeyStore";
+import { number } from "prop-types";
+
+@observer
+export class VideoBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(VideoBox) }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+
+    _loaded: boolean = false;
+
+    @action
+    setScaling = (r: any) => {
+        if (this._loaded) {
+            // bcz: the nativeHeight should really be set when the document is imported.
+            //      also, the native dimensions could be different for different pages of the PDF
+            //      so this design is flawed.
+            var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
+            var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0);
+            var newNativeHeight = nativeWidth * r.entry.height / r.entry.width;
+            if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) {
+                this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0));
+                this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight);
+            }
+        } else {
+            this._loaded = true;
+        }
+    }
+
+
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey)
+        let path = field == FieldWaiting ? "http://techslides.com/demos/sample-videos/small.mp4" :
+            field instanceof VideoField ? field.Data.href : "http://techslides.com/demos/sample-videos/small.mp4";
+
+        //setTimeout(action(() => this._loaded = true), 500);
+        return (
+            <Measure onResize={this.setScaling}>
+                {({ measureRef }) =>
+                    <video className="videobox-cont" ref={measureRef}>
+                        <source src={path} type="video/mp4" />
+                        Not supported.
+                        </video>
+                }
+            </Measure>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index e72b3c4da..a535b2638 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -4,6 +4,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: scroll;
 }
 
 .webBox-button {