merged with master

15 files changed, 860 insertions, 34 deletions

diff --git a/src/client/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx
new file mode 100644
index 000000000..a2c7be1a8
--- /dev/null
+++ b/src/client/views/nodes/Annotation.tsx
@@ -0,0 +1,117 @@
+import "./ImageBox.scss";
+import React = require("react")
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+
+interface IProps{
+    Span: HTMLSpanElement;
+    X: number; 
+    Y: number; 
+    Highlights: any[]; 
+    Annotations: any[]; 
+    CurrAnno: any[]; 
+
+}
+
+/**
+ * Annotation class is used to take notes on a particular highlight. You can also change highlighted span's color
+ * Improvements to be made: Removing the annotation when onRemove is called. (Removing this, not just the highlighted span). 
+ * Also need to support multiline highlighting
+ * 
+ * Written by: Andrew Kim
+ */
+@observer
+export class Annotation extends React.Component<IProps> {
+    
+    /**
+     * changes color of the span (highlighted section)
+     */
+    onColorChange = (e:React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "r"){
+            this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)"
+        } else if (e.currentTarget.innerHTML == "b"){
+            this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)"
+        } else if (e.currentTarget.innerHTML == "y"){
+            this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)"
+        } else if (e.currentTarget.innerHTML == "g"){
+            this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)"
+        }
+      
+    }
+
+    /**
+     * removes the highlighted span. Supposed to remove Annotation too, but I don't know how to unmount this
+     */
+    @action
+    onRemove = (e:any) => {
+        let index:number = -1; 
+        //finding the highlight in the highlight array 
+        this.props.Highlights.forEach((e) => {
+            for (let i = 0; i < e.spans.length; i++){
+                if (e.spans[i] == this.props.Span){
+                    index = this.props.Highlights.indexOf(e); 
+                    this.props.Highlights.splice(index, 1); 
+                }
+            }
+        })
+
+        //removing from CurrAnno and Annotation array 
+        this.props.Annotations.splice(index, 1); 
+        this.props.CurrAnno.pop()
+        
+        //removing span from div
+        if(this.props.Span.parentElement){
+            let nodesArray = this.props.Span.parentElement.childNodes; 
+            nodesArray.forEach((e) => {
+                if (e == this.props.Span){
+                    if (this.props.Span.parentElement){   
+                        this.props.Highlights.forEach((item) => {
+                            if (item == e){
+                                item.remove(); 
+                            }
+                        })
+                        e.remove();                   
+                    }
+                }
+            }) 
+        }
+    
+        
+    }
+
+    render() {
+        return (
+            <div 
+            style = {{
+            position: "absolute",
+            top: "20px", 
+            left: "0px",  
+            zIndex: 1, 
+            transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+            
+            }}>
+                <div style = {{width:"200px", height:"50px", backgroundColor: "orange"}}>
+                    <button
+                    style = {{borderRadius: "25px", width:"25%", height:"100%"}}
+                    onClick = {this.onRemove}
+                    >x</button>
+                    <div style = {{width:"75%", height: "100%" , display:"inline-block"}}>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"red", borderRadius:"50%", color: "transparent"}}>r</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"blue", borderRadius:"50%", color: "transparent"}}>b</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"yellow", borderRadius:"50%", color:"transparent"}}>y</button>
+                        <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"green", borderRadius:"50%", color:"transparent"}}>g</button>
+                    </div>
+                    
+                </div>
+                <div  style = {{width:"200px", height:"200"}}>
+                    <textarea style = {{width: "100%", height: "100%"}}
+                    defaultValue = "Enter Text Here..."
+                   
+                    ></textarea>
+                </div>
+            </div>
+          
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
new file mode 100644
index 000000000..704cdc31c
--- /dev/null
+++ b/src/client/views/nodes/AudioBox.scss
@@ -0,0 +1,4 @@
+.audiobox-cont{
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
new file mode 100644
index 000000000..f7d89843d
--- /dev/null
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -0,0 +1,44 @@
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+import { AudioField } from "../../../fields/AudioField";
+import "./AudioBox.scss"
+import { NumberField } from "../../../fields/NumberField";
+
+@observer
+export class AudioBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(AudioBox) }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+   
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+   
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey)
+        let path = field == FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3":
+            field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3";
+    
+        return (
+            <div>
+                <audio controls className = "audiobox-cont">
+                    <source src = {path} type="audio/mpeg"/>
+                    Not supported.
+                </audio>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 8e2ebd690..ab913897b 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
 .documentView-node {
     position: absolute;
     background: #cdcdcd;
-    overflow: hidden;
+    //overflow: hidden;
     &.minimized {
         width: 30px;
         height: 30px;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e01e1d4cd..263bb31d7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,12 +12,16 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { VideoBox } from "../nodes/VideoBox"; 
+import { AudioBox } from "../nodes/AudioBox"; 
 import { Documents } from "../../documents/Documents"
 import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
+import { PDFBox } from "../nodes/PDFBox";
 import "./DocumentView.scss";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
@@ -194,7 +198,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
     @computed get mainContent() {
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, VideoBox, AudioBox, PDFBox }}
             bindings={this._documentBindings}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 9e63006d1..49f4cefce 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -8,10 +8,15 @@ import { NumberField } from "../../../fields/NumberField";
 import { RichTextField } from "../../../fields/RichTextField";
 import { ImageField } from "../../../fields/ImageField";
 import { WebField } from "../../../fields/WebField";
+import { VideoField } from "../../../fields/VideoField"
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
+import { VideoBox } from "./VideoBox";
+import { AudioBox } from "./AudioBox";
+import { AudioField } from "../../../fields/AudioField";
+
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -55,6 +60,12 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof WebField) {
             return <WebBox {...this.props} />
+        } 
+        else if (field instanceof VideoField){ 
+            return <VideoBox {...this.props}/>
+        }
+        else if (field instanceof AudioField){ 
+            return <AudioBox {...this.props}/>
         }
         // bcz: this belongs here, but it doesn't render well so taking it out for now
         // else if (field instanceof HtmlField) {
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 21bd43b6e..ab5849f09 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -11,10 +11,28 @@
 .formattedTextBox-cont {
     background: white;
     padding: 1;
-    border: black;
-    border-width: 10;
+    border-width: 1px;
+    border-radius: 2px;
+    border-color:black;
+    box-sizing: border-box;
+    background: white;
+    border-style:solid;
     overflow-y: scroll;
     overflow-x: hidden;
     color: initial;
     height: 100%;
-}
\ No newline at end of file
+}
+
+.menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    color: #888;
+    line-height: 1;
+    padding: 0 7px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 1.4em;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 04eb2052d..a6cee9957 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -2,7 +2,7 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
+import { schema } from "../../util/RichTextSchema";
 import { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { Opt, FieldWaiting } from "../../../fields/Field";
@@ -10,6 +10,9 @@ import "./FormattedTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
 
 
@@ -61,6 +64,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
                 keymap(baseKeymap),
+                this.tooltipMenuPlugin()
             ]
         };
 
