working submenu; dimensions now relative to vw, vh

74 files changed, 4563 insertions, 964 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 000000000..f20f36d63
--- /dev/null
+++ b/src/.DS_Store
diff --git a/src/client/Server.ts b/src/client/Server.ts
index 2d162b93a..f0cf0bb9b 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -9,7 +9,7 @@ import { MessageStore, Types } from "./../server/Message";
 
 export class Server {
     public static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap();
-    static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234");
+    static Socket: SocketIOClient.Socket = OpenSocket(`${window.location.protocol}//${window.location.hostname}:1234`);
     static GUID: string = Utils.GenerateGuid()
 
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 15ecfbfe6..7b30dff98 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -7,10 +7,22 @@ import { ListField } from "../../fields/ListField";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
 import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
+import { WebField } from "../../fields/WebField";
+import { WebBox } from "../views/nodes/WebBox";
 import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
-import { FieldView } from "../views/nodes/FieldView";
 import { HtmlField } from "../../fields/HtmlField";
-import { WebView } from "../views/nodes/WebView";
+import { Key } from "../../fields/Key"
+import { Field } from "../../fields/Field";
+import { KeyValueBox } from "../views/nodes/KeyValueBox"
+import { KVPField } from "../../fields/KVPField";
+import { VideoField } from "../../fields/VideoField"
+import { VideoBox } from "../views/nodes/VideoBox";
+import { AudioField } from "../../fields/AudioField";
+import { AudioBox } from "../views/nodes/AudioBox";
+import { PDFField } from "../../fields/PDFField";
+import { PDFBox } from "../views/nodes/PDFBox";
+import { CollectionPDFView } from "../views/collections/CollectionPDFView";
+import { RichTextField } from "../../fields/RichTextField";
 
 export interface DocumentOptions {
     x?: number;
@@ -20,108 +32,156 @@ export interface DocumentOptions {
     nativeWidth?: number;
     nativeHeight?: number;
     title?: string;
+    panx?: number;
+    pany?: number;
+    scale?: number;
+    layout?: string;
+    layoutKeys?: Key[];
+    viewType?: number;
 }
 
 export namespace Documents {
-    export function initProtos(callback: () => void) {
-        Server.GetFields([collectionProtoId, textProtoId, imageProtoId], (fields) => {
-            collectionProto = fields[collectionProtoId] as Document;
+    let textProto: Document;
+    let imageProto: Document;
+    let webProto: Document;
+    let collProto: Document;
+    let kvpProto: Document;
+    let videoProto: Document;
+    let audioProto: Document;
+    let pdfProto: Document;
+    const textProtoId = "textProto";
+    const pdfProtoId = "pdfProto";
+    const imageProtoId = "imageProto";
+    const webProtoId = "webProto";
+    const collProtoId = "collectionProto";
+    const kvpProtoId = "kvpProto";
+    const videoProtoId = "videoProto"
+    const audioProtoId = "audioProto";
+
+    export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) {
+        Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => {
+            collProto = fields[collProtoId] as Document;
             imageProto = fields[imageProtoId] as Document;
             textProto = fields[textProtoId] as Document;
-            callback()
+            webProto = fields[webProtoId] as Document;
+            kvpProto = fields[kvpProtoId] as Document;
+            callback(fields[mainDocId] as Document)
         });
     }
+    function assignOptions(doc: Document, options: DocumentOptions): Document {
+        if (options.x !== undefined) { doc.SetNumber(KeyStore.X, options.x); }
+        if (options.y !== undefined) { doc.SetNumber(KeyStore.Y, options.y); }
+        if (options.width !== undefined) { doc.SetNumber(KeyStore.Width, options.width); }
+        if (options.height !== undefined) { doc.SetNumber(KeyStore.Height, options.height); }
+        if (options.nativeWidth !== undefined) { doc.SetNumber(KeyStore.NativeWidth, options.nativeWidth); }
+        if (options.nativeHeight !== undefined) { doc.SetNumber(KeyStore.NativeHeight, options.nativeHeight); }
+        if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); }
+        if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); }
+        if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); }
+        if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); }
+        if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); }
+        if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
+        if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
+        return doc;
+    }
+    function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document {
+        return assignOptions(new Document(protoId), { ...options, title: title, layout: layout });
+    }
+    function SetInstanceOptions<T, U extends Field & { Data: T }>(doc: Document, options: DocumentOptions, value: T, ctor: { new(): U }, id?: string) {
+        var deleg = doc.MakeDelegate(id);
+        deleg.SetData(KeyStore.Data, value, ctor);
+        return assignOptions(deleg, options);
+    }
 
-    function setupOptions(doc: Document, options: DocumentOptions): void {
-        if (options.x !== undefined) {
-            doc.SetData(KeyStore.X, options.x, NumberField);
-        }
-        if (options.y !== undefined) {
-            doc.SetData(KeyStore.Y, options.y, NumberField);
-        }
-        if (options.width !== undefined) {
-            doc.SetData(KeyStore.Width, options.width, NumberField);
-        }
-        if (options.height !== undefined) {
-            doc.SetData(KeyStore.Height, options.height, NumberField);
-        }
-        if (options.nativeWidth !== undefined) {
-            doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField);
-        }
-        if (options.nativeHeight !== undefined) {
-            doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField);
-        }
-        if (options.title !== undefined) {
-            doc.SetData(KeyStore.Title, options.title, TextField);
+    function GetImagePrototype(): Document {
+        if (!imageProto) {
+            imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("AnnotationsKey"),
+                { x: 0, y: 0, nativeWidth: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
+            imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString());
         }
-        doc.SetData(KeyStore.Scale, 1, NumberField);
-        doc.SetData(KeyStore.PanX, 0, NumberField);
-        doc.SetData(KeyStore.PanY, 0, NumberField);
+        return imageProto;
     }
-
-    let textProto: Document;
-    const textProtoId = "textProto";
     function GetTextPrototype(): Document {
-        if (!textProto) {
-            textProto = new Document(textProtoId);
-            textProto.Set(KeyStore.X, new NumberField(0));
-            textProto.Set(KeyStore.Y, new NumberField(0));
-            textProto.Set(KeyStore.Width, new NumberField(300));
-            textProto.Set(KeyStore.Height, new NumberField(150));
-            textProto.Set(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
-            textProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        return textProto ? textProto :
+            textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] });
+    }
+    function GetPdfPrototype(): Document {
+        if (!pdfProto) {
+            pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("AnnotationsKey"),
+                { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
+            pdfProto.SetNumber(KeyStore.CurPage, 1);
+            pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString());
         }
-        return textProto;
+        return pdfProto;
     }
-
-    export function TextDocument(options: DocumentOptions = {}): Document {
-        let doc = GetTextPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        // doc.SetField(KeyStore.Data, new RichTextField());
-        return doc;
+    function GetWebPrototype(): Document {
+        return webProto ? webProto :
+            webProto = setupPrototypeOptions(webProtoId, "WEB_PROTO", WebBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 300, layoutKeys: [KeyStore.Data] });
     }
-
-    let htmlProto: Document;
-    const htmlProtoId = "htmlProto";
-    function GetHtmlPrototype(): Document {
-        if (!htmlProto) {
-            htmlProto = new Document(htmlProtoId);
-            htmlProto.Set(KeyStore.X, new NumberField(0));
-            htmlProto.Set(KeyStore.Y, new NumberField(0));
-            htmlProto.Set(KeyStore.Width, new NumberField(300));
-            htmlProto.Set(KeyStore.Height, new NumberField(150));
-            htmlProto.Set(KeyStore.Layout, new TextField(WebView.LayoutString()));
-            htmlProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return htmlProto;
+    function GetCollectionPrototype(): Document {
+        return collProto ? collProto :
+            collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"),
+                { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] });
     }
 
-    export function HtmlDocument(html: string, options: DocumentOptions = {}): Document {
-        let doc = GetHtmlPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new HtmlField(html));
-        return doc;
+    function GetKVPPrototype(): Document {
+        return kvpProto ? kvpProto :
+            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
+    }
+    function GetVideoPrototype(): Document {
+        return videoProto ? videoProto :
+            videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", VideoBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
+    }
+    function GetAudioPrototype(): Document {
+        return audioProto ? audioProto :
+            audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
     }
 
-    let imageProto: Document;
-    const imageProtoId = "imageProto";
-    function GetImagePrototype(): Document {
-        if (!imageProto) {
-            imageProto = new Document(imageProtoId);
-            imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
-            imageProto.Set(KeyStore.X, new NumberField(0));
-            imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.NativeWidth, new NumberField(300));
-            imageProto.Set(KeyStore.Width, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("AnnotationsKey")));
-            imageProto.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)
-            imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
-            // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
-            return imageProto;
-        }
-        return imageProto;
 
+    export function ImageDocument(url: string, options: DocumentOptions = {}) {
+        let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
+            new URL(url), ImageField);
+        doc.SetText(KeyStore.Caption, "my caption...");
+        doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption());
+        doc.SetText(KeyStore.OverlayLayout, FixedCaption());
+        return doc;
+    }
+    export function VideoDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetVideoPrototype(), options, new URL(url), VideoField);
+    }
+    export function AudioDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetAudioPrototype(), options, new URL(url), AudioField);
+    }
+    export function TextDocument(options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetTextPrototype(), options, "", RichTextField);
+    }
+    export function PdfDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetPdfPrototype(), options, new URL(url), PDFField);
+    }
+    export function WebDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetWebPrototype(), options, new URL(url), WebField);
+    }
+    export function HtmlDocument(html: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetWebPrototype(), options, html, HtmlField);
+    }
+    export function FreeformDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, documents, ListField, id)
+    }
+    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, documents, ListField, id)
+    }
+    export function DockDocument(config: string, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, config, TextField, id)
+    }
+    export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) {
+        var deleg = GetKVPPrototype().MakeDelegate(id);
+        deleg.Set(KeyStore.Data, document);
+        return assignOptions(deleg, options);
     }
 
     // example of custom display string for an image that shows a caption.
@@ -130,64 +190,14 @@ export namespace Documents {
             <div style="position:relative; margin:auto; height:85%;" >`
             + ImageBox.LayoutString() +
             `</div>
-            <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
+            <div style="position:relative; height:15%; text-align:center; ">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
     function FixedCaption() {
         return `<div style="position:absolute; height:30px; bottom:0; width:100%">
-            <div style="position:absolute; width:100%; height:100%; overflow:auto;text-align:center;bottom:0;">`
+            <div style="position:absolute; width:100%; height:100%; text-align:center;bottom:0;">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
-
-    export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
-        let doc = GetImagePrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ImageField(new URL(url)));
-        doc.Set(KeyStore.Caption, new TextField("my caption..."));
-        doc.Set(KeyStore.BackgroundLayout, new TextField(EmbeddedCaption()));
-        doc.Set(KeyStore.OverlayLayout, new TextField(FixedCaption()));
-        doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption]));
-        console.log("" + doc.GetNumber(KeyStore.Height, 311));
-        return doc;
-    }
-
-    let collectionProto: Document;
-    const collectionProtoId = "collectionProto";
-    function GetCollectionPrototype(): Document {
-        if (!collectionProto) {
-            collectionProto = new Document(collectionProtoId);
-            collectionProto.Set(KeyStore.Scale, new NumberField(1));
-            collectionProto.Set(KeyStore.PanX, new NumberField(0));
-            collectionProto.Set(KeyStore.PanY, new NumberField(0));
-            collectionProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("DataKey")));
-            collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return collectionProto;
-    }
-
-    export function CollectionDocument(data: Array<Document> | string, viewType: CollectionViewType, options: DocumentOptions = {}, id?: string): Document {
-        let doc = GetCollectionPrototype().MakeDelegate(id);
-        setupOptions(doc, options);
-        if (typeof data === "string") {
-            doc.SetText(KeyStore.Data, data);
-        } else {
-            doc.SetData(KeyStore.Data, data, ListField);
-        }
-        doc.SetNumber(KeyStore.ViewType, viewType);
-        return doc;
-    }
-
-    export function FreeformDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
-        return CollectionDocument(documents, CollectionViewType.Freeform, options, id)
-    }
-
-    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
-        return CollectionDocument(documents, CollectionViewType.Schema, options, id)
-    }
-
-    export function DockDocument(config: string, options: DocumentOptions, id?: string) {
-        return CollectionDocument(config, CollectionViewType.Docking, options, id)
-    }
 }
\ No newline at end of file
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
new file mode 100644
index 000000000..5b99b4ef8
--- /dev/null
+++ b/src/client/util/DocumentManager.ts
@@ -0,0 +1,51 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { Document } from "../../fields/Document"
+import { DocumentView } from '../views/nodes/DocumentView';
+
+
+export class DocumentManager {
+
+    //global holds all of the nodes (regardless of which collection they're in)
+    @observable
+    public DocumentViews: DocumentView[] = [];
+
+    // singleton instance
+    private static _instance: DocumentManager;
+
+    // create one and only one instance of NodeManager
+    public static get Instance(): DocumentManager {
+        return this._instance || (this._instance = new this());
+    }
+
+    //private constructor so no other class can create a nodemanager
+    private constructor() {
+        // this.DocumentViews = new Array<DocumentView>();
+    }
+
+    public getDocumentView(toFind: Document): DocumentView | null {
+
+        let toReturn: DocumentView | null;
+        toReturn = null;
+
+        //gets document view that is in a freeform canvas collection
+        DocumentManager.Instance.DocumentViews.map(view => {
+            let doc = view.props.Document;
+            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            //     if (Object.is(doc, toFind)) {
+            //         toReturn = view;
+            //         return;
+            //     }
+            // }
+
+            if (Object.is(doc, toFind)) {
+                toReturn = view;
+                return;
+            }
+
+        })
+
+        return (toReturn);
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index aab23f91c..4a61220a5 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,4 +1,39 @@
 import { DocumentDecorations } from "../views/DocumentDecorations";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../../fields/Document"
+import { action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
+import { ImageField } from "../../fields/ImageField";
+import { KeyStore } from "../../fields/KeyStore";
+
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
+    let onRowMove = action((e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+        DragManager.StartDrag(_reference.current!, { document: docFunc() });
+    });
+    let onRowUp = action((e: PointerEvent): void => {
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+    });
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
+        //}
+    }
+    return onItemDown;
+}
 
 export namespace DragManager {
     export function Root() {
@@ -62,9 +97,9 @@ export namespace DragManager {
     }
 
     export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) {
-        DocumentDecorations.Instance.Hidden = true;
         if (!dragDiv) {
             dragDiv = document.createElement("div");
+            dragDiv.className = "dragManager-dragDiv"
             DragManager.Root().appendChild(dragDiv);
         }
         const w = ele.offsetWidth, h = ele.offsetHeight;
@@ -72,6 +107,7 @@ export namespace DragManager {
         const scaleX = rect.width / w, scaleY = rect.height / h;
         let x = rect.left, y = rect.top;
         // const offsetX = e.x - rect.left, offsetY = e.y - rect.top;
+
         let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
@@ -82,10 +118,27 @@ export namespace DragManager {
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         dragElement.style.width = `${rect.width / scaleX}px`;
         dragElement.style.height = `${rect.height / scaleY}px`;
-        // It seems like the above code should be able to just be this:
-        // dragElement.style.transform = `translate(${x}px, ${y}px)`;
-        // dragElement.style.width = `${rect.width}px`;
-        // dragElement.style.height = `${rect.height}px`;
+
+        // bcz: PDFs don't show up if you clone them because they contain a canvas.
+        //      however, PDF's have a thumbnail field that contains an image of their canvas.
+        //      So we replace the pdf's canvas with the image thumbnail
+        const docView: DocumentView = dragData["documentView"];
+        const doc: Document = docView ? docView.props.Document : dragData["document"];
+
+        if (doc) {
+            var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement;
+            let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField);
+            if (pdfBox && pdfBox.childElementCount && thumbnail) {
+                let img = new Image();
+                img!.src = thumbnail.toString();
+                img!.style.position = "absolute";
+                img!.style.width = `${rect.width / scaleX}px`;
+                img!.style.height = `${rect.height / scaleY}px`;
+                pdfBox.replaceChild(img!, pdfBox.children[0])
+            }
+        }
+
+
         dragDiv.appendChild(dragElement);
 
         let hideSource = false;
@@ -100,29 +153,41 @@ export namespace DragManager {
         if (hideSource) {
             ele.hidden = true;
         }
-
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
             x += e.movementX;
             y += e.movementY;
+            if (e.shiftKey) {
+                abortDrag();
+                CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 });
+            }
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
-        const upHandler = (e: PointerEvent) => {
+
+        const abortDrag = () => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, dragData, options);
+            dragDiv.removeChild(dragElement);
             if (hideSource && !wasHidden) {
                 ele.hidden = false;
             }
+        }
+        const upHandler = (e: PointerEvent) => {
+            abortDrag();
+            FinishDrag(ele, e, dragData, options);
         };
         document.addEventListener("pointermove", moveHandler, true);
         document.addEventListener("pointerup", upHandler);
     }
 
     function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) {
-        dragDiv.removeChild(dragEle);
+        let parent = dragEle.parentElement;
+        if (parent)
+            parent.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
+        if (parent)
+            parent.appendChild(dragEle);
         if (!target) {
             return;
         }
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
new file mode 100644
index 000000000..abf448c9f
--- /dev/null
+++ b/src/client/util/RichTextSchema.tsx
@@ -0,0 +1,223 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model"
+import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands'
+import { redo, undo } from 'prosemirror-history'
+import { orderedList, bulletList, listItem } from 'prosemirror-schema-list'
+
+const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"],
+  preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]
+
+// :: Object
+// [Specs](#model.NodeSpec) for the nodes defined in this schema.
+export const nodes: { [index: string]: NodeSpec } = {
+  // :: NodeSpec The top level document node.
+  doc: {
+    content: "block+"
+  },
+
+  // :: NodeSpec A plain paragraph textblock. Represented in the DOM
+  // as a `<p>` element.
+  paragraph: {
+    content: "inline*",
+    group: "block",
+    parseDOM: [{ tag: "p" }],
+    toDOM() { return pDOM }
+  },
+
+  // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks.
+  blockquote: {
+    content: "block+",
+    group: "block",
+    defining: true,
+    parseDOM: [{ tag: "blockquote" }],
+    toDOM() { return blockquoteDOM }
+  },
+
+  // :: NodeSpec A horizontal rule (`<hr>`).
+  horizontal_rule: {
+    group: "block",
+    parseDOM: [{ tag: "hr" }],
+    toDOM() { return hrDOM }
+  },
+
+  // :: NodeSpec A heading textblock, with a `level` attribute that
+  // should hold the number 1 to 6. Parsed and serialized as `<h1>` to
+  // `<h6>` elements.
+  heading: {
+    attrs: { level: { default: 1 } },
+    content: "inline*",
+    group: "block",
+    defining: true,
+    parseDOM: [{ tag: "h1", attrs: { level: 1 } },
+    { tag: "h2", attrs: { level: 2 } },
+    { tag: "h3", attrs: { level: 3 } },
+    { tag: "h4", attrs: { level: 4 } },
+    { tag: "h5", attrs: { level: 5 } },
+    { tag: "h6", attrs: { level: 6 } }],
+    toDOM(node: any) { return ["h" + node.attrs.level, 0] }
+  },
+
+  // :: NodeSpec A code listing. Disallows marks or non-text inline
+  // nodes by default. Represented as a `<pre>` element with a
+  // `<code>` element inside of it.
+  code_block: {
+    content: "text*",
+    marks: "",
+    group: "block",
+    code: true,
+    defining: true,
+    parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
+    toDOM() { return preDOM }
+  },
+
+  // :: NodeSpec The text node.
+  text: {
+    group: "inline"
+  },
+
+  // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
+  // `alt`, and `href` attributes. The latter two default to the empty
+  // string.
+  image: {
+    inline: true,
+    attrs: {
+      src: {},
+      alt: { default: null },
+      title: { default: null }
+    },
+    group: "inline",
+    draggable: true,
+    parseDOM: [{
+      tag: "img[src]", getAttrs(dom: any) {
+        return {
+          src: dom.getAttribute("src"),
+          title: dom.getAttribute("title"),
+          alt: dom.getAttribute("alt")
+        }
+      }
+    }],
+    toDOM(node: any) { return ["img", node.attrs] }
+  },
+
+  // :: NodeSpec A hard line break, represented in the DOM as `<br>`.
+  hard_break: {
+    inline: true,
+    group: "inline",
+    selectable: false,
+    parseDOM: [{ tag: "br" }],
+    toDOM() { return brDOM }
+  },
+
+  ordered_list: {
+    ...orderedList,
+    content: 'list_item+',
+    group: 'block'
+  },
+  bullet_list: {
+    content: 'list_item+',
+    group: 'block',
+    parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }],
+    toDOM() { return ulDOM }
+  },
+  list_item: {
+    ...listItem,
+    content: 'paragraph block*'
+  }
+}
+
+const emDOM: DOMOutputSpecArray = ["em", 0];
+const strongDOM: DOMOutputSpecArray = ["strong", 0];
+const codeDOM: DOMOutputSpecArray = ["code", 0];
+const underlineDOM: DOMOutputSpecArray = ["underline", 0];
+
+// :: Object [Specs](#model.MarkSpec) for the marks in the schema.
+export const marks: { [index: string]: MarkSpec } = {
+  // :: MarkSpec A link. Has `href` and `title` attributes. `title`
+  // defaults to the empty string. Rendered and parsed as an `<a>`
+  // element.
+  link: {
+    attrs: {
+      href: {},
+      title: { default: null }
+    },
+    inclusive: false,
+    parseDOM: [{
+      tag: "a[href]", getAttrs(dom: any) {
+        return { href: dom.getAttribute("href"), title: dom.getAttribute("title") }
+      }
+    }],
+    toDOM(node: any) { return ["a", node.attrs, 0] }
+  },
+
+  // :: MarkSpec An emphasis mark. Rendered as an `<em>` element.
+  // Has parse rules that also match `<i>` and `font-style: italic`.
+  em: {
+    parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
+    toDOM() { return emDOM }
+  },
+
+  // :: MarkSpec A strong mark. Rendered as `<strong>`, parse rules
+  // also match `<b>` and `font-weight: bold`.
+  strong: {
+    parseDOM: [{ tag: "strong" },
+    { tag: "b" },
+    { style: "font-weight" }],
+    toDOM() { return strongDOM }
+  },
+
+  underline: {
+    parseDOM: [
+      { tag: 'u' },
+      { style: 'text-decoration=underline' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration:underline'
+    }]
+  },
+
+  strikethrough: {
+    parseDOM: [
+      { tag: 'strike' },
+      { style: 'text-decoration=line-through' },
+      { style: 'text-decoration-line=line-through' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration-line:line-through'
+    }]
+  },
+
+  subscript: {
+    excludes: 'superscript',
+    parseDOM: [
+      { tag: 'sub' },
+      { style: 'vertical-align=sub' }
+    ],
+    toDOM: () => ['sub']
+  },
+
+  superscript: {
+    excludes: 'subscript',
+    parseDOM: [
+      { tag: 'sup' },
+      { style: 'vertical-align=super' }
+    ],
+    toDOM: () => ['sup']
+  },
+
+
+  // :: MarkSpec Code font mark. Represented as a `<code>` element.
+  code: {
+    parseDOM: [{ tag: "code" }],
+    toDOM() { return codeDOM }
+  }
+}
+
+// :: Schema
+// This schema rougly corresponds to the document schema used by
+// [CommonMark](http://commonmark.org/), minus the list elements,
+// which are defined in the [`prosemirror-schema-list`](#schema-list)
+// module.
+//
+// To reuse elements from this schema, extend or read from its
+// `spec.nodes` and `spec.marks` [properties](#model.Schema.spec).
+export const schema = new Schema({ nodes, marks })
\ No newline at end of file
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index befb9df4c..46bd1a206 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -1,12 +1,21 @@
 // import * as ts from "typescript"
 let ts = (window as any).ts;
 import { Opt, Field } from "../../fields/Field";
