made embedded dash docs in RTF resize when changed -- but they lose focus

1 files changed, 36 insertions, 23 deletions

diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 8915d7c47..e519de1c5 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,7 +1,7 @@
 import { IReactionDisposer, reaction, observable, action } from "mobx";
 import { NodeSelection } from "prosemirror-state";
 import { Doc, HeightSym, WidthSym } from "../../../../fields/Doc";
-import { Cast, StrCast } from "../../../../fields/Types";
+import { Cast, StrCast, NumCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils, returnTransparent } from "../../../../Utils";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
@@ -69,30 +69,31 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     @observable _finalLayout: any;
     @observable _resolvedDataDoc: any;
 
-    constructor(props: IDashDocViewInternal) {
-        super(props);
-        this._textBox = this.props.tbox;
 
-        const updateDoc = action((dashDoc: Doc) => {
-            this._dashDoc = dashDoc;
-            this._finalLayout = this.props.docid ? dashDoc : Doc.expandTemplateLayout(Doc.Layout(dashDoc), dashDoc, this.props.fieldKey);
+    updateDoc = action((dashDoc: Doc) => {
+        this._dashDoc = dashDoc;
+        this._finalLayout = this.props.docid ? dashDoc : Doc.expandTemplateLayout(Doc.Layout(dashDoc), dashDoc, this.props.fieldKey);
 
-            if (this._finalLayout) {
-                if (!Doc.AreProtosEqual(this._finalLayout, dashDoc)) {
-                    this._finalLayout.rootDocument = dashDoc.aliasOf;
-                }
-                this._resolvedDataDoc = Cast(this._finalLayout.resolvedDataDoc, Doc, null);
+        if (this._finalLayout) {
+            if (!Doc.AreProtosEqual(this._finalLayout, dashDoc)) {
+                this._finalLayout.rootDocument = dashDoc.aliasOf;
             }
-            if (this.props.width !== (this._dashDoc?._width ?? "") + "px" || this.props.height !== (this._dashDoc?._height ?? "") + "px") {
-                try { // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
-                    this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
-                        ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
-                    }));
-                } catch (e) {
-                    console.log("DashDocView:" + e);
-                }
+            this._resolvedDataDoc = Cast(this._finalLayout.resolvedDataDoc, Doc, null);
+        }
+        if (this.props.width !== (this._dashDoc?._width ?? "") + "px" || this.props.height !== (this._dashDoc?._height ?? "") + "px") {
+            try { // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
+                this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+                    ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
+                }));
+            } catch (e) {
+                console.log("DashDocView:" + e);
             }
-        });
+        }
+    });
+
+    constructor(props: IDashDocViewInternal) {
+        super(props);
+        this._textBox = this.props.tbox;
 
         DocServer.GetRefField(this.props.docid + this.props.alias).then(async dashDoc => {
             if (!(dashDoc instanceof Doc)) {
@@ -101,15 +102,27 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                         const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docid + this.props.alias);
                         aliasedDoc.layoutKey = "layout";
                         this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
-                        updateDoc(aliasedDoc);
+                        this.updateDoc(aliasedDoc);
                     }
                 });
             } else {
-                updateDoc(dashDoc);
+                this.updateDoc(dashDoc);
             }
         });
     }
 
+    componentDidMount() {
+        this._disposers.upater = reaction(() => this._dashDoc && (NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width)),
+            () => {
+                if (this._dashDoc) {
+                    this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+                        ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
+                    }));
+                }
+            });
+    }
+
+
     removeDoc = () => {
         this.props.view.dispatch(this.props.view.state.tr
             .setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos())))