fixed warnings. fixed DashFieldView

10 files changed, 214 insertions, 256 deletions

diff --git a/src/client/util/DashDocCommentView.tsx b/src/client/util/DashDocCommentView.tsx
index df5b7e9ff..e716fac53 100644
--- a/src/client/util/DashDocCommentView.tsx
+++ b/src/client/util/DashDocCommentView.tsx
@@ -24,14 +24,14 @@ import React = require("react");
 import { schema } from "./schema_rts";
 
 interface IDashDocCommentView {
-    node: any,
-    view: any,
-    getPos: any
+    node: any;
+    view: any;
+    getPos: any;
 }
 
 export class DashDocCommentView extends React.Component<IDashDocCommentView>{
     constructor(props: IDashDocCommentView) {
-        super(props)
+        super(props);
     }
 
     targetNode = () => {  // search forward in the prosemirror doc for the attached dashDocNode that is the target of the comment anchor
@@ -45,11 +45,9 @@ export class DashDocCommentView extends React.Component<IDashDocCommentView>{
         this.props.view.dispatch(this.props.view.state.tr.insert(this.props.getPos() + 1, dashDoc));
         setTimeout(() => { try { this.props.view.dispatch(this.props.view.state.tr.setSelection(TextSelection.create(this.props.view.state.tr.doc, this.props.getPos() + 2))); } catch (e) { } }, 0);
         return undefined;
-    };
+    }
 
-    onPointerDownCollapse = (e: any) => {
-        e.stopPropagation();
-    };
+    onPointerDownCollapse = (e: any) => e.stopPropagation();
 
     onPointerUpCollapse = (e: any) => {
         const target = this.targetNode();
@@ -63,21 +61,19 @@ export class DashDocCommentView extends React.Component<IDashDocCommentView>{
             }, 0);
         }
         e.stopPropagation();
-    };
+    }
 
     onPointerEnterCollapse = (e: any) => {
         DocServer.GetRefField(this.props.node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc, false));
         e.preventDefault();
         e.stopPropagation();
-    };
+    }
 
     onPointerLeaveCollapse = (e: any) => {
         DocServer.GetRefField(this.props.node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowUnhighlight());
         e.preventDefault();
         e.stopPropagation();
-    };
-
-    selectNode() { }
+    }
 
     render() {
 
@@ -94,6 +90,6 @@ export class DashDocCommentView extends React.Component<IDashDocCommentView>{
             >
 
             </span >
-        )
+        );
     }
 }
