Merge pull request #61 from browngraphicslab/view_doc_impl

view doc stuff

18 files changed, 536 insertions, 509 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a92cf97fe..3aa575dbb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,30 +1,27 @@
+import { AudioField } from "../../fields/AudioField";
 import { Document } from "../../fields/Document";
-import { Server } from "../Server";
+import { Field } from "../../fields/Field";
+import { HtmlField } from "../../fields/HtmlField";
+import { ImageField } from "../../fields/ImageField";
+import { InkField, StrokeData } from "../../fields/InkField";
+import { Key } from "../../fields/Key";
 import { KeyStore } from "../../fields/KeyStore";
-import { TextField } from "../../fields/TextField";
-import { NumberField } from "../../fields/NumberField";
 import { ListField } from "../../fields/ListField";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { ImageField } from "../../fields/ImageField";
-import { ImageBox } from "../views/nodes/ImageBox";
+import { PDFField } from "../../fields/PDFField";
+import { TextField } from "../../fields/TextField";
+import { VideoField } from "../../fields/VideoField";
 import { WebField } from "../../fields/WebField";
-import { WebBox } from "../views/nodes/WebBox";
+import { Server } from "../Server";
+import { CollectionPDFView } from "../views/collections/CollectionPDFView";
+import { CollectionVideoView } from "../views/collections/CollectionVideoView";
 import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
-import { HtmlField } from "../../fields/HtmlField";
-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 { FormattedTextBox } from "../views/nodes/FormattedTextBox";
+import { ImageBox } from "../views/nodes/ImageBox";
+import { KeyValueBox } from "../views/nodes/KeyValueBox";
 import { PDFBox } from "../views/nodes/PDFBox";
-import { CollectionPDFView } from "../views/collections/CollectionPDFView";
-import { RichTextField } from "../../fields/RichTextField";
-import { CollectionVideoView } from "../views/collections/CollectionVideoView";
-import { StrokeData, InkField } from "../../fields/InkField";
+import { VideoBox } from "../views/nodes/VideoBox";
+import { WebBox } from "../views/nodes/WebBox";
 
 export interface DocumentOptions {
     x?: number;
@@ -74,24 +71,29 @@ export namespace Documents {
         });
     }
     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.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); }
         if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); }
         if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); }
         if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); }
+        if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); }
         if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
         if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
-        if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); }
         return doc;
     }
+
+    function assignToDelegate(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.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); }
+        if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); }
+        return doc
+    }
+
     function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document {
         return assignOptions(new Document(protoId), { ...options, title: title, layout: layout });
     }
@@ -159,8 +161,7 @@ export namespace Documents {
 
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
-            [new URL(url), ImageField]);
+        return assignToDelegate(SetInstanceOptions(GetImagePrototype(), options, [new URL(url), ImageField]).MakeDelegate(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
         // let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
         //     [new URL(url), ImageField]);
         // doc.SetText(KeyStore.Caption, "my caption...");
@@ -169,34 +170,38 @@ export namespace Documents {
         // return doc;
     }
     export function VideoDocument(url: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetVideoPrototype(), options, [new URL(url), VideoField]);
+        return assignToDelegate(SetInstanceOptions(GetVideoPrototype(), options, [new URL(url), VideoField]), options);
     }
     export function AudioDocument(url: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetAudioPrototype(), options, [new URL(url), AudioField]);
+        return assignToDelegate(SetInstanceOptions(GetAudioPrototype(), options, [new URL(url), AudioField]), options);
     }
+
     export function TextDocument(options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetTextPrototype(), options, ["", TextField]);
+        return assignToDelegate(SetInstanceOptions(GetTextPrototype(), options, ["", TextField]).MakeDelegate(), options);
     }
     export function PdfDocument(url: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetPdfPrototype(), options, [new URL(url), PDFField]);
+        return assignToDelegate(SetInstanceOptions(GetPdfPrototype(), options, [new URL(url), PDFField]).MakeDelegate(), options);
     }
     export function WebDocument(url: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetWebPrototype(), options, [new URL(url), WebField]);