-import { Document as DocumentImport } from "../../fields/Document";
-import { NumberField as NumberFieldImport, NumberField } from "../../fields/NumberField";
-import { ImageField as ImageFieldImport } from "../../fields/ImageField";
-import { TextField as TextFieldImport, TextField } from "../../fields/TextField";
-import { RichTextField as RichTextFieldImport } from "../../fields/RichTextField";
-import { KeyStore as KeyStoreImport } from "../../fields/KeyStore";
+import { Document } from "../../fields/Document";
+import { NumberField } from "../../fields/NumberField";
+import { ImageField } from "../../fields/ImageField";
+import { TextField } from "../../fields/TextField";
+import { RichTextField } from "../../fields/RichTextField";
+import { KeyStore } from "../../fields/KeyStore";
+import { ListField } from "../../fields/ListField";
+// // @ts-ignore
+// import * as typescriptlib from '!!raw-loader!../../../node_modules/typescript/lib/lib.d.ts'
+// // @ts-ignore
+// import * as typescriptes5 from '!!raw-loader!../../../node_modules/typescript/lib/lib.es5.d.ts'
+
+// @ts-ignore
+import * as typescriptlib from '!!raw-loader!./type_decls.d'
+
 
 export interface ExecutableScript {
     (): any;
@@ -14,23 +23,25 @@ export interface ExecutableScript {
     compiled: boolean;
 }
 
-function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
+function Compile(script: string | undefined, diagnostics: Opt<any[]>, scope: { [name: string]: any }): ExecutableScript {
     const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
 
     let func: () => Opt<Field>;
-    if (compiled) {
+    if (compiled && script) {
+        let fieldTypes = [Document, NumberField, TextField, ImageField, RichTextField, ListField];
+        let paramNames = ["KeyStore", ...fieldTypes.map(fn => fn.name)];
+        let params: any[] = [KeyStore, ...fieldTypes]
+        for (let prop in scope) {
+            if (prop === "this") {
+                continue;
+            }
+            paramNames.push(prop);
+            params.push(scope[prop]);
+        }
+        let thisParam = scope["this"];
+        let compiledFunction = new Function(...paramNames, script);
         func = function (): Opt<Field> {
-            let KeyStore = KeyStoreImport;
-            let Document = DocumentImport;
-            let NumberField = NumberFieldImport;
-            let TextField = TextFieldImport;
-            let ImageField = ImageFieldImport;
-            let RichTextField = RichTextFieldImport;
-            let window = undefined;
-            let document = undefined;
-            let retVal = eval(script);
-
-            return retVal;
+            return compiledFunction.apply(thisParam, params)
         };
     } else {
         func = () => undefined;
@@ -42,10 +53,73 @@ function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
         });
 }
 
-export function CompileScript(script: string): ExecutableScript {
-    let result = (window as any).ts.transpileModule(script, {})
+interface File {
+    fileName: string;
+    content: string;
+}
+
+// class ScriptingCompilerHost implements ts.CompilerHost {
+class ScriptingCompilerHost {
+    files: File[] = [];
+
+    // getSourceFile(fileName: string, languageVersion: ts.ScriptTarget, onError?: ((message: string) => void) | undefined, shouldCreateNewSourceFile?: boolean | undefined): ts.SourceFile | undefined {
+    getSourceFile(fileName: string, languageVersion: any, onError?: ((message: string) => void) | undefined, shouldCreateNewSourceFile?: boolean | undefined): any | undefined {
+        let contents = this.readFile(fileName);
+        if (contents !== undefined) {
+            return ts.createSourceFile(fileName, contents, languageVersion, true);
+        }
+        return undefined;
+    }
+    // getDefaultLibFileName(options: ts.CompilerOptions): string {
+    getDefaultLibFileName(options: any): string {
+        return 'node_modules/typescript/lib/lib.d.ts' // No idea what this means...
+    }
+    writeFile(fileName: string, content: string) {
+        const file = this.files.find(file => file.fileName === fileName);
+        if (file) {
+            file.content = content;
+        } else {
+            this.files.push({ fileName, content })
+        }
+    }
+    getCurrentDirectory(): string {
+        return '';
+    }
+    getCanonicalFileName(fileName: string): string {
+        return this.useCaseSensitiveFileNames() ? fileName : fileName.toLowerCase();
+    }
+    useCaseSensitiveFileNames(): boolean {
+        return true;
+    }
+    getNewLine(): string {
+        return '\n';
+    }
+    fileExists(fileName: string): boolean {
+        return this.files.some(file => file.fileName === fileName);
+    }
+    readFile(fileName: string): string | undefined {
+        let file = this.files.find(file => file.fileName === fileName);
+        if (file) {
+            return file.content;
+        }
+        return undefined;
+    }
+}
+
+export function CompileScript(script: string, scope?: { [name: string]: any }, addReturn: boolean = false): ExecutableScript {
+    let host = new ScriptingCompilerHost;
+    let funcScript = `(function() {
+        ${addReturn ? `return ${script};` : script}
+    })()`
+    host.writeFile("file.ts", funcScript);
+    host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
+    let program = ts.createProgram(["file.ts"], {}, host);
+    let testResult = program.emit();
+    let outputText = "return " + host.readFile("file.js");
+
+    let diagnostics = ts.getPreEmitDiagnostics(program).concat(testResult.diagnostics);
 
-    return ExecScript(result.outputText, result.diagnostics);
+    return Compile(outputText, diagnostics, scope || {});
 }
 
 export function ToField(data: any): Opt<Field> {
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
new file mode 100644
index 000000000..fa43f5326
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.scss
@@ -0,0 +1,54 @@
+
+.tooltipMenu {
+    position: absolute;
+    z-index: 20;
+    background: rgb(19, 18, 18);
+    border: 1px solid silver;
+    border-radius: 4px;
+    padding: 2px 10px;
+    margin-bottom: 7px;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.tooltipMenu:before {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 50%;
+    margin-left: -5px;
+    bottom: -6px;
+    border: 5px solid transparent;
+    border-bottom-width: 0;
+    border-top-color: silver;
+  }
+  .tooltipMenu:after {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 50%;
+    margin-left: -5px;
+    bottom: -4.5px;
+    border: 5px solid transparent;
+    border-bottom-width: 0;
+    border-top-color: black;
+  }
+
+  .menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    //color: rgb(19, 18, 18);
+    color: white;
+    line-height: 1;
+    padding: 0px 2px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 10px;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
+  .underline {text-decoration: underline}
+  .superscript {vertical-align:super}
+  .subscript { vertical-align:sub }
+  .strikethrough {text-decoration-line:line-through}
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
new file mode 100644
index 000000000..3b87fe9de
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -0,0 +1,125 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+const { exampleSetup } = require("prosemirror-example-setup")
+import { EditorState, Transaction, } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "./RichTextSchema";
+import React = require("react")
+import "./TooltipTextMenu.scss";
+const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { wrapInList, bulletList } from 'prosemirror-schema-list'
+import {
+  faListUl,
+} from '@fortawesome/free-solid-svg-icons';
+
+
+
+export class TooltipTextMenu {
+
+  private tooltip: HTMLElement;
+
+  constructor(view: EditorView) {
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "tooltipMenu";
+
+    //add the div which is the tooltip
+    view.dom.parentNode!.appendChild(this.tooltip);
+
+    //add additional icons
+    library.add(faListUl);
+
+    //add the buttons to the tooltip
+    let items = [
+      { command: toggleMark(schema.marks.strong), dom: this.icon("B", "strong") },
+      { command: toggleMark(schema.marks.em), dom: this.icon("i", "em") },
+      { command: toggleMark(schema.marks.underline), dom: this.icon("U", "underline") },
+      { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
+      { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
+      { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
+      { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }
+    ]
+    items.forEach(({ dom }) => this.tooltip.appendChild(dom));
+
+    //pointer down handler to activate button effects
+    this.tooltip.addEventListener("pointerdown", e => {
+      e.preventDefault();
+      view.focus();
+      items.forEach(({ command, dom }) => {
+        if (dom.contains(e.srcElement)) {
+          command(view.state, view.dispatch, view)
+        }
+      })
+    })
+
+    this.update(view, undefined);
+  }
+
+  // Helper function to create menu icons
+  icon(text: string, name: string) {
+    let span = document.createElement("span");
+    span.className = "menuicon " + name;
+    span.title = name;
+    span.textContent = text;
+    return span;
+  }
+
+  blockActive(view: EditorView) {
+    const { $from, to } = view.state.selection
+
+    return to <= $from.end() && $from.parent.hasMarkup(schema.nodes.bulletList);
+  }
+
+  //this doesn't currently work but hopefully will soon
+  unorderedListIcon(): HTMLSpanElement {
+    let span = document.createElement("span");
+    let icon = document.createElement("FontAwesomeIcon");
+    icon.className = "menuicon fa fa-smile-o";
+    span.appendChild(icon);
+    return span;
+  }
+
+  // Create an icon for a heading at the given level
+  heading(level: number) {
+    return {
+      command: setBlockType(schema.nodes.heading, { level }),
+      dom: this.icon("H" + level, "heading")
+    }
+  }
+
+  //updates the tooltip menu when the selection changes
+  update(view: EditorView, lastState: EditorState | undefined) {
+    let state = view.state
+    // Don't do anything if the document/selection didn't change
+    if (lastState && lastState.doc.eq(state.doc) &&
+      lastState.selection.eq(state.selection)) return
+
+    // Hide the tooltip if the selection is empty
+    if (state.selection.empty) {
+      this.tooltip.style.display = "none"
+      return
+    }
+
+    // Otherwise, reposition it and update its content
+    this.tooltip.style.display = ""
+    let { from, to } = state.selection
+    // These are in screen coordinates
+    //check this - tranform
+    let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
+    // The box in which the tooltip is positioned, to use as base
+    let box = this.tooltip.offsetParent!.getBoundingClientRect()
+    // Find a center-ish x position from the selection endpoints (when
+    // crossing lines, end may be more to the left)
+    let left = Math.max((start.left + end.left) / 2, start.left + 3)
+    this.tooltip.style.left = (left - box.left) + "px"
+    let width = Math.abs(start.left - end.left) / 2;
+    let mid = Math.min(start.left, end.left) + width;
+    //THIS WIDTH IS 15 * NUMBER OF ICONS + 15
+    this.tooltip.style.width = 120 + "px";
+    this.tooltip.style.bottom = (box.bottom - start.top) + "px";
+  }
+
+  destroy() { this.tooltip.remove() }
+}
\ No newline at end of file
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
new file mode 100644
index 000000000..679f73f42
--- /dev/null
+++ b/src/client/util/type_decls.d
@@ -0,0 +1,215 @@
+//@ts-ignore
+declare type PropertyKey = string | number | symbol;
+interface Array<T> {
+    length: number;
+    toString(): string;
+    toLocaleString(): string;
+    pop(): T | undefined;
+    push(...items: T[]): number;
+    concat(...items: ConcatArray<T>[]): T[];
+    concat(...items: (T | ConcatArray<T>)[]): T[];
+    join(separator?: string): string;
+    reverse(): T[];
+    shift(): T | undefined;
+    slice(start?: number, end?: number): T[];
+    sort(compareFn?: (a: T, b: T) => number): this;
+    splice(start: number, deleteCount?: number): T[];
+    splice(start: number, deleteCount: number, ...items: T[]): T[];
+    unshift(...items: T[]): number;
+    indexOf(searchElement: T, fromIndex?: number): number;
+    lastIndexOf(searchElement: T, fromIndex?: number): number;
+    every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
+    some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
+    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
+    filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
+    filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
+    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
+
+    [n: number]: T;
+}
+
+interface Function {
+    apply(this: Function, thisArg: any, argArray?: any): any;
+    call(this: Function, thisArg: any, ...argArray: any[]): any;
+    bind(this: Function, thisArg: any, ...argArray: any[]): any;
+    toString(): string;
+
+    prototype: any;
+    readonly length: number;
+
+    // Non-standard extensions
+    arguments: any;
+    caller: Function;
+}
+interface Boolean {
+    valueOf(): boolean;
+}
+interface Number {
+    toString(radix?: number): string;
+    toFixed(fractionDigits?: number): string;
+    toExponential(fractionDigits?: number): string;
+    toPrecision(precision?: number): string;
+    valueOf(): number;
+}
+interface IArguments {
+    [index: number]: any;
+    length: number;
+    callee: Function;
+}
+interface RegExp {
+    readonly flags: string;
+    readonly sticky: boolean;
+    readonly unicode: boolean;
+}
+interface String {
+    codePointAt(pos: number): number | undefined;
+    includes(searchString: string, position?: number): boolean;
+    endsWith(searchString: string, endPosition?: number): boolean;
+    normalize(form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
+    normalize(form?: string): string;
+    repeat(count: number): string;
+    startsWith(searchString: string, position?: number): boolean;
+    anchor(name: string): string;
+    big(): string;
+    blink(): string;
+    bold(): string;
+    fixed(): string;
+    fontcolor(color: string): string;
+    fontsize(size: number): string;
+    fontsize(size: string): string;
+    italics(): string;
+    link(url: string): string;
+    small(): string;
+    strike(): string;
+    sub(): string;
+    sup(): string;
+}
+interface Object {
+    constructor: Function;
+    toString(): string;
+    toLocaleString(): string;
+    valueOf(): Object;
+    hasOwnProperty(v: PropertyKey): boolean;
+    isPrototypeOf(v: Object): boolean;
+    propertyIsEnumerable(v: PropertyKey): boolean;
+}
+interface ConcatArray<T> {
+    readonly length: number;
+    readonly [n: number]: T;
+    join(separator?: string): string;
+    slice(start?: number, end?: number): T[];
+}
+interface URL {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    readonly origin: string;
+    password: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+    username: string;
+    toJSON(): string;
+}
+
+declare type FieldId = string;
+
+declare abstract class Field {
+    Id: FieldId;
+    abstract ToScriptString(): string;
+    abstract TrySetValue(value: any): boolean;
+    abstract GetValue(): any;
+    abstract Copy(): Field;
+}
+
+declare abstract class BasicField<T> extends Field {
+    constructor(data: T);
+    Data: T;
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+}
+
+declare class TextField extends BasicField<string>{
+    constructor();
+    constructor(data: string);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class ImageField extends BasicField<URL>{
+    constructor();
+    constructor(data: URL);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class HtmlField extends BasicField<string>{
+    constructor();
+    constructor(data: string);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class NumberField extends BasicField<number>{
+    constructor();
+    constructor(data: number);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class WebField extends BasicField<URL>{
+    constructor();
+    constructor(data: URL);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class ListField<T> extends BasicField<T[]>{
+    constructor();
+    constructor(data: T[]);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class Key extends Field {
+    Name: string;
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+    Copy(): Field;
+    ToScriptString(): string;
+}
+declare type FIELD_WAITING = "<Waiting>";
+declare type Opt<T> = T | undefined;
+declare type FieldValue<T> = Opt<T> | FIELD_WAITING;
+// @ts-ignore
+declare class Document extends Field {
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+    Copy(): Field;
+    ToScriptString(): string;
+
+    Width(): number;
+    Height(): number;
+    Scale(): number;
+    Title: string;
+
+    Get(key: Key): FieldValue<Field>;
+    GetAsync(key: Key, callback: (field: Field) => void): boolean;
+    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void;
+    GetT<T extends Field>(key: Key, ctor: { new(): T }): FieldValue<T>;
+    GetOrCreate<T extends Field>(key: Key, ctor: { new(): T }): T;
+    GetData<T, U extends Field & { Data: T }>(key: Key, ctor: { new(): U }, defaultVal: T): T;
+    GetHtml(key: Key, defaultVal: string): string;
+    GetNumber(key: Key, defaultVal: number): number;
+    GetText(key: Key, defaultVal: string): string;
+    GetList<T extends Field>(key: Key, defaultVal: T[]): T[];
+    Set(key: Key, field: Field | undefined): void;
+    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }): void;
+    SetText(key: Key, value: string): void;
+    SetNumber(key: Key, value: number): void;
+    GetPrototype(): FieldValue<Document>;
+    GetAllPrototypes(): Document[];
+    MakeDelegate(): Document;
+}
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
new file mode 100644
index 000000000..6bd614c8b
--- /dev/null
+++ b/src/client/views/.DS_Store
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 3319b62db..67bbc3082 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,5 +1,6 @@
 import React = require("react");
 import { observable, action } from "mobx";
+import { observer } from "mobx-react";
 
 export interface OriginalMenuProps {
     description: string;
@@ -8,18 +9,25 @@ export interface OriginalMenuProps {
 
 export interface SubmenuProps {
     description: string;
-    subitems: OriginalMenuProps[];
+    subitems: ContextMenuProps[];
 }
 
 export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
 
+@observer
 export class ContextMenuItem extends React.Component<ContextMenuProps> {
-    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
+    @observable private _items: Array<ContextMenuProps> = [];
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
-    @observable private _display: string = "none";
     @observable private overItem = false;
 
+    constructor(props: ContextMenuProps) {
+        super(props);
+        if ("subitems" in this.props) {
+            this.props.subitems.forEach(i => this._items.push(i));
+        }
+    }
+
     render() {
         if ("event" in this.props) {
             return (
@@ -30,14 +38,16 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ left: this._pageX, marginLeft: "100%", top: this._pageY, display: this._display }}>
+                submenu = (<div className="subMenu-cont" style={{ left: this._pageX, top: this._pageY, marginLeft: "47.5%" }}>
                     {this._items.map(prop => {
                         return <ContextMenuItem {...prop} key={prop.description} />
                     })}
                 </div>)
             }
             return (
-                <div className="contextMenu-item" onMouseEnter={action(() => this.overItem = true)} onMouseLeave={action(() => this.overItem = false)}>
+                <div className="contextMenu-item" onMouseEnter={action(() => {
+                    this.overItem = true
+                })} onMouseLeave={action(() => this.overItem = false)}>
                     <div className="contextMenu-description"> {this.props.description}</div>
                     {submenu}
                 </div>)
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..fb9091dfc 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -2,7 +2,7 @@
     position: absolute;
     display: grid;
     z-index: 1000;
-    grid-template-rows: 20px 1fr 20px;
+    grid-template-rows: 20px 1fr 20px 0px;
     grid-template-columns: 20px 1fr 20px;
     pointer-events: none;
     #documentDecorations-centerCont {
@@ -29,4 +29,23 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
+    
+}
+.linkButton-empty {
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: #2B6091;
+}
+.linkButton-nonempty {
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: rgb(35, 165, 42);
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 975a125f7..dc62f97cf 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -5,12 +5,20 @@ import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 import { KeyStore } from '../../fields/KeyStore'
 import { NumberField } from "../../fields/NumberField";
+import { props } from "bluebird";
+import { DragManager } from "../util/DragManager";
+import { LinkMenu } from "./nodes/LinkMenu";
+import { ListField } from "../../fields/ListField";
+const higflyout = require("@hig/flyout");
+const { anchorPoints } = higflyout;
+const Flyout = higflyout.default;
 
 @observer
 export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
+    private _linkButton = React.createRef<HTMLDivElement>();
     @observable private _hidden = false;
 
     constructor(props: Readonly<{}>) {
@@ -52,6 +60,46 @@ export class DocumentDecorations extends React.Component {
         }
     }
 
+    onLinkButtonDown = (e: React.PointerEvent): void => {
+        // if ()
+        // let linkMenu = new LinkMenu(SelectionManager.SelectedDocuments()[0]);
+        // linkMenu.Hidden = false;
+        console.log("down");
+
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onLinkButtonMoved)
+        document.addEventListener("pointermove", this.onLinkButtonMoved);
+        document.removeEventListener("pointerup", this.onLinkButtonUp)
+        document.addEventListener("pointerup", this.onLinkButtonUp);
+
+    }
+
+    onLinkButtonUp = (e: PointerEvent): void => {
+        console.log("up");
+        document.removeEventListener("pointermove", this.onLinkButtonMoved)
+        document.removeEventListener("pointerup", this.onLinkButtonUp)
+        e.stopPropagation();
+    }
+
+
+    onLinkButtonMoved = (e: PointerEvent): void => {
+        console.log("moved");
+        let dragData: { [id: string]: any } = {};
+        dragData["linkSourceDoc"] = SelectionManager.SelectedDocuments()[0];
+        if (this._linkButton.current != null) {
+            DragManager.StartDrag(this._linkButton.current, dragData, {
+                handlers: {
+                    dragComplete: action(() => { }),
+                },
+                hideSource: false
+            })
+        }
+        document.removeEventListener("pointermove", this.onLinkButtonMoved)
+        document.removeEventListener("pointerup", this.onLinkButtonUp)
+        e.stopPropagation();
+    }
+
+
     onPointerMove = (e: PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
@@ -138,6 +186,13 @@ export class DocumentDecorations extends React.Component {
         }
     }
 
+    changeFlyoutContent = (): void => {
+
+    }
+    // buttonOnPointerUp = (e: React.PointerEvent): void => {
+    //     e.stopPropagation();
+    // }
+
     render() {
         var bounds = this.Bounds;
         if (this.Hidden) {
@@ -147,6 +202,19 @@ export class DocumentDecorations extends React.Component {
             console.log("DocumentDecorations: Bounds Error")
             return (null);
         }
+
+        let linkButton = null;
+        if (SelectionManager.SelectedDocuments().length > 0) {
+            let selFirst = SelectionManager.SelectedDocuments()[0];
+            linkButton = (<Flyout
+                anchorPoint={anchorPoints.RIGHT_TOP}
+                content={
+                    <LinkMenu docView={selFirst} changeFlyout={this.changeFlyoutContent}>
+                    </LinkMenu>
+                }>
+                <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} ref={this._linkButton} />
+            </Flyout>);
+        }
         return (
             <div id="documentDecorations-container" style={{
                 width: (bounds.r - bounds.x + 40) + "px",
@@ -163,7 +231,10 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-            </div>
+
+                {linkButton}
+
+            </div >
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 8d9a47eaa..84b1b91c3 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,12 +3,30 @@ import { observer } from 'mobx-react';
 import { observable, action } from 'mobx';
 
 export interface EditableProps {
+    /**
+     * Called to get the initial value for editing
+     *  */
     GetValue(): string;
+
+    /**
+     * Called to apply changes
+     * @param value - The string entered by the user to set the value to
+     * @returns `true` if setting the value was successful, `false` otherwise
+     *  */
     SetValue(value: string): boolean;
+
+    /**
+     * The contents to render when not editing
+     */
     contents: any;
     height: number
 }
 
+/**
+ * Customizable view that can be given an arbitrary view to render normally,
+ * but can also be edited with customizable functions to get a string version
+ * of the content, and set the value based on the entered string.
+ */
 @observer
 export class EditableView extends React.Component<EditableProps> {
     @observable
@@ -17,8 +35,9 @@ export class EditableView extends React.Component<EditableProps> {
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key == "Enter" && !e.ctrlKey) {
-            this.props.SetValue(e.currentTarget.value);
-            this.editing = false;
+            if (this.props.SetValue(e.currentTarget.value)) {
+                this.editing = false;
+            }
         } else if (e.key == "Escape") {
             this.editing = false;
         }
@@ -27,12 +46,11 @@ export class EditableView extends React.Component<EditableProps> {
     render() {
         if (this.editing) {
             return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
-                style={{ width: "100%" }}></input>
+                style={{ display: "inline" }}></input>
         } else {
             return (
-                <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
-                    onClick={action(() => this.editing = true)}
-                >
+                <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }}
+                    onClick={action(() => this.editing = true)}>
                     {this.props.contents}
                 </div>
             )
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
new file mode 100644
index 000000000..f654b194b
--- /dev/null
+++ b/src/client/views/InkingCanvas.scss
@@ -0,0 +1,32 @@
+.inking-canvas {
+    position: fixed;
+    top: -50000px;
+    left: -50000px; // z-index: 99; //overlays ink on top of everything
+    svg {
+        width: 100000px;
+        height: 100000px;
+        .highlight {
+            mix-blend-mode: multiply;
+        }
+    }
+}
+
+.inking-control {
+    position: absolute;
+    right: 0;
+    bottom: 75px;
+    text-align: right;
+    .ink-panel {
+        margin-top: 12px;
+        &:first {
+            margin-top: 0;
+        }
+    }
+    .ink-size {
+        display: flex;
+        justify-content: space-between;
+        input {
+            width: 85%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
new file mode 100644
index 000000000..0d87c1239
--- /dev/null
+++ b/src/client/views/InkingCanvas.tsx
@@ -0,0 +1,171 @@
+import { observer } from "mobx-react";
+import { action, computed } from "mobx";
+import { InkingControl } from "./InkingControl";
+import React = require("react");
+import { Transform } from "../util/Transform";
+import { Document } from "../../fields/Document";
+import { KeyStore } from "../../fields/KeyStore";
+import { InkField, InkTool, StrokeData, StrokeMap } from "../../fields/InkField";
+import { JsxArgs } from "./nodes/DocumentView";
+import { InkingStroke } from "./InkingStroke";
+import "./InkingCanvas.scss"
+import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { Utils } from "../../Utils";
+import { FieldWaiting } from "../../fields/Field";
+import { getMapLikeKeys } from "mobx/lib/internal";
+
+
+interface InkCanvasProps {
+    getScreenTransform: () => Transform;
+    Document: Document;
+}
+
+@observer
+export class InkingCanvas extends React.Component<InkCanvasProps> {
+
+    private _isDrawing: boolean = false;
+    private _idGenerator: string = "";
+
+    constructor(props: Readonly<InkCanvasProps>) {
+        super(props);
+    }
+
+    @computed
+    get inkData(): StrokeMap {
+        let map = this.props.Document.GetT(KeyStore.Ink, InkField);
+        if (!map || map === FieldWaiting) {
+            return new Map;
+        }
+        return new Map(map.Data);
+    }
+
+    set inkData(value: StrokeMap) {
+        this.props.Document.SetData(KeyStore.Ink, value, InkField);
+    }
+
+    componentDidMount() {
+        document.addEventListener("mouseup", this.handleMouseUp);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener("mouseup", this.handleMouseUp);
+    }
+
+
+    @action
+    handleMouseDown = (e: React.PointerEvent): void => {
+        if (e.button != 0 ||
+            InkingControl.Instance.selectedTool === InkTool.None) {
+            return;
+        }
+        e.stopPropagation()
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+            return
+        }
+        e.stopPropagation()
+        const point = this.relativeCoordinatesForEvent(e);
+
+        // start the new line, saves a uuid to represent the field of the stroke
+        this._idGenerator = Utils.GenerateGuid();
+        let data = this.inkData;
+        data.set(this._idGenerator,
+            {
+                pathData: [point],
+                color: InkingControl.Instance.selectedColor,
+                width: InkingControl.Instance.selectedWidth,
+                tool: InkingControl.Instance.selectedTool,
+                page: this.props.Document.GetNumber(KeyStore.CurPage, 0)
+            });
+        this.inkData = data;
+        this._isDrawing = true;
+    }
+
+    @action
+    handleMouseMove = (e: React.PointerEvent): void => {
+        if (!this._isDrawing ||
+            InkingControl.Instance.selectedTool === InkTool.None) {
+            return;
+        }
+        e.stopPropagation()
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+            return
+        }
+        const point = this.relativeCoordinatesForEvent(e);
+
+        // add points to new line as it is being drawn
+        let data = this.inkData;
+        let strokeData = data.get(this._idGenerator);
+        if (strokeData) {
+            strokeData.pathData.push(point);
+            data.set(this._idGenerator, strokeData);
+        }
+
+        this.inkData = data;
+    }
+
+    @action
+    handleMouseUp = (e: MouseEvent): void => {
+        this._isDrawing = false;
+    }
+
+    relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => {
+        let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY);
+        x += 50000
+        y += 50000
+        return { x, y };
+    }
+
+    @action
+    removeLine = (id: string): void => {
+        let data = this.inkData;
+        data.delete(id);
+        this.inkData = data;
+    }
+
+    render() {
+        // styling for cursor
+        let canvasStyle = {};
+        if (InkingControl.Instance.selectedTool === InkTool.None) {
+            canvasStyle = { pointerEvents: "none" };
+        } else {
+            canvasStyle = { pointerEvents: "auto", cursor: "crosshair" };
+        }
+
+        // get data from server
+        // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField);
+        // if (!inkField || inkField == "<Waiting>") {
+        //     return (<div className="inking-canvas" style={canvasStyle}
+        //         onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} >
+        //         <svg>
+        //         </svg>
+        //     </div >)
+        // }
+
+        let lines = this.inkData;
+
+        // parse data from server
+        let paths: Array<JSX.Element> = []
+        let curPage = this.props.Document.GetNumber(KeyStore.CurPage, 0)
+        Array.from(lines).map(item => {
+            let id = item[0];
+            let strokeData = item[1];
+            if (strokeData.page == 0 || strokeData.page == curPage)
+                paths.push(<InkingStroke key={id} id={id}
+                    line={strokeData.pathData}
+                    color={strokeData.color}
+                    width={strokeData.width}
+                    tool={strokeData.tool}
+                    deleteCallback={this.removeLine} />)
+        })
+
+        return (
+
+            <div className="inking-canvas" style={canvasStyle}
+                onPointerDown={this.handleMouseDown} onPointerMove={this.handleMouseMove} >
+                <svg>
+                    {paths}
+                </svg>
+            </div >
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
new file mode 100644
index 000000000..955831fb6
--- /dev/null
+++ b/src/client/views/InkingControl.tsx
@@ -0,0 +1,77 @@
+import { observable, action, computed } from "mobx";
+import { CirclePicker, ColorResult } from 'react-color';
+import React = require("react");
+import "./InkingCanvas.scss"
+import { InkTool } from "../../fields/InkField";
+import { observer } from "mobx-react";
+
+@observer
+export class InkingControl extends React.Component {
+    static Instance: InkingControl = new InkingControl({});
+    @observable private _selectedTool: InkTool = InkTool.None;
+    @observable private _selectedColor: string = "#f44336";
+    @observable private _selectedWidth: string = "25";
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        InkingControl.Instance = this
+    }
+
+    @action
+    switchTool = (tool: InkTool): void => {
+        this._selectedTool = tool;
+    }
+
+    @action
+    switchColor = (color: ColorResult): void => {
+        this._selectedColor = color.hex;
+    }
+
+    @action
+    switchWidth = (width: string): void => {
+        this._selectedWidth = width;
+    }
+
+    @computed
+    get selectedTool() {
+        return this._selectedTool;
+    }
+
+    @computed
+    get selectedColor() {
+        return this._selectedColor;
+    }
+
+    @computed
+    get selectedWidth() {
+        return this._selectedWidth;
+    }
+
+    selected = (tool: InkTool) => {
+        if (this._selectedTool === tool) {
+            return { backgroundColor: "black", color: "white" }
+        }
+        return {}
+    }
+
+    render() {
+        return (
+            <div className="inking-control">
+                <div className="ink-tools ink-panel">
+                    <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}>Pen</button>
+                    <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}>Highlighter</button>
+                    <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}>Eraser</button>
+                    <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}> None</button>
+                </div>
+                <div className="ink-size ink-panel">
+                    <label htmlFor="stroke-width">Size</label>
+                    <input type="range" min="1" max="100" defaultValue="25" name="stroke-width"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
+                </div>
+                <div className="ink-color ink-panel">
+                    <CirclePicker onChange={this.switchColor} />
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
new file mode 100644
index 000000000..d724421d3
--- /dev/null
+++ b/src/client/views/InkingStroke.tsx
@@ -0,0 +1,66 @@
+import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { InkingControl } from "./InkingControl";
+import { InkTool } from "../../fields/InkField";
+import React = require("react");
+
+
+interface StrokeProps {
+    id: string;
+    line: Array<{ x: number, y: number }>;
+    color: string;
+    width: string;
+    tool: InkTool;
+    deleteCallback: (index: string) => void;
+}
+
+@observer
+export class InkingStroke extends React.Component<StrokeProps> {
+
+    @observable private _strokeTool: InkTool = this.props.tool;
+    @observable private _strokeColor: string = this.props.color;
+    @observable private _strokeWidth: string = this.props.width;
+
+    private _canvasColor: string = "#cdcdcd";
+
+    deleteStroke = (e: React.MouseEvent): void => {
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) {
+            this.props.deleteCallback(this.props.id);
+        }
+    }
+
+    parseData = (line: Array<{ x: number, y: number }>): string => {
+        if (line.length === 0) {
+            return "";
+        }
+        const pathData = "M " +
+            line.map(p => {
+                return p.x + " " + p.y;
+            }).join(" L ");
+        return pathData;
+    }
+
+    createStyle() {
+        switch (this._strokeTool) {
+            // add more tool styles here
+            default:
+                return {
+                    fill: "none",
+                    stroke: this._strokeColor,
+                    strokeWidth: this._strokeWidth + "px",
+                }
+        }
+    }
+
+
+    render() {
+        let pathStyle = this.createStyle();
+        let pathData = this.parseData(this.props.line);
+
+        return (
+            <path className={(this._strokeTool === InkTool.Highlighter) ? "highlight" : ""}
+                d={pathData} style={pathStyle} strokeLinejoin="round" strokeLinecap="round"
+                onMouseOver={this.deleteStroke} onMouseDown={this.deleteStroke} />
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index e73f62904..4334ed299 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -28,4 +28,24 @@ h1 {
 p {
     margin: 0px;
     padding: 0px;
-}
\ No newline at end of file
+}
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height:5px;
+    width:5px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: rgba(0,0,0,.5);
+}
+
+.main-buttonDiv {
+    position: absolute;
+    width: 150px;
+    left: 0px;
+}
+.main-undoButtons {
+    position: absolute;
+    width: 150px;
+    right: 0px;
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 23438c91f..b78f59681 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -1,169 +1,117 @@
-import { action, configure, reaction, computed } from 'mobx';
+import { action, configure } from 'mobx';
 import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { DocumentDecorations } from './DocumentDecorations';
-import { Documents } from '../documents/Documents';
 import { Document } from '../../fields/Document';
 import { KeyStore } from '../../fields/KeyStore';
 import "./Main.scss";
-import { ContextMenu } from './ContextMenu';
-import { DocumentView } from './nodes/DocumentView';
-import { Server } from '../Server';
+import { MessageStore } from '../../server/Message';
 import { Utils } from '../../Utils';
-import { ServerUtils } from '../../server/ServerUtil';
-import { MessageStore, DocumentTransfer } from '../../server/Message';
+import { Documents } from '../documents/Documents';
+import { Server } from '../Server';
+import { setupDrag } from '../util/DragManager';
 import { Transform } from '../util/Transform';
-import { CollectionDockingView } from './collections/CollectionDockingView';
-import { FieldWaiting } from '../../fields/Field';
 import { UndoManager } from '../util/UndoManager';
-import { DragManager } from '../util/DragManager';
+import { CollectionDockingView } from './collections/CollectionDockingView';
+import { ContextMenu } from './ContextMenu';
+import { DocumentDecorations } from './DocumentDecorations';
+import { DocumentView } from './nodes/DocumentView';
+import "./Main.scss";
+import { InkingControl } from './InkingControl';
 
 
-configure({
-    enforceActions: "observed"
-});
-window.addEventListener("drop", function (e) {
-    e.preventDefault();
-}, false)
-window.addEventListener("dragover", function (e) {
-    e.preventDefault();
-}, false)
+configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
+window.addEventListener("drop", (e) => e.preventDefault(), false)
+window.addEventListener("dragover", (e) => e.preventDefault(), false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
 }), true)
 
 
-//runInAction(() => 
-// let doc1 = Documents.TextDocument({ title: "hello" });
-// let doc2 = doc1.MakeDelegate();
-// doc2.Set(KS.X, new NumberField(150));
-// doc2.Set(KS.Y, new NumberField(20));
-// let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-//     x: 450, y: 100, title: "cat 1"
-// });
-// doc3.Set(KeyStore.Data, new ImageField);
-// const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-//     x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
-// }));
-// schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
-// schemaDocs[4].SetData(KS.Author, "Bob", TextField);
-// schemaDocs.push(doc2);
-// const doc7 = Documents.SchemaDocument(schemaDocs)
-
 const mainDocId = "mainDoc";
-Documents.initProtos(() => {
-    Utils.EmitCallback(Server.Socket, MessageStore.GetField, mainDocId, (res: any) => {
-        console.log("HELLO WORLD")
-        console.log("RESPONSE: " + res)
-        let mainContainer: Document;
-        let mainfreeform: Document;
-        if (res) {
-            mainContainer = ServerUtils.FromJson(res) as Document;
-            mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document);
-        }
-        else {
-            // mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
-            // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson()))
-
-            // setTimeout(() => {
-            //     mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
-            //     Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson()));
+let mainContainer: Document;
+let mainfreeform: Document;
+Documents.initProtos(mainDocId, (res?: Document) => {
+    if (res instanceof Document) {
+        mainContainer = res;
+        mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document);
+    }
+    else {
+        mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
 
-            //     var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc));
-            //     mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] }));
-            //     mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
-            // }, 0);
-            mainContainer = Documents.FreeformDocument([], {});
-            mainfreeform = mainContainer;
-        }
+        // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
+        setTimeout(() => {
+            mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
 
-        let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
-        let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
-        let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" }));
-        let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
-        let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-            width: 200, height: 200, title: "an image of a cat"
-        }));
+            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] };
+            mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
+            mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
+        }, 0);
+    }
 
-        let addClick = (creator: any) => action(() => {
-            var img = creator();
-            img.SetNumber(KeyStore.X, 0);
-            img.SetNumber(KeyStore.Y, 0);
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(img);
-        });
+    let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
+    let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
+    let weburl = "https://cs.brown.edu/courses/cs166/";
+    let audiourl = "http://techslides.com/demos/samples/sample.mp3";
+    let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
+    let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+    let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
+    let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
+    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
+    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
+    let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }))
+    let addClick = (creator: () => Document) => action(() =>
+        mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
+    );
 
-        let imgRef = React.createRef<HTMLDivElement>();
-        let textRef = React.createRef<HTMLDivElement>();
-        let schemaRef = React.createRef<HTMLDivElement>();
-        let colRef = React.createRef<HTMLDivElement>();
-        let curMoveListener: any = null
-        let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
+    let imgRef = React.createRef<HTMLDivElement>();
+    let pdfRef = React.createRef<HTMLDivElement>();
+    let webRef = React.createRef<HTMLDivElement>();
+    let textRef = React.createRef<HTMLDivElement>();
+    let schemaRef = React.createRef<HTMLDivElement>();
+    let videoRef = React.createRef<HTMLDivElement>();
+    let audioRef = React.createRef<HTMLDivElement>();
+    let colRef = React.createRef<HTMLDivElement>();
 
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(dragRef.current!, { document: creator() });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => {
-            if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator());
-                e.stopPropagation();
-            } else {
-                document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef));
-                document.addEventListener('pointerup', onRowUp);
-            }
-        }
-        ReactDOM.render((
-            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-                <DocumentView Document={mainContainer}
-                    AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
-                    ContentScaling={() => 1}
-                    PanelWidth={() => 0}
-                    PanelHeight={() => 0}
-                    isTopMost={true}
-                    ContainingCollectionView={undefined} />
-                <DocumentDecorations />
-                <ContextMenu />
-                <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
-                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
-                <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
-                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
-                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
-                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
-                <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
-                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
-                <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
-                <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
-                <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
-            </div>),
-            document.getElementById('root'));
-    })
-});
-// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-//     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
-// });
-// let docset2 = new Array<Document>(doc4);//, doc1, doc3);
-// let doc6 = Documents.CollectionDocument(docset2, {
-//     x: 350, y: 100, width: 600, height: 600, title: "docking collection"
-// });
-// let mainNodes = mainContainer.GetOrCreate(KeyStore.Data, ListField);
-// mainNodes.Data.push(doc6);
-// mainNodes.Data.push(doc2);
-// mainNodes.Data.push(doc4);
-// mainNodes.Data.push(doc3);
-// mainNodes.Data.push(doc5);
-// mainNodes.Data.push(doc1);
-//mainNodes.Data.push(doc2);
-//mainNodes.Data.push(doc6);
-// mainContainer.Set(KeyStore.Data, mainNodes);
-//}
-//);
+    ReactDOM.render((
+        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+            <DocumentView Document={mainContainer}
+                AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+                ContentScaling={() => 1}
+                PanelWidth={() => 0}
+                PanelHeight={() => 0}
+                isTopMost={true}
+                SelectOnLoad={false}
+                focus={() => { }}
+                ContainingCollectionView={undefined} />
+            <DocumentDecorations />
+            <ContextMenu />
+            <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
+                <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
+                <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
+                <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
+                <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
+                <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '125px' }} >
+                <button onClick={clearDatabase}>Clear Database</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '175px' }} ref={videoRef}>
+                <button onPointerDown={setupDrag(videoRef, addVideoNode)} onClick={addClick(addVideoNode)}>Add Video</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '200px' }} ref={audioRef}>
+                <button onPointerDown={setupDrag(audioRef, addAudioNode)} onClick={addClick(addAudioNode)}>Add Audio</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '150px' }} ref={pdfRef}>
+                <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></div>
+            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+            <InkingControl />
+        </div>),
+        document.getElementById('root'));
+})
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..6a0404663 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,16 +1,15 @@
 import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, observable, reaction } from "mobx";