\ No newline at end of file
diff --git a/src/client/util/DashDocView.tsx b/src/client/util/DashDocView.tsx
index c46c14fce..39809187f 100644
--- a/src/client/util/DashDocView.tsx
+++ b/src/client/util/DashDocView.tsx
@@ -14,11 +14,11 @@ import { Transform } from "./Transform";
 import React = require("react");
 
 interface IDashDocView {
-    node: any,
-    view: any,
-    getPos: any,
-    tbox?: FormattedTextBox,
-    self: any
+    node: any;
+    view: any;
+    getPos: any;
+    tbox?: FormattedTextBox;
+    self: any;
 }
 
 export class DashDocView extends React.Component<IDashDocView> {
@@ -34,7 +34,7 @@ export class DashDocView extends React.Component<IDashDocView> {
     //    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
 
     constructor(props: IDashDocView) {
-        super(props)
+        super(props);
 
         const node = this.props.node;
         this._textBox = this.props.tbox as FormattedTextBox;
@@ -74,7 +74,7 @@ export class DashDocView extends React.Component<IDashDocView> {
         const ns = new NodeSelection(view.state.doc.resolve(pos));
         view.dispatch(view.state.tr.setSelection(ns).deleteSelection());
         return true;
-    };
+    }
 
     getDocTransform = () => {
         const outerElement = document.getElementById('dash-document-view-outer') as HTMLElement;
@@ -105,13 +105,13 @@ export class DashDocView extends React.Component<IDashDocView> {
         if (ele) {
             (ele as HTMLDivElement).style.backgroundColor = "";
         }
-    };
+    }
     onPointerEnter = () => {
         const ele = document.getElementById("DashDocCommentView-" + this.props.node.attrs.docid);
         if (ele) {
             (ele as HTMLDivElement).style.backgroundColor = "orange";
         }
-    };
+    }
     /*endregion*/
 
     componentWillMount = () => {
@@ -147,10 +147,10 @@ export class DashDocView extends React.Component<IDashDocView> {
             (res) => {
 
                 if (res) {
-                    this._finalLayout = res.finalLayout
-                    this._resolvedDataDoc = res.resolvedDataDoc
+                    this._finalLayout = res.finalLayout;
+                    this._resolvedDataDoc = res.resolvedDataDoc;
 
-                    this.forceUpdate() // doReactRender(res.finalLayout, res.resolvedDataDoc),
+                    this.forceUpdate(); // doReactRender(res.finalLayout, res.resolvedDataDoc),
                 }
             },
             { fireImmediately: true });
@@ -189,7 +189,7 @@ export class DashDocView extends React.Component<IDashDocView> {
         const resolvedDataDoc = this._resolvedDataDoc; //Added this
 
         if (!finalLayout) {
-            return <div></div>
+            return <div></div>;
             // if (!finalLayout) setTimeout(() => self.doRender(dashDoc, removeDoc, node, view, getPos), 0);
         } else {
 
diff --git a/src/client/util/DashFieldView.scss b/src/client/util/DashFieldView.scss
index eaf9e944b..4338c774e 100644
--- a/src/client/util/DashFieldView.scss
+++ b/src/client/util/DashFieldView.scss
@@ -1,13 +1,31 @@
-.fieldWrapper {
+.dashFieldView {
     position: relative;
     display: inline-flex;
-}
 
-.enumerablesStyle {
-    width: 10px;
-    height: 10px;
-    position: relative;
-    display: none;
-    background: dimGray;
+    .dashFieldView-enumerables {
+        width: 10px;
+        height: 10px;
+        position: relative;
+        display: inline-block;
+        background: dimGray;
+    }
+    .dashFieldView-fieldCheck {
+        min-width: 12px;
+        position: relative;
+        display: inline-block;
+        background-color: rgba(155, 155, 155, 0.24);
+    }
+    .dashFieldView-labelSpan {
+        position: relative;
+        display: inline-block;
+        background-color: rgba(155, 155, 155, 0.44);
+        font-size: small;
+    }
+    .dashFieldView-fieldSpan {
+        min-width: 20px;
+        position: relative;
+        display: inline-block;
+        background-color: rgba(155, 155, 155, 0.24);
+    }
 }
         
\ No newline at end of file
diff --git a/src/client/util/DashFieldView.tsx b/src/client/util/DashFieldView.tsx
index 73d05009c..a135db003 100644
--- a/src/client/util/DashFieldView.tsx
+++ b/src/client/util/DashFieldView.tsx
@@ -1,58 +1,79 @@
-import { IReactionDisposer, observable, reaction, runInAction } from "mobx";
+import { IReactionDisposer, observable, runInAction, computed, action } from "mobx";
 import { Doc, DocListCast, Field } from "../../new_fields/Doc";
 import { List } from "../../new_fields/List";
 import { listSpec } from "../../new_fields/Schema";
 import { SchemaHeaderField } from "../../new_fields/SchemaHeaderField";
 import { ComputedField } from "../../new_fields/ScriptField";
 import { Cast, StrCast } from "../../new_fields/Types";
-import { Utils } from "../../Utils";
 import { DocServer } from "../DocServer";
 import { CollectionViewType } from "../views/collections/CollectionView";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
 import React = require("react");
 import * as ReactDOM from 'react-dom';
 import "./DashFieldView.scss";
+import { observer } from "mobx-react";
 
 
 export class DashFieldView {
     _fieldWrapper: HTMLDivElement; // container for label and value
 
     constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
-        this._fieldWrapper = document.createElement("p");
+        this._fieldWrapper = document.createElement("div");
         this._fieldWrapper.style.width = node.attrs.width;
         this._fieldWrapper.style.height = node.attrs.height;
         this._fieldWrapper.style.fontWeight = "bold";
         this._fieldWrapper.style.position = "relative";
         this._fieldWrapper.style.display = "inline-block";
-        ReactDOM.render(<DashFieldViewInternal node={node} view={view} getPos={getPos} tbox={tbox} />, this._fieldWrapper);
+        this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); };
+        this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); };
+        this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); };
+        this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); };
+
+        ReactDOM.render(<DashFieldViewInternal
+            fieldKey={node.attrs.fieldKey}
+            docid={node.attrs.docid}
+            width={node.attrs.width}
+            height={node.attrs.height}
+            view={view}
+            getPos={getPos}
+            tbox={tbox}
+        />, this._fieldWrapper);
         (this as any).dom = this._fieldWrapper;
     }
     destroy() {
         ReactDOM.unmountComponentAtNode(this._fieldWrapper);
     }
