1 files changed, 17 insertions, 13 deletions
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 08f255cab..73a711b9d 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -70,6 +70,8 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     @observable _dashDoc: Doc | undefined;
     @observable _finalLayout: any;
     @observable _resolvedDataDoc: any;
+    @observable _width: number = 0;
+    @observable _height: number = 0;
 
     updateDoc = action((dashDoc: Doc) => {
         this._dashDoc = dashDoc;
@@ -83,12 +85,14 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
         }
         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 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',
+                        width: this._width + 'px',
+                        height: this._height + 'px',
                     })
                 );
             } catch (e) {
@@ -121,17 +125,17 @@ 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.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',
-                        })
-                    );
+                    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';
+                    }
                 }
-            }
+            })
         );
     }
 
@@ -172,8 +176,8 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                 ref={this._spanRef}
                 className="dash-span"
                 style={{
-                    width: this.props.width,
-                    height: this.props.height,
+                    width: this._width,
+                    height: this._height,
                     position: 'absolute',
                     display: 'inline-block',
                 }}