@@ -139,6 +143,14 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         e.stopPropagation();
     }
 
+    tooltipMenuPlugin() {
+        return new Plugin({
+            view(_editorView) {
+                return new TooltipTextMenu(_editorView)
+            }
+        })
+    }
+
     render() {
         return (<div className="formattedTextBox-cont"
             onPointerDown={this.onPointerDown}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8c44395f4..30910fb1f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,15 +1,15 @@
 
+import { action, observable } from 'mobx';
+import { observer } from "mobx-react";
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./ImageBox.scss";
-import React = require("react")
-import { ImageField } from '../../../fields/ImageField';
-import { FieldViewProps, FieldView } from './FieldView';
 import { FieldWaiting } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { ContextMenu } from "../../views/ContextMenu";
-import { observable, action } from 'mobx';
+import { ImageField } from '../../../fields/ImageField';
 import { KeyStore } from '../../../fields/KeyStore';
+import { ContextMenu } from "../../views/ContextMenu";
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import React = require("react")
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e8ebd50be..ac8c949a9 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,37 +1,18 @@
 
-import { IReactionDisposer } from 'mobx';
 import { observer } from "mobx-react";
-import { EditorView } from 'prosemirror-view';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Opt, FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
-import { KeyValuePair } from "./KeyValuePair";
 import "./KeyValueBox.scss";
+import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
-    private _ref: React.RefObject<HTMLDivElement>;
-    private _editorView: Opt<EditorView>;
-    private _reactionDisposer: Opt<IReactionDisposer>;
-
-
-    constructor(props: FieldViewProps) {
-        super(props);
-
-        this._ref = React.createRef();
-    }
-
-
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
new file mode 100644
index 000000000..9f92410d4
--- /dev/null
+++ b/src/client/views/nodes/PDFBox.scss
@@ -0,0 +1,15 @@
+.react-pdf__Page {
+    transform-origin: left top;
+    position: absolute;
+}
+.react-pdf__Document {
+    position: absolute;
+}
+.pdfBox-buttonTray {
+    position:absolute;
+    z-index: 25;
+}
+.pdfBox-contentContainer {
+    position: absolute;
+    transform-origin: "left top";
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
new file mode 100644
index 000000000..70a70c7c8
--- /dev/null
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -0,0 +1,490 @@
+import * as htmlToImage from "html-to-image";
+import { action, computed, observable, reaction, IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
+import 'react-image-lightbox/style.css';
+import Measure from "react-measure";
+//@ts-ignore
+import { Document, Page } from "react-pdf";
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { FieldWaiting, Opt } from '../../../fields/Field';
+import { ImageField } from '../../../fields/ImageField';
+import { KeyStore } from '../../../fields/KeyStore';
+import { PDFField } from '../../../fields/PDFField';
+import { Utils } from '../../../Utils';
+import { Annotation } from './Annotation';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import "./PDFBox.scss";
+import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
+import React = require("react")
+
+/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
+ * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
+ * area selection (I call it stickies), embedded ink node for directly annotating using a pen or 
+ * mouse, and pagination. 
+ *
+ * 
+ * HOW TO USE: 
+ * AREA selection: 
+ *          1) Click on Area button. 
+ *          2) click on any part of the PDF, and drag to get desired sized area shape
+ *          3) You can write on the area (hence the reason why it's called sticky)
+ *          4) to make another area, you need to click on area button AGAIN. 
+ * 
+ * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
+ *          1) just click and drag on a text
+ *          2) click highlight
+ *          3) for annotation, just pull your cursor over to that text
+ *          4) another method: click on highlight first and then drag on your desired text
+ *          5) To make another highlight, you need to reclick on the button 
+ * 
+ * Draw:
+ *          1) click draw and select color. then just draw like there's no tomorrow.
+ *          2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session. 
+ * 
+ * Pagination:
+ *          1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't. 
+ *          2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved. 
+ *
+ * 
+ * written by: Andrew Kim 
+ */
+@observer
+export class PDFBox extends React.Component<FieldViewProps> {
+    public static LayoutString() { return FieldView.LayoutString(PDFBox); }
+
+    private _mainDiv = React.createRef<HTMLDivElement>()
+    private _pdf = React.createRef<HTMLCanvasElement>();
+
+    //very useful for keeping track of X and y position throughout the PDF Canvas
+    private initX: number = 0;
+    private initY: number = 0;
+    private initPage: boolean = false;
+
+    //checks if tool is on
+    private _toolOn: boolean = false; //checks if tool is on
+    private _pdfContext: any = null; //gets pdf context
+    private bool: Boolean = false; //general boolean debounce
+    private currSpan: any;//keeps track of current span (for highlighting)
+
+    private _currTool: any; //keeps track of current tool button reference
+    private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool 
+    private _drawTool = React.createRef<HTMLButtonElement>()//drawing tool button reference
+
+    private _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
+    private _currColor: string = "black"; //current color that user selected (for ink/pen)
+
+    private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
+    private _highlightToolOn: boolean = false;
+    private _pdfCanvas: any;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    @observable private _perPageInfo: Object[] = []; //stores pageInfo
+    @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
+
+    @observable private _currAnno: any = []
+    @observable private _interactive: boolean = false;
+    @observable private _loaded: boolean = false;
+
+    @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); }
+
+    componentDidMount() {
+        this._reactionDisposer = reaction(
+            () => this.curPage,
+            () => {
+                if (this.curPage && this.initPage) {
+                    this.saveThumbnail();
+                    this._interactive = true;
+                } else {
+                    if (this.curPage)
+                        this.initPage = true;
+                }
+            },
+            { fireImmediately: true });
+
+    }
+
+    componentWillUnmount() {
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+    }
+
+    /**
+     * selection tool used for area highlighting (stickies). Kinda temporary
+     */
+    selectionTool = () => {
+        this._toolOn = true;
+    }
+    /**
+     * when user draws on the canvas. When mouse pointer is down 
+     */
+    drawDown = (e: PointerEvent) => {
+        this.initX = e.offsetX;
+        this.initY = e.offsetY;
+        this._pdfContext.beginPath();
+        this._pdfContext.lineTo(this.initX, this.initY);
+        this._pdfContext.strokeStyle = this._currColor;
+        this._pdfCanvas.addEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.addEventListener("pointerup", this.drawUp);
+
+    }
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this._pdfContext.lineTo(x, y);
+        this._pdfContext.stroke();
+    }
+
+    drawUp = (e: PointerEvent) => {
+        this._pdfContext.closePath();
+        this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+        this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+    }
+
+
+    /**
+     * highlighting helper function
+     */
+    makeEditableAndHighlight = (colour: string) => {
+        var range, sel = window.getSelection();
+        if (sel.rangeCount && sel.getRangeAt) {
+            range = sel.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (!document.execCommand("HiliteColor", false, colour)) {
+            document.execCommand("HiliteColor", false, colour);
+        }
+
+        if (range) {
+            sel.removeAllRanges();
+            sel.addRange(range);
+
+            let obj: Object = { parentDivs: [], spans: [] };
+            //@ts-ignore
+            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
+                obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
+            } else { //single line highlighting case
+                let parentDiv = range.commonAncestorContainer.parentElement
+                if (parentDiv) {
+                    if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
+                        obj = this.highlightNodes(parentDiv.childNodes)
+                    } else {
+                        parentDiv.childNodes.forEach((child) => {
+                            if (child.nodeName == 'SPAN') {
+                                //@ts-ignore
+                                obj.parentDivs.push(parentDiv)
+                                //@ts-ignore
+                                child.id = "highlighted"
+                                //@ts-ignore
+                                obj.spans.push(child)
+                                child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                            }
+                        })
+                    }
+                }
+            }
+            this._pageInfo.divs.push(obj);
+
+        }
+        document.designMode = "off";
+    }
+
+    highlightNodes = (nodes: NodeListOf<ChildNode>) => {
+        let temp = { parentDivs: [], spans: [] }
+        nodes.forEach((div) => {
+            div.childNodes.forEach((child) => {
+                if (child.nodeName == 'SPAN') {
+                    //@ts-ignore
+                    temp.parentDivs.push(div)
+                    //@ts-ignore
+                    child.id = "highlighted"
+                    //@ts-ignore
+                    temp.spans.push(child)
+                    child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                }
+            })
+
+        })
+        return temp;
+    }
+
+    /**
+     * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
+     */
+    @action
+    onEnter = (e: any) => {
+        let span: HTMLSpanElement = e.toElement;
+        let index: any;
+        this._pageInfo.divs.forEach((obj: any) => {
+            obj.spans.forEach((element: any) => {
+                if (element == span) {
+                    if (!index) {
+                        index = this._pageInfo.divs.indexOf(obj);
+                    }
+                }
+            })
+        })
+
+        if (this._pageInfo.anno.length >= index + 1) {
+            if (this._currAnno.length == 0) {
+                this._currAnno.push(this._pageInfo.anno[index]);
+            }
+        } else {
+            if (this._currAnno.length == 0) { //if there are no current annotation
+                let div = span.offsetParent;
+                //@ts-ignore
+                let divX = div.style.left
+                //@ts-ignore
+                let divY = div.style.top
+                //slicing "px" from the end
+                divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
+                divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
+                let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />
+                this._pageInfo.anno.push(annotation);
+                this._currAnno.push(annotation);
+            }
+        }
+
+    }
+
+    /**
+     * highlight function for highlighting actual text. This works fine. 
+     */
+    highlight = (color: string) => {
+        if (window.getSelection()) {
+            try {
+                if (!document.execCommand("hiliteColor", false, color)) {
+                    this.makeEditableAndHighlight(color);
+                }
+            } catch (ex) {
+                this.makeEditableAndHighlight(color)
+            }
+        }
+    }
+
+    /**
+     * controls the area highlighting (stickies) Kinda temporary
+     */
+    onPointerDown = (e: React.PointerEvent) => {
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+
+        }
+    }
+
+    /**
+     * controls area highlighting and partially highlighting. Kinda temporary
+     */
+    @action
+    onPointerUp = (e: React.PointerEvent) => {
+        if (this._highlightToolOn) {
+            this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
+            this._highlightToolOn = false;
+        }
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            let finalX = mouse.offsetX;
+            let finalY = mouse.offsetY;
+            let width = Math.abs(finalX - this.initX); //width
+            let height = Math.abs(finalY - this.initY); //height
+
+            //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
+            if (finalX < this.initX) {
+                this.initX = finalX;
+            }
+            if (finalY < this.initY) {
+                this.initY = finalY;
+            }
+
+            if (this._mainDiv.current) {
+                let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />
+                this._pageInfo.area.push(sticky);
+            }
+            this._toolOn = false;
+        }
+        this._interactive = true;
+    }
+
+    /**
+     * starts drawing the line when user presses down. 
+     */
+    onDraw = () => {
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+
+        if (this._drawTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._drawToolOn) {
+                this._drawToolOn = false;
+                this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+                this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
+                this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+                this._drawTool.current.style.backgroundColor = "grey";
+            } else {
+                this._drawToolOn = true;
+                this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+                this._drawTool.current.style.backgroundColor = "cyan";
+            }
+        }
+    }
+
+
+    /**
+     * for changing color (for ink/pen)
+     */
+    onColorChange = (e: React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "Red") {
+            this._currColor = "red";
+        } else if (e.currentTarget.innerHTML == "Blue") {
+            this._currColor = "blue";
+        } else if (e.currentTarget.innerHTML == "Green") {
+            this._currColor = "green";
+        } else if (e.currentTarget.innerHTML == "Black") {
+            this._currColor = "black";
+        }
+
+    }
+
+
+    /**
+     * For highlighting (text drag highlighting)
+     */
+    onHighlight = () => {
+        this._drawToolOn = false;
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+        if (this._highlightTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._highlightToolOn) {
+                this._highlightToolOn = false;
+                this._highlightTool.current.style.backgroundColor = "grey";
+            } else {
+                this._highlightToolOn = true;
+                this._highlightTool.current.style.backgroundColor = "orange";
+            }
+        }
+    }
+
+
+    @action
+    saveThumbnail = () => {
+        setTimeout(() => {
+            var me = this;
+            htmlToImage.toPng(this._mainDiv.current!,
+                { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 })
+                .then(function (dataUrl: string) {
+                    me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
+                })
+                .catch(function (error: any) {
+                    console.error('oops, something went wrong!', error);
+                });
+        }, 1000);
+    }
+
+    @action
+    onLoaded = (page: any) => {
+        if (this._mainDiv.current) {
+            this._mainDiv.current.childNodes.forEach((element) => {
+                if (element.nodeName == "DIV") {
+                    element.childNodes[0].childNodes.forEach((e) => {
+
+                        if (e instanceof HTMLCanvasElement) {
+                            this._pdfCanvas = e;
+                            this._pdfContext = e.getContext("2d")
+
+                        }
+
+                    })
+                }
+            })
+        }
+
+        // bcz: the number of pages should really be set when the document is imported.
+        this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages);
+        if (this._perPageInfo.length == 0) { //Makes sure it only runs once
+            this._perPageInfo = [...Array(page._transport.numPages)]
+        }
+        this._loaded = true;
+    }
+
+    @action
+    setScaling = (r: any) => {
+        // bcz: the nativeHeight should really be set when the document is imported.
+        //      also, the native dimensions could be different for different pages of the PDF
+        //      so this design is flawed.
+        var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
+        if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
+            this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width);
+        }
+        if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) {
+            this.saveThumbnail();
+        }
+    }
+
+    @computed
+    get pdfContent() {
+        let page = this.curPage;
+        if (page == 0)
+            page = 1;
+        const renderHeight = 2400;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
+        return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
+            <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}>
+                <Measure onResize={this.setScaling}>
+                    {({ measureRef }) =>
+                        <div className="pdfBox-page" ref={measureRef}>
+                            <Page height={renderHeight} pageNumber={page} onLoadSuccess={this.onLoaded} />
+                        </div>
+                    }
+                </Measure>
+            </Document>
+        </div >;
+    }
+
+    @computed
+    get pdfRenderer() {
+        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
+            return proxy;
+        }
+        return [
+            this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
+            this._currAnno.map((element: any) => element),
+            <div key="pdfBox-contentShell">
+                {this.pdfContent}
+                {proxy}
+            </div>
+        ];
+    }
+
+    @computed
+    get imageProxyRenderer() {
+        let field = this.props.doc.Get(KeyStore.Thumbnail);
+        if (field) {
+            let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+                field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
+            return <img src={path} width="100%" />;
+        }
+        return (null);
+    }
+
+    render() {
+        return (
+            <div className="pdfBox-cont" ref={this._mainDiv} onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} >
+                {this.pdfRenderer}
+            </div >
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx
new file mode 100644
index 000000000..d57dd5c0b
--- /dev/null
+++ b/src/client/views/nodes/Sticky.tsx
@@ -0,0 +1,83 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import React = require("react")
+import { observer } from "mobx-react"
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+
+interface IProps {
+    Height: number;
+    Width: number;
+    X: number;
+    Y: number;
+}
+
+/**
+ * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file. 
+ * Improvements that could be made: maybe store line array and store that somewhere for future rerendering. 
+ * 
+ * Written By: Andrew Kim 
+ */
+@observer
+export class Sticky extends React.Component<IProps> {
+
+    private initX: number = 0;
+    private initY: number = 0;
+
+    private _ref = React.createRef<HTMLCanvasElement>();
+    private ctx: any; //context that keeps track of sticky canvas
+
+    /**
+     * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
+     */
+    drawDown = (e: React.PointerEvent) => {
+        if (this._ref.current) {
+            this.ctx = this._ref.current.getContext("2d");
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+            this.ctx.beginPath();
+            this.ctx.lineTo(this.initX, this.initY);
+            this.ctx.strokeStyle = "black";
+            document.addEventListener("pointermove", this.drawMove);
+            document.addEventListener("pointerup", this.drawUp);
+        }
+    }
+
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+
+    }
+
+    /**
+     * when user lifts the mouse, the drawing ends
+     */
+    drawUp = (e: PointerEvent) => {
+        this.ctx.closePath();
+        console.log(this.ctx);
+        document.removeEventListener("pointermove", this.drawMove);
+    }
+
+    render() {
+        return (
+            <div onPointerDown={this.drawDown}>
+                <canvas ref={this._ref} height={this.props.Height} width={this.props.Width}
+                    style={{
+                        position: "absolute",
+                        top: "20px",
+                        left: "0px",
+                        zIndex: 1,
+                        background: "yellow",
+                        transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+                        opacity: 0.4
+                    }}
+                />
+
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
new file mode 100644
index 000000000..7306450d9
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.scss
@@ -0,0 +1,4 @@
+.videobox-cont{
+    width: 100%; 
+    height: 100%; 
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
new file mode 100644
index 000000000..22ff5c5ad
--- /dev/null
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -0,0 +1,43 @@
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { VideoField } from '../../../fields/VideoField'; 
+import "./VideoBox.scss"
+import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class VideoBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(VideoBox) }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+   
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+   
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey)
+        let path = field == FieldWaiting ? "http://techslides.com/demos/sample-videos/small.mp4":
+            field instanceof VideoField ? field.Data.href : "http://techslides.com/demos/sample-videos/small.mp4";
+    
+        return (
+            <div>
+                <video width = {200} height = {200} controls className = "videobox-cont">
+                    <source src = {path} type = "video/mp4"/>
+                    Not supported.
+                </video>
+            </div>
+        )
+    }
+}
\ No newline at end of file