+    selectNode() { }
 
 }
 interface IDashFieldViewInternal {
-    node: any,
-    view: any,
-    getPos: any,
-    tbox: FormattedTextBox
+    fieldKey: string;
+    docid: string;
+    view: any;
+    getPos: any;
+    tbox: FormattedTextBox;
+    width: number;
+    height: number;
 }
+
+@observer
 export class DashFieldViewInternal extends React.Component<IDashFieldViewInternal> {
 
     _reactionDisposer: IReactionDisposer | undefined;
-    _textBoxDoc?: Doc; //Added "?""
-    @observable _dashDoc: Doc | undefined;
-    _fieldKey?: string; //Added "?" and added "as string"
+    _textBoxDoc: Doc;
+    _fieldKey: string;
     _options: Doc[] = [];
+    _fieldStringRef = React.createRef<HTMLSpanElement>();
+    @observable _showEnumerables: boolean = false;
+    @observable _dashDoc: Doc | undefined;
 
     constructor(props: IDashFieldViewInternal) {
-        super(props)
-        this._fieldKey = this.props.node.attrs.fieldKey;
+        super(props);
+        this._fieldKey = this.props.fieldKey;
         this._textBoxDoc = this.props.tbox.props.Document;
 
-        if (this.props.node.attrs.docid) {
-            DocServer.GetRefField(this.props.node.attrs.docid).
+        if (this.props.docid) {
+            DocServer.GetRefField(this.props.docid).
                 then(async dashDoc => dashDoc instanceof Doc && runInAction(() => this.setDashDoc(dashDoc)));
         } else {
             this.setDashDoc(this.props.tbox.props.DataDoc || this.props.tbox.dataDoc);
@@ -61,114 +82,104 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
     componentWillUnmount() {
         this._reactionDisposer?.();
     }
-    componentDidMount() {
-        var elementFieldCheck = document.getElementById("fieldCheckId") as HTMLInputElement;
-        if (elementFieldCheck) {
-            this._reactionDisposer = reaction(() => { // this reaction will update the displayed text whenever the document's fieldKey's value changes
-                const dashVal = this._dashDoc?.[this._fieldKey as string];
-                return StrCast(dashVal).startsWith(":=") || dashVal === "" ? Doc.Layout(this.props.tbox.props.Document)[this._fieldKey as string] : dashVal;
-            }, fval => {
-                const boolVal = Cast(fval, "boolean", null);
-                if (boolVal === true || boolVal === false) {
-                    elementFieldCheck.checked = boolVal;
-                } else {
-                    //  elementFieldCheck.innerHTML = Field.toString(fval as Field) || "";
-                }
-                elementFieldCheck.style.display = (boolVal === true || boolVal === false) ? "inline-block" : "none";
-                elementFieldCheck.style.display = !(boolVal === true || boolVal === false) ? "inline-block" : "none";
-            }, { fireImmediately: true });
+
+    // set the display of the field's value (checkbox for booleans, span of text for strings)
+    @computed get fieldValueContent() {
+        if (this._dashDoc) {
+            const dashVal = this._dashDoc[this._fieldKey];
+            const fval = StrCast(dashVal).startsWith(":=") || dashVal === "" ? Doc.Layout(this._textBoxDoc)[this._fieldKey] : dashVal;
+            const boolVal = Cast(fval, "boolean", null);
+            const strVal = Field.toString(fval as Field) || "";
+
+            // field value is a boolean, so use a checkbox of similar widget to display it
+            if (boolVal === true || boolVal === false) {
+                return <input
+                    className="dashFieldView-fieldCheck"
+                    type="checkbox"
+                    onChange={e => this._dashDoc![this._fieldKey] = e.target.checked}
+                />;
+            }
+            else // field value is a string, so display it as an editable span
+            {
+                // bcz: this is unfortunate, but since this React component is nested within a non-React text box (prosemirror), we can't
+                // use React events.  Essentially, React events occur after native events have been processed, so corresponding React events
+                // will never fire because Prosemirror has handled the native events.  So we add listeners for native events here.
+                return <span contentEditable={true} ref={r => {
+                    r?.addEventListener("keydown", e => this.fieldSpanKeyDown(e, r));
+                    r?.addEventListener("blur", e => r && this.updateText(r.textContent!, false));
+                    r?.addEventListener("pointerdown", action((e) => this._showEnumerables = true));
+                }}>
+                    {strVal}
+                </span>
+            }
         }
     }
 
     setDashDoc = (doc: Doc) => {
         this._dashDoc = doc;
-        if (this._options?.length && !this._dashDoc[this._fieldKey as string]) {
-            this._dashDoc[this._fieldKey as string] = StrCast(this._options[0].title);
+        if (this._options?.length && !this._dashDoc[this._fieldKey]) {
+            this._dashDoc[this._fieldKey] = StrCast(this._options[0].title);
         }
         // NOTE: if the field key starts with "@", then the actual field key is stored in the field 'fieldKey' (removing the @).
-        this._fieldKey = this._fieldKey?.startsWith("@") ? StrCast(this.props.tbox.props.Document[StrCast(this._fieldKey as string).substring(1)]) : this._fieldKey as string;
-        // var elementlabelSpan = document.getElementById("labelSpanId") as HTMLElement;
-        // elementlabelSpan.innerHTML = `${this._fieldKey}: `;
-        // const fieldVal = Cast(this._dashDoc?.[this._fieldKey], "boolean", null);
-        // var elementfieldCheck = document.getElementById("fieldCheckId") as HTMLElement;
-        // elementfieldCheck.style.display = (fieldVal === true || fieldVal === false) ? "inline-block" : "none";
-        // elementfieldCheck.style.display = !(fieldVal === true || fieldVal === false) ? "inline-block" : "none";
-    };
-
-    updateText = (forceMatch: boolean) => {
-        var elementEnumarables = document.getElementById("enumarablesId") as HTMLElement;
-        elementEnumarables.style.display = "none";
-        var elementfieldSpan = document.getElementById("fieldSpanId") as HTMLElement;
-        const newText = elementfieldSpan.innerText.startsWith(":=") || elementfieldSpan.innerText.startsWith("=:=") ? ":=-computed-" : elementfieldSpan.innerText;
-
-        // look for a document whose id === the fieldKey being displayed.  If there's a match, then that document
-        // holds the different enumerated values for the field in the titles of its collected documents.
-        // if there's a partial match from the start of the input text, complete the text --- TODO: make this an auto suggest box and select from a drop down.
-        DocServer.GetRefField(this._fieldKey as string).then(options => {
-            let modText = "";
-            (options instanceof Doc) && DocListCast(options.data).forEach(opt => (forceMatch ? StrCast(opt.title).startsWith(newText) : StrCast(opt.title) === newText) && (modText = StrCast(opt.title)));
-            var elementfieldSpan = document.getElementById("fieldSpanId") as HTMLElement;
-            if (modText) {
-                //  elementfieldSpan.innerHTML = this._dashDoc![this._fieldKey as string] = modText;
-                Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey as string, []);
-            } // if the text starts with a ':=' then treat it as an expression by making a computed field from its value storing it in the key
-            else if (elementfieldSpan.innerText.startsWith(":=")) {
-                this._dashDoc![this._fieldKey as string] = ComputedField.MakeFunction(elementfieldSpan.innerText.substring(2));
-            } else if (elementfieldSpan.innerText.startsWith("=:=")) {
-                Doc.Layout(this.props.tbox.props.Document)[this._fieldKey as string] = ComputedField.MakeFunction(elementfieldSpan.innerText.substring(3));
-            } else {
-                this._dashDoc![this._fieldKey as string] = newText;
-            }
-        });
-    };
-
-    onPointerDownEnumerables = async (e: any) => {
-        e.stopPropagation();
-        var elementfieldSpan = document.getElementById("fieldSpanId") as HTMLElement;
-        const collview = await Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey as string, [{ title: elementfieldSpan.innerText }]);
-        collview instanceof Doc && this.props.tbox.props.addDocTab(collview, "onRight");
-    };
-
-    onChangefieldCheck = (e: any) => {
-        this._dashDoc![this._fieldKey as string] = e.target.checked;
-    };
-
-    onKeyPressfieldSpan = function (e: any) { e.stopPropagation(); };
-
-    onKeyUpfieldSpan = function (e: any) { e.stopPropagation(); };
-
-    onMouseDownfieldSpan = function (e: any) {
-        e.stopPropagation();
-        var element = document.getElementById("enumerables") as HTMLElement;
-        element.style.display = "inline-block";
-    };
-
-    onBlurfieldSpan = (e: any) => { this.updateText(false); }; //Pas importé
+        //this._fieldKey = this._fieldKey?.startsWith("@") ? StrCast(this._textBoxDoc[StrCast(this._fieldKey as string).substring(1)]) : this._fieldKey as string;
+    }
 
-    onKeyDownfieldSpan = (e: any) => {
-        e.stopPropagation();
-        if ((e.key === "a" && e.ctrlKey) || (e.key === "a" && e.metaKey)) {
+    // we need to handle all key events on the input span or else they will propagate to prosemirror.
+    @action
+    fieldSpanKeyDown = (e: KeyboardEvent, span: HTMLSpanElement) => {
+        if (e.key === "Enter") {  // handle the enter key by "submitting" the current text to Dash's database. 
+            e.ctrlKey && Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey, [{ title: span.textContent! }]);
+            this.updateText(span.textContent!, true);
+            e.preventDefault();// prevent default to avoid a newline from being generated and wiping out this field view
+        }
+        if (e.key === "a" && (e.ctrlKey || e.metaKey)) { // handle ctrl-A to select all the text within the span
             if (window.getSelection) {
                 const range = document.createRange();
-                var elementfieldSpan = document.getElementById("fieldSpanId") as HTMLElement;
-
-                range.selectNodeContents(elementfieldSpan);
+                range.selectNodeContents(span);
                 window.getSelection()!.removeAllRanges();
                 window.getSelection()!.addRange(range);
             }
-            e.preventDefault();
+            e.preventDefault(); //prevent default so that all the text in the prosemirror text box isn't selected
         }
-        if (e.key === "Enter") {
-            e.preventDefault();
-            var elementfieldSpan = document.getElementById("fieldSpanId") as HTMLElement;
+        e.stopPropagation();  // we need to handle all events or else they will propagate to prosemirror.
+    }
 
-            e.ctrlKey && Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey as string, [{ title: elementfieldSpan.innerText }]);
-            this.updateText(true); //added this
+    @action
+    updateText = (nodeText: string, forceMatch: boolean) => {
+        this._showEnumerables = false;
+        if (nodeText) {
+            const newText = nodeText.startsWith(":=") || nodeText.startsWith("=:=") ? ":=-computed-" : nodeText;
+
+            // look for a document whose id === the fieldKey being displayed.  If there's a match, then that document
+            // holds the different enumerated values for the field in the titles of its collected documents.
+            // if there's a partial match from the start of the input text, complete the text --- TODO: make this an auto suggest box and select from a drop down.
+            DocServer.GetRefField(this._fieldKey).then(options => {
+                let modText = "";
+                (options instanceof Doc) && DocListCast(options.data).forEach(opt => (forceMatch ? StrCast(opt.title).startsWith(newText) : StrCast(opt.title) === newText) && (modText = StrCast(opt.title)));
+                if (modText) {
+                    //  elementfieldSpan.innerHTML = this._dashDoc![this._fieldKey as string] = modText;
+                    Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey, []);
+                    this._dashDoc![this._fieldKey] = modText;
+                } // if the text starts with a ':=' then treat it as an expression by making a computed field from its value storing it in the key
+                else if (nodeText.startsWith(":=")) {
+                    this._dashDoc![this._fieldKey] = ComputedField.MakeFunction(nodeText.substring(2));
+                } else if (nodeText.startsWith("=:=")) {
+                    Doc.Layout(this._textBoxDoc)[this._fieldKey] = ComputedField.MakeFunction(nodeText.substring(3));
+                } else {
+                    this._dashDoc![this._fieldKey] = newText;
+                }
+            });
         }
-    };
+    }
+
+    onPointerDownEnumerables = async (e: any) => {
+        e.stopPropagation();
+        const collview = await Doc.addFieldEnumerations(this._textBoxDoc, this._fieldKey, [{ title: this._fieldKey }]);
+        collview instanceof Doc && this.props.tbox.props.addDocTab(collview, "onRight");
+    }
 
-    onPointerDownLabelSpan = (e: any) => {
 
+    onPointerDownLabelSpan = (e: any) => {
         e.stopPropagation();
         let container = this.props.tbox.props.ContainingCollectionView;
         while (container?.props.Document.isTemplateForField || container?.props.Document.isTemplateDoc) {
@@ -181,91 +192,28 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
             if (!list) {
                 alias.schemaColumns = list = new List<SchemaHeaderField>();
             }
-            list.map(c => c.heading).indexOf(this._fieldKey as string) === -1 && list.push(new SchemaHeaderField(this._fieldKey, "#f1efeb"));
+            list.map(c => c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, "#f1efeb"));
             list.map(c => c.heading).indexOf("text") === -1 && list.push(new SchemaHeaderField("text", "#f1efeb"));
-            alias._pivotField = this._fieldKey as string;
+            alias._pivotField = this._fieldKey;
             this.props.tbox.props.addDocTab(alias, "onRight");
         }
-    };
-
-    destroy() {
-        this._reactionDisposer?.();
     }
-    selectNode() { }
 
     render() {
+        return <div className="dashFieldView" style={{
+            width: this.props.width,
+            height: this.props.height,
+        }}>
+            <span className="dashFieldView-labelSpan" title="click to see related tags" onPointerDown={this.onPointerDownLabelSpan}>
+                {this._fieldKey}
+            </span>
 
-        const fieldStyle = {
-            width: this.props.node.attrs.width,
-            height: this.props.node.attrs.height,
-        };
-
-        const fieldCheckStyle = {
-            minWidth: "12px",
-            position: 'relative' as 'relative',
-            display: 'none',
-            backgroundColor: "rgba(155, 155, 155, 0.24)"
-        };
-
-        const fieldSpanStyle = {
-            minWidth: "12px",
-            position: 'relative' as 'relative',
-            display: 'none',
-            backgroundColor: "rgba(155, 155, 155, 0.24)"
-        };
-
-        const labelSpanStyle = {
-            position: 'relative' as 'relative',
-            display: 'inline-block',
-            backgroundColor: "rgba(155, 155, 155, 0.44)",
-            fontSize: "small",
-            title: "click to see related tags"
-        };
-
-        const fieldCheckId = Utils.GenerateGuid();
-        const fieldSpanId = Utils.GenerateGuid();
-
-        return (
-            <div className="fieldWrapper" style={fieldStyle}>
-
-                <span
-                    className="labelSpan"
-                    id='labelSpanId'
-                    style={labelSpanStyle}
-                    onPointerDown={this.onPointerDownLabelSpan}
-                //innerHTML= {this._fieldKey}
-                >
-                </span>
-
-                <input
-                    className="fieldCheck"
-                    id={fieldCheckId}
-                    type="checkbox"
-                    style={fieldCheckStyle}
-                    onChange={this.onChangefieldCheck}>
-                </input>
-
-                <div
-                    className="fieldSpan"
-                    id={fieldSpanId}
-                    contentEditable="true"
-                    style={fieldSpanStyle}
-                    onBlur={this.onBlurfieldSpan}
-                    onKeyDown={this.onKeyDownfieldSpan}
-                    onKeyPress={this.onKeyPressfieldSpan}
-                    onKeyUp={this.onKeyUpfieldSpan}
-                    onMouseDown={this.onMouseDownfieldSpan}
-                >
-                </div>
-
-                <div
-                    className="enumerablesStyle"
-                    id="enumerablesId"
-                    onPointerDown={this.onPointerDownEnumerables}>
+            <div className="dashFieldView-fieldSpan">
+                {this.fieldValueContent}
+            </div>
 
-                </div>
+            {!this._showEnumerables ? (null) : <div className="dashFieldView-enumerables" onPointerDown={this.onPointerDownEnumerables} />}
 
-            </div >
-        )
+        </div >;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/FootnoteView.tsx b/src/client/util/FootnoteView.tsx
index a775a9355..ee21fb765 100644
--- a/src/client/util/FootnoteView.tsx
+++ b/src/client/util/FootnoteView.tsx
@@ -18,13 +18,13 @@ interface IFootnoteView {
 
 export class FootnoteView extends React.Component<IFootnoteView>  {
     _innerView: any;
-    _node: any
+    _node: any;
 
     constructor(props: IFootnoteView) {
-        super(props)
-        let node = this.props.node;
+        super(props);
+        const node = this.props.node;
         const outerView = this.props.outerView;
-        let _innerView = this.props.innerView;
+        const _innerView = this.props.innerView;
         const getPos = this.props.getPos;
     }
 
@@ -77,7 +77,7 @@ export class FootnoteView extends React.Component<IFootnoteView>  {
                     if (this.props.outerView.hasFocus()) this.props.innerView.focus();
                 }) as any
             }
-        }))
+        }));
         setTimeout(() => this.props.innerView && this.props.innerView.docView.setSelection(0, 0, this.props.innerView.root, true), 0);
     }
 