+import { action, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
-import Measure from "react-measure";
 import { Document } from "../../../fields/Document";
-import { FieldId, Opt, Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
+import Measure from "react-measure";
+import { FieldId, Opt, Field } from "../../../fields/Field";
 import { Utils } from "../../../Utils";
 import { Server } from "../../Server";
-import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
@@ -34,12 +33,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
 
     private _goldenLayout: any = null;
-    private _dragDiv: any = null;
-    private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLElement | undefined;
-    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
+    private _flush: boolean = false;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
@@ -47,28 +43,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
     }
-
-    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // bcz: we want to copy this document into the header, not move it there.
-        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
-
-        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
-        this._dragDiv = document.createElement("div");
-        this._dragDiv.style.opacity = 0;
-        DragManager.Root().appendChild(this._dragDiv);
-        this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
-
-        //   - add our document to that div so that GoldenLayout will get the move events its listening for
-        this._dragDiv.appendChild(this._dragElement);
-
-        //   - add a duplicate of our document to the original document's container 
-        //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })
     }
 
     @action
@@ -98,7 +74,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Document) {
+    public AddRightSplit(document: Document, minimize: boolean = false) {
         this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
@@ -121,10 +97,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             collayout.config["width"] = 50;
             newContentItem.config["width"] = 50;
         }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
         newContentItem.callDownwards('_$init');
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
         this._goldenLayout.emit('stateChanged');
         this.stateChanged();
+        return newContentItem;
     }
 
     setupGoldenLayout() {
@@ -184,7 +165,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
     }
 
