fixed sizing of equation boxes and added grab cursor for link anchors

3 files changed, 9 insertions, 25 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 80b040cc0..692d09629 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -546,7 +546,7 @@ export namespace Docs {
                 DocumentType.EQUATION,
                 {
                     layout: { view: EquationBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)', nativeDimModifiable: true, hideResizeHandles: true, hideDecorationTitle: true },
+                    options: { links: '@links(self)', nativeDimModifiable: true, fontSize: '14px', hideResizeHandles: true, hideDecorationTitle: true },
                 },
             ],
             [
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index da9be63b8..163c5a9ed 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -79,14 +79,13 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (e.key === 'Backspace' && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc);
     };
     @undoBatch
-    onChange = (str: string) => {
-        this.dataDoc.text = str;
+    onChange = (str: string) => (this.dataDoc.text = str);
+
+    updateSize = () => {
         const style = this._ref.current && getComputedStyle(this._ref.current.element.current);
-        if (style) {
-            const _height = Number(style.height.replace('px', ''));
-            const _width = Number(style.width.replace('px', ''));
-            this.layoutDoc._width = Math.max(35, _width);
-            this.layoutDoc._height = Math.max(25, _height);
+        if (style?.width.endsWith('px') && style?.height.endsWith('px')) {
+            this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
+            this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', '')));
         }
     };
     render() {
@@ -94,23 +93,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1);
         return (
             <div
-                ref={r => {
-                    r instanceof HTMLDivElement &&
-                        new ResizeObserver(
-                            action((entries: any) => {
-                                if (entries[0].contentBoxSize[0].inlineSize) {
-                                    this.rootDoc._width = entries[0].contentBoxSize[0].inlineSize;
-                                }
-                                const style = this._ref.current && getComputedStyle(this._ref.current.element.current);
-                                if (style) {
-                                    const _height = Number(style.height.replace('px', ''));
-                                    const _width = Number(style.width.replace('px', ''));
-                                    this.layoutDoc._width = Math.max(35, _width);
-                                    this.layoutDoc._height = Math.max(25, _height);
-                                }
-                            })
-                        ).observe(r);
-                }}
+                ref={r => this.updateSize()}
                 className="equationBox-cont"
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
                 style={{
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index e89076c1f..eba9e281d 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -101,6 +101,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`,
                     top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`,
                     transform: `scale(${anchorScale})`,
+                    cursor: 'grab',
                 }}
             />
         );