@@ -124,7 +124,7 @@ export class FootnoteView extends React.Component<IFootnoteView>  {
     }
 
     toggle = (e: any) => {
-        e.preventDefault()
+        e.preventDefault();
         if (this.props.innerView) this.close();
         else {
             this.open();
@@ -157,6 +157,6 @@ export class FootnoteView extends React.Component<IFootnoteView>  {
 
                 </div >
             </div>
-        )
+        );
     }
 }
diff --git a/src/client/util/ImageResizeView.tsx b/src/client/util/ImageResizeView.tsx
index 3e383f69a..4f66475fb 100644
--- a/src/client/util/ImageResizeView.tsx
+++ b/src/client/util/ImageResizeView.tsx
@@ -7,15 +7,15 @@ import React = require("react");
 import { schema } from "./schema_rts";
 
 interface IImageResizeView {
-    node: any,
-    view: any,
-    getPos: any,
-    addDocTab: any
+    node: any;
+    view: any;
+    getPos: any;
+    addDocTab: any;
 }
 
 export class ImageResizeView extends React.Component<IImageResizeView> {
     constructor(props: IImageResizeView) {
-        super(props)
+        super(props);
     }
 
     onClickImg = (e: any) => {
@@ -35,19 +35,19 @@ export class ImageResizeView extends React.Component<IImageResizeView> {
                 DocumentManager.Instance.FollowLink(linkDoc, this.props.view.state.schema.Document,
                     document => this.props.addDocTab(document, this.props.node.attrs.location ? this.props.node.attrs.location : "inTab"), false));
         }
-    };
+    }
 
     onPointerDownHandle = (e: any) => {
         e.preventDefault();
         e.stopPropagation();
-        var elementImage = document.getElementById("imageId") as HTMLElement;
+        const elementImage = document.getElementById("imageId") as HTMLElement;
         const wid = Number(getComputedStyle(elementImage).width.replace(/px/, ""));
         const hgt = Number(getComputedStyle(elementImage).height.replace(/px/, ""));
         const startX = e.pageX;
         const startWidth = parseFloat(this.props.node.attrs.width);
 
         const onpointermove = (e: any) => {
-            var elementOuter = document.getElementById("outerId") as HTMLElement;
+            const elementOuter = document.getElementById("outerId") as HTMLElement;
 
             const currentX = e.pageX;
             const diffInPx = currentX - startX;
@@ -59,26 +59,26 @@ export class ImageResizeView extends React.Component<IImageResizeView> {
             document.removeEventListener("pointermove", onpointermove);
             document.removeEventListener("pointerup", onpointerup);
             const pos = this.props.view.state.selection.from;
-            var elementOuter = document.getElementById("outerId") as HTMLElement;
+            const elementOuter = document.getElementById("outerId") as HTMLElement;
             this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, { ...this.props.node.attrs, width: elementOuter.style.width, height: elementOuter.style.height }));
             this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(pos))));
         };
 
         document.addEventListener("pointermove", onpointermove);
         document.addEventListener("pointerup", onpointerup);