-    _flush: boolean = false;
     @action
     onPointerUp = (e: React.PointerEvent): void => {
         if (this._flush) {
@@ -194,17 +174,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 2 && this.props.active()) {
+        var className = (e.target as any).className;
+        if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
+            this._flush = true;
+        }
+        if (this.props.active()) {
             e.stopPropagation();
-            e.preventDefault();
-        } else {
-            var className = (e.target as any).className;
-            if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
-                this._flush = true;
-            }
-            if (e.buttons === 1 && this.props.active()) {
-                e.stopPropagation();
-            }
         }
     }
 
@@ -218,13 +193,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        if (this._dragDiv) {
-            this._dragDiv.removeChild(this._dragElement);
-            this._dragParent!.removeChild(this._dragFakeElement!);
-            this._dragParent!.appendChild(this._dragElement!);
-            DragManager.Root().removeChild(this._dragDiv);
-            this._dragDiv = null;
-        }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
@@ -245,7 +213,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     render() {
         return (
             <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
                 style={{
                     width: "100%",
                     height: "100%",
@@ -263,7 +231,7 @@ interface DockedFrameProps {
 @observer
 export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
-    @observable private _mainCont = React.createRef<HTMLDivElement>();
+    private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
@@ -295,6 +263,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     PanelHeight={this._nativeHeight}
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
                     isTopMost={true}
+                    SelectOnLoad={false}
+                    focus={(doc: Document) => { }}
                     ContainingCollectionView={undefined} />
             </div>
 
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index d583a8218..d487cd7ce 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,22 +1,47 @@
 .collectionfreeformview-container {
 
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 10px;
+    .collectionfreeformview  > .jsx-parser{
+        position:absolute;
+        height: 100%;
+        width: 100%;
     }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(0,0,0,.5);
+        
+    border-style: solid;
+    box-sizing: border-box;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .collectionfreeformview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width:100%;
+        height: 100%;
     }
-    
+}
+.collectionfreeformview-marquee{
+    border-style: dashed;
+    box-sizing: border-box;
+    position: absolute;
+    border-width: 1px;
+    border-color: black;
+}
+.collectionfreeformview-overlay {
+
     .collectionfreeformview > .jsx-parser{
         position:absolute;
         height: 100%;
     }
+    .formattedTextBox-cont {
+        background:yellow;
+    }
         
     border-style: solid;
     box-sizing: border-box;
-    position: relative;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
@@ -27,6 +52,24 @@
         top: 0;
         left: 0;
         width:100%;
-        height: 100%
+        height: 100%;
     }
+}
+
+.border {
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+	0% {opacity: 0}
+	49%{opacity: 0}
+	50% {opacity: 1}
+}
+
+#prevCursor {
+    animation: blink 1s infinite;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 12909c151..b0cd7e017 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,36 +1,51 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
+import { Documents } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionTreeView } from "../collections/CollectionTreeView";
 import { CollectionView } from "../collections/CollectionView";
+import { InkingCanvas } from "../InkingCanvas";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
-import { WebView } from "../nodes/WebView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { KeyValueBox } from "../nodes/KeyValueBox";
+import { PDFBox } from "../nodes/PDFBox";
+import { WebBox } from "../nodes/WebBox";
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
     private _canvasRef = React.createRef<HTMLDivElement>();
+    @observable
     private _lastX: number = 0;
+    @observable
     private _lastY: number = 0;
+    private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
+
+    @observable
     private _downX: number = 0;
+    @observable
     private _downY: number = 0;
 
+    //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
+    @observable
+    private _previewCursorVisible: boolean = false;
+
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
     @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@@ -47,24 +62,31 @@ export class CollectionFreeFormView extends CollectionViewBase {
         super.drop(e, de);
         const docView: DocumentView = de.data["documentView"];
         let doc: Document = docView ? docView.props.Document : de.data["document"];
-        let screenX = de.x - (de.data["xOffset"] as number || 0);
-        let screenY = de.y - (de.data["yOffset"] as number || 0);
-        const [x, y] = this.getTransform().transformPoint(screenX, screenY);
-        doc.SetNumber(KeyStore.X, x);
-        doc.SetNumber(KeyStore.Y, y);
-        this.bringToFront(doc);
+        if (doc) {
+            let screenX = de.x - (de.data["xOffset"] as number || 0);
+            let screenY = de.y - (de.data["yOffset"] as number || 0);
+            const [x, y] = this.getTransform().transformPoint(screenX, screenY);
+            doc.SetNumber(KeyStore.X, x);
+            doc.SetNumber(KeyStore.Y, y);
+            this.bringToFront(doc);
+        }
     }
 
+    @observable
+    _marquee = false;
+
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if ((e.button === 2 && this.props.active()) ||
-            !e.defaultPrevented) {
+        if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) && !e.shiftKey &&
+            (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
-            this._downX = this._lastX = e.pageX;
-            this._downY = this._lastY = e.pageY;
+            this._lastX = e.pageX;
+            this._lastY = e.pageY;
+            this._downX = e.pageX;
+            this._downY = e.pageY;
         }
     }
 
@@ -73,29 +95,93 @@ export class CollectionFreeFormView extends CollectionViewBase {
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
         e.stopPropagation();
-        if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+
+        if (this._marquee) {
+            if (!e.shiftKey) {
+                SelectionManager.DeselectAll();
+            }
+            var selectedDocs = this.marqueeSelect();
+            selectedDocs.map(s => this.props.CollectionView.SelectedDocs.push(s.Id));
+            this._marquee = false;
+        }
+        else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+            //show preview text cursor on tap
+            this._previewCursorVisible = true;
+            //select is not already selected
             if (!this.props.isSelected()) {
                 this.props.select(false);
             }
         }
+
+    }
+
+    intersectRect(r1: { left: number, right: number, top: number, bottom: number },
+        r2: { left: number, right: number, top: number, bottom: number }) {
+        return !(r2.left > r1.right ||
+            r2.right < r1.left ||
+            r2.top > r1.bottom ||
+            r2.bottom < r1.top);
+    }
+
+    marqueeSelect() {
+        this.props.CollectionView.SelectedDocs.length = 0;
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        let p = this.getTransform().transformPoint(this._downX, this._downY);
+        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        let selRect = { left: p[0], top: p[1], right: p[0] + v[0], bottom: p[1] + v[1] }
+
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        let selection: Document[] = [];
+        if (lvalue && lvalue != FieldWaiting) {
+            lvalue.Data.map(doc => {
+                var page = doc.GetNumber(KeyStore.Page, 0);
+                if (page == curPage || page == 0) {
+                    var x = doc.GetNumber(KeyStore.X, 0);
+                    var y = doc.GetNumber(KeyStore.Y, 0);
+                    var w = doc.GetNumber(KeyStore.Width, 0);
+                    var h = doc.GetNumber(KeyStore.Height, 0);
+                    if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect))
+                        selection.push(doc)
+                }
+            })
+        }
+        return selection;
     }
 
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble && this.props.active()) {
-            e.preventDefault();
             e.stopPropagation();
-            let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
-            let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
-            let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            e.preventDefault();
+            let wasMarquee = this._marquee;
+            this._marquee = e.buttons != 2;
+            if (this._marquee && !wasMarquee) {
+                document.addEventListener("keydown", this.marqueeCommand);
+            }
 
-            this.SetPan(x + dx, y + dy);
+            if (!this._marquee) {
+                let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
+                let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
+                let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+                this._previewCursorVisible = false;
+                this.SetPan(x - dx, y - dy);
+            }
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
     }
 
     @action
+    marqueeCommand = (e: KeyboardEvent) => {
+        if (e.key == "Backspace") {
+            this.marqueeSelect().map(d => this.props.removeDocument(d));
+        }
+        if (e.key == "c") {
+        }
+    }
+
+    @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
         e.preventDefault();
@@ -120,18 +206,21 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 deltaScale = 1 / this.zoomScaling;
             let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
-            let localTransform = this.getLocalTransform();
+            let localTransform = this.getLocalTransform()
             localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            // console.log(localTransform)
 
             this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
-            this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
+            this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale);
         }
     }
 
     @action
     private SetPan(panX: number, panY: number) {
-        const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
-        const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
+        var x1 = this.getLocalTransform().inverse().Scale;
+        var x2 = this.getTransform().inverse().Scale;
+        const newPanX = Math.min((1 - 1 / x1) * this.nativeWidth, Math.max(0, panX));
+        const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY));
         this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
@@ -146,6 +235,24 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
+    onKeyDown = (e: React.KeyboardEvent<Element>) => {
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey) {
+            if (this._previewCursorVisible) {
+                //make textbox and add it to this collection
+                let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY);
+                let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
+                // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself
+                this._selectOnLoaded = newBox.Id;
+                //set text to be the typed key and get focus on text box
+                this.props.CollectionView.addDocument(newBox);
+                //remove cursor from screen
+                this._previewCursorVisible = false;
+            }
+        }
+    }
+
+    @action
     bringToFront(doc: Document) {
         const { fieldKey: fieldKey, Document: Document } = this.props;
 
@@ -163,7 +270,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
         });
     }
 
-
     @computed get backgroundLayout(): string | undefined {
         let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
         if (field && field !== "<Waiting>") {
@@ -176,21 +282,35 @@ export class CollectionFreeFormView extends CollectionViewBase {
             return field.Data;
         }
     }
+
+    focusDocument = (doc: Document) => {
+        let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
+        let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
+        this.SetPan(x, y);
+        this.props.focus(this.props.Document);
+    }
+
+
     @computed
     get views() {
-        const { fieldKey, Document } = this.props;
-        const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField);
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
         if (lvalue && lvalue != FieldWaiting) {
             return lvalue.Data.map(doc => {
-                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
-                    AddDocument={this.props.addDocument}
-                    RemoveDocument={this.props.removeDocument}
-                    ScreenToLocalTransform={this.getTransform}
-                    isTopMost={false}
-                    ContentScaling={this.noScaling}
-                    PanelWidth={doc.Width}
-                    PanelHeight={doc.Height}
-                    ContainingCollectionView={this.props.CollectionView} />);
+                var page = doc.GetNumber(KeyStore.Page, 0);
+                return (page != curPage && page != 0) ? (null) :
+                    (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                        AddDocument={this.props.addDocument}
+                        RemoveDocument={this.props.removeDocument}
+                        ScreenToLocalTransform={this.getTransform}
+                        isTopMost={false}
+                        SelectOnLoad={doc.Id === this._selectOnLoaded}
+                        ContentScaling={this.noScaling}
+                        PanelWidth={doc.Width}
+                        PanelHeight={doc.Height}
+                        ContainingCollectionView={this.props.CollectionView}
+                        focus={this.focusDocument}
+                    />);
             })
         }
         return null;
@@ -200,7 +320,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -211,7 +331,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
@@ -219,30 +339,56 @@ export class CollectionFreeFormView extends CollectionViewBase {
             />);
     }
 
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform())
-    getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
+    getLocalTransform = (): Transform => Transform.Identity.scale(1 / this.scale).translate(this.panX, this.panY);
     noScaling = () => 1;
 
