3 files changed, 54 insertions, 9 deletions

diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index e37172943..ee6269430 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import React = require("react");
-import { computed, observable } from "mobx";
+import { computed, observable, action } from "mobx";
 import { KeyStore, Key } from "../../fields/Key";
 import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
@@ -12,15 +12,19 @@ import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView
 import "./NodeView.scss"
 import { SelectionManager } from "../../util/SelectionManager";
 import { DocumentDecorations } from "../../DocumentDecorations";
+import { ContextMenu } from "../ContextMenu";
+import { Opt } from "../../fields/Field";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
     dvm: DocumentViewModel;
+    parent: Opt<CollectionFreeFormView>;
 }
 
 @observer
 export class DocumentView extends React.Component<IProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
+    private _contextMenuCanOpen = false;
 
     get mainCont(): React.RefObject<HTMLDivElement> {
         return this._mainCont
@@ -91,8 +95,10 @@ export class DocumentView extends React.Component<IProps> {
 
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
+
         if (e.button === 2) {
             this._isPointerDown = true;
+            this._contextMenuCanOpen = true;
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
@@ -120,6 +126,7 @@ export class DocumentView extends React.Component<IProps> {
         if (!this._isPointerDown) {
             return;
         }
+        this._contextMenuCanOpen = false
         this.x += e.movementX;
         this.y += e.movementY;
         DocumentDecorations.Instance.opacity = 0
@@ -132,10 +139,39 @@ export class DocumentView extends React.Component<IProps> {
         }
     }
 
+    onClick = (e: React.MouseEvent): void => {    }
+
+    deleteClicked = (e: React.MouseEvent): void => {
+        if (this.props.parent) {
+            this.props.parent.removeDocument(this.props.dvm.Doc)
+        }
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        e.preventDefault()
+
+        if (!this._contextMenuCanOpen) {
+            return;
+        }
+
+        if (this.props.dvm.IsMainDoc) {
+            ContextMenu.Instance.clearItems()
+        }
+        else {
+            // DocumentViews should stop propogation of this event
+            e.stopPropagation();
+
+            ContextMenu.Instance.clearItems();
+            ContextMenu.Instance.addItem({description: "Delete", event: this.deleteClicked})
+            ContextMenu.Instance.displayMenu(e.pageX, e.pageY)
+        }
+    }
+
     render() {
         let doc = this.props.dvm.Doc;
         let bindings: any = {
-            doc: doc,
+            dvm: this.props.dvm,
             isSelected: this.selected
         };
         for (const key of this.layoutKeys) {
@@ -154,11 +190,9 @@ export class DocumentView extends React.Component<IProps> {
                     width: this.width,
                     height: this.height,
                 }}
-                onContextMenu={
-                    (e) => {
-                        e.preventDefault()
-                }}
-                onPointerDown={this.onPointerDown}>
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown}
+                onClick={this.onClick}>
                 <JsxParser
                     components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
                     bindings={bindings}
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FieldTextBox.scss
new file mode 100644
index 000000000..5c95fe2b2
--- /dev/null
+++ b/src/views/nodes/FieldTextBox.scss
@@ -0,0 +1,10 @@
+.ProseMirror {
+    margin-top: -1em;
+    width: 100%;
+    height: 100%;
+}
+
+.fieldTextBox-cont {
+    background: white;
+    padding: 1vw;
+}
\ No newline at end of file
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index dbac3906a..3b8743627 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -13,6 +13,8 @@ import {baseKeymap} from "prosemirror-commands"
 import {undo, redo, history} from "prosemirror-history"
 import { Opt } from "../../fields/Field";
 
+import "./FieldTextBox.scss"
+
 interface IProps {
     fieldKey:Key;
     doc:Document;
@@ -34,7 +36,6 @@ interface IProps {
 //  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
 //  this will edit the document and assign the new value to that field.
 //
-@observer
 export class FieldTextBox extends React.Component<IProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
@@ -112,6 +113,6 @@ export class FieldTextBox extends React.Component<IProps> {
     }
 
     render() {
-        return (<div ref={this._ref} />)
+        return (<div className="fieldTextBox-cont" ref={this._ref} />)
     }
 }
\ No newline at end of file