-    };
+    }
 
     selectNode() {
-        var elementImage = document.getElementById("imageId") as HTMLElement;
-        var elementHandle = document.getElementById("handleId") as HTMLElement;
+        const elementImage = document.getElementById("imageId") as HTMLElement;
+        const elementHandle = document.getElementById("handleId") as HTMLElement;
 
         elementImage.classList.add("ProseMirror-selectednode");
         elementHandle.style.display = "";
     }
 
     deselectNode() {
-        var elementImage = document.getElementById("imageId") as HTMLElement;
-        var elementHandle = document.getElementById("handleId") as HTMLElement;
+        const elementImage = document.getElementById("imageId") as HTMLElement;
+        const elementHandle = document.getElementById("handleId") as HTMLElement;
 
         elementImage.classList.remove("ProseMirror-selectednode");
         elementHandle.style.display = "none";
@@ -93,11 +93,11 @@ export class ImageResizeView extends React.Component<IImageResizeView> {
             display: "inline-block",
             overflow: "hidden",
             float: this.props.node.attrs.float
-        }
+        };
 
         const imageStyle = {
             width: "100%",
-        }
+        };
 
         const handleStyle = {
             position: "absolute",
@@ -109,7 +109,7 @@ export class ImageResizeView extends React.Component<IImageResizeView> {
             bottom: "-10px",
             right: "-10px"
 
-        }
+        };
 
 
 