+        return assignToDelegate(SetInstanceOptions(GetWebPrototype(), options, [new URL(url), WebField]).MakeDelegate(), options);
     }
     export function HtmlDocument(html: string, options: DocumentOptions = {}) {
-        return SetInstanceOptions(GetWebPrototype(), options, [html, HtmlField]);
+        return assignToDelegate(SetInstanceOptions(GetWebPrototype(), options, [html, HtmlField]).MakeDelegate(), options);
     }
     export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) {
-        return SetInstanceOptions(GetKVPPrototype(), options, document, id)
+        return assignToDelegate(SetInstanceOptions(GetKVPPrototype(), options, document, id), options)
     }
-    export function FreeformDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
-        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id)
+    export function FreeformDocument(documents: Array<Document>, options: DocumentOptions, id?: string, makePrototype: boolean = true) {
+        if (!makePrototype) {
+            return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id)
+        }
+        return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options)
     }
     export function SchemaDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
-        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id)
+        return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options)
     }
     export function DockDocument(config: string, options: DocumentOptions, id?: string) {
-        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id)
+        return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id), options)
     }
 
     // example of custom display string for an image that shows a caption.
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 4a61220a5..c0abec407 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -123,7 +123,7 @@ export namespace DragManager {
         //      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"];
+        const doc: Document = dragData["document"];
 
         if (doc) {
             var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement;
diff --git a/src/client/util/jsx-decl.d.ts b/src/client/util/jsx-decl.d.ts
new file mode 100644
index 000000000..532f06178
--- /dev/null
+++ b/src/client/util/jsx-decl.d.ts
@@ -0,0 +1 @@
+declare module 'react-jsx-parser';
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index 84c47f616..d7b8bf3c3 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -46,7 +46,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
     }
 
     set inkData(value: StrokeMap) {
-        this.props.Document.SetData(KeyStore.Ink, value, InkField);
+        this.props.Document.SetOnPrototype(KeyStore.Ink, new InkField(value));
     }
 
     componentDidMount() {
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index fb75ef2a5..6616f68d8 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -9,6 +9,8 @@ import "./InkingCanvas.scss"
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons';
+import { SelectionManager } from "../util/SelectionManager";
+import { KeyStore } from "../../fields/KeyStore";
 
 library.add(faPen, faHighlighter, faEraser, faBan);
 
@@ -34,6 +36,12 @@ export class InkingControl extends React.Component {
     @action
     switchColor = (color: ColorResult): void => {
         this._selectedColor = color.hex;
+        if (SelectionManager.SelectedDocuments().length == 1) {
+            var sdoc = SelectionManager.SelectedDocuments()[0];
+            if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) {
+                sdoc.props.Document.SetText(KeyStore.BackgroundColor, color.hex);
+            }
+        }
     }
 
     @action
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 345371884..f6e19f6c9 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -74,7 +74,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
         // 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" });
+            mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }, undefined, false);
 
             var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] };
             mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9dc1ae847..808a22a5d 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -8,28 +8,16 @@ import { TextField } from "../../../fields/TextField";
 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 { CollectionVideoView } from "../collections/CollectionVideoView";
-import { CollectionView } from "../collections/CollectionView";
 import { InkingCanvas } from "../InkingCanvas";
-import { AudioBox } from "../nodes/AudioBox";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { DocumentView } from "../nodes/DocumentView";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import { KeyValueBox } from "../nodes/KeyValueBox";
-import { PDFBox } from "../nodes/PDFBox";
-import { VideoBox } from "../nodes/VideoBox";
-import { WebBox } from "../nodes/WebBox";
+import { DocumentContentsView } from "../nodes/DocumentContentsView";
+import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { MarqueeView } from "./MarqueeView";
 import { PreviewCursor } from "./PreviewCursor";
 import React = require("react");
-const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -88,12 +76,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         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);
+        let doc: Document = de.data["document"];
         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);
@@ -250,6 +237,21 @@ export class CollectionFreeFormView extends CollectionViewBase {
         this.props.focus(this.props.Document);
     }
 
+    getDocumentViewProps(document: Document): DocumentViewProps {
+        return {
+            Document: document,
+            AddDocument: this.props.addDocument,
+            RemoveDocument: this.props.removeDocument,
+            ScreenToLocalTransform: this.getTransform,
+            isTopMost: false,
+            SelectOnLoad: document.Id == this._selectOnLoaded,
+            PanelWidth: document.Width,
+            PanelHeight: document.Height,
+            ContentScaling: this.noScaling,
+            ContainingCollectionView: this.props.CollectionView,
+            focus: this.focusDocument
+        }
+    }
 
     @computed
     get views() {
@@ -259,18 +261,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
             return lvalue.Data.map(doc => {
                 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}
-                    />);
+                    (<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} />);
             })
         }
         return null;
