10 files changed, 417 insertions, 432 deletions

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/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/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 5378678cc..cf9bf9b92 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 {
@@ -258,6 +246,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() {
@@ -267,18 +270,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;
@@ -287,24 +279,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/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 8ff86fbba..ec9db765a 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,12 +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 { props } from "bluebird";
-import { DocumentContentsView } from "./DocumentContentsView";
-import { Utils } from "../../../Utils";
-const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 
 export interface DocumentViewProps {
@@ -77,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>();
@@ -301,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);
@@ -344,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/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c12db1192..3442e21aa 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../../views/ContextMenu";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./ImageBox.scss";
 import React = require("react")
+import { Utils } from '../../../Utils';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
@@ -89,12 +90,16 @@ export class ImageBox extends React.Component<FieldViewProps> {
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
-    imageCapability = (e: React.MouseEvent): void => {
-    }
-
     specificContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability });
+        let field = this.props.doc.GetT(this.props.fieldKey, ImageField);
+        if (field && field !== FieldWaiting) {
+            let url = field.Data.href;
+            ContextMenu.Instance.addItem({
+                description: "Copy path", event: () => {
+                    Utils.CopyText(url)
+                }
+            });
+        }
     }
 
     render() {
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/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