@@ -133,6 +133,6 @@ export class ImageResizeView extends React.Component<IImageResizeView> {
 
                 </span>
             </div >
-        )
+        );
     }
 }
\ No newline at end of file
diff --git a/src/client/util/SummaryView.tsx b/src/client/util/SummaryView.tsx
index 7960440b0..89908d8ee 100644
--- a/src/client/util/SummaryView.tsx
+++ b/src/client/util/SummaryView.tsx
@@ -4,17 +4,13 @@ import { Fragment, Node, Slice } from "prosemirror-model";
 import React = require("react");
 
 interface ISummaryView {
-    node: any,
-    view: any,
-    getPos: any,
-    self: any
+    node: any;
+    view: any;
+    getPos: any;
+    self: any;
 }
 export class SummaryView extends React.Component<ISummaryView> {
 
-    constructor(props: ISummaryView) {
-        super(props)
-    }
-
     onPointerDown = (e: any) => {
         const visible = !this.props.node.attrs.visibility;
         const attrs = { ...this.props.node.attrs, visibility: visible };
@@ -32,7 +28,7 @@ export class SummaryView extends React.Component<ISummaryView> {
         e.stopPropagation();
         const _collapsed = document.getElementById('collapse') as HTMLElement;
         _collapsed.className = this.className(visible);
-    };
+    }
 
     updateSummarizedText(start?: any) {
         const mtype = this.props.view.state.schema.marks.summarize;
@@ -69,7 +65,7 @@ export class SummaryView extends React.Component<ISummaryView> {
             return js.apply(this, arguments);
         };
 
-        const spanCollapsedClassName = this.className(this.props.node.attrs.visibility)
+        const spanCollapsedClassName = this.className(this.props.node.attrs.visibility);
 
         return (
             <span
@@ -79,7 +75,7 @@ export class SummaryView extends React.Component<ISummaryView> {
             >
 
             </span>
-        )
+        );
 
     }
 }
