3 files changed, 40 insertions, 3 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 87f2e205b..a7632b008 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -119,6 +119,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            //remove preview cursor from collection
+            if (this.props.ContainingCollectionView != undefined) {
+                this.props.ContainingCollectionView.hidePreviewCursor();
+            }
             this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
@@ -206,6 +210,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />
     }
+
     render() {
         if (!this.props.Document)
             return <div></div>
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 0389a3f85..10cbf8557 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -9,8 +9,8 @@
 }
 
 .formattedTextBox-cont {
-    background: beige;
-    padding: 0;
+    background: white;
+    padding: 1vw;
     overflow-y: scroll;
     overflow-x: hidden;
     color: initial;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index a58e1955f..63d00a310 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -3,13 +3,21 @@ import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
+import { Transform } from "prosemirror-transform";
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import { Node } from "prosemirror-model";
 import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
 import "./FormattedTextBox.scss";
+import { KeyStore } from "../../../fields/KeyStore";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+import { observer } from "mobx-react";
+import { Schema, DOMParser } from "prosemirror-model"
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
 
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -34,6 +42,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
+    private _lastTextState = "";
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -49,9 +58,24 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             this._editorView.updateState(state);
             const { doc, fieldKey } = this.props;
             doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+            this._lastTextState = JSON.stringify(state.toJSON);
         }
     }
 
+    //enables textboxes to be created with preexisting text or placeholder text 
+    //this method is passed in as part of the config the editor state in componentDidMount()
+    placeholderPlugin(text: string) {
+        return new Plugin({
+            props: {
+                decorations(state) {
+                    let doc = state.doc
+                    if (doc.childCount == 1 && doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size == 0)
+                        return DecorationSet.create(doc, [Decoration.widget(1, document.createTextNode(text))])
+                }
+            }
+        })
+    }
+
     componentDidMount() {
         let state: EditorState;
         const { doc, fieldKey } = this.props;
@@ -60,7 +84,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             plugins: [
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
-                keymap(baseKeymap)
+                keymap(baseKeymap),
+                //sets the placeholder text to what's in KeyStore.Text!
             ]
         };
 
@@ -85,6 +110,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
+
+        //if tagged to be selected when created, then select & focus
+        if (this.props.doc.GetNumber(KeyStore.SelectOnLoaded, 0)) {
+            this.props.select();
+            this._editorView!.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -103,6 +134,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         const { fieldKey, doc } = this.props;
+        this._lastTextState = e.target.value;
         doc.SetData(fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {