From c8cd18e9108d25035f5239b865ddd4cd82d3a85b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 5 Jan 2024 11:22:06 -0500
Subject: fixed embedded text views in textboxes

---
 .../views/nodes/formattedText/DashDocView.tsx      | 77 +++++++++++-----------
 1 file changed, 37 insertions(+), 40 deletions(-)

(limited to 'src/client/views/nodes/formattedText/DashDocView.tsx')

diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 5a13fa8b4..56c8e00ed 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,4 +1,4 @@
-import { action, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NodeSelection } from 'prosemirror-state';
 import * as React from 'react';
@@ -10,6 +10,7 @@ import { emptyFunction, returnFalse, Utils } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
 import { Transform } from '../../../util/Transform';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocFocusOptions, DocumentView } from '../DocumentView';
 import { FormattedTextBox } from './FormattedTextBox';
 
@@ -78,27 +79,27 @@ interface IDashDocViewInternal {
     getPos: any;
 }
 @observer
-export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
+export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewInternal> {
     _spanRef = React.createRef<HTMLDivElement>();
     _disposers: { [name: string]: IReactionDisposer } = {};
     _textBox: FormattedTextBox;
     @observable _dashDoc: Doc | undefined = undefined;
-    @observable _finalLayout: any = undefined;
-    @observable _width: number = 0;
-    @observable _height: number = 0;
+    @computed get _width() {
+        return NumCast(this._dashDoc?._width);
+    }
+    @computed get _height() {
+        return NumCast(this._dashDoc?._height);
+    }
 
     updateDoc = action((dashDoc: Doc) => {
         this._dashDoc = dashDoc;
-        this._finalLayout = dashDoc;
 
-        if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') {
+        if (this._props.width !== (this._dashDoc?._width ?? '') + 'px' || this._props.height !== (this._dashDoc?._height ?? '') + 'px') {
             try {
-                this._width = NumCast(this._dashDoc?._width);
-                this._height = NumCast(this._dashDoc?._height);
                 // bcz: an exception will be thrown if two embeddings 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,
+                this._props.view.dispatch(
+                    this._props.view.state.tr.setNodeMarkup(this._props.getPos(), null, {
+                        ...this._props.node.attrs,
                         width: this._width + 'px',
                         height: this._height + 'px',
                     })
@@ -111,16 +112,17 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
 
     constructor(props: IDashDocViewInternal) {
         super(props);
-        this._textBox = this.props.tbox;
+        makeObservable(this);
+        this._textBox = this._props.tbox;
 
-        DocServer.GetRefField(this.props.docId + this.props.embedding).then(async dashDoc => {
+        DocServer.GetRefField(this._props.docId + this._props.embedding).then(async dashDoc => {
             if (!(dashDoc instanceof Doc)) {
-                this.props.embedding &&
-                    DocServer.GetRefField(this.props.docId).then(async dashDocBase => {
+                this._props.embedding &&
+                    DocServer.GetRefField(this._props.docId).then(async dashDocBase => {
                         if (dashDocBase instanceof Doc) {
-                            const embedding = Doc.MakeEmbedding(dashDocBase, this.props.docId + this.props.embedding);
+                            const embedding = Doc.MakeEmbedding(dashDocBase, this._props.docId + this._props.embedding);
                             embedding.layout_fieldKey = 'layout';
-                            this.props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
+                            this._props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this._props.fieldKey, undefined);
                             this.updateDoc(embedding);
                         }
                     });
@@ -132,23 +134,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
 
     componentDidMount() {
         this._disposers.upater = reaction(
-            () => this._dashDoc && NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width),
-            action(() => {
-                if (this._dashDoc) {
-                    this._width = NumCast(this._dashDoc._width);
-                    this._height = NumCast(this._dashDoc._height);
-                    const parent = this._spanRef.current?.parentNode as HTMLElement;
-                    if (parent) {
-                        parent.style.width = this._width + 'px';
-                        parent.style.height = this._height + 'px';
-                    }
+            () => ({ width: this._width, height: this._height, parent: this._spanRef.current?.parentNode as HTMLElement }),
+            action(({ width, height, parent }) => {
+                if (parent) {
+                    parent.style.width = width + 'px';
+                    parent.style.height = height + 'px';
                 }
             })
         );
     }
 
     removeDoc = () => {
-        this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos()))).deleteSelection());
+        this._props.view.dispatch(this._props.view.state.tr.setSelection(new NodeSelection(this._props.view.state.doc.resolve(this._props.getPos()))).deleteSelection());
         return true;
     };
 
@@ -167,20 +164,20 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     };
 
     onPointerLeave = () => {
-        const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement;
+        const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement;
         ele && (ele.style.backgroundColor = '');
     };
 
     onPointerEnter = () => {
-        const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement;
+        const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement;
         ele && (ele.style.backgroundColor = 'orange');
     };
 
     componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
-    isContentActive = () => this.props.tbox._props.isSelected() || this.props.tbox.isAnyChildContentActive?.();
+    isContentActive = () => this._props.tbox._props.isContentActive() || this._props.tbox.isAnyChildContentActive?.();
 
     render() {
-        return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
+        return !this._dashDoc || this._props.hidden ? null : (
             <div
                 ref={this._spanRef}
                 className="dash-span"
@@ -200,7 +197,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                 onKeyUp={e => e.stopPropagation()}
                 onWheel={e => e.preventDefault()}>
                 <DocumentView
-                    Document={this._finalLayout}
+                    Document={this._dashDoc}
                     addDocument={returnFalse}
                     removeDocument={this.removeDoc}
                     isDocumentActive={returnFalse}
@@ -211,15 +208,15 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     addDocTab={this._textBox._props.addDocTab}
                     pinToPres={returnFalse}
                     renderDepth={this._textBox._props.renderDepth + 1}
-                    PanelWidth={this._finalLayout[Width]}
-                    PanelHeight={this._finalLayout[Height]}
+                    PanelWidth={this._dashDoc[Width]}
+                    PanelHeight={this._dashDoc[Height]}
                     focus={this.outerFocus}
-                    whenChildContentsActiveChanged={this.props.tbox.whenChildContentsActiveChanged}
+                    whenChildContentsActiveChanged={this._props.tbox.whenChildContentsActiveChanged}
                     bringToFront={emptyFunction}
                     dontRegisterView={false}
-                    childFilters={this.props.tbox?._props.childFilters}
-                    childFiltersByRanges={this.props.tbox?._props.childFiltersByRanges}
-                    searchFilterDocs={this.props.tbox?._props.searchFilterDocs}
+                    childFilters={this._props.tbox?._props.childFilters}
+                    childFiltersByRanges={this._props.tbox?._props.childFiltersByRanges}
+                    searchFilterDocs={this._props.tbox?._props.searchFilterDocs}
                 />
             </div>
         );
-- 
cgit v1.2.3-70-g09d2