@@ -279,24 +270,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @computed
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
-            (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
-                bindings={this.props.bindings}
-                jsx={this.backgroundLayout}
-                showWarnings={true}
-                onError={(test: any) => console.log(test)}
-            />);
+            (<DocumentContentsView {...this.getDocumentViewProps(this.props.Document)}
+                layoutKey={KeyStore.BackgroundLayout} isSelected={() => false} select={() => { }} />);
     }
     @computed
     get overlayView() {
         return !this.overlayLayout ? (null) :
-            (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
-                bindings={this.props.bindings}
-                jsx={this.overlayLayout}
-                showWarnings={true}
-                onError={(test: any) => console.log(test)}
-            />);
+            (<DocumentContentsView {...this.getDocumentViewProps(this.props.Document)}
+                layoutKey={KeyStore.OverlayLayout} isSelected={() => false} select={() => { }} />);
     }
 
     getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index d9b2722a6..40acf466e 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -55,7 +55,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
             const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
             value.push(doc);
         } else {
-            props.Document.SetData(props.fieldKey, [doc], ListField);
+            props.Document.SetOnPrototype(props.fieldKey, new ListField([doc]));
         }
     }
 
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index d9598aa72..37ec203b5 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -3,7 +3,7 @@ import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import React = require("react");
 import { KeyStore } from "../../../fields/KeyStore";
-import { FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting, Field, Opt } from "../../../fields/Field";
 import { undoBatch } from "../../util/UndoManager";
 import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "../nodes/DocumentView";
@@ -11,6 +11,7 @@ import { Documents, DocumentOptions } from "../../documents/Documents";
 import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
 import { CollectionView } from "./CollectionView";
+import { NumberField } from "../../../fields/NumberField";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -45,17 +46,27 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     @undoBatch
     @action
     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.props.RemoveDocument) {
-                docView.props.RemoveDocument(docView.props.Document);
+        let dropDoc: Document = de.data["document"];
+        if (de.data["alias"] && dropDoc) {
+            let oldDoc = dropDoc;
+            de.data["document"] = dropDoc = oldDoc.CreateAlias();
+            [KeyStore.Width, KeyStore.Height].map(key =>
+                oldDoc.GetTAsync(key, NumberField, (f: Opt<NumberField>) => {
+                    if (f) {
+                        dropDoc.SetNumber(key, f.Data)
+                    }
+                })
+            );
+        } else {
+            const docView: DocumentView = de.data["documentView"];
+            if (docView && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+                docView.props.RemoveDocument(dropDoc);
+            } else if (dropDoc) {
+                this.props.removeDocument(dropDoc);
             }
-            this.props.addDocument(docView.props.Document);
-        } else if (doc) {
-            this.props.removeDocument(doc);
-            this.props.addDocument(doc);
+        }
+        if (dropDoc) {
+            this.props.addDocument(dropDoc);
         }
         e.stopPropagation();
     }
diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx
index 65aaa837f..f5c83a934 100644
--- a/src/client/views/collections/MarqueeView.tsx
+++ b/src/client/views/collections/MarqueeView.tsx
@@ -121,7 +121,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin.
         let centerShiftY = 0 - (selRect.top + selRect.height / 2);
         let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField);