+    //when focus is lost, this will remove the preview cursor
+    @action
+    onBlur = (e: React.FocusEvent<HTMLDivElement>): void => {
+        this._previewCursorVisible = false;
+    }
+
     render() {
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
+        //determines whether preview text cursor should be visible (ie when user taps this collection it should)
+        let cursor = null;
+        if (this._previewCursorVisible) {
+            //get local position and place cursor there!
+            let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
+            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
+        }
+
+        let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        var marquee = this._marquee ? <div className="collectionfreeformview-marquee" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }}></div> : (null);
+
+        let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
+
+        const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
+
         return (
-            <div className="collectionfreeformview-container"
+            <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
                 onPointerDown={this.onPointerDown}
+                onKeyPress={this.onKeyDown}
                 onWheel={this.onPointerWheel}
-                onContextMenu={(e) => e.preventDefault()}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
+                onBlur={this.onBlur}
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
+                tabIndex={0}
                 ref={this.createDropTarget}>
                 <div className="collectionfreeformview"
-                    style={{ transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
+                    style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
                     ref={this._canvasRef}>
                     {this.backgroundView}
+                    <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
+                    {cursor}
                     {this.views}
+                    {marquee}
                 </div>
                 {this.overlayView}
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
new file mode 100644
index 000000000..f22c07060
--- /dev/null
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -0,0 +1,57 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ContextMenu } from "../ContextMenu";
+import { CollectionView, CollectionViewType } from "./CollectionView";
+import { CollectionViewProps } from "./CollectionViewBase";
+import React = require("react");
+import { FieldId } from "../../../fields/Field";
+
+
+@observer
+export class CollectionPDFView extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(fieldKey: string = "DataKey") {
+        return `<${CollectionPDFView.name} Document={Document}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
+    }
+
+    public SelectedDocs: FieldId[] = []
+    @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0;
+    @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0;
+
+    @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); }
+    @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); }
+    @computed private get uIButtons() {
+        return (
+            <div className="pdfBox-buttonTray" key="tray">
+                <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
+                <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
+            </div>);
+    }
+
+    // "inherited" CollectionView API starts here...
+
+    public active: () => boolean = () => CollectionView.Active(this);
+
+    addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
+    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } });
+        }
+    }
+
+    get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
+    get subView(): any { return CollectionView.SubView(this); }
+
+    render() {
+        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+            {this.subView}
+            {this.props.isSelected() ? this.uIButtons : (null)}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 0bd5a2ed3..d40e6d314 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,17 +1,36 @@
 
+
 .collectionSchemaView-container {
     border-style: solid;
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 10px;
+    .collectionSchemaView-previewRegion {
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-previewHandle {
+        position: absolute;
+        height: 37px;
+        width: 20px; 
+        z-index: 20; 
+        right: 0; 
+        top: 0; 
+        background: Black ;
+    }
+    .collectionSchemaView-dividerDragger{
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
     }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(0,0,0,.5);
+    .collectionSchemaView-tableContainer {
+        position: relative;
+        float: left;
+        height: 100%; 
     }
 
     .ReactTable {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 4beb0aea1..04f017378 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,11 +1,11 @@
 import React = require("react")
-import { action, observable, trace } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
 import "react-table/react-table.css";
 import { Document } from "../../../fields/Document";
-import { Field, FieldWaiting } from "../../../fields/Field";
+import { Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
@@ -16,11 +16,11 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
-import { DragManager } from "../../util/DragManager";
-import { CollectionDockingView } from "./CollectionDockingView";
+import { setupDrag } from "../../util/DragManager";
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
+
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -33,9 +33,6 @@ export class CollectionSchemaView extends CollectionViewBase {
     @observable _selectedIndex = 0;
     @observable _splitPercentage: number = 50;
 
-
-
-
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
@@ -43,37 +40,16 @@ export class CollectionSchemaView extends CollectionViewBase {
             isSelected: () => false,
             select: () => { },
             isTopMost: false,
-            bindings: {}
+            bindings: {},
+            selectOnLoad: false,
         }
         let contents = (
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onRowMove = action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(reference.current!, { document: props.doc });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (e: React.PointerEvent) => {
-            if (this.props.isSelected() || this.props.isTopMost) {
-                if (e.shiftKey) {
-                    CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc);
-                    e.stopPropagation();
-                } else {
-                    document.addEventListener("pointermove", onRowMove);
-                    document.addEventListener('pointerup', onRowUp);
-                }
-            }
-        }
+        let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onRowDown} ref={reference}>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
@@ -81,8 +57,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                             return field.ToScriptString();
                         }
                         return field || "";
-                    }} SetValue={(value: string) => {
-                        let script = CompileScript(value);
+                    }}
+                    SetValue={(value: string) => {
+                        let script = CompileScript(value, undefined, true);
                         if (!script.compiled) {
                             return false;
                         }
@@ -98,7 +75,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                             }
                         }
                         return false;
-                    }}></EditableView></div>
+                    }}>
+                </EditableView>
+            </div>
         )
     }
 
@@ -117,8 +96,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             }),
             style: {
-                background: rowInfo.index == this._selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this._selectedIndex ? "white" : "black"
+                background: rowInfo.index == this._selectedIndex ? "lightGray" : "white",
+                //color: rowInfo.index == this._selectedIndex ? "white" : "black"
             }
         };
     }
@@ -197,6 +176,8 @@ export class CollectionSchemaView extends CollectionViewBase {
         return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
     }
 
+    focusDocument = (doc: Document) => { }
+
     render() {
         const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
         const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
@@ -208,53 +189,57 @@ export class CollectionSchemaView extends CollectionViewBase {
                         <DocumentView Document={selected}
                             AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
                             isTopMost={false}
+                            SelectOnLoad={false}
                             ScreenToLocalTransform={this.getTransform}
                             ContentScaling={this.getContentScaling}
                             PanelWidth={this.getPanelWidth}
                             PanelHeight={this.getPanelHeight}
-                            ContainingCollectionView={this.props.CollectionView} />
+                            ContainingCollectionView={this.props.CollectionView}
+                            focus={this.focusDocument}
+                        />
                     </div>
                 }
             </Measure>
         )
-        let handle = !this.props.active() ? (null) : (
-            <div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
+        let previewHandle = !this.props.active() ? (null) : (
+            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
+        let dividerDragger = this._splitPercentage == 100 ? (null) :
+            <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
         return (
-            <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
-                <Measure onResize={action((r: any) => {
-                    this._dividerX = r.entry.width;
-                    this._panelHeight = r.entry.height;
-                })}>
-                    {({ measureRef }) =>
-                        <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}>
-                            <ReactTable
-                                data={children}
-                                pageSize={children.length}
-                                page={0}
-                                showPagination={false}
-                                columns={columns.map(col => ({
-                                    Header: col.Name,
-                                    accessor: (doc: Document) => [doc, col],
-                                    id: col.Id
-                                }))}
-                                column={{
-                                    ...ReactTableDefaults.column,
-                                    Cell: this.renderCell,
-
-                                }}
-                                getTrProps={this.getTrProps}
-                            />
-                        </div>
-                    }
-                </Measure>
-                <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} />
-                <div className="collectionSchemaView-previewRegion"
-                    onDrop={(e: React.DragEvent) => this.onDrop(e, {})}
-                    ref={this.createDropTarget}
-                    style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
-                    {content}
+            <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+                <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
+                    <Measure onResize={action((r: any) => {
+                        this._dividerX = r.entry.width;
+                        this._panelHeight = r.entry.height;
+                    })}>
+                        {({ measureRef }) =>
+                            <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+                                <ReactTable
+                                    data={children}
+                                    pageSize={children.length}
+                                    page={0}
+                                    showPagination={false}
+                                    columns={columns.map(col => ({
+                                        Header: col.Name,
+                                        accessor: (doc: Document) => [doc, col],
+                                        id: col.Id
+                                    }))}
+                                    column={{
+                                        ...ReactTableDefaults.column,
+                                        Cell: this.renderCell,
+
+                                    }}
+                                    getTrProps={this.getTrProps}
+                                />
+                            </div>
+                        }
+                    </Measure>
+                    {dividerDragger}
+                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+                        {content}
+                    </div>
+                    {previewHandle}
                 </div>
-                {handle}
             </div >
         )
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 675fc6c53..f8d580a7b 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,3 +1,8 @@
+#body {
+    padding: 20px;
+    background: #bbbbbb;
+}
+
 ul {
     list-style: none;
 }
@@ -10,19 +15,23 @@ li {
     padding-left: 0;
 }
 
-/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */
+.bullet {
+    width: 1.5em;
+    display: inline-block;
+}
 
-li:before {
-    content: '\2014';
-    margin-right: 0.7em;
+.collectionTreeView-dropTarget {
+    border-style: solid;
+    box-sizing: border-box;
+    height: 100%;
 }
 
-.collapsed:before {
-    content: '\25b6';
-    margin-right: 0.65em;
+.docContainer {
+    display: inline-table;
 }
 
-.uncollapsed:before {
-    content: '\25bc';
-    margin-right: 0.5em;
+.delete-button {
+    color: #999999;
+    float: right;
+    margin-left: 1em;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 52e853bf7..8b06d9ac4 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,9 +7,20 @@ import React = require("react")
 import { TextField } from "../../../fields/TextField";
 import { observable, action } from "mobx";
 import "./CollectionTreeView.scss";
+import { EditableView } from "../EditableView";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 export interface TreeViewProps {
     document: Document;
+    deleteDoc: (doc: Document) => void;
+}
+
+export enum BulletType {
+    Collapsed,
+    Collapsible,
+    List
 }
 
 @observer
@@ -21,61 +32,100 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
+    delete = () => {
+        this.props.deleteDoc(this.props.document);
+    }
+
+
+    @action
+    remove = (document: Document) => {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
+    renderBullet(type: BulletType) {
+        let onClicked = action(() => this.collapsed = !this.collapsed);
+
+        switch (type) {
+            case BulletType.Collapsed:
+                return <div className="bullet" onClick={onClicked}>&#9654;</div>
+            case BulletType.Collapsible:
+                return <div className="bullet" onClick={onClicked}>&#9660;</div>
+            case BulletType.List:
+                return <div className="bullet">&mdash;</div>
+        }
+    }
+
     /**
-     * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
-     * @param document The document to render.
+     * Renders the EditableView title element for placement into the tree.
      */
-    renderChild(document: Document) {
-        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+    renderTitle() {
+        let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
 
         // if the title hasn't loaded, immediately return the div
         if (!title || title === "<Waiting>") {
-            return <div key={document.Id}></div>;
+            return <div key={this.props.document.Id}></div>;
         }
 
-        // otherwise, check if it's a collection.
-        else if (children && children !== "<Waiting>") {
-            // if it's not collapsed, then render the full TreeView.
+        return <div className="docContainer"> <EditableView contents={title.Data}
+            height={36} GetValue={() => {
+                let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
+                if (title && title !== "<Waiting>")
+                    return title.Data;
+                return "";
+            }} SetValue={(value: string) => {
+                this.props.document.SetData(KeyStore.Title, value, TextField);
+                return true;
+            }} />
+            <div className="delete-button" onClick={this.delete}>x</div>
+        </div >
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => this.props.document);
+        let titleElement = this.renderTitle();
+
+        // check if this document is a collection
+        if (children && children !== FieldWaiting) {
+            let subView;
+
+            // if uncollapsed, then add the children elements
             if (!this.collapsed) {
-                return (
-                    <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
-                        {title.Data}
-                        <ul key={document.Id}>
-                            <TreeView
-                                document={document}
-                            />
+                // render all children elements
+                let childrenElement = (children.Data.map(value =>
+                    <TreeView document={value} deleteDoc={this.remove} />)
+                )
+                subView =
+                    <li key={this.props.document.Id} >
+                        {this.renderBullet(BulletType.Collapsible)}
+                        {titleElement}
+                        <ul key={this.props.document.Id}>
+                            {childrenElement}
                         </ul>
                     </li>
-                );
             } else {
-                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+                subView = <li key={this.props.document.Id}>
+                    {this.renderBullet(BulletType.Collapsed)}
+                    {titleElement}
+                </li>
             }
-        }
 
-        // finally, if it's a normal document, then render it as such.
-        else {
-            return <li key={document.Id}>{title.Data}</li>;
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                {subView}
+            </div>
         }
-    }
-
-    render() {
-        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
 
-        if (children && children !== "<Waiting>") {
-            return (<div>
-                {children.Data.map(value => this.renderChild(value))}
-            </div>)
-            // let results: JSX.Element[] = [];
-
-            // // append a list item for each child in the collection
-            // children.Data.forEach((value) => {
-            //     results.push(this.renderChild(value));
-            // })
-
-            // return results;
-        } else {
-            return <div></div>;
+        // otherwise this is a normal leaf node
+        else {
+            return <li key={this.props.document.Id}>
+                {this.renderBullet(BulletType.List)}
+                {titleElement}
+            </li>;
         }
     }
 }
@@ -84,21 +134,42 @@ class TreeView extends React.Component<TreeViewProps> {
 @observer
 export class CollectionTreeView extends CollectionViewBase {
 
+    @action
+    remove = (document: Document) => {
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
     render() {
         let titleStr = "";
         let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
-        if (title && title !== "<Waiting>") {
+        if (title && title !== FieldWaiting) {
             titleStr = title.Data;
         }
+
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let childrenElement = !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <TreeView document={value} key={value.Id} deleteDoc={this.remove} />)
+            )
+
         return (
-            <div>
-                <h3>{titleStr}</h3>
+            <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
+                <h3>
+                    <EditableView contents={titleStr}
+                        height={72} GetValue={() => {
+                            return this.props.Document.Title;
+                        }} SetValue={(value: string) => {
+                            this.props.Document.SetData(KeyStore.Title, value, TextField);
+                            return true;
+                        }} />
+                </h3>
                 <ul className="no-indent">
-                    <TreeView
-                        document={this.props.Document}
-                    />
+                    {childrenElement}
                 </ul>
-            </div>
+            </div >
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a7db07a42..548a51bf1 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
@@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
-import { Field } from "../../../fields/Field";
+import { Field, FieldId } from "../../../fields/Field";
 
 export enum CollectionViewType {
     Invalid,
@@ -27,32 +27,43 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionView extends React.Component<CollectionViewProps> {
 
+    @observable
+    public SelectedDocs: FieldId[] = [];
+
     public static LayoutString(fieldKey: string = "DataKey") {
-        return `<CollectionView Document={Document}
+        return `<${CollectionView.name} Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
-                    isTopMost={isTopMost} BackgroundView={BackgroundView} />`;
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
-    public active = () => {
-        var isSelected = this.props.isSelected();
-        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.isTopMost;
+
+    public active: () => boolean = () => CollectionView.Active(this);
+    addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
+    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
+    get subView() { return CollectionView.SubView(this); }
+
+    public static Active(self: CollectionView): boolean {
+        var isSelected = self.props.isSelected();
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self);
+        var topMost = self.props.isTopMost;
         return isSelected || childSelected || topMost;
     }
+
     @action
-    addDocument = (doc: Document): void => {
-        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+    public static AddDocument(props: CollectionViewProps, doc: Document) {
+        doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0));
+        if (props.Document.Get(props.fieldKey) instanceof Field) {
             //TODO This won't create the field if it doesn't already exist
-            const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+            const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
             value.push(doc);
         } else {
-            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+            props.Document.SetData(props.fieldKey, [doc], ListField);
         }
     }
 
     @action
-    removeDocument = (doc: Document): boolean => {
+    public static RemoveDocument(props: CollectionViewProps, doc: Document): boolean {
         //TODO This won't create the field if it doesn't already exist
-        const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+        const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
         let index = -1;
         for (let i = 0; i < value.length; i++) {
             if (value[i].Id == doc.Id) {
@@ -60,6 +71,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 break;
             }
         }
+
         if (index !== -1) {
             value.splice(index, 1)
 
@@ -82,48 +94,29 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
-    set collectionViewType(type: CollectionViewType) {
-        let Document = this.props.Document;
-        Document.SetData(KeyStore.ViewType, type, NumberField);
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
+            ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
+            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
+            ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        }
     }
 
-    specificContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
-        ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
-        ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
-        ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+    public static SubView(self: CollectionView) {
+        let subProps = { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self }
+        switch (self.collectionViewType) {
+            case CollectionViewType.Freeform: return (<CollectionFreeFormView {...subProps} />)
+            case CollectionViewType.Schema: return (<CollectionSchemaView {...subProps} />)
+            case CollectionViewType.Docking: return (<CollectionDockingView {...subProps} />)
+            case CollectionViewType.Tree: return (<CollectionTreeView {...subProps} />)
+        }
+        return (null);
     }
 
     render() {
-        let viewType = this.collectionViewType;
-        let subView: JSX.Element;
-        switch (viewType) {
-            case CollectionViewType.Freeform:
-                subView = (<CollectionFreeFormView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
-                break;
-            case CollectionViewType.Schema:
-                subView = (<CollectionSchemaView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
-                break;
-            case CollectionViewType.Docking:
-                subView = (<CollectionDockingView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
-                break;
-            case CollectionViewType.Tree:
-                subView = (<CollectionTreeView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
-                break;
-            default:
-                subView = <div></div>
-                break;
-        }
-        return (<div onContextMenu={this.specificContextMenu}>
-            {subView}
+        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+            {this.subView}
         </div>)
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 217536e2b..b126b40a9 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,16 +1,16 @@
-import { action, computed } from "mobx";
+import { action, runInAction } from "mobx";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import React = require("react");
 import { KeyStore } from "../../../fields/KeyStore";
-import { Opt, FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting } from "../../../fields/Field";
 import { undoBatch } from "../../util/UndoManager";
 import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "../nodes/DocumentView";
 import { Documents, DocumentOptions } from "../../documents/Documents";
 import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
-
+import { CollectionView } from "./CollectionView";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -22,12 +22,13 @@ export interface CollectionViewProps {
     bindings: any;
     panelWidth: () => number;
     panelHeight: () => number;
+    focus: (doc: Document) => void;
 }
 export interface SubCollectionViewProps extends CollectionViewProps {
     active: () => boolean;
     addDocument: (doc: Document) => void;
     removeDocument: (doc: Document) => boolean;
-    CollectionView: any;
+    CollectionView: CollectionView;
 }
 
 export class CollectionViewBase extends React.Component<SubCollectionViewProps> {
@@ -46,7 +47,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     protected drop(e: Event, de: DragManager.DropEvent) {
         const docView: DocumentView = de.data["documentView"];
         const doc: Document = de.data["document"];
-        if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+        if (docView && (!docView.props.ContainingCollectionView || docView.props.ContainingCollectionView !== this.props.CollectionView)) {
             if (docView.props.RemoveDocument) {
                 docView.props.RemoveDocument(docView.props.Document);
             }
@@ -67,13 +68,17 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
         let html = e.dataTransfer.getData("text/html");
         let text = e.dataTransfer.getData("text/plain");
         if (html && html.indexOf("<img") != 0) {
-            let htmlDoc = Documents.HtmlDocument(html, { ...options });
+            console.log("not good");
+            let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 });
             htmlDoc.SetText(KeyStore.DocumentText, text);
             this.props.addDocument(htmlDoc);
             return;
         }
 
+        console.log(e.dataTransfer.items.length);
+
         for (let i = 0; i < e.dataTransfer.items.length; i++) {
+            const upload = window.location.origin + "/upload";
             let item = e.dataTransfer.items[i];
             if (item.kind === "string" && item.type.indexOf("uri") != -1) {
                 e.dataTransfer.items[i].getAsString(function (s) {
@@ -92,28 +97,55 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
 
                 })
             }
-            if (item.kind == "file" && item.type.indexOf("image")) {
+            let type = item.type
+            console.log(type)
+            if (item.kind == "file") {
                 let fReader = new FileReader()
                 let file = item.getAsFile();
-
-                fReader.addEventListener("load", action("drop", () => {
-                    if (fReader.result) {
-                        let url = "" + fReader.result;
-                        let doc = Documents.ImageDocument(url, options)
-                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
-                        if (docs != FieldWaiting) {
-                            if (!docs) {
-                                docs = new ListField<Document>();
-                                that.props.Document.Set(KeyStore.Data, docs)
-                            }
-                            docs.Data.push(doc);
-                        }
-                    }
-                }), false)
+                let formData = new FormData()
 
                 if (file) {
-                    fReader.readAsDataURL(file)
+                    formData.append('file', file)
                 }
+
+                fetch(upload, {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then((res: Response) => {
+                        return res.json()
+                    }).then(json => {
+
+                        json.map((file: any) => {
+                            let path = window.location.origin + file
+                            runInAction(() => {
+                                var doc: any;
+
+                                if (type.indexOf("image") !== -1) {
+                                    doc = Documents.ImageDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                if (type.indexOf("video") !== -1) {
+                                    doc = Documents.VideoDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                if (type.indexOf("audio") !== -1) {
+                                    doc = Documents.AudioDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                                if (docs != FieldWaiting) {
+                                    if (!docs) {
+                                        docs = new ListField<Document>();
+                                        that.props.Document.Set(KeyStore.Data, docs)
+                                    }
+                                    if (doc) {
+                                        docs.Data.push(doc);
+                                    }
+
+                                }
+                            })
+                        })
+                    })
+
+
             }
         }
     }
diff --git a/src/client/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx
new file mode 100644
index 000000000..a2c7be1a8
--- /dev/null
+++ b/src/client/views/nodes/Annotation.tsx
@@ -0,0 +1,117 @@
+import "./ImageBox.scss";
+import React = require("react")
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+
+interface IProps{
+    Span: HTMLSpanElement;
+    X: number; 
+    Y: number; 
+    Highlights: any[]; 
+    Annotations: any[]; 
+    CurrAnno: any[]; 
+
+}
+
+/**
+ * Annotation class is used to take notes on a particular highlight. You can also change highlighted span's color
+ * Improvements to be made: Removing the annotation when onRemove is called. (Removing this, not just the highlighted span). 
+ * Also need to support multiline highlighting
+ * 
+ * Written by: Andrew Kim
+ */
+@observer
+export class Annotation extends React.Component<IProps> {
+    
+    /**
+     * changes color of the span (highlighted section)
+     */
+    onColorChange = (e:React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "r"){
+            this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)"
+        } else if (e.currentTarget.innerHTML == "b"){
+            this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)"
+        } else if (e.currentTarget.innerHTML == "y"){
+            this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)"
+        } else if (e.currentTarget.innerHTML == "g"){
+            this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)"
+        }
+      
+    }
+
+    /**
+     * removes the highlighted span. Supposed to remove Annotation too, but I don't know how to unmount this
+     */
+    @action
+    onRemove = (e:any) => {
+        let index:number = -1; 
+        //finding the highlight in the highlight array 
+        this.props.Highlights.forEach((e) => {
+            for (let i = 0; i < e.spans.length; i++){
+                if (e.spans[i] == this.props.Span){
+                    index = this.props.Highlights.indexOf(e); 
+                    this.props.Highlights.splice(index, 1); 
+                }
+            }
+        })
+
+        //removing from CurrAnno and Annotation array 
+        this.props.Annotations.splice(index, 1); 
+        this.props.CurrAnno.pop()
+        
+        //removing span from div
+        if(this.props.Span.parentElement){
+            let nodesArray = this.props.Span.parentElement.childNodes; 
+            nodesArray.forEach((e) => {
+                if (e == this.props.Span){
+                    if (this.props.Span.parentElement){   
+                        this.props.Highlights.forEach((item) => {
+                            if (item == e){
+                                item.remove(); 
+                            }
+                        })
+                        e.remove();                   
+                    }
+                }
+            }) 
+        }
+    
+        
+    }
+
+    render() {
+        return (
+            <div 
+            style = {{
+            position: "absolute",
+            top: "20px", 
+            left: "0px",  
+            zIndex: 1, 
+            transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+            
+            }}>
+                <div style = {{width:"200px", height:"50px", backgroundColor: "orange"}}>
+                    <button
+                    style = {{borderRadius: "25px", width:"25%", height:"100%"}}
+                    onClick = {this.onRemove}
+                    >x</button>
+                    <div style = {{width:"75%", height: "100%" , display:"inline-block"}}>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"red", borderRadius:"50%", color: "transparent"}}>r</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"blue", borderRadius:"50%", color: "transparent"}}>b</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"yellow", borderRadius:"50%", color:"transparent"}}>y</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"green", borderRadius:"50%", color:"transparent"}}>g</button>
+                    </div>
+                    
+                </div>
+                <div  style = {{width:"200px", height:"200"}}>
+                    <textarea style = {{width: "100%", height: "100%"}}
+                    defaultValue = "Enter Text Here..."
+                   
+                    ></textarea>
+                </div>
+            </div>
+          
+        );
+    }
+}
\ No newline at end of file
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..f7d89843d
--- /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/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 8e2ebd690..ab913897b 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
 .documentView-node {
     position: absolute;
     background: #cdcdcd;
-    overflow: hidden;
+    //overflow: hidden;
     &.minimized {
         width: 30px;
         height: 30px;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a14239e94..dc793c16d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, IReactionDisposer, runInAction, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
@@ -12,24 +12,35 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
-import { WebView } from "./WebView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { VideoBox } from "../nodes/VideoBox";
+import { AudioBox } from "../nodes/AudioBox";
+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 { TextField } from "../../../fields/TextField";
+import { DocumentManager } from "../../util/DocumentManager";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
+
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView>;
     Document: Document;
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
     ScreenToLocalTransform: () => Transform;
-    isTopMost: boolean; //tfs: This shouldn't be necessary I don't think
+    isTopMost: boolean;
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    focus: (doc: Document) => void;
+    SelectOnLoad: boolean;
 }
 export interface JsxArgs extends DocumentViewProps {
     Keys: { [name: string]: Key }
@@ -51,7 +62,6 @@ Example usage of this function:
         )
     }
 */
-
 export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     let Keys: { [name: string]: any } = {}
     let Fields: { [name: string]: any } = {}
@@ -74,41 +84,31 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     return args;
 }
 
-@observer export class DocumentView extends React.Component<DocumentViewProps> {
+@observer
+export class DocumentView extends React.Component<DocumentViewProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
-    private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
-    @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>");
-    }
-    @computed get layoutKeys(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
-    }
-    @computed get layoutFields(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
-    }
+    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>"); }
+    @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+    @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
     screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
+        if (e.shiftKey && e.buttons === 2) {
+            if (this.props.isTopMost) {
+                this.startDragging(e.pageX, e.pageY);
+            }
+            else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
         } else {
-            this._contextMenuCanOpen = true;
             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)
@@ -116,33 +116,74 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
             }
         }
     }