\ No newline at end of file
diff --git a/src/client/util/nodes_rts.ts b/src/client/util/nodes_rts.ts
index a21595a2b..e7bcf444a 100644
--- a/src/client/util/nodes_rts.ts
+++ b/src/client/util/nodes_rts.ts
@@ -1,5 +1,5 @@
 import React = require("react");
-import { DOMOtSpecArputray, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from "prosemirror-model";
+import { DOMOutputSpecArray, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from "prosemirror-model";
 import { bulletList, listItem, orderedList } from 'prosemirror-schema-list';
 import ParagraphNodeSpec from "./ParagraphNodeSpec";
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index b066f2be3..da53888fc 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -343,7 +343,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     const doc = this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc;
                     this.observer = new _global.ResizeObserver(action((entries: any) => {
                         if (this.props.Document._autoHeight && ref && this.refList.length && !SelectionManager.GetIsDragging()) {
-                            Doc.Layout(doc)._height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0)
+                            Doc.Layout(doc)._height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0);
                         }
                     }));
                     this.observer.observe(ref);
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index e913c7228..fd19f14f8 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -867,7 +867,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
             });
             const startupText = !rtfField && this._editorView && Field.toString(this.dataDoc[fieldKey] as Field);
             if (startupText) {
-                this._editorView!.dispatch(this._editorView!.state.tr.insertText(startupText));
+                this._editorView.dispatch(this._editorView.state.tr.insertText(startupText));
             }
         }