-        if (ink && ink != FieldWaiting) {
+        if (ink && ink != FieldWaiting && ink.Data) {
             let idata = new Map();
             ink.Data.forEach((value: StrokeData, key: string, map: any) => {
                 let inside = InkingCanvas.IntersectStrokeRect(value, selRect);
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx
index a1411250a..cbcfa568d 100644
--- a/src/client/views/collections/PreviewCursor.tsx
+++ b/src/client/views/collections/PreviewCursor.tsx
@@ -1,16 +1,12 @@
-import { trace } from "mobx";
-import "./PreviewCursor.scss";
-import React = require("react");
 import { action, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { FieldWaiting, Opt } from "../../../fields/Field";
-import { KeyStore } from "../../../fields/KeyStore";
-import { ListField } from "../../../fields/ListField";
+import { Opt } from "../../../fields/Field";
 import { Documents } from "../../documents/Documents";
-import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import "./PreviewCursor.scss";
+import React = require("react");
 
 
 export interface PreviewCursorProps {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 55b4938a0..ce72ab64b 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,33 +1,55 @@
-import { Document } from "../../../fields/Document";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { FieldWaiting } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import { VideoBox } from "../nodes/VideoBox";
-import { AudioBox } from "../nodes/AudioBox";
-import { KeyValueBox } from "./KeyValueBox"
-import { WebBox } from "../nodes/WebBox";
-import { PDFBox } from "../nodes/PDFBox";
+import { CollectionView } from "../collections/CollectionView";
+import { AudioBox } from "./AudioBox";
+import { DocumentViewProps, JsxBindings } from "./DocumentView";
 import "./DocumentView.scss";
+import { FormattedTextBox } from "./FormattedTextBox";
+import { ImageBox } from "./ImageBox";
+import { KeyValueBox } from "./KeyValueBox";
+import { PDFBox } from "./PDFBox";
+import { VideoBox } from "./VideoBox";
+import { WebBox } from "./WebBox";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
-interface JsxBindings {
-    Document: Document;
-    layout: string;
-    [prop: string]: any;
-}
 
-export class DocumentContentsView extends React.PureComponent<JsxBindings> {
+@observer
+export class DocumentContentsView extends React.Component<DocumentViewProps & {
+    isSelected: () => boolean,
+    select: (ctrl: boolean) => void,
+    layoutKey: Key
+}> {
+    @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "<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>()); }
+
+    CreateBindings(): JsxBindings {
+        let bindings: JsxBindings = { ...this.props, };
+        for (const key of this.layoutKeys) {
+            bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
+        }
+        for (const key of this.layoutFields) {
+            let field = this.props.Document.Get(key);
+            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+        }
+        return bindings;
+    }
+
     render() {
         return <JsxParser
             components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
-            bindings={this.props}
-            jsx={this.props.layout}
+            bindings={this.CreateBindings()}
+            jsx={this.layout}
             showWarnings={true}
             onError={(test: any) => { console.log(test) }}
         />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7a43c34d0..981cabe71 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,11 +1,12 @@
 import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Field, FieldWaiting, Opt } from "../../../fields/Field";
+import { Field, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
+import { Utils } from "../../../Utils";
 import { Documents } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { DragManager } from "../../util/DragManager";
@@ -14,11 +15,9 @@ import { Transform } from "../../util/Transform";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
+import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { DocumentContentsView } from "./DocumentContentsView";
-import { Utils } from "../../../Utils";
-const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 
 export interface DocumentViewProps {
@@ -76,6 +75,17 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     return args;
 }
 
+export interface JsxBindings {
+    Document: Document;
+    isSelected: () => boolean;
+    select: (isCtrlPressed: boolean) => void;
+    isTopMost: boolean;
+    SelectOnLoad: boolean;
+    [prop: string]: any;
+}
+
+
+
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -93,7 +103,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downY = e.clientY;
         if (e.shiftKey && e.buttons === 2) {
             if (this.props.isTopMost) {
-                this.startDragging(e.pageX, e.pageY);
+                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
             }
             else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
@@ -150,18 +160,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    startDragging(x: number, y: number) {
+    startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
         if (this._mainCont.current) {
             const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
             let dragData: { [id: string]: any } = {};
             dragData["documentView"] = this;
+            dragData["document"] = this.props.Document;
             dragData["xOffset"] = x - left;
             dragData["yOffset"] = y - top;
+            dragData["alias"] = dropAliasOfDraggedDoc;
             DragManager.StartDrag(this._mainCont.current, dragData, {
                 handlers: {
                     dragComplete: action(() => { }),
                 },
-                hideSource: true
+                hideSource: !dropAliasOfDraggedDoc
             })
         }
     }
@@ -174,7 +186,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             document.removeEventListener("pointermove", this.onPointerMove)
             document.removeEventListener("pointerup", this.onPointerUp);
             if (!this.topMost || e.buttons == 2 || e.altKey) {
-                this.startDragging(e.x, e.y);
+                this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
             }
         }
         e.stopPropagation();
@@ -200,7 +212,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     fieldsClicked = (e: React.MouseEvent): void => {
         if (this.props.AddDocument) {
-            this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+            this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }));
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
@@ -298,26 +310,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         SelectionManager.SelectDoc(this, ctrlPressed)
     }
 
-    @computed
-    get getProps() {
-        let bindings: any = {
-            ...this.props,
-            isSelected: this.isSelected,
-            select: this.select,
-            layout: this.layout
-        };
-        for (const key of this.layoutKeys) {
-            bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
-        }
-        for (const key of this.layoutFields) {
-            let field = this.props.Document.Get(key);
-            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
-        }
-        bindings.bindings = bindings;
-
-        return bindings
-    }
-
     render() {
         if (!this.props.Document) {
             return (null);
@@ -341,9 +333,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 }}
                 onDrop={this.onDrop}
                 onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}
-                onPointerUp={this.stopPropogation} >
-                <DocumentContentsView {...this.getProps} />
+                onPointerDown={this.onPointerDown} >
+                <DocumentContentsView {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />
             </div>
         )
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index d7026ed67..4bd5726f4 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -55,7 +55,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         if (this._editorView) {
             const state = this._editorView.state.apply(tx);
             this._editorView.updateState(state);
-            this.props.doc.SetData(this.props.fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+            const { doc, fieldKey } = this.props;
+            doc.SetOnPrototype(fieldKey, new RichTextField(JSON.stringify(state.toJSON())))
+            // doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
         }
     }
 
@@ -114,7 +116,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.props.doc.SetData(this.props.fieldKey, e.target.value, RichTextField);
+        const { fieldKey, doc } = this.props;
+        doc.SetOnPrototype(fieldKey, new RichTextField(e.target.value))
+        // doc.SetData(fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 2db0cc4e2..3442e21aa 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -104,6 +104,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     render() {
         let field = this.props.doc.Get(this.props.fieldKey);
+        console.log(field)
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
         let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
index 7bc70615f..c8de33f41 100644
--- a/src/debug/Test.tsx
+++ b/src/debug/Test.tsx
@@ -1,46 +1,29 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import JsxParser from 'react-jsx-parser'
 
-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");
-    }
-
+class Hello extends React.Component<{ firstName: string, lastName: string }> {
     render() {
-        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+        return <div>Hello {this.props.firstName} {this.props.lastName}</div>
     }
 }
 
-class TestParent extends React.Component {
-    onContextMenu = () => {
-        console.log("Parent");
-    }
-
+class Test extends React.Component {
     render() {
-        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+        let jsx = "<Hello {...props}/>";
+        let bindings = {
+            props: {
+                firstName: "First",
+                lastName: "Last"
+            }
+        }
+        return <JsxParser jsx={jsx} bindings={bindings} components={{ Hello }}></JsxParser>
     }
 }
 
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <TestParent />
+        <Test />
     </div>),
     document.getElementById('root')
 );
\ No newline at end of file
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 25e239417..763b79de2 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -2,7 +2,7 @@ import { Key } from "./Key"
 import { KeyStore } from "./KeyStore";
 import { Field, Cast, FieldWaiting, FieldValue, FieldId, Opt } from "./Field"
 import { NumberField } from "./NumberField";
-import { ObservableMap, computed, action } from "mobx";
+import { ObservableMap, computed, action, runInAction } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
 import { Server } from "../client/Server";
@@ -11,6 +11,7 @@ import { UndoManager } from "../client/util/UndoManager";
 import { HtmlField } from "./HtmlField";
 
 export class Document extends Field {
+    //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
     public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap();
     public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
 
@@ -119,9 +120,11 @@ export class Document extends 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)) {
+        //TODO: This currently doesn't deal with prototypes
+        let field = this.fields.get(key.Id);
+        if (field && field.field) {
+            callback(field.field);
+        } else if (this._proxies.has(key.Id)) {
             Server.GetDocumentField(this, key, callback);
             return true;
         }
@@ -207,25 +210,37 @@ export class Document extends Field {
     }
 
     @action
-    Set(key: Key, field: Field | undefined): void {
+    SetOnPrototype(key: Key, field: Field | undefined): void {
+        this.GetAsync(KeyStore.Prototype, (f: Field) => {
+            (f as Document).Set(key, field)
+        })
+    }
+
+    @action
+    Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
         let old = this.fields.get(key.Id);
         let oldField = old ? old.field : undefined;
-        if (field) {
-            this.fields.set(key.Id, { key, field });
-            this._proxies.set(key.Id, field.Id)
-            // Server.AddDocumentField(this, key, field);
-        } else {
-            this.fields.delete(key.Id);
-            this._proxies.delete(key.Id)
-            // Server.DeleteDocumentField(this, key);
+        if (setOnPrototype) {
+            this.SetOnPrototype(key, field)
+        }
+        else {
+            if (field) {
+                this.fields.set(key.Id, { key, field });
+                this._proxies.set(key.Id, field.Id)
+                // Server.AddDocumentField(this, key, field);
+            } else {
+                this.fields.delete(key.Id);
+                this._proxies.delete(key.Id)
+                // Server.DeleteDocumentField(this, key);
+            }
+            Server.UpdateField(this);
         }
         if (oldField || field) {
             UndoManager.AddEvent({
-                undo: () => this.Set(key, oldField),
-                redo: () => this.Set(key, field)
+                undo: () => this.Set(key, oldField, setOnPrototype),
+                redo: () => this.Set(key, field, setOnPrototype)
             })
         }
-        Server.UpdateField(this);
     }
 
     @action
@@ -265,6 +280,15 @@ export class Document extends Field {
         return protos;
     }
 
+    CreateAlias(id?: string): Document {
+        let alias = new Document(id)
+        this.GetAsync(KeyStore.Prototype, (f: Field) => {
+            alias.Set(KeyStore.Prototype, f)
+        })
+
+        return alias
+    }
+
     MakeDelegate(id?: string): Document {
         let delegate = new Document(id);
 
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index e4a66f7f2..7939ae8be 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -1,322 +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;
-      }
-  
+  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[];
       /**
-       * The most fundamental component for building a UI and is designed to be
-       * nested inside other views and can have 0 to many children.
+       * Render component in all wrapped pages.
+       * @see https://react-pdf.org/advanced#fixed-components
        */
-      class View extends React.Component<ViewProps> {}
-  
-      interface ImageProps extends NodeProps {
-        debug?: boolean;
-        src: string | {data: Buffer; format: 'png' | 'jpg'};
-        cache?: boolean;
-      }
-  
+      fixed?: boolean;
       /**
-       * A React component for displaying network or local (Node only) JPG or
-       * PNG images, as well as base64 encoded image strings.
+       * Force the wrapping algorithm to start a new page when rendering the
+       * element.
+       * @see https://react-pdf.org/advanced#page-breaks
        */
-      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;
-      }
-  
+      break?: boolean;
+    }
+
+    interface PageProps extends NodeProps {
       /**
-       * A React component for displaying text. Text supports nesting of other
-       * Text or Link components to create inline styling.
+       * Enable page wrapping for this page.
+       * @see https://react-pdf.org/components#page-wrapping
        */
-      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;
-      }
-  
+      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 {
       /**
-       * A React component for displaying an hyperlink. Link’s can be nested
-       * inside a Text component, or being inside any other valid primitive.
+       * Enable/disable page wrapping for element.
+       * @see https://react-pdf.org/components#page-wrapping
        */
-      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;
-      }
-  
+      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 {
       /**
-       * 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
+       * Enable/disable page wrapping for element.
+       * @see https://react-pdf.org/components#page-wrapping
        */
-      class BlobProvider extends React.Component<BlobProviderProps> {}
-  
-      interface PDFViewerProps {
-        width?: number;
-        height?: number;
-        style?: Style | Style[];
-        className?: string;
-        children?: React.ReactElement<DocumentProps>;
-      }
-  
+      wrap?: boolean;
+      debug?: boolean;
+      render?: (
+        props: { pageNumber: number; totalPages: number },
+      ) => React.ReactNode;
+      children?: React.ReactNode;
       /**
-       * Iframe PDF viewer for client-side generated documents.
-       * @platform web
+       * How much hyphenated breaks should be avoided.
        */
-      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);
-      }
-  
+      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 {
       /**
-       * Anchor tag to enable generate and download PDF documents on the fly.
-       * @see https://react-pdf.org/advanced#on-the-fly-rendering
-       * @platform web
+       * Enable/disable page wrapping for element.
+       * @see https://react-pdf.org/components#page-wrapping
        */
-      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: (
+      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>,
-      ) => {
-        isDirty: () => boolean;
-        updateContainer: (document: React.ReactElement<any>) => void;
-        toBuffer: () => NodeJS.ReadableStream;
-        toBlob: () => Blob;
-        toString: () => string;
+      ) => 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 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
+
+    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