+
+    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) {
+        if (this._mainCont.current) {
+            const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            let dragData: { [id: string]: any } = {};
+            dragData["documentView"] = this;
+            dragData["xOffset"] = x - left;
+            dragData["yOffset"] = y - top;
+            DragManager.StartDrag(this._mainCont.current, dragData, {
+                handlers: {
+                    dragComplete: action(() => { }),
+                },
+                hideSource: true
+            })
+        }
+    }
+
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
-            if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
-                const [left,
-                    top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                let dragData: {
-                    [id: string]: any
-                }
-                    = {}
-                    ;
-                dragData["documentView"] = this;
-                dragData["xOffset"] = e.x - left;
-                dragData["yOffset"] = e.y - top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }
-                        ),
-                    }
-                    , hideSource: true
-                }
-                )
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.removeEventListener("pointerup", this.onPointerUp);
+            if (!this.topMost || e.buttons == 2) {
+                this.startDragging(e.x, e.y);
             }
         }
         e.stopPropagation();
@@ -156,87 +197,104 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
-    deleteClicked = (e: React.MouseEvent): void => {
+
+    deleteClicked = (): void => {
         if (this.props.RemoveDocument) {
             this.props.RemoveDocument(this.props.Document);
         }
     }
+
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.AddDocument) {
+            this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+        }
+    }
     fullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({
-            description: "Close Full Screen", event: this.closeFullScreenClicked
-        }
-        );
+        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
+
     closeFullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.CloseFullScreen();
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({
-            description: "Full Screen", event: this.fullScreenClicked
-        })
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
-    @action onContextMenu = (e: React.MouseEvent): void => {
-        e.preventDefault()
-        e.stopPropagation();
-        if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) {
+
+    @action
+    drop = (e: Event, de: DragManager.DropEvent) => {
+        console.log("drop");
+        const sourceDocView: DocumentView = de.data["linkSourceDoc"];
+        if (!sourceDocView) {
             return;
         }
-        if (this.topMost) {
-            ContextMenu.Instance.addItem({
-                description: "Full Screen", event: this.fullScreenClicked
-            })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        let sourceDoc: Document = sourceDocView.props.Document;
+        let destDoc: Document = this.props.Document;
+        if (this.props.isTopMost) {
+            return;
         }
-        else {
+        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();
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
+            return;
+        }
+        e.preventDefault()
+
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        if (!this.topMost) {
             // DocumentViews should stop propagation of this event
-            ContextMenu.Instance.addItem({
-                description: "Full Screen", event: this.fullScreenClicked
-            }
-            )
-            ContextMenu.Instance.addItem({
-                description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document)
-            }
-            )
-            ContextMenu.Instance.addItem({
-                description: "Delete", event: this.deleteClicked
-            }
-            )
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
+            e.stopPropagation();
         }
+
+        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        SelectionManager.SelectDoc(this, e.ctrlKey);
     }
-    @computed get mainContent() {
-        var val = this.props.Document.Id;
-        return <JsxParser components={
-            {
-                FormattedTextBox,
-                ImageBox,
-                CollectionFreeFormView,
-                CollectionDockingView,
-                CollectionSchemaView,
-                CollectionView,
-                WebView
-            }
-        }
-            bindings={
-                this._documentBindings
-            }
-            jsx={
-                this.layout
-            }
-            showWarnings={
-                true
-            }
-            onError={
-                (test: any) => {
-                    console.log(test)
-                }
-            }
+
+    get mainContent() {
+        return <JsxParser
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, VideoBox, AudioBox, PDFBox }}
+            bindings={this._documentBindings}
+            jsx={this.layout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
         />
     }
+
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    }
+
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
+
     render() {
         if (!this.props.Document) return <div></div>
         let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
@@ -245,9 +303,10 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
         }
         this._documentBindings = {
             ...this.props,
-            isSelected: () => SelectionManager.IsSelected(this), select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed)
-        }
-            ;
+            isSelected: this.isSelected,
+            select: this.select,
+            focus: this.props.focus
+        };
         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
         }
@@ -259,29 +318,18 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
         var scaling = this.props.ContentScaling();
         var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
