added wrapper for dashfieldview

3 files changed, 80 insertions, 57 deletions

diff --git a/src/client/util/DashFieldView.scss b/src/client/util/DashFieldView.scss
new file mode 100644
index 000000000..eaf9e944b
--- /dev/null
+++ b/src/client/util/DashFieldView.scss
@@ -0,0 +1,13 @@
+.fieldWrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.enumerablesStyle {
+    width: 10px;
+    height: 10px;
+    position: relative;
+    display: none;
+    background: dimGray;
+}
+        
\ No newline at end of file
diff --git a/src/client/util/DashFieldView.tsx b/src/client/util/DashFieldView.tsx
index d31ec9cb1..73d05009c 100644
--- a/src/client/util/DashFieldView.tsx
+++ b/src/client/util/DashFieldView.tsx
@@ -10,15 +10,35 @@ 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";
+
+
+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.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 as any).dom = this._fieldWrapper;
+    }
+    destroy() {
+        ReactDOM.unmountComponentAtNode(this._fieldWrapper);
+    }
 
-
-interface IDashFieldView {
+}
+interface IDashFieldViewInternal {
     node: any,
     view: any,
     getPos: any,
     tbox: FormattedTextBox
 }
-export class DashFieldView extends React.Component<IDashFieldView> {
+export class DashFieldViewInternal extends React.Component<IDashFieldViewInternal> {
 
     _reactionDisposer: IReactionDisposer | undefined;
     _textBoxDoc?: Doc; //Added "?""
@@ -26,7 +46,7 @@ export class DashFieldView extends React.Component<IDashFieldView> {
     _fieldKey?: string; //Added "?" and added "as string"
     _options: Doc[] = [];
 
-    constructor(props: IDashFieldView) {
+    constructor(props: IDashFieldViewInternal) {
         super(props)
         this._fieldKey = this.props.node.attrs.fieldKey;
         this._textBoxDoc = this.props.tbox.props.Document;
@@ -37,23 +57,27 @@ export class DashFieldView extends React.Component<IDashFieldView> {
         } else {
             this.setDashDoc(this.props.tbox.props.DataDoc || this.props.tbox.dataDoc);
         }
-
+    }
+    componentWillUnmount() {
         this._reactionDisposer?.();
+    }
+    componentDidMount() {
         var elementFieldCheck = document.getElementById("fieldCheckId") as HTMLInputElement;
-        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 });
-
+        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 });
+        }
     }
 
     setDashDoc = (doc: Doc) => {
@@ -63,12 +87,12 @@ export class DashFieldView extends React.Component<IDashFieldView> {
         }
         // 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";
+        // 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) => {
@@ -85,7 +109,7 @@ export class DashFieldView extends React.Component<IDashFieldView> {
             (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;
+                //  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(":=")) {
@@ -172,18 +196,8 @@ export class DashFieldView extends React.Component<IDashFieldView> {
     render() {
 
         const fieldStyle = {
-            width: this.props.node.props.width,
-            height: this.props.node.props.height,
-            position: 'relative' as 'relative',
-            display: 'inline-flex'
-        };
-
-        let enumerablesStyle = {
-            width: "10px",
-            height: "10px",
-            position: 'relative' as 'relative',
-            display: 'none',
-            background: "dimGray"
+            width: this.props.node.attrs.width,
+            height: this.props.node.attrs.height,
         };
 
         const fieldCheckStyle = {
@@ -212,9 +226,7 @@ export class DashFieldView extends React.Component<IDashFieldView> {
         const fieldSpanId = Utils.GenerateGuid();
 
         return (
-            <div
-                className="fieldWrapper"
-                style={fieldStyle}>
+            <div className="fieldWrapper" style={fieldStyle}>
 
                 <span
                     className="labelSpan"
@@ -247,9 +259,8 @@ export class DashFieldView extends React.Component<IDashFieldView> {
                 </div>
 
                 <div
-                    className="enumerables"
+                    className="enumerablesStyle"
                     id="enumerablesId"
-                    style={enumerablesStyle}
                     onPointerDown={this.onPointerDownEnumerables}>
 
                 </div>
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index c2dbce7a8..e913c7228 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -40,7 +40,6 @@ import { ImageResizeView } from "../../util/ImageResizeView";
 import { DashDocCommentView } from "../../util/DashDocCommentView";
 import { DashFieldView } from "../../util/DashFieldView";
 import { FootnoteView } from "../../util/FootnoteView";
-import { ImageResizeView } from "../../util/ImageResizeView";
 import { SummaryView } from "../../util/SummaryView";
 import { DashDocView } from "../../util/DashDocView";
 
@@ -845,30 +844,30 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
                 },
                 dispatchTransaction: this.dispatchTransaction,
                 nodeViews: {
-                    dashComment(node, view, getPos) { return new DashDocCommentView({ node, view, getPos }); },
-                    dashField(node, view, getPos) { return new DashFieldView({ node, view, getPos, self }); },
+                    //dashComment(node, view, getPos) { return new DashDocCommentView({ node, view, getPos }); },
+                    dashField(node, view, getPos) { return new DashFieldView(node, view, getPos, self); },
                     //dashDoc(node, view, getPos) { return new DashDocView(node, view, getPos, self); },
-                    dashDoc(node, view, getPos) { return new DashDocView({ node, view, getPos, self }); },
+                    // dashDoc(node, view, getPos) { return new DashDocView({ node, view, getPos, self }); },
 
-                    image(node, view, getPos) {
-                        //const addDocTab = this.props.addDocTab;
-                        return new ImageResizeView({ node, view, getPos, addDocTab: this.props.addDocTab });
-                    },
+                    // image(node, view, getPos) {
+                    //     //const addDocTab = this.props.addDocTab;
+                    //     return new ImageResizeView({ node, view, getPos, addDocTab: this.props.addDocTab });
+                    // },
 
 
-                    // WAS : 
-                    //image(node, view, getPos) { return new ImageResizeView(node, view, getPos, this.props.addDocTab); },
+                    // // WAS : 
+                    // //image(node, view, getPos) { return new ImageResizeView(node, view, getPos, this.props.addDocTab); },
 
-                    summary(node, view, getPos) { return new SummaryView({ node, view, getPos }); },
-                    ordered_list(node, view, getPos) { return new OrderedListView(); },
-                    footnote(node, view, getPos) { return new FootnoteView({ node, outerView, getPos }); }
+                    // summary(node, view, getPos) { return new SummaryView({ node, view, getPos }); },
+                    // ordered_list(node, view, getPos) { return new OrderedListView(); },
+                    // footnote(node, view, getPos) { return new FootnoteView({ node, outerView, getPos }); }
                 },
                 clipboardTextSerializer: this.clipboardTextSerializer,
                 handlePaste: this.handlePaste,
             });
             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));
             }
         }