-        return (<div className="documentView-node" ref={
-            this._mainCont
-        }
-            style={
-                {
-                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", transformOrigin: "left top", transform: `scale($ {
-                    scaling
-                }
-                , $ {
-                    scaling
-                }
-                )`
-                }
-            }
-            onContextMenu={
-                this.onContextMenu
-            }
-            onPointerDown={
-                this.onPointerDown
-            }
-        > {
-                this.mainContent
-            }
-        </div>)
+        return (
+            <div className="documentView-node" ref={this._mainCont}
+                style={{
+                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+                    height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+                    transformOrigin: "left top",
+                    transform: `scale(${scaling} , ${scaling})`
+                }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown} >
+                {this.mainContent}
+            </div>
+        )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 1a9d325db..49f4cefce 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,17 +1,22 @@
 import React = require("react")
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
 import { Document } from "../../../fields/Document";
 import { TextField } from "../../../fields/TextField";
 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 { HtmlField } from "../../../fields/HtmlField";
-import { WebView } from "./WebView";
+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.
@@ -24,12 +29,15 @@ export interface FieldViewProps {
     isSelected: () => boolean;
     select: () => void;
     isTopMost: boolean;
+    selectOnLoad: boolean;
     bindings: any;
 }
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} isTopMost={isTopMost} />`; }
+    public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") {
+        return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`;
+    }
 
     @computed
     get field(): FieldValue<Field> {
@@ -50,13 +58,26 @@ export class FieldView extends React.Component<FieldViewProps> {
         else if (field instanceof ImageField) {
             return <ImageBox {...this.props} />
         }
+        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) {
+        //     return <WebBox {...this.props} />
+        // }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else if (field instanceof HtmlField) {
-            return <WebView {...this.props} />
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
+        }
+        else if (field != FieldWaiting) {
+            return <p>{JSON.stringify(field.GetValue())}</p>
+        }
+        else
             return <p> {"Waiting for server..."} </p>
     }
 
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 0389a3f85..ab5849f09 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -9,10 +9,30 @@
 }
 
 .formattedTextBox-cont {
-    background: beige;
-    padding: 0;
+    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%;
-}
\ No newline at end of file
+}
+
+.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
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index baedf0852..411b43cd5 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -2,17 +2,22 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
-import { EditorState, Transaction } from "prosemirror-state";
+import { schema } from "../../util/RichTextSchema";
+import { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Opt, FieldWaiting } from "../../../fields/Field";
 import "./FormattedTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
 
 
+
+
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
 //  HTML Markup:  <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
@@ -40,7 +45,6 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         super(props);
 
         this._ref = React.createRef();
-
         this.onChange = this.onChange.bind(this);
     }
 
@@ -48,25 +52,24 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         if (this._editorView) {
             const state = this._editorView.state.apply(tx);
             this._editorView.updateState(state);
-            const { doc, fieldKey } = this.props;
-            doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+            this.props.doc.SetData(this.props.fieldKey, JSON.stringify(state.toJSON()), RichTextField);
         }
     }
 
     componentDidMount() {
         let state: EditorState;
-        const { doc, fieldKey } = this.props;
         const config = {
             schema,
             plugins: [
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
-                keymap(baseKeymap)
+                keymap(baseKeymap),
+                this.tooltipMenuPlugin()
             ]
         };
 
-        let field = doc.GetT(fieldKey, RichTextField);
-        if (field && field != FieldWaiting) {  // bcz: don't think this works
+        let field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
+        if (field && field != FieldWaiting && field.Data) {
             state = EditorState.fromJSON(config, JSON.parse(field.Data));
         } else {
             state = EditorState.create(config);
@@ -86,6 +89,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
+        if (this.props.selectOnLoad) {
+            this.props.select();
+            this._editorView!.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -103,11 +110,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const { fieldKey, doc } = this.props;
-        doc.SetData(fieldKey, e.target.value, RichTextField);
+        this.props.doc.SetData(this.props.fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {
-        let me = this;
         if (e.buttons === 1 && this.props.isSelected()) {
             e.stopPropagation();
         }
@@ -139,8 +144,20 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         e.stopPropagation();
     }
 
+    tooltipMenuPlugin() {
+        return new Plugin({
+            view(_editorView) {
+                return new TooltipTextMenu(_editorView)
+            }
+        })
+    }
+
+    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.tsx b/src/client/views/nodes/ImageBox.tsx
index 8c44395f4..30910fb1f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,15 +1,15 @@
 
+import { action, observable } 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
-import "./ImageBox.scss";
-import React = require("react")
-import { ImageField } from '../../../fields/ImageField';
-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 { ImageField } from '../../../fields/ImageField';
 import { KeyStore } from '../../../fields/KeyStore';
+import { ContextMenu } from "../../views/ContextMenu";
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import React = require("react")
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
new file mode 100644
index 000000000..1295266e5
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -0,0 +1,31 @@
+.keyValueBox-cont {
+    overflow-y:scroll;
+    height: 100%;
+    border: black;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    display: inline-block;
+    .imageBox-cont img {
+        max-height:45px;
+        height: auto;
+    }
+}
+.keyValueBox-table {
+    position: relative;
+}
+.keyValueBox-header {
+    background:gray;
+}
+.keyValueBox-evenRow {
+    background: white;
+    .formattedTextBox-cont {
+        background: white;
+    }
+}
+.keyValueBox-oddRow {
+    background: lightGray;
+    .formattedTextBox-cont {
+        background: lightgray;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
new file mode 100644
index 000000000..ac8c949a9
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -0,0 +1,66 @@
+
+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 { KeyStore } from '../../../fields/KeyStore';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./KeyValueBox.scss";
+import { KeyValuePair } from "./KeyValuePair";
+import React = require("react")
+
+@observer
+export class KeyValueBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && this.props.isSelected()) {
+            e.stopPropagation();
+        }
+    }
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
+
+    createTable = () => {
+        let doc = this.props.doc.GetT(KeyStore.Data, Document);
+        if (!doc || doc == FieldWaiting) {
+            return <tr><td>Loading...</td></tr>
+        }
+        let realDoc = doc;
+
+        let ids: { [key: string]: string } = {};
+        let protos = doc.GetAllPrototypes();
+        for (const proto of protos) {
+            proto._proxies.forEach((val, key) => {
+                if (!(key in ids)) {
+                    ids[key] = key;
+                }
+            })
+        }
+
+        let rows: JSX.Element[] = [];
+        let i = 0;
+        for (let key in ids) {
+            rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />)
+        }
+        return rows;
+    }
+
+
+    render() {
+
+        return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
+            <table className="keyValueBox-table">
+                <tbody>
+                    <tr className="keyValueBox-header">
+                        <th>Key</th>
+                        <th>Fields</th>
+                    </tr>
+                    {this.createTable()}
+                </tbody>
+            </table>
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
new file mode 100644
index 000000000..a97e98313
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -0,0 +1,58 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValueBox.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { Opt, Field } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import { Document } from '../../../fields/Document';
+import { Key } from '../../../fields/Key';
+import { Server } from "../../Server"
+
+// Represents one row in a key value plane
+
+export interface KeyValuePairProps {
+    rowStyle: string;
+    fieldId: string;
+    doc: Document;
+}
+@observer
+export class KeyValuePair extends React.Component<KeyValuePairProps> {
+
+    @observable
+    private key: Opt<Key>
+
+    constructor(props: KeyValuePairProps) {
+        super(props);
+        Server.GetField(this.props.fieldId,
+            action((field: Opt<Field>) => {
+                if (field) {
+                    this.key = field as Key;
+                }
+            }));
+
+    }
+
+
+    render() {
+        if (!this.key) {
+            return <tr><td>error</td><td></td></tr>
+
+        }
+        let props: FieldViewProps = {
+            doc: this.props.doc,
+            fieldKey: this.key,
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
+        }
+        return (
+            <tr className={this.props.rowStyle}>
+                <td>{this.key.Name}</td>
+                <td><FieldView {...props} /></td>
+            </tr>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
new file mode 100644
index 000000000..00e5ebb3d
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.scss
@@ -0,0 +1,39 @@
+.link-container {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    border-top: 0.5px solid #bababa;
+}
+
+.info-container {
+    width: 60%;
+    padding-top: 5px;
+    padding-left: 5px;
+    display: flex;
+    flex-direction: column
+}
+
+.link-name {
+    font-size: 11px;
+}
+
+.doc-name {
+    font-size: 8px;
+}
+
+.button-container {
+    width: 40%;
+    display: flex;
+    flex-direction: row;
+}
+
+.button {
+    height: 15px;
+    width: 15px;
+    margin: 8px 5px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: #2B6091;
+}
\ 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..69df676ff
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -0,0 +1,89 @@
+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";
+
+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 className="button" onPointerDown={this.onViewButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onEditButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onDeleteButtonPressed}></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..cb191dc8c
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -0,0 +1,29 @@
+.edit-container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.name-input {
+    margin-bottom: 10px;
+    padding: 5px;
+    font-size: 12px;
+}
+
+.description-input {
+    font-size: 12px;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+.save-button {
+    width: 50px;
+    height: 20px;
+    background-color: #2B6091;
+    margin: 0 auto;
+    color: white;
+    text-align: center;
+    line-height: 20px;
+    font-size: 12px;
+}
\ 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..a120ab2a7
--- /dev/null
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -0,0 +1,20 @@
+#linkMenu-container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+#linkMenu-searchBar {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 10px;
+    font-size: 12px;
+}
+
+#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..5c6b06d00
--- /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, "Source: ")}
+                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")}
+                    </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
new file mode 100644
index 000000000..9f92410d4
--- /dev/null
+++ b/src/client/views/nodes/PDFBox.scss
@@ -0,0 +1,15 @@
+.react-pdf__Page {
+    transform-origin: left top;
+    position: absolute;
+}
+.react-pdf__Document {
+    position: absolute;
+}
+.pdfBox-buttonTray {
+    position:absolute;
+    z-index: 25;
+}
+.pdfBox-contentContainer {
+    position: absolute;
+    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
new file mode 100644
index 000000000..70a70c7c8
--- /dev/null
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -0,0 +1,490 @@
+import * as htmlToImage from "html-to-image";
+import { action, computed, observable, reaction, IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
+import 'react-image-lightbox/style.css';
+import Measure from "react-measure";
+//@ts-ignore
+import { Document, Page } from "react-pdf";
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { FieldWaiting, Opt } from '../../../fields/Field';
+import { ImageField } from '../../../fields/ImageField';
+import { KeyStore } from '../../../fields/KeyStore';
+import { PDFField } from '../../../fields/PDFField';
+import { Utils } from '../../../Utils';
+import { Annotation } from './Annotation';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import "./PDFBox.scss";
+import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
+import React = require("react")
+
+/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
+ * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
+ * area selection (I call it stickies), embedded ink node for directly annotating using a pen or 
+ * mouse, and pagination. 
+ *
+ * 
+ * HOW TO USE: 
+ * AREA selection: 
+ *          1) Click on Area button. 
+ *          2) click on any part of the PDF, and drag to get desired sized area shape
+ *          3) You can write on the area (hence the reason why it's called sticky)
+ *          4) to make another area, you need to click on area button AGAIN. 
+ * 
+ * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
+ *          1) just click and drag on a text
+ *          2) click highlight
+ *          3) for annotation, just pull your cursor over to that text
+ *          4) another method: click on highlight first and then drag on your desired text
+ *          5) To make another highlight, you need to reclick on the button 
+ * 
+ * Draw:
+ *          1) click draw and select color. then just draw like there's no tomorrow.
+ *          2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session. 
+ * 
+ * Pagination:
+ *          1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't. 
+ *          2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved. 
+ *
+ * 
+ * written by: Andrew Kim 
+ */
+@observer
+export class PDFBox extends React.Component<FieldViewProps> {
+    public static LayoutString() { return FieldView.LayoutString(PDFBox); }
+
+    private _mainDiv = React.createRef<HTMLDivElement>()
+    private _pdf = React.createRef<HTMLCanvasElement>();
+
+    //very useful for keeping track of X and y position throughout the PDF Canvas
+    private initX: number = 0;
+    private initY: number = 0;
+    private initPage: boolean = false;
+
+    //checks if tool is on
+    private _toolOn: boolean = false; //checks if tool is on
+    private _pdfContext: any = null; //gets pdf context
+    private bool: Boolean = false; //general boolean debounce
+    private currSpan: any;//keeps track of current span (for highlighting)
+
+    private _currTool: any; //keeps track of current tool button reference
+    private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool 
+    private _drawTool = React.createRef<HTMLButtonElement>()//drawing tool button reference
+
+    private _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
+    private _currColor: string = "black"; //current color that user selected (for ink/pen)
+
+    private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
+    private _highlightToolOn: boolean = false;
+    private _pdfCanvas: any;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    @observable private _perPageInfo: Object[] = []; //stores pageInfo
+    @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
+
+    @observable private _currAnno: any = []
+    @observable private _interactive: boolean = false;
+    @observable private _loaded: boolean = false;
+
+    @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); }
+
+    componentDidMount() {
+        this._reactionDisposer = reaction(
+            () => this.curPage,
+            () => {
+                if (this.curPage && this.initPage) {
+                    this.saveThumbnail();
+                    this._interactive = true;
+                } else {
+                    if (this.curPage)
+                        this.initPage = true;
+                }
+            },
+            { fireImmediately: true });
+
+    }
+
+    componentWillUnmount() {
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+    }
+
+    /**
+     * selection tool used for area highlighting (stickies). Kinda temporary
+     */
+    selectionTool = () => {
+        this._toolOn = true;
+    }
+    /**
+     * when user draws on the canvas. When mouse pointer is down 
+     */
+    drawDown = (e: PointerEvent) => {
+        this.initX = e.offsetX;
+        this.initY = e.offsetY;
+        this._pdfContext.beginPath();
+        this._pdfContext.lineTo(this.initX, this.initY);
+        this._pdfContext.strokeStyle = this._currColor;
+        this._pdfCanvas.addEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.addEventListener("pointerup", this.drawUp);
+
+    }
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this._pdfContext.lineTo(x, y);
+        this._pdfContext.stroke();
+    }
+
+    drawUp = (e: PointerEvent) => {
+        this._pdfContext.closePath();
+        this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+        this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+    }
+
+
+    /**
+     * highlighting helper function
+     */
+    makeEditableAndHighlight = (colour: string) => {
+        var range, sel = window.getSelection();
+        if (sel.rangeCount && sel.getRangeAt) {
+            range = sel.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (!document.execCommand("HiliteColor", false, colour)) {
+            document.execCommand("HiliteColor", false, colour);
+        }
+
+        if (range) {
+            sel.removeAllRanges();
+            sel.addRange(range);
+
+            let obj: Object = { parentDivs: [], spans: [] };
+            //@ts-ignore
+            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
+                obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
+            } else { //single line highlighting case
+                let parentDiv = range.commonAncestorContainer.parentElement
+                if (parentDiv) {
+                    if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
+                        obj = this.highlightNodes(parentDiv.childNodes)
+                    } else {
+                        parentDiv.childNodes.forEach((child) => {
+                            if (child.nodeName == 'SPAN') {
+                                //@ts-ignore
+                                obj.parentDivs.push(parentDiv)
+                                //@ts-ignore
+                                child.id = "highlighted"
+                                //@ts-ignore
+                                obj.spans.push(child)
+                                child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                            }
+                        })
+                    }
+                }
+            }
+            this._pageInfo.divs.push(obj);
+
+        }
+        document.designMode = "off";
+    }
+
+    highlightNodes = (nodes: NodeListOf<ChildNode>) => {
+        let temp = { parentDivs: [], spans: [] }
+        nodes.forEach((div) => {
+            div.childNodes.forEach((child) => {
+                if (child.nodeName == 'SPAN') {
+                    //@ts-ignore
+                    temp.parentDivs.push(div)
+                    //@ts-ignore
+                    child.id = "highlighted"
+                    //@ts-ignore
+                    temp.spans.push(child)
+                    child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                }
+            })
+
+        })
+        return temp;
+    }
+
+    /**
+     * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
+     */
+    @action
+    onEnter = (e: any) => {
+        let span: HTMLSpanElement = e.toElement;
+        let index: any;
+        this._pageInfo.divs.forEach((obj: any) => {
+            obj.spans.forEach((element: any) => {
+                if (element == span) {
+                    if (!index) {
+                        index = this._pageInfo.divs.indexOf(obj);
+                    }
+                }
+            })
+        })
+
+        if (this._pageInfo.anno.length >= index + 1) {
+            if (this._currAnno.length == 0) {
+                this._currAnno.push(this._pageInfo.anno[index]);
+            }
+        } else {
+            if (this._currAnno.length == 0) { //if there are no current annotation
+                let div = span.offsetParent;
+                //@ts-ignore
+                let divX = div.style.left
+                //@ts-ignore
+                let divY = div.style.top
+                //slicing "px" from the end
+                divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
+                divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
+                let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />
+                this._pageInfo.anno.push(annotation);
+                this._currAnno.push(annotation);
+            }
+        }
+
+    }
+
+    /**
+     * highlight function for highlighting actual text. This works fine. 
+     */
+    highlight = (color: string) => {
+        if (window.getSelection()) {
+            try {
+                if (!document.execCommand("hiliteColor", false, color)) {
+                    this.makeEditableAndHighlight(color);
+                }
+            } catch (ex) {
+                this.makeEditableAndHighlight(color)
+            }
+        }
+    }
+
+    /**
+     * controls the area highlighting (stickies) Kinda temporary
+     */
+    onPointerDown = (e: React.PointerEvent) => {
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+
+        }
+    }
+
+    /**
+     * controls area highlighting and partially highlighting. Kinda temporary
+     */
+    @action
+    onPointerUp = (e: React.PointerEvent) => {
+        if (this._highlightToolOn) {
+            this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
+            this._highlightToolOn = false;
+        }
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            let finalX = mouse.offsetX;
+            let finalY = mouse.offsetY;
+            let width = Math.abs(finalX - this.initX); //width
+            let height = Math.abs(finalY - this.initY); //height
+
+            //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
+            if (finalX < this.initX) {
+                this.initX = finalX;
+            }
+            if (finalY < this.initY) {
+                this.initY = finalY;
+            }
+
+            if (this._mainDiv.current) {
+                let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />
+                this._pageInfo.area.push(sticky);
+            }
+            this._toolOn = false;
+        }
+        this._interactive = true;
+    }
+
+    /**
+     * starts drawing the line when user presses down. 
+     */
+    onDraw = () => {
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+
+        if (this._drawTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._drawToolOn) {
+                this._drawToolOn = false;
+                this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+                this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
+                this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+                this._drawTool.current.style.backgroundColor = "grey";
+            } else {
+                this._drawToolOn = true;
+                this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+                this._drawTool.current.style.backgroundColor = "cyan";
+            }
+        }
+    }
+
+
+    /**
+     * for changing color (for ink/pen)
+     */
+    onColorChange = (e: React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "Red") {
+            this._currColor = "red";
+        } else if (e.currentTarget.innerHTML == "Blue") {
+            this._currColor = "blue";
+        } else if (e.currentTarget.innerHTML == "Green") {
+            this._currColor = "green";
+        } else if (e.currentTarget.innerHTML == "Black") {
+            this._currColor = "black";
+        }
+
+    }
+
+
+    /**
+     * For highlighting (text drag highlighting)
+     */
+    onHighlight = () => {
+        this._drawToolOn = false;
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+        if (this._highlightTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._highlightToolOn) {
+                this._highlightToolOn = false;
+                this._highlightTool.current.style.backgroundColor = "grey";
+            } else {
+                this._highlightToolOn = true;
+                this._highlightTool.current.style.backgroundColor = "orange";
+            }
+        }
+    }
+
+
+    @action
+    saveThumbnail = () => {
+        setTimeout(() => {
+            var me = this;
+            htmlToImage.toPng(this._mainDiv.current!,
+                { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 })
+                .then(function (dataUrl: string) {
+                    me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
+                })
+                .catch(function (error: any) {
+                    console.error('oops, something went wrong!', error);
+                });
+        }, 1000);
+    }
+
+    @action
+    onLoaded = (page: any) => {
+        if (this._mainDiv.current) {
+            this._mainDiv.current.childNodes.forEach((element) => {
+                if (element.nodeName == "DIV") {
+                    element.childNodes[0].childNodes.forEach((e) => {
+
+                        if (e instanceof HTMLCanvasElement) {
+                            this._pdfCanvas = e;
+                            this._pdfContext = e.getContext("2d")
+
+                        }
+
+                    })
+                }
+            })
+        }
+
+        // bcz: the number of pages should really be set when the document is imported.
+        this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages);
+        if (this._perPageInfo.length == 0) { //Makes sure it only runs once
+            this._perPageInfo = [...Array(page._transport.numPages)]
+        }
+        this._loaded = true;
+    }
+
+    @action
+    setScaling = (r: any) => {
+        // 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);
+        if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
+            this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width);
+        }
+        if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) {
+            this.saveThumbnail();
+        }
+    }
+
+    @computed
+    get pdfContent() {
+        let page = this.curPage;
+        if (page == 0)
+            page = 1;
+        const renderHeight = 2400;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
+        return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
+            <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}>
+                <Measure onResize={this.setScaling}>
+                    {({ measureRef }) =>
+                        <div className="pdfBox-page" ref={measureRef}>
+                            <Page height={renderHeight} pageNumber={page} onLoadSuccess={this.onLoaded} />
+                        </div>
+                    }
+                </Measure>
+            </Document>
+        </div >;
+    }
+
+    @computed
+    get pdfRenderer() {
+        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
+            return proxy;
+        }
+        return [
+            this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
+            this._currAnno.map((element: any) => element),
+            <div key="pdfBox-contentShell">
+                {this.pdfContent}
+                {proxy}
+            </div>
+        ];
+    }
+
+    @computed
+    get imageProxyRenderer() {
+        let field = this.props.doc.Get(KeyStore.Thumbnail);
+        if (field) {
+            let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+                field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
+            return <img src={path} width="100%" />;
+        }
+        return (null);
+    }
+
+    render() {
+        return (
+            <div className="pdfBox-cont" ref={this._mainDiv} onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} >
+                {this.pdfRenderer}
+            </div >
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx
new file mode 100644
index 000000000..d57dd5c0b
--- /dev/null
+++ b/src/client/views/nodes/Sticky.tsx
@@ -0,0 +1,83 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import React = require("react")
+import { observer } from "mobx-react"
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+
+interface IProps {
+    Height: number;
+    Width: number;
+    X: number;
+    Y: number;
+}
+
+/**
+ * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file. 
+ * Improvements that could be made: maybe store line array and store that somewhere for future rerendering. 
+ * 
+ * Written By: Andrew Kim 
+ */
+@observer
+export class Sticky extends React.Component<IProps> {
+
+    private initX: number = 0;
+    private initY: number = 0;
+
+    private _ref = React.createRef<HTMLCanvasElement>();
+    private ctx: any; //context that keeps track of sticky canvas
+
+    /**
+     * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
+     */
+    drawDown = (e: React.PointerEvent) => {
+        if (this._ref.current) {
+            this.ctx = this._ref.current.getContext("2d");
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+            this.ctx.beginPath();
+            this.ctx.lineTo(this.initX, this.initY);
+            this.ctx.strokeStyle = "black";
+            document.addEventListener("pointermove", this.drawMove);
+            document.addEventListener("pointerup", this.drawUp);
+        }
+    }
+
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+
+    }
+
+    /**
+     * when user lifts the mouse, the drawing ends
+     */
+    drawUp = (e: PointerEvent) => {
+        this.ctx.closePath();
+        console.log(this.ctx);
+        document.removeEventListener("pointermove", this.drawMove);
+    }
+
+    render() {
+        return (
+            <div onPointerDown={this.drawDown}>
+                <canvas ref={this._ref} height={this.props.Height} width={this.props.Width}
+                    style={{
+                        position: "absolute",
+                        top: "20px",
+                        left: "0px",
+                        zIndex: 1,
+                        background: "yellow",
+                        transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+                        opacity: 0.4
+                    }}
+                />
+
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
new file mode 100644
index 000000000..7306450d9
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.scss
@@ -0,0 +1,4 @@
+.videobox-cont{
+    width: 100%; 
+    height: 100%; 
+}
\ 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..22ff5c5ad
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -0,0 +1,43 @@
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { VideoField } from '../../../fields/VideoField'; 
+import "./VideoBox.scss"
+import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class VideoBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(VideoBox) }
+
+    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/sample-videos/small.mp4":
+            field instanceof VideoField ? field.Data.href : "http://techslides.com/demos/sample-videos/small.mp4";
+    
+        return (
+            <div>
+                <video width = {200} height = {200} controls className = "videobox-cont">
+                    <source src = {path} type = "video/mp4"/>
+                    Not supported.
+                </video>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
new file mode 100644
index 000000000..a535b2638
--- /dev/null
+++ b/src/client/views/nodes/WebBox.scss
@@ -0,0 +1,15 @@
+
+.webBox-cont {
+    padding: 0vw;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.webBox-button {
+    padding : 0vw;
+    border: none;
+    width : 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
new file mode 100644
index 000000000..2ca8d49ce
--- /dev/null
+++ b/src/client/views/nodes/WebBox.tsx
@@ -0,0 +1,38 @@
+import "./WebBox.scss";
+import React = require("react")
+import { WebField } from '../../../fields/WebField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { computed } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class WebBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(WebBox); }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+    @computed get html(): string { return this.props.doc.GetHtml(KeyStore.Data, ""); }
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey);
+        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu";
+
+        let content = this.html ?
+            <span dangerouslySetInnerHTML={{ __html: this.html }}></span> :
+            <div style={{ width: "100%", height: "100%", position: "absolute" }}>
+                <iframe src={path} style={{ position: "absolute", width: "100%", height: "100%" }}></iframe>
+                {this.props.isSelected() ? (null) : <div style={{ width: "100%", height: "100%", position: "absolute" }} />}
+            </div>;
+
+        return (
+            <div className="webBox-cont"  >
+                {content}
+            </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebView.tsx b/src/client/views/nodes/WebView.tsx
deleted file mode 100644
index 717aa8bf5..000000000
--- a/src/client/views/nodes/WebView.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FieldViewProps, FieldView } from "./FieldView";
-import { computed } from "mobx";
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/KeyStore";
-import React = require('react')
-import { TextField } from "../../../fields/TextField";
-import { HtmlField } from "../../../fields/HtmlField";
-import { RichTextField } from "../../../fields/RichTextField";
-
-@observer
-export class WebView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(WebView, fieldStr) }
-
-    @computed
-    get html(): string {
-        return this.props.doc.GetData(KeyStore.Data, HtmlField, "" as string);
-    }
-
-    render() {
-        return <span dangerouslySetInnerHTML={{ __html: this.html }}></span>
-    }
-}
\ No newline at end of file
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
new file mode 100644
index 000000000..7bc70615f
--- /dev/null
+++ b/src/debug/Test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+class TestInternal extends React.Component {
+    onContextMenu = (e: React.MouseEvent) => {
+        console.log("Internal");
+        e.stopPropagation();
+    }
+
+    onPointerDown = (e: React.MouseEvent) => {
+        console.log("pointer down")
+        e.preventDefault();
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+            onPointerUp={this.onPointerDown}>Hello world</div>
+    }
+}
+
+class TestChild extends React.Component {
+    onContextMenu = () => {
+        console.log("Child");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+    }
+}
+
+class TestParent extends React.Component {
+    onContextMenu = () => {
+        console.log("Parent");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <TestParent />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/src/fields/AudioField.ts b/src/fields/AudioField.ts
new file mode 100644
index 000000000..aefcc15c1
--- /dev/null
+++ b/src/fields/AudioField.ts
@@ -0,0 +1,31 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class AudioField extends BasicField<URL> {
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("http://techslides.com/demos/samples/sample.mp3") : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.href;
+    }
+    
+    
+    ToScriptString(): string {
+        return `new AudioField("${this.Data}")`;
+    }
+
+    Copy(): Field {
+        return new AudioField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Audio,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 6193ea56c..25e239417 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,6 +1,6 @@
 import { Key } from "./Key"
 import { KeyStore } from "./KeyStore";
-import { Field, Cast, FieldWaiting, FieldValue, FieldId } from "./Field"
+import { Field, Cast, FieldWaiting, FieldValue, FieldId, Opt } from "./Field"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action } from "mobx";
 import { TextField } from "./TextField";
@@ -8,6 +8,7 @@ import { ListField } from "./ListField";
 import { Server } from "../client/Server";
 import { Types } from "../server/Message";
 import { UndoManager } from "../client/util/UndoManager";
+import { HtmlField } from "./HtmlField";
 
 export class Document extends Field {
     public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap();
@@ -37,6 +38,22 @@ export class Document extends Field {
         return this.GetText(KeyStore.Title, "<untitled>");
     }
 
+    /**
+     * Get the field in the document associated with the given key. If the
+     * associated field has not yet been filled in from the server, a request
+     * to the server will automatically be sent, the value will be filled in 
+     * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
+     * @param key - The key of the value to get
+     * @param ignoreProto - If true, ignore any prototype this document
+     * might have and only search for the value on this immediate document.
+     * If false (default), search up the prototype chain, starting at this document,
+     * for a document that has a field associated with the given key, and return the first
+     * one found.
+     * 
+     * @returns If the document does not have a field associated with the given key, returns `undefined`.
+     * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
+     * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
+     */
     Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
         let field: FieldValue<Field>;
         if (ignoreProto) {
@@ -92,7 +109,17 @@ export class Document extends Field {
         return field;
     }
 
+    /**
+     * Tries to get the field associated with the given key, and if there is an
+     * associated field, calls the given callback with that field.
+     * @param key - The key of the value to get
+     * @param callback - A function that will be called with the associated field, if it exists,
+     * once it is fetched from the server (this may be immediately if the field has already been fetched).
+     * Note: The callback will not be called if there is no associated field.
+     * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
+     */
     GetAsync(key: Key, callback: (field: Field) => void): boolean {
+        //TODO: This should probably check if this.fields contains the key before calling Server.GetDocumentField
         //This currently doesn't deal with prototypes
         if (this._proxies.has(key.Id)) {
             Server.GetDocumentField(this, key, callback);
@@ -101,6 +128,44 @@ export class Document extends Field {
         return false;
     }
 
+    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: Opt<T>) => void): boolean {
+        return this.GetAsync(key, (field) => {
+            callback(Cast(field, ctor));
+        })
+    }
+
+    /**
+     * Same as {@link Document#GetAsync}, except a field of the given type
+     * will be created if there is no field associated with the given key,
+     * or the field associated with the given key is not of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
+     */
+    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void {
+        //This currently doesn't deal with prototypes
+        if (this._proxies.has(key.Id)) {
+            Server.GetDocumentField(this, key, (field) => {
+                if (field && field instanceof ctor) {
+                    callback(field);
+                } else {
+                    let newField = new ctor();
+                    this.Set(key, newField);
+                    callback(newField);
+                }
+            });
+        } else {
+            let newField = new ctor();
+            this.Set(key, newField);
+            callback(newField);
+        }
+    }
+
+    /**
+     * Same as {@link Document#Get}, except that it will additionally
+     * check if the field is of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
+     * @returns Same as {@link Document#Get}, except will return `undefined`
+     * if there is an associated field but it is of the wrong type.
+     */
     GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): FieldValue<T> {
         var getfield = this.Get(key, ignoreProto);
         if (getfield != FieldWaiting) {
@@ -125,6 +190,10 @@ export class Document extends Field {
         return vval;
     }
 
+    GetHtml(key: Key, defaultVal: string): string {
+        return this.GetData(key, HtmlField, defaultVal);
+    }
+
     GetNumber(key: Key, defaultVal: number): number {
         return this.GetData(key, NumberField, defaultVal);
     }
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index b2226d55a..be8d73e68 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -1,7 +1,6 @@
 import { BasicField } from "./BasicField";
 import { Field, FieldId } from "./Field";
 import { Types } from "../server/Message";
-import { ObjectID } from "bson";
 
 export class ImageField extends BasicField<URL> {
     constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
new file mode 100644
index 000000000..2a4ed18e7
--- /dev/null
+++ b/src/fields/InkField.ts
@@ -0,0 +1,53 @@
+import { BasicField } from "./BasicField";
+import { Types } from "../server/Message";
+import { FieldId } from "./Field";
+import { observable, ObservableMap } from "mobx";
+
+export enum InkTool {
+    None,
+    Pen,
+    Highlighter,
+    Eraser
+}
+export interface StrokeData {
+    pathData: Array<{ x: number, y: number }>;
+    color: string;
+    width: string;
+    tool: InkTool;
+    page: number;
+}
+export type StrokeMap = Map<string, StrokeData>;
+
+export class InkField extends BasicField<StrokeMap> {
+    constructor(data: StrokeMap = new Map, id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return `new InkField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new InkField(this.Data);
+    }
+
+    ToJson(): { _id: string; type: Types; data: any; } {
+        return {
+            type: Types.Ink,
+            data: this.Data,
+            _id: this.Id,
+        }
+    }
+
+    UpdateFromServer(data: any) {
+        this.data = new ObservableMap(data);
+    }
+
+    static FromJson(id: string, data: any): InkField {
+        let map: StrokeMap = new Map<string, StrokeData>();
+        Object.keys(data).forEach(key => {
+            map.set(key, data[key]);
+        });
+        return new InkField(map, id, false);
+    }
+}
\ No newline at end of file
diff --git a/src/fields/KVPField b/src/fields/KVPField
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/fields/KVPField
diff --git a/src/fields/KVPField.ts b/src/fields/KVPField.ts
new file mode 100644
index 000000000..a7ecc0768
--- /dev/null
+++ b/src/fields/KVPField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField"
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+import { Document } from "./Document"
+
+export class KVPField extends BasicField<Document> {
+    constructor(data: Document | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new Document() : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.Title;
+    }
+
+    ToScriptString(): string {
+        return `new KVPField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new KVPField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: Document, _id: string } {
+        return {
+            type: Types.Text,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index c16a00878..00d78d516 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -2,7 +2,6 @@ import { Field, FieldId } from "./Field"
 import { Utils } from "../Utils";
 import { observable } from "mobx";
 import { Types } from "../server/Message";
-import { ObjectID } from "bson";
 import { Server } from "../client/Server";
 
 export class Key extends Field {
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index a3b39735d..f93a68c85 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -4,6 +4,7 @@ export namespace KeyStore {
     export const Prototype = new Key("Prototype");
     export const X = new Key("X");
     export const Y = new Key("Y");
+    export const Page = new Key("Page");
     export const Title = new Key("Title");
     export const Author = new Key("Author");
     export const PanX = new Key("PanX");
@@ -26,4 +27,12 @@ export namespace KeyStore {
     export const Caption = new Key("Caption");
     export const ActiveFrame = new Key("ActiveFrame");
     export const DocumentText = new Key("DocumentText");
+    export const LinkedToDocs = new Key("LinkedToDocs");
+    export const LinkedFromDocs = new Key("LinkedFromDocs");
+    export const LinkDescription = new Key("LinkDescription");
+    export const LinkTags = new Key("LinkTag");
+    export const Thumbnail = new Key("Thumbnail");
+    export const CurPage = new Key("CurPage");
+    export const NumPages = new Key("NumPages");
+    export const Ink = new Key("Ink");
 }
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 700600804..ce32da0a6 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -40,6 +40,7 @@ export class ListField<T extends Field> extends BasicField<T[]> {
             this.observeDisposer()
         }
         this.data = observable(value);
+        this.updateProxies();
         this.observeList();
     }
 
@@ -69,7 +70,25 @@ export class ListField<T extends Field> extends BasicField<T[]> {
     init(callback: (field: Field) => any) {
         Server.GetFields(this._proxies, action((fields: { [index: string]: Field }) => {
             if (!this.arraysEqual(this._proxies, this.Data.map(field => field.Id))) {
-                this.data = this._proxies.map(id => fields[id] as T)
+                var dataids = this.data.map(d => d.Id);
+                var added = this.data.length == this._proxies.length - 1;
+                var deleted = this.data.length > this._proxies.length;
+                for (let i = 0; i < dataids.length && added; i++)
+                    added = this._proxies.indexOf(dataids[i]) != -1;
+                for (let i = 0; i < this._proxies.length && deleted; i++)
+                    deleted = dataids.indexOf(this._proxies[i]) != -1;
+                if (added) { // if only 1 items was added
+                    for (let i = 0; i < this._proxies.length; i++)
+                        if (dataids.indexOf(this._proxies[i]) === -1)
+                            this.Data.splice(i, 0, fields[this._proxies[i]] as T);
+                } else if (deleted) { // if only items were deleted
+                    for (let i = this.data.length - 1; i >= 0; i--) {
+                        if (this._proxies.indexOf(this.data[i].Id) === -1) {
+                            this.Data.splice(i, 1);
+                        }
+                    }
+                } else // otherwise, just rebuild the whole list
+                    this.data = this._proxies.map(id => fields[id] as T)
                 observe(this.Data, () => {
                     this.updateProxies()
                     Server.UpdateField(this);
diff --git a/src/fields/PDFField.ts b/src/fields/PDFField.ts
new file mode 100644
index 000000000..f3a009001
--- /dev/null
+++ b/src/fields/PDFField.ts
@@ -0,0 +1,36 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { observable } from "mobx"
+import { Types } from "../server/Message";
+
+
+
+export class PDFField extends BasicField<URL> {
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.href;
+    }
+
+    Copy(): Field {
+        return new PDFField(this.Data);
+    }
+
+    ToScriptString(): string {
+        return `new PDFField("${this.Data}")`;
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.PDF,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
+    @observable
+    Page: Number = 1;
+
+}
\ No newline at end of file
diff --git a/src/fields/VideoField.ts b/src/fields/VideoField.ts
new file mode 100644
index 000000000..5f4ae19bf
--- /dev/null
+++ b/src/fields/VideoField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class VideoField extends BasicField<URL> {
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("http://techslides.com/demos/sample-videos/small.mp4") : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.href;
+    }
+
+    ToScriptString(): string {
+        return `new VideoField("${this.Data}")`;
+    }
+
+    Copy(): Field {
+        return new VideoField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Video,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts
new file mode 100644
index 000000000..8f945d686
--- /dev/null
+++ b/src/fields/WebField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class WebField extends BasicField<URL> {
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.href;
+    }
+
+    ToScriptString(): string {
+        return `new WebField("${this.Data}")`;
+    }
+
+    Copy(): Field {
+        return new WebField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Web,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 80fc9a80d..8a00f6b59 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -45,7 +45,7 @@ export class GetFieldArgs {
 }
 
 export enum Types {
-    Number, List, Key, Image, Document, Text, RichText, DocumentReference, Html
+    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, Video, Audio, Ink, PDF
 }
 
 export class DocumentTransfer implements Transferable {
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index 08e72fdae..5331c9e30 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -1,3 +1,4 @@
+
 import { Field } from './../fields/Field';
 import { TextField } from './../fields/TextField';
 import { NumberField } from './../fields/NumberField';
@@ -10,6 +11,14 @@ import { Server } from './../client/Server';
 import { Types } from './Message';
 import { Utils } from '../Utils';
 import { HtmlField } from '../fields/HtmlField';
+import { WebField } from '../fields/WebField';
+import { AudioField } from '../fields/AudioField';
+import { VideoField } from '../fields/VideoField';
+import {InkField} from '../fields/InkField';
+import {PDFField} from '../fields/PDFField';
+
+
+
 
 export class ServerUtils {
     public static FromJson(json: any): Field {
@@ -30,14 +39,24 @@ export class ServerUtils {
                 return new TextField(data, id, false)
             case Types.Html:
                 return new HtmlField(data, id, false)
+            case Types.Web:
+                return new WebField(new URL(data), id, false)
             case Types.RichText:
                 return new RichTextField(data, id, false)
             case Types.Key:
                 return new Key(data, id, false)
             case Types.Image:
                 return new ImageField(new URL(data), id, false)
+            case Types.PDF:
+                return new PDFField(new URL(data), id, false)
             case Types.List:
                 return ListField.FromJson(id, data)
+            case Types.Audio:
+                return new AudioField(new URL(data), id, false)
+            case Types.Video:
+                return new VideoField(new URL(data), id, false)
+            case Types.Ink:
+                return InkField.FromJson(id, data);
             case Types.Document:
                 let doc: Document = new Document(id, false)
                 let fields: [string, string][] = data as [string, string][]
diff --git a/src/server/index.ts b/src/server/index.ts
index 7850fd1d8..0d0b65b22 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -1,75 +1,24 @@
-import * as express from 'express';
-const app = express();
-import * as webpack from 'webpack';
+import * as express from 'express'
+const app = express()
+import * as webpack from 'webpack'
 import * as wdm from 'webpack-dev-middleware';
 import * as whm from 'webpack-hot-middleware';
-import * as path from 'path';
+import * as path from 'path'
+import * as formidable from 'formidable'
 import * as passport from 'passport';
-import {
-    MessageStore,
-    Message,
-    SetFieldArgs,
-    GetFieldArgs,
-    Transferable
-}
-
-    from "./Message";
-import {
-    Client
-}
-
-    from './Client';
-import {
-    Socket
-}
-
-    from 'socket.io';
-import {
-    Utils
-}
-
-    from '../Utils';
-import {
-    ObservableMap
-}
-
-    from 'mobx';
-import {
-    FieldId,
-    Field
-}
-
-    from '../fields/Field';
-import {
-    Database
-}
-
-    from './database';
-import {
-    ServerUtils
-}
-
-    from './ServerUtil';
-import {
-    ObjectID
-}
-
-    from 'mongodb';
-import {
-    Document
-}
-
-    from '../fields/Document';
-import * as io from 'socket.io';
+import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message";
+import { Client } from './Client';
+import { Socket } from 'socket.io';
+import { Utils } from '../Utils';
+import { ObservableMap } from 'mobx';
+import { FieldId, Field } from '../fields/Field';
+import { Database } from './database';
+import { ServerUtils } from './ServerUtil';
+import { ObjectID } from 'mongodb';
+import { Document } from '../fields/Document';
+import * as io from 'socket.io'
 import * as passportConfig from './authentication/config/passport';
-import {
-    getLogin,
-    postLogin,
-    getSignup,
-    postSignup
-}
-
-    from './authentication/controllers/user';
+import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user';
 const config = require('../../webpack.config');
 const compiler = webpack(config);
 const port = 1050; // default port to listen
@@ -82,20 +31,17 @@ import c = require("crypto");
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 const bluebird = require('bluebird');
-import {
-    performance
-}
-
-    from 'perf_hooks';
+import { performance } from 'perf_hooks'
 import * as fs from 'fs';
-import * as request from 'request';
+import * as request from 'request'
+
 const download = (url: string, dest: fs.PathLike) => {
     request.get(url).pipe(fs.createWriteStream(dest));
 }
 
 const mongoUrl = 'mongodb://localhost:27017/Dash';
 // mongoose.Promise = bluebird;
-mongoose.connect(mongoUrl) //.then(
+mongoose.connect(mongoUrl)//.then(
 // () => { /** ready to use. The `mongoose.connect()` promise resolves to undefined. */ },
 // ).catch((err: any) => {
 // console.log("MongoDB connection error. Please make sure MongoDB is running. " + err);
@@ -103,88 +49,102 @@ mongoose.connect(mongoUrl) //.then(
 // });
 mongoose.connection.on('connected', function () {
     console.log("connected");
-}
+})
 
-);
 app.use(bodyParser.json());
-app.use(bodyParser.urlencoded({
-    extended: true
-}
-
-));
+app.use(bodyParser.urlencoded({ extended: true }));
 app.use(expressValidator());
 app.use(expressFlash());
 app.use(require('express-session')({
-    secret: `$ {
-        c.randomBytes(64)
-    }
-    `, resave: true, saveUninitialized: true, store: new MongoStore({
+    secret: `${c.randomBytes(64)}`,
+    resave: true,
+    saveUninitialized: true,
+    store: new MongoStore({
         url: 'mongodb://localhost:27017/Dash'
-    }
-    )
-}
-
-));
+    })
+}));
 app.use(passport.initialize());
 app.use(passport.session());
 app.use((req, res, next) => {
     res.locals.user = req.user;
     next();
-}
+});
 
-);
 app.get("/signup", getSignup);
 app.post("/signup", postSignup);
 app.get("/login", getLogin);
 app.post("/login", postLogin);
-let FieldStore: ObservableMap<FieldId,
-    Field> = new ObservableMap();
+
+// IMAGE UPLOADING HANDLER
+app.post("/upload", (req, res, err) => {
+    let form = new formidable.IncomingForm()
+    form.uploadDir = __dirname + "/public/files/"
+    form.keepExtensions = true
+    // let path = req.body.path;
+    console.log("upload")
+    form.parse(req, (err, fields, files) => {
+        console.log("parsing")
+        let names: any[] = [];
+        for (const name in files) {
+            let file = files[name];
+            names.push(`/files/` + path.basename(file.path));
+        }
+        res.send(names);
+    });
+})
+
+app.use(express.static(__dirname + '/public'));
+app.use('/images', express.static(__dirname + '/public'))
+
+let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
+
 // define a route handler for the default home page
 app.get("/", (req, res) => {
     res.sendFile(path.join(__dirname, '../../deploy/index.html'));
-}
+});
 
-);
 app.get("/hello", (req, res) => {
     res.send("<p>Hello</p>");
-}
+})
+
+app.use("/corsProxy", (req, res) => {
+    req.pipe(request(req.url.substring(1))).pipe(res);
+});
 
-);
 app.get("/delete", (req, res) => {
     deleteAll();
     res.redirect("/");
-}
+});
 
-);
 app.use(wdm(compiler, {
     publicPath: config.output.publicPath
-}
+}))
+
+app.use(whm(compiler))
 
-))
-app.use(whm(compiler)) // start the Express server
+// start the Express server
 app.listen(port, () => {
-    console.log(`server started at http: //localhost:${port}`);
-}
+    console.log(`server started at http://localhost:${port}`);
+})
 
-)
 const server = io();
 interface Map {
     [key: string]: Client;
 }
-
 let clients: Map = {}
 
 server.on("connection", function (socket: Socket) {
     console.log("a user has connected")
+
     Utils.Emit(socket, MessageStore.Foo, "handshooken")
+
     Utils.AddServerHandler(socket, MessageStore.Bar, barReceived)
     Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args))
     Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
     Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields)
     Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll)
-}
+})
 
-)
 function deleteAll() {
     Database.Instance.deleteAll();
 }
@@ -193,7 +153,9 @@ function barReceived(guid: String) {
     clients[guid.toString()] = new Client(guid.toString());
 }
 
-function addDocument(document: Document) { }
+function addDocument(document: Document) {
+
+}
 
 function getField([id, callback]: [string, (result: any) => void]) {
     Database.Instance.getDocument(id, (result: any) => {
@@ -203,8 +165,7 @@ function getField([id, callback]: [string, (result: any) => void]) {
         else {
             callback(undefined)
         }
-    }
-    )
+    })
 }
 
 function getFields([ids, callback]: [string[], (result: any) => void]) {
@@ -212,18 +173,9 @@ function getFields([ids, callback]: [string[], (result: any) => void]) {
 }
 
 function setField(socket: Socket, newValue: Transferable) {
-    let val = {
-        ...newValue
-    }
-        ;
-    delete val._id;
-    Database.Instance.update(newValue._id, val)
+    Database.Instance.update(newValue._id, newValue)
     socket.broadcast.emit(MessageStore.SetField.Message, newValue)
 }
 
 server.listen(serverPort);
-console.log(`listening on port $ {
-    serverPort
-}
-
-`);
\ No newline at end of file
+console.log(`listening on port ${serverPort}`);
\ No newline at end of file
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
new file mode 100644
index 000000000..e4a66f7f2
--- /dev/null
+++ b/src/typings/index.d.ts
@@ -0,0 +1,322 @@
+/// <reference types="node" />
+
+declare module '@react-pdf/renderer' {
+    import * as React from 'react';
+  
+    namespace ReactPDF {
+      interface Style {
+        [property: string]: any;
+      }
+      interface Styles {
+        [key: string]: Style;
+      }
+      type Orientation = 'portrait' | 'landscape';
+  
+      interface DocumentProps {
+        title?: string;
+        author?: string;
+        subject?: string;
+        keywords?: string;
+        creator?: string;
+        producer?: string;
+        onRender?: () => any;
+      }
+  
+      /**
+       * This component represent the PDF document itself. It must be the root
+       * of your tree element structure, and under no circumstances should it be
+       * used as children of another react-pdf component. In addition, it should
+       * only have childs of type <Page />.
+       */
+      class Document extends React.Component<DocumentProps> {}
+  
+      interface NodeProps {
+        style?: Style | Style[];
+        /**
+         * Render component in all wrapped pages.
+         * @see https://react-pdf.org/advanced#fixed-components
+         */
+        fixed?: boolean;
+        /**
+         * Force the wrapping algorithm to start a new page when rendering the
+         * element.
+         * @see https://react-pdf.org/advanced#page-breaks
+         */
+        break?: boolean;
+      }
+  
+      interface PageProps extends NodeProps {
+        /**
+         * Enable page wrapping for this page.
+         * @see https://react-pdf.org/components#page-wrapping
+         */
+        wrap?: boolean;
+        debug?: boolean;
+        size?: string | [number, number] | {width: number; height: number};
+        orientation?: Orientation;
+        ruler?: boolean;
+        rulerSteps?: number;
+        verticalRuler?: boolean;
+        verticalRulerSteps?: number;
+        horizontalRuler?: boolean;
+        horizontalRulerSteps?: number;
+        ref?: Page;
+      }
+  
+      /**
+       * Represents single page inside the PDF document, or a subset of them if
+       * using the wrapping feature. A <Document /> can contain as many pages as
+       * you want, but ensure not rendering a page inside any component besides
+       * Document.
+       */
+      class Page extends React.Component<PageProps> {}
+  
+      interface ViewProps extends NodeProps {
+        /**
+         * Enable/disable page wrapping for element.
+         * @see https://react-pdf.org/components#page-wrapping
+         */
+        wrap?: boolean;
+        debug?: boolean;
+        render?: (props: {pageNumber: number}) => React.ReactNode;
+        children?: React.ReactNode;
+      }
+  
+      /**
+       * The most fundamental component for building a UI and is designed to be
+       * nested inside other views and can have 0 to many children.
+       */
+      class View extends React.Component<ViewProps> {}
+  
+      interface ImageProps extends NodeProps {
+        debug?: boolean;
+        src: string | {data: Buffer; format: 'png' | 'jpg'};
+        cache?: boolean;
+      }
+  
+      /**
+       * A React component for displaying network or local (Node only) JPG or
+       * PNG images, as well as base64 encoded image strings.
+       */
+      class Image extends React.Component<ImageProps> {}
+  
+      interface TextProps extends NodeProps {
+        /**
+         * Enable/disable page wrapping for element.
+         * @see https://react-pdf.org/components#page-wrapping
+         */
+        wrap?: boolean;
+        debug?: boolean;
+        render?: (
+          props: {pageNumber: number; totalPages: number},
+        ) => React.ReactNode;
+        children?: React.ReactNode;
+        /**
+         * How much hyphenated breaks should be avoided.
+         */
+        hyphenationCallback?: number;
+      }
+  
+      /**
+       * A React component for displaying text. Text supports nesting of other
+       * Text or Link components to create inline styling.
+       */
+      class Text extends React.Component<TextProps> {}
+  
+      interface LinkProps extends NodeProps {
+        /**
+         * Enable/disable page wrapping for element.
+         * @see https://react-pdf.org/components#page-wrapping
+         */
+        wrap?: boolean;
+        debug?: boolean;
+        src: string;
+        children?: React.ReactNode;
+      }
+  
+      /**
+       * A React component for displaying an hyperlink. Link’s can be nested
+       * inside a Text component, or being inside any other valid primitive.
+       */
+      class Link extends React.Component<LinkProps> {}
+  
+      interface NoteProps extends NodeProps {
+        children: string;
+      }
+  
+      class Note extends React.Component<NoteProps> {}
+  
+      interface BlobProviderParams {
+        blob: Blob | null;
+        url: string | null;
+        loading: boolean;
+        error: Error | null;
+      }
+      interface BlobProviderProps {
+        document: React.ReactElement<DocumentProps>;
+        children: (params: BlobProviderParams) => React.ReactNode;
+      }
+  
+      /**
+       * Easy and declarative way of getting document's blob data without
+       * showing it on screen.
+       * @see https://react-pdf.org/advanced#on-the-fly-rendering
+       * @platform web
+       */
+      class BlobProvider extends React.Component<BlobProviderProps> {}
+  
+      interface PDFViewerProps {
+        width?: number;
+        height?: number;
+        style?: Style | Style[];
+        className?: string;
+        children?: React.ReactElement<DocumentProps>;
+      }
+  
+      /**
+       * Iframe PDF viewer for client-side generated documents.
+       * @platform web
+       */
+      class PDFViewer extends React.Component<PDFViewerProps> {}
+  
+      interface PDFDownloadLinkProps {
+        document: React.ReactElement<DocumentProps>;
+        fileName?: string;
+        style?: Style | Style[];
+        className?: string;
+        children?:
+          | React.ReactNode
+          | ((params: BlobProviderParams) => React.ReactNode);
+      }
+  
+      /**
+       * Anchor tag to enable generate and download PDF documents on the fly.
+       * @see https://react-pdf.org/advanced#on-the-fly-rendering
+       * @platform web
+       */
+      class PDFDownloadLink extends React.Component<PDFDownloadLinkProps> {}
+  
+      interface EmojiSource {
+        url: string;
+        format: string;
+      }
+      interface RegisteredFont {
+        src: string;
+        loaded: boolean;
+        loading: boolean;
+        data: any;
+        [key: string]: any;
+      }
+      type HyphenationCallback = (
+        words: string[],
+        glyphString: {[key: string]: any},
+      ) => string[];
+  
+      const Font: {
+        register: (
+          src: string,
+          options: {family: string; [key: string]: any},
+        ) => void;
+        getEmojiSource: () => EmojiSource;
+        getRegisteredFonts: () => string[];
+        registerEmojiSource: (emojiSource: EmojiSource) => void;
+        registerHyphenationCallback: (
+          hyphenationCallback: HyphenationCallback,
+        ) => void;
+        getHyphenationCallback: () => HyphenationCallback;
+        getFont: (fontFamily: string) => RegisteredFont | undefined;
+        load: (
+          fontFamily: string,
+          document: React.ReactElement<DocumentProps>,
+        ) => Promise<void>;
+        clear: () => void;
+        reset: () => void;
+      };
+  
+      const StyleSheet: {
+        hairlineWidth: number;
+        create: <TStyles>(styles: TStyles) => TStyles;
+        resolve: (
+          style: Style,
+          container: {
+            width: number;
+            height: number;
+            orientation: Orientation;
+          },
+        ) => Style;
+        flatten: (...styles: Style[]) => Style;
+        absoluteFillObject: {
+          position: 'absolute';
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+        };
+      };
+  
+      const version: any;
+  
+      const PDFRenderer: any;
+  
+      const createInstance: (
+        element: {
+          type: string;
+          props: {[key: string]: any};
+        },
+        root?: any,
+      ) => any;
+  
+      const pdf: (
+        document: React.ReactElement<DocumentProps>,
+      ) => {
+        isDirty: () => boolean;
+        updateContainer: (document: React.ReactElement<any>) => void;
+        toBuffer: () => NodeJS.ReadableStream;
+        toBlob: () => Blob;
+        toString: () => string;
+      };
+  
+      const renderToStream: (
+        document: React.ReactElement<DocumentProps>,
+      ) => NodeJS.ReadableStream;
+  
+      const renderToFile: (
+        document: React.ReactElement<DocumentProps>,
+        filePath: string,
+        callback?: (output: NodeJS.ReadableStream, filePath: string) => any,
+      ) => Promise<NodeJS.ReadableStream>;
+  
+      const render: typeof renderToFile;
+    }
+  
+    const Document: typeof ReactPDF.Document;
+    const Page: typeof ReactPDF.Page;
+    const View: typeof ReactPDF.View;
+    const Image: typeof ReactPDF.Image;
+    const Text: typeof ReactPDF.Text;
+    const Link: typeof ReactPDF.Link;
+    const Note: typeof ReactPDF.Note;
+    const Font: typeof ReactPDF.Font;
+    const StyleSheet: typeof ReactPDF.StyleSheet;
+    const createInstance: typeof ReactPDF.createInstance;
+    const PDFRenderer: typeof ReactPDF.PDFRenderer;
+    const version: typeof ReactPDF.version;
+    const pdf: typeof ReactPDF.pdf;
+  
+    export default ReactPDF;
+    export {
+      Document,
+      Page,
+      View,
+      Image,
+      Text,
+      Link,
+      Note,
+      Font,
+      StyleSheet,
+      createInstance,
+      PDFRenderer,
+      version,
+      pdf,
+    };
+  }
\